So, if you are browsing with slow connection, this process could take more time to be done.
1. Fixing Javasctipt Render Blocking and CSS with Autoptimize
This one is the easiest method that we recommend for you even if you are a beginner that not familliar with WordPress.
The first thing you need to do is to Install and activate Autoptimize plugin. For Plugin installation you can check our step by step guide in this article
How To Install WordPress Plugin.
After activating process has been done, go to Settings >> Autoptimize to do some setup and configurations with the plugin.
- Exclude scripts from Autoptimize : It will exclude some script for optimizing.
In this guide we choose Aggregate Js-File? and Also aggregate inline JS?. With this two options, you allowing the plugin to add inline JS and remove excluded script in default from WordPress, for example like jquery.js.
Step Two CSS Code Optimization
When you are done with step about just scroll down a little and you will see CSS Options thick the box of Optimize CSS Code? to show CSS Settings.
And you can thick some options available for optimizing. Bellow are some available options.
- Aggregate CSS-files? : With this options you are able to combine all CSS files in your website file.
- Also affregate inline CSS? : It will optimize CSS in HTML file.
In this step we will choose, Aggregate CSS-files? and Also aggregate inlise CSS?. The point here is we want all CSS file in our website got their size reduced to make your website load much faster.
Now you can save your changes by clicking Save Changes and Empty Cache.
This step nee a little more steps and this is recommended for user that already familiar using W3 Total Cache plugin.
Firstly you have to install and activate the W3 Total Cache plugin.
Go to Perfomance menu >> General Settings and scroll down to Minify feature.
Now activate Minify feature by thicking Enable box and choose Manual Minify mode. Look at the picture bellow.
When you are done, you can now click Save Settings & Purge Caches to save your setting.
Now you can choose which one of those render-blocking by doing a right click on one of the links and Copy Link Address.
Scroll down to WordPress dashboard and choose Perfomance menu >> Minify.
Scroll down to JS feature and activate JS Minify Settings by thicking Enable logo just like below picture.
After activating JS minify settings, You will see Operations in areas session. Choose Non-blocking using asyncsrc as an embeded type for tag before <head>. Get your setting like below is recommended.
Next, under sub-heading JS file management, choose your activated theme and click Add Script.
After you are following two guides above, you have to know
How To Use Google PageSpeed. To make you able to see the different from a website that has been fixed and reduced files (minify) using both of the plugins above.