Archived topic
Render-blocking resources
6 replies · Started by Nitin on April 21, 2021
While testing my website performance on Google PageSpeed Insights, I am getting an error that says eliminate render-blocking resources. Along with this, there are some errors too, I've attached the screenshot of them. Please help me to sort it out!
https://nimb.ws/m5X0Ed
https://nimb.ws/tJSqQY
Hi there,
There are multiple things to address.
Let's go with the easy ones first.
For the "Ensure text remains visible during webfont load":
Try adding this PHP snippet.
add_filter( 'generate_google_font_display', function() {
return 'swap';
} );For the "Image elements do not have explicit width and height":
Generally, this happens when you input values on the Image Height and Image Width fields on WPSP.
This also happens if you're using plugins that strip the img tag of its attributes.
Not exactly sure with your site's case but it seems to be caused by a plugin as the DOM structure looked modified. Can you disable ALL plugins(especially image optimization plugins) except WPSP and GB Premium to check?
For "Eliminate render-blocking resources":
Use a caching/optimization plugin to improve how your assets are served. Try Autopmize, WP Rocket, Litespeed cache or a plugin of your preference.
For "Reduce initial server response time":
read this article - https://web.dev/time-to-first-byte/?utm_source=lighthouse&utm_medium=unknown
I've added the PHP snippet and that error has gone. But in eliminating render-blocking resources, I found that we should remove <script> and <link> from the <head> section to sort out this issue. Please guide me on this too. How to sort it out?
I’ve added the PHP snippet and that error has gone. But in eliminating render-blocking resources, I found that we should remove <script> and <link> from the <head> section to sort out this issue. Please guide me on this too. How to sort it out?
You don't have to remove them. You just need to optimize how they are served.
That's why you need a caching/optimization plugin. That something outside of the theme's control.
Okay, thanks Elvin. I'm using Cloudflare CDN, can I use caching/optimization plugins along with it?
https://nimb.ws/2bdkwn
I'm getting errors in this CSS.
Hi there,
yes you can use Cache/Optimization plugins with the CDN.
The main reason for Render Blocking resources is the speed of the Server. You should speak to your host about the time the server is taking to respond.
