To speed up a WordPress website is an interesting challenge. Not only because Google likes a fast website. A fast website is vital for the user experience. In this post I explained the first steps of making your website faster.
Web-ID has its own test site. This test site is on the internet, on the same hosting account as this website. This test site needs to be optimized for speed. This gives a nice opportunity to describe the optimization process step by step!
First steps
Right after the installation of WordPress I made sure the images are automatically optimized with WP-Smush. My hosting supports GZIP.
The next step is to remove the WordPress emojis. They will not be used, so I want to prevent the CSS and Javascript to be loaded. You can turn off the emojis with a little piece of code you can find here.
HTTP-requests
WordPress itself, the theme and plugins make use of stylesheets and Javascript. All these files may lead a lot of HTTP-requests. Yslow doesn’t like that, but, more importantly, these requests slow down your website.
As you can see, 20 external Javascript scripts and 12 external stylesheets are loaded with the page. 37 requests in total. Most of these files are also loaded in the header, before the content. Visitors have to wait for the files to be loaded before they see any content.
Combine CSS and Javascript
To speed up my website, I’m going to combine and optimize the stylesheets and Javascript. It is possible to combine them manually. That is not easy and you have to do all future updates yourself.
That is why I use the plugin Autoptimize. This plugin combines stylesheets and Javascript files into one CSS and JavaScript file, if possible, and optimizes them. This plugin can also optimize the HTML if you want it to.
Beware: Autoptimize will try to combine all stylesheets and JavaScript being used by your website. You will have to thoroughly test your website after configuring Autoptimize, to make sure everything looks and works like it should. You can read all about configuring the plugin right here.
The result
As you can see in the image above, the Page Load Time went down from 2.7 seconds to 1.5 seconds, the Total Page Size from 200kb to 163kb and the requests from 37 to 7! These are major improvements. Visitors will notice the difference.
Conclusion
Optimizing and combining CSS and JavaScript can make a huge difference. By using a plugin to do the hard work for you, you can make your website perform much, much better.
As you can see in the pictures, a few recommendations have a low score. These will be solved in the near future.
