Eliminate render-blocking . . . above-the-fold content

[gravg]

Hello,

I've had a site for a few years, and I've used a few themes. I seem to run into this issue in PageSpeed Insights, and it lowers my score (see below). I'm printing out the suggested fix, which I don't understand- hoping to figure it out. Would anyone have tips on a fix?

But, I thought I'd inquire if this is a mobile issue, and if another theme would avoid it. I use News Pro. I had the original News and I was so excited when the updated version was released. It's my fav, and would hate to switch. But, if need be . . .

I get dinged the most with Mobile speed, and it loads very slow on my phone.

------
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

http://sitenameremoved.com/wp-content/themes/news-pro/style.css?ver=3.0.0
http://fonts.googleapis.com/css?family=Raleway%3A400%2C700%7CPathway+Gothic+One&ver=3.0.0

Thank you.

[Tom]

The first time I experienced this result from PageSpeed I realized that Google is trying to get you to do "bad" things. I don't think PageSpeed is "wrong" (who am I to argue against The Google?) but I think their recommendations boilerplate is less than perfect.

First, let's recognize what these two resources are: your child theme stylesheet and typography (fonts). They load asynchronously and are from separate sources. The display of your entire page content in News Pro is dependent on these two resources to properly render the page.

So, you can try to defer loading them which produces a lousy user experience (basically making the top half of your page potentially load faster, *then* get styled and with the right fonts). Also, the HTML5 spec is to load stylesheets in the HEAD element. This improves the rendering, user experience and perceived page speed. (The Yahoo page below explains this well.) StudioPress themes do this properly by "<link>"-ing them, not "@import"-ing them.

The last recommendation from PageSpeed is to "inline the critical portions of those resources directly in the HTML". You wouldn't inline the entire stylesheet, so that leaves you to identify and code CSS inline for things above the fold separately. Or, perhaps redundantly, also including them in the stylesheet. I don't think I've ever seen this done and doubt the benefit for dynamic pages as typically served-up by WordPress.

What can you do?

• Use a well-coded theme.
• Make sure your code edits and additions aren't causing problems.
• Use progressive JPGs and squeezed PNGs.
• Use a cacheing plugin like QuickCache, W3 Totatl Cache, WP Super Cache
• Minify your javascript and stylesheets.
• Use a content delivery network (CDN). Your webhost may have a freebie offering, or try Jetpack Photon.

A couple of references:
http://www.studiopress.community/?s=Eliminate+render-blocking
https://developer.yahoo.com/performance/rules.html

I'd be happy to learn differently, but I'm OK with these impacts on perceived and actual load performance.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts