Sometimes you really do just need to spend a bit of time working on your blog’min (blog admin). After finding my blog had such a shockingly low speed score on mobile I decided it was time I did something about it.
What got me onto this was a Tweet I saw from Nele (The Navigatio) where she posted the page speed of her blog, which then got me onto looking at the page speed of my blog and… what came next gave me a bit of a shock.
I used Google’s PageSpeed Insights to check mine, on this you can get a score anywhere between 0-100 (with 100 being the direction you want to be going in). Mine, on mobile? 36. Yes, thirty-six. Oh no you say, isn’t that a bit low? Yes, it was in the red.
So how did I improve my rating? Read on to find out…
Of course when checking your speed score you get suggestions ‘Opportunities’ that give you a good idea of things you might want to start looking at.
Before I really looked into the suggestions properly the first thing I thought about doing was to resave/reupload the background image, one thing that really affects page speed is the size of your images, not the actual size in pixels but how big the file size is, this particular file went from 500KB to under 100KB after compressing it.
How did I do that?
Firstly when I resaved the background image I went into the options for the file type (.jpg). I use Corel Paint Shop Pro and on there I changed the Compression Factor to 25 (other software like Photoshop does have something similar), of course doing this is a bit of a balancing act and it might take a couple of goes to get the compression vs. quality of the saved image to a level you are happy with. Later on I also used the compression feature of a new Plugin I’ve installed (more on that in a moment) so in the end the image went from 500KB to under 100KB, bit of a difference right?
Now before I go into plugins, you know what I’m going to tell you? Back your site up! Just in case something goes wrong it’s a good idea to do this before starting anything major… and this next step might feel a bit major, it certainly did for me.
So I decided a plugin was definitely in order to compress the rest of my images. No way was I going to sit there re-uploading 600+ images, not to mention it would mess up all the links since the upload date would have changed on them *plus* doing the extra compression on my background image helped even after I’d reuploaded it myself). So I decided to use a plugin, one Nele recommended on her Twitter actually, WP-Optimize. I used the setting to prioritise retention of detail on mine.
It’s good to look around when you’re trying to find a plugin to use, check into what it is you want and check reviews before installing them but for me this one seemed like it would fit what I wanted it to do so I installed it.
Optimising my images took around an hour (in the end when it had less than 100 to go I had to go and get started on dinner so I’m not sure *exactly* how long it took). Once I checked I was happy with the end result I deleted the back-up images.
I also used this to enable Cache settings (I set mine to 30 days) and enabled Minify (don’t worry I’d never heard of that before either). Be sure before you do this though that you aren’t doing these things through another plugin already! I went into the database section as well and started optimising several areas in that – like get rid of old revisions of blog posts (again, be sure it’s something you want to do first!)
As well as all this I went onto the JetPack plugin which I already use to enable the site accelerator, I also switched on the speeding up of image and static load times there as well.
Something else it was telling me was to define the width/height of images in my sidebar which I did (to do this I added width=”numberpx” height=”numberpx” after the alt tag in the image codes).
I also removed a couple of other widgets from the sidebar so I’ve taken things back to basics in the sidebar for now. After doing all these different things (which has basically been trial and error, seeing what works, what doesn’t, what has the biggest impact) I now have a score in the 80s (it fluctuates between 82 and 88), the desktop version of this is actually at 99 now too (that was at 77 before I started).
My website itself has a mobile score of 96 and is 100 on desktop but that has a lot of coding that I put together myself, there’s always going to be a lot more that goes into a blog so it’s harder to control what is where on here.
It’s a good idea to purge your cache on your blog after you’ve finished so it updates itself to any new settings you’ve added (I did this several times while I was doing all this).
And while we’re here, after doing all this I decided to check my broken links and sort those out (as it turns out, there were rather a lot – PSA if you change your blog link the links you’ve manually added within blog posts *will* need updating! Including the one you put in the functions file years ago. Yes… that one gave multiple broken links).
So all in all that’s how I managed to go from 36 – 88 in a day. I would like to get it above 90 but I still think this is a vast improvement from where it was at the start the other day. I did check my blog on GtMetrix and got a score of 95% performance and 97% structure (A) for desktop on there too.
I hope you find this helpful, if you’ve got any questions about anything I’ve done feel free to pop them in the comments and I’ll try to help where I can.