Do you want to eliminate the blocking of JavaScript and CSS rendering in WordPress?
If you are testing your website on Google PageSpeed ​​insights, then you will probably see a suggestion to remove script and CSS rendering blocks. However, it doesn't provide details on how to do this on your WordPress website.
In this article, we'll show you how to easily fix JavaScript and CSS rendering blocking in WordPress to improve your Google PageSpeed ​​score.
But before, let's discover together How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog.
What is JavaScript and CSS Render-Blocking?
Blocking JavaScript and CSS renderings are files that prevent a website from displaying a web page before loading them.
Every WordPress website has a theme and plugins that add JavaScript and CSS files to the frontend of your website. These scripts can increase the page load time of your website, and they can also block the page rendering.
A user's browser will need to load these scripts and CSS before loading the rest of the HTML code on the page. This means that users on a slower connection will have to wait a few more milliseconds to view the page.
These scripts and stylesheets are called JavaScript and CSS render blockers.
Website owners trying to achieve a Google PageSpeed ​​score of 100 will need to fix this to achieve that perfect score.
What is Google PageSpeed ​​Score?
Google PageSpeed ​​Insights is a speed testing tool created by Google to help website owners optimize and test their websites. This tool tests your website against Google's speed guidelines and offers suggestions for improving your website page load times.
It shows you a score based on the number of rules your website passes. Most websites are between 50 and 70. However, some website owners feel pressured to reach 100.
Do you really need a "100" score on Google PageSpeed?
The goal of Google PageSpeed ​​insights is to provide you with guidelines to improve the speed and performance of your website. You are not required to strictly follow these rules.
Remember, speed is just one of the many SEO metrics that help Google determine how to rank your website. The reason speed is so important is that it improves the user experience on your website.
A better user experience requires a lot more than speed. You must also offer useful information, better user interface and engage content with text, images and videos.
Your goal should be to create a fast website that offers a great user experience.
During the latest BlogPasCher redesign, we kept a focus on speed as well as improving the user experience.
We recommend that you use Google Pagespeed rules as a suggestion, and if you can implement them easily without ruining the user experience, then that's great. If not, you should strive to do as much as you can, and then don't worry about the rest.
With that said, let's take a look at what you can do to fix JavaScript and CSS rendering blocking in WordPress.
We are going to cover two methods that will fix this problem. You can choose the one that works best on your website.
1. Fix render blocking scripts and CSS with WP Rocket
For this method, we will be using the WP Rocket plugin. This is the best WordPress caching plugin in the market and allows you to quickly improve the performance of your website without any technical or complex skills set up.
First of all, you need to install and activate the WP Rocket plugin. For more details, see our step by step guide on how to install a WordPress plugin..
WP Rocket activates its cache with optimal settings. By default, it does not enable JavaScript and CSS optimization options. These optimizations can potentially affect theappearance of your website or certain features, that's why the plugin lets you enable those settings as an option.
To do that you have to go on Settings »WP Rocket, then switch to the 'File Optimization '. From there, scroll down to the section CSS files and tick the boxes Minify CSS, Combine CSS Files et Optimize CSS Delivery.
Please note: : WP Rocket will attempt to minify all your CSS files, combine them and load only the necessary CSS for the visible part of your website. This could affect theappearance of your website, so you should test your website thoroughly on multiple devices and screen sizes.
Then you have to scroll to the section JavaScript files. From here you can tick all the options for the maximum performance improvement.
You can minify and combine JavaScript files just like you did CSS files.
You can also prevent WordPress from uploading the file. jQuery Migrate. This is a script that WordPress loads to provide compatibility for plugins and themes using older versions of jQuery.
Most websites don't need this file, but it's a good idea to check your website to make sure its removal doesn't affect your theme or plugins.
Then scroll down a bit further and check the options'Load JavaScript Deferred'and'Safe Mode for jQuery'.
These options delay the loading of non-essential JavaScript, and jQuery Safe Mode allows you to load jQuery for themes that can use it inline.
Remember to click on the Save Changes button to store your settings.
After that, you can also clear the cache in WP Rocket before testing your website again with Google Page Speed ​​Insights.
On our test website we were able to achieve 100% score on desktops and the render stuck issue was resolved in both mobile and desktop scores.
2. Fix JavaScript and CSS rendering blocking with autoptimize
For this method, we'll be using a different plugin made specifically to improve the delivery of your website's CSS and JS files. While this plugin gets the job done, it lacks the other powerful features that WP Rocket offers.
The first thing you need to do is to install and activate the plugin Autoptimize. For more details, see our step-by-step guide on how to install a WordPress plugin.
When activating, you must visit the page Setting »Autoptimize to configure the plugin settings.
First of all, you need to check the option 'Optimize JavaScript Code'under the block JavaScript Options. Make sure that the 'Aggregate all linked JS-files' option is not checked.
Then scroll down to the area CSS Options and check the option ' Optimize CSS Code?'. Make sure that the option 'Aggregate all linked CSS-files'is not checked.
You can now click on the 'Save changes and clear cache' button to store your settings.
Go ahead and test your website with Page Speed ​​Insights. On our demo website, we were able to resolve the render stuck issue with these basic settings.
If there are still render blocking scripts, you need to go back to the plugin's settings page and look at the JavaScript and CSS options.
For example, you can allow the plugin to include the JS Inline and remove scripts that are excluded by default like seal.js or jquery.js.
Click on the 'Save changes and clear cache' button to save your changes and clear the plugin cache.
Once you're done, go ahead and check out your website again with the Page Speed ​​Insights tool.
How does it work?
Autoptimize bundles all JavaScript and CSS files. After that it creates minified CSS and JavaScripts files and serves cached copies of your website on a synchronized or deferred basis.
This allows you to solve the blocking problem renderings scripts and blocking styles. However, please keep in mind that this may also affect performance orappearance of your website.
help
Depending on how the plugins and your WordPress theme use JavaScript and CSS, it might be quite difficult to completely resolve all of the issues with blocking of JavaScript and CSS renderings.
While the tools above can help, your plugins may need certain scripts at a different priority level to function properly. In this case, the above solutions may break the functionality of these plugins, or they might behave unexpectedly.
Google can still show you some issues like CSS delivery optimization. WP Rocket lets you fix this by manually adding the critical CSS needed to perfectly display your WordPress theme.
However, it could be quite difficult to know what CSS code you will need to display.
Discover also some themes and premium WordPress plugins
You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
1. WordPress Speed ​​Optimization Plugin
Are you struggling to manage multiple website speed optimization plugins? Are you worried that they are hampering the execution speed of your website? then, this WordPress plugin will be the ultimate solution for all your worries.
This plugin is designed to give you the functionality of almost 6-8 different WordPress plugins. You just have to install and configure it to see a marked improvement in the loading of your pages.
We would like to point out that this is not a cache plugin or CDN, but the result it offers is nevertheless impressive. Do not hesitate to try this WordPress plugin to see what it is capable of.
Download | Demo | Web hosting
2. Social Share & Locker Pro
The Social Share & Locker Pro extension has been designed to help your website be more visible on social networks. With just a few clicks, you can either set the position of your social icons or lock your content by requiring sharing on one of the social networks offered by you.
You have 10 predefined themes and this should cover the most common wishes. All her themes are Retina and work wonders.
Also, with Social Share & Locker Pro, you will be able to display the full name of social networks or just the icon. It will depend on your design, the available space, or your wishes.
Download | Demo | Web hosting
3. WordPress PDF Images Lightbox
WordPress PDF Lightbox is a WordPress extension which allows you to create viewers of PDF files. A PDF viewer is a collection of photos that can be saved as PDFs.
With this extension, you can create as many PDF viewers as you want. For each viewer, the administrator can set some options like:
- The cover image: which will be added as the first page of the user-created PDF
- Maximum images per viewer
- A watermark image: to be applied on PDF pages
- Sending by email: if this feature is activated, a Contact form will be offered just after the image gallery. Through this form, users will be able to email the created PDF to anyone.
Download | Demo | Web hosting
Recommended Resources
Find out about other recommended resources to help you build and manage your website.
- 10 WordPress plugins to improve the SEO of your website
- 5 premium WordPress plugins to optimize your categories
- 10 WordPress plugins to convert monetary currencies
- 10 WordPress plugins to integrate an audio player into a website
Conclusion
Here ! That's it for this tutorial. We hope this article has helped you learn how to fix JavaScript and CSS rendering blocking in WordPress. You can also see our ultimate guide on how to speed up WordPress performance for beginners.
However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.
Do not hesitate to share with your friends on your favorite social networks. And if you have any suggestions or remarks, leave them in our section Comments.
...
