Google PageSpeed Insights - Render-blocking CSS inconsistency

0
votes

I have been working on raising the Google PageSpeed Insight score for the website of the company I work at. I have raised the speed of the home page from 37/100 to 87/100. This is good enough for me at the moment. But other pages are still at 73/100 because there is render-blocking CSS.

Now here is the weird part. I used Google's own suggestion of lazy-loading the CSS (here: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery), and this works for a few pages. The problem is that it doesn't work on all pages. PageSpeed Insights still says that some of my pages have render-blocking CSS files (the same files that work on the home page). I am working in Rails and all of the pages use a shared layout. The CSS files are loaded exactly the same on all pages. Also, I can clearly see the flash of unstyled content when I am testing it. The CSS is definitely being loaded after the above-the-fold content.

PageSpeed's inconsistency is making it impossible to decide what my next move should be.

Has anyone encountered this before? What are the approaches you took to solving this? Is it possible Google's PageSpeed Insights tool is buggy?

1
cssgoogle-pagespeed

1 Answers

0
votes

I have been working on the same issues for some time and doing implementation in Drupal 7. My solution ended being splitting the css into 3 parts:

inline.css

is embedded directly into the HTML in a style-tag. This is the code that is needed for building everything above-the-fold for both the mobile and desktop.

main.css (or style.css)

This is what is needed for building the mobile version of the site and most of the desktop site.

desktop.css

This is the extras that is only needed for belove-the-fold and for bigger screens.

This approach do take some more time to build and develop but it makes the site get faster into the users browser - and as a extra added feature get a better Page Speed score.

Some code to start with

I have forked mattbanks/Drupal-7-Starter-Theme here https://github.com/jonasdk/Drupal-7-Starter-Theme this could show you a way to start.

If you are not building Drupal sites then you will look into following files.

scss/ for seeing how the css is split into different files for each function.

templates/system/html.tpl.php Where I embed the inline.css and loads the desktop.css when needed.