In case you don’t believe me, go to Google PageSpeed insights and try your page now. Go on, I’ll wait. You back, yet? Let’s continue.
During a recent announcement WordPress announced they are now running over 25% of the internet. That’s an insane statistic made all the more crazy when you start to use it. Don’t get me wrong; all my sites run WordPress and I love the fact that I can get something impressive going very quickly, but there is a certain amount of pain that comes from clashing plugins, badly written themes and all the normal problems that come from being popular and having a large developer community behind you.
The biggest problem for me and many others is speed. Out of the box, WordPress is already a bit slow, but as soon as you add on all of the extras that make WordPress a great platform it slowly grinds to a halt. This is a bigger deal now than ever before; faster loading pages directly result in more sales. For a lot of sites the traffic is now mobile first, which makes page speed even more crucial. Google recently recognised this when it introduced mobile friendliness into the weightings for it’s search results.
I have a moderately popular website which receives between 500 and 1000 hits on an average day. I knew it was slow; when I purchased the theme I’d made the mistake of believing the label that said the theme was quick. Turns out most WordPress themes claim to be fast, but rarely have stats to prove it. What I didn’t realise was exactly how slow it was, until I discovered PageSpeed Insight.
This simple tool hits your website and gives you a score out of 100. It even handily colour codes your score to tell you how bad you are.
It was bad.
I decided this needed to be fixed; partly because I’m currently in NZ which has the slowest internet of anywhere I’ve ever been, and partly because this was driving potential users and customers away. I’m not a PHP dev, and the internet is full of articles about “How to speed your website up in 5 minutes!”, but they’re often outdated and/or promoting a product.
Here are the five steps I took to turn my site around to a nice pretty green, which you can easily replicate.
1. New Theme: Frank
I spent hours googling around trying to find a lightening fast WordPress theme. What I basically discovered is that most paid templates lie about being “fast”, and the free ones are butt ugly, with one exception: Frank. Frank was written by PJ Onori and is open source, beautiful, and really freaking fast. It didn’t take long to get my site looking how I wanted, which was pretty similar to how it looked in the first place, but this gave me a huge jump up on my insite score. Highly recommended.
2. Turning Off Plugins
3. Smushing Your images
The bulk of your webpage download is likely to be images. I had just uploaded images irrelevant of size and scale and this was unsurprisingly hurting my speed. There’s a great plugin, WPSmushIt, which will go through your photos to resize and compress them to something more suitable. It’s not perfect and there were a few photos I had to manually sort out, but PageInsight will flag up any specific images that are causing problems so you can hunt them down and sort them out.
4. Minifying JS and CSS
All of the themes and plugins have their own JS and CSS. This ends up resulting in loads of back and forth to the server which was the cause of a lot of my slow down. PageInsights was very angry about the 13 or so JS files and 10 CSS files. Using an amazing free plugin called W3TotalCache, you can combine and minify all the files together for JS and CSS. It’s a manual process; PageInsight will give you a list of files it says is blocking the page from rendering, and you must copy each one into W3TotalCache to tell it to minify it. The end result is totally worth the 5 minutes of effort though.
5. Getting Rid of GoogleFonts
Having done all of the above I was still getting trouble as W3TotalCache couldn’t include GoogleFonts, which was still coming up as blocking. It turns out that it’s included in the core of WordPress. I really didn’t want to have to dig around in PHP to remove the line of code, but fortunately someone smarter than me has already created it as a plugin: “Remove Google Fonts Reference”. Simply activate it and the problem vanished!
After all of these actions, here’s my up to date pagespeed:
Still not perfect, but good enough by the 80/20 principal. I’m much happier now because even on a poor internet connection the site loads very quickly. Now I’m just hoping Google will notice and bump me up in the search rankings.