Some good progress with the critical path

So, Critical Path, what is it?

Well, simply put in web site terms, it’s working out what is critical on your page to get the important bits of your site in front of the user as quick as you can.

So on an ecommerce product page, for instance, the product price, buy button, description and maybe an initial product image are the important bits.

The navigation, other recommended products or customer reviews aren’t quite as important so shouldn’t be given the same priority. That way, the important bits are loaded first and displayed to the user, then all the other bits of the page are brought in via various methods. Mainly loading them in using JavaScript once the main part of the page has loaded.

When you have a big site with lots of different types of pages, you may have one large css file that contains styles to cover all of your site. This means that you could be loading in lots of css that you don’t actually need for the page you are on.

Or you might have a very long page where the initial view in the users browser window doesn’t see the whole page, so there is a good argument for loading in only what is needed to display the initial view that the user would see and then making sure the rest loads in before the user scrolls around the page.

Plugins to the rescue.

So, once again, a nice WordPress plugin is available to help to efficiently load in the main css file for this site.

This one is called “Above The Fold Optimization“. In order to do it’s clever things it needs some additional server modules to be installed on the server which may or may not be possible for the hosting that you have. I am in that situation where I can’t install these modules on the server. However, there is a fall back which involves using the services of another site and a tool called “Critical Path CSS Generator” where you give the tool a url of your site, you copy into it the main css file from your site and it will then generate the CSS that is critical for your page.

Once you have that critical CSS, you can then paste it into the plugin settings page and what it will do is put all the critical CSS inline into the head of the page and then defer the loading of the main CSS file.

Why is this a good thing?

So if you start to delve into the way browsers load in web pages, you’ll find that the browser has to fully load in a CSS file before it can render the page, so a CSS file essentially blocks the page from loading. If you inline the important CSS then the page doesn’t get blocked and will therefore load quicker. Once the page has loaded you can then apply the rest of the CSS file by loading it in using JavaScript.

So now I have added the info I need in the plugin settings, I save it all and then head on over to PageSpeed Insights to once again test my site’s homepage.

Wow! What a difference that makes!!

97/100 for mobile.

98/100 for desktop.

Pretty effin good if you ask me!

But. Yes, there is a but. Be careful about this approach with this plugin. If you run a site where the pages of your site are very different in layout, then just running the Critical Path CSS Generator on one url of your site may improve that page, but it may have a negative effect on other pages and will make your page load as if it hasn’t got any styles and then suddenly the page will all jump into place. Not the best user experience.

For this site, however, it works ok as all my pages are fairly basic in terms of layout and all use the same basic CSS. So it’s important to test this properly before deciding on it as an acceptable option.

In fact, if you look at PageSpeed scores for my sites on different pages, they do vary. I’ve got a few issues with mobile on some of the post pages, so there’s some work needed there.

Progress though overall. I’m happy with that.

3 Comments

  • Liking these posts, Goose :)

  • Have you tried using web tools like sitelocity.com to generate the css for the above the fold part ?

    • I haven’t yet, but I’ll certainly take a look. I am using several plugins that optimise things like css.

Join the Discussion

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>