So… I headed to Google PageSpeed Insights and decided to check my website. The result wasn’t very pleasant, as you can see below. A grade of 58/100 and a red color, indicating poor speed optimization. Well, I had to do something!
Optimizing images
Images are a very important part of every website. Consequently, a website can be slowed down by too many, too big or mostly, badly optimized images. The first thing PageSpeed Insights gave me a warning about was that most of the images used on Cats Who Code were too big and poorly optimized.
How I fixed the problem: I used a free WordPress plugin called WP Smush. It has a super useful option which allows you to optimize all your attached images (There’s over 800 of them on the blog) in bulk of 50. It takes a while, but it’s worth it: I reduced my images of an average 20% while preserving a sufficient quality on all my pictures.
To do so, install WP Smush, then go to Media → WP Smush. Scroll down a little, and you’ll see “Smush in Bulk”. Click on the “Bulk Smush 50 attachments” button and wait. You’ll need to click again on the button every 50 images if you’re using the free version of the plugin. Once every image on your site has been optimized by WP Smush, you can rest assured that you have saved a lot of loading time. Check the difference on Google PageSpeed Insights!
Minimizing HTTP requests
The next problem I was facing was the fact that my site was requesting way to much files. When using WordPress, the most convenient way to enhance your blog functionality is to add plugins. Plugins are cool, but many of them have to do extra HTTP requests (mostly css and js files) in order to work properly.
How I fixed the problem: I used the best ever caching/minify WordPress plugin, the mighty W3 Total Cache. The plugin offers a lot of possibilities in order to cache your website and make it faster. For instance, a super useful thing in your quest for speed is the Minify options: You can easily merge 3 css files in one, which will ultimately result in a single HTTP request instead of three. I turned on all caching options (besides those requiring paid third parties services) and minified my JavaScript, CSS and HTML.
The Monarch plugin I’m using was adding The Open Sans font to my blog, which caused an unnecessary HTTP request. To remove the font and the consequent warning issued by PageSpeed Insights, I added the following to my WordPress theme functions.php file. This little chunk of code simply removes the font added by the plugin.
//Remove Open Sans font added by Monarch wp_dequeue_style( 'et-open-sans-700' );
Also, the little form provided by MailChimp for my mailing list was importing a small css file. I just removed the call to that stylesheet and pasted the css rules in my main .css file.
Another important thing, I removed the Facebook “Likebox” widget which was loading a ton of stuff such as css and JavaScript files. I plan of using a simple icon on my site header instead of that bloated widget.
Additional fixes
As all websites are different, here’s a list of additional tips that might be useful to help you fix the problems you’re facing.
The first one is to use a quality host. If your website is hosted on a crappy, cheap shared hosting, don’t expect it to be fast. My web host, Vidahost is fast and Google PageSpeed Insight said the server is very responsive. So a thumbs up for them! If you’d like to join Vidahost, you can use the coupon code CATSWHOCODE to get 10% off your hosting.
There’s a somewhat little-known, but very efficient WordPress plugin that you might want to try: Speed Booster Pack. It is specially designed in order to make your site faster and rank higher on major speed testing tools. It has a few very interesting options that you should check and experiment with.
Clean code! It might seem obvious, but yet a ton of sites are using poorly optimized code, whether php or html/css. A clean and optimized code loads faster than a bad one. So if you’re looking for speed, make sure that your code is properly optimized.
Use a CDN: A CDN (Content delivery network) is a network of servers which are spread throughout the world. Each of those servers keep a copy of your static content. With a CDN, when a user visits your site he is being redirected to the closest server to their location.
Can’t fix your site? Get help from someone with experience. Fixing speed of a website isn’t easy and there’s little 100% out of the box solutions, as all websites are different. Getting help from a speed expert could be the best way to speed up your site. Want me to help? I can do so at a reasonable rate, feel free to contact me.
And now, let’s have a look at how Cats Who Code is fast, according to Google PageSpeed Insights:
