Page Speed Insights – Render Blocking

  • Resolved slhctech

    (@slhctech)


    4 years, 7 months ago

    Hi, I am pleased to report that GTMatrix now gives my home page 100% for speed and 92% for YSlow (that’s because I’m not using a CDN). However I’ve still got a small problem with PageSpeed Insights. Under the heading “Eliminate render-blocking resources” it is showing this page – https://rivergippingtrust.org.uk/wp-content/cache/wpo-minify/1597866483/assets/wpo-minify-header-divi-style.min.css – with 108k transfer size and a potential saving of 1380ms.

    In the Asset CleanUp settings those type of files ( .min.css) are excluded by default which presumably means it is already minified. Because I’m using the Divi theme, that CSS file is probably the largest in the system. Is there anything I can do to improve PageSpeed Insights?

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Gabe Livan

    (@gabelivan)

    @slhctech The CSS files are minified by WP-Optimize which is fine (they look good apparently). However, even if they are minified, they are still render-blocking. To fix that for all CSS files, you can implement critical CSS (see if your version of WP-Optimize has this feature) that would load the essential CSS for tyhe above the fold as inline CSS, then preload (with async) all the other stylesheets making them non-render blocking.

    Plugins such as WP Rocket (“Optimize CSS Delivery” feature) & Asset CleanUp Pro (read more about it here: https://assetcleanup.com/docs/?p=608) have this feature.

    There are also ways to prelod with Async individual files via “Preload (Async)” in Asset CleanUp Pro. That’s if you do not wish (or find it difficult) to implement critical CSS. You could reduce the number of render-blocking stylesheets.

    The Lite version of Asset CleanUp, can only help you removing render-blocking CSS if you unload them, but you have to be sure that you only unload the ones that are not needed. It’s better to have render-blocking CSS, then a broken layout.

    One CSS file that is loaded and it’s very likely not needed (based on my checks) is https://rivergippingtrust.org.uk/wp-content/cache/wpo-minify/1597866483/assets/wpo-minify-header-magnific-popup.min.css – try to unload it and see if the page loads the same.

    The same for the for the following one: https://rivergippingtrust.org.uk/wp-content/cache/wpo-minify/1597866483/assets/wpo-minify-header-widgetopts-styles.min.css – it looks like it’s not used on the home page.

    Thread Starter slhctech

    (@slhctech)

    Thanks Gabe. I have applied your suggestions about the two css files and they have helped to move the Insight score to 93 for desktop and 75 for mobile without any detrimental effect on the site.

    I’ve also read through your page about Critical CSS and I think the time has come for me to stop tinkering! I cannot describe myself as a qualified programmer and I think where I’ve got to with this web site is probably good enough. Your point about a score of 100 but a broken layout is well made.

    I’ve have been to a few websites with an FOUC and often wondered why. Now I know.

    Thanks for your help and advice.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Page Speed Insights – Render Blocking’ is closed to new replies.