Eliminate render-blocking resources & Preload key requests

@tanmay0713 first, my apologies for missing replying to your email! I’ve noticed you’re a Pro user. I’ll extend right away your license period as an apology ?? As for the problems you’re having, I’ve noticed that the URL that you provided here is no longer valid. I did check, however, the live URL and you have some render-blocking resources there.

I’ve checked the Coverage report in Google Chrome and there’s a file that is not needed and could be unloaded: /wp-content/themes/storefront/assets/css/base/gutenberg-blocks.css?ver=2.8.0

This will reduce the total CSS that is render-blocking. As for the rest of it, one thing you could do is using “Preload (Async)” (from the “Preload it (if kept loaded)” area within the list of CSS files from the “CSS & JS Manager”). However, it should only be used (it’s recommended) only to files that are needed later on in the page, not the ones that have CSS syntax needed above the fold, otherwise, the page will show a flash of unstyled content (a.k.a. FOUC). One good example is the theme’s one: /wp-content/themes/storefront/style.css?ver=2.8.0 which is needed above the fold when the first content of the page renders.

There’s a way to eliminate all render-blocking CSS by using the critical CSS feature. At the moment, it’s not manageable from the Dashboard and it requires a bit of coding: https://assetcleanup.com/docs/critical-css-how-to-implement-it-to-completely-reduce-render-blocking-stylesheets/

PS: I’ve noticed that one of the areas of your website is not loading correctly, most likely due to the fact that you’ve marked a certain CSS/JS file for unloading that should be loaded. It’s related to the wish list. At the moment, when I scroll to the bottom of the website, the area is showing up unstyled below the footer: https://ibb.co/DRkcWy7 – when I append /?wpacu_no_load or &wpacu_no_load to the URL (if you already have query strings there) the problem is gone. This query string is used for debugging purposes and it would prevent Asset CleanUp from loading on that page, so you can check how the page loads & looks like without the plugin making any changes.

Hi Gabe,

Thank you for your support and kind words. I have checked this URL on google page speed, it doesn’t show any render blocking recourses but when I check it on light house, it shows render blocking recourses which one should I trust?

Kind Regards
Vipul Arora

@tanmay0713 which were the resources that were reported in Lighthouse? Note that both tools are developed by Google’s developers and other contributors. Lighthouse is open-source.

Now, I don’t know how Google actually ranks a website based on its speed since this formula is not public. I’d rely more on Google PageSpeed Insights if you want my opinion. It’s more advanced and often updated, compared to other tools like GTmetrix, which are good and have their advantages, but you can’t solely rely on them since they are not part of Google.

Hi Gabe,

Thank you for your response, I made some changes i.e enabled caching for logged in users in WP-ROCKET and my issues were almost gone (light house score) Kindly take a look again and guide what else can I do in order to make website more fast and reliable.

Kind Regards
Vipul Arora

@tanmay0713 I’ve checked the GTmetrix score and it’s quite good: 98% for PageSpeed and 89% for YSlow Score.

As for the Google PageSpeed Insights, I would focus on the mobile page speed as the desktop one is already quite good. You can implement critical CSS and this way, there will be no more render-blocking CSS. Asset CleanUp Pro has this option, but at the moment it requires editing files: https://assetcleanup.com/docs/critical-css-how-to-implement-it-to-completely-reduce-render-blocking-stylesheets/ – However, it’s easier to use WP Rocket’s “Optimize CSS Delivery“, as I believe it would be easier for you.

Another suggestion is “Serve images in next-gen formats“. It could make a difference for mobile. In this case, please check this URL: https://www.ads-software.com/plugins/search/convert+webp/ – you might find a plugin that would be useful or you can hire a developer to convert the images for you in WEBP format. Asset CleanUp does not deal with that.

Hi Tanmay0713

I’ve been following this thread with interest and I notice Gabe has recommended trying to convert images to the WebP format. I can recommend a free piece of software called Irfanview (get it from here https://www.irfanview.com/)

It can deal with just about every type of image and convert it to anything else. If you are considering WebP, be careful when you do the conversion. A straight forward conversion could leave you with a bigger file so make sure you use the compression available in Irfanview. I normally knock it down to about 20% of the original. A second problem might be Apple devices. If users haven’t got the latest update for Ipad or Iphone they won’t be able to view WebP images.