I started on the site around Christmas 2016 and have been adding things to it over time, assuming that a static site with very little Javascript and nothing special on it other than content and the necessary images would be quite fast (and it feels that way where I am). For some other work, I was looking at general principles for speeding up sites and decided to run a page speed test on my site also just to get a feel of some numbers.
I used Google PageSpeed Insights which came up in, err, a Google search as the starting point. Imagine my shock when I saw this:
OK, so this is for mobile and looks bad (worked fine on my phone, honestly!) but the situation on desktop was much better.
Better, but not great either! I don’t intend to use a Content Delivery Network or such, but other than that, the site should be able to do better, I think. So, as I start to make changes, I will add them here so that it’s easier for someone else to follow along.
In this post, I touch on the first two changes that I made.
Resizing Large Images
I noticed that there were two large images in use:
- cover.jpg
- profile.jpg
I went to a website called https://tinyjpg.com/ that claims to intelligently reduce the size of images. I use it to compress both these pictures and replaced the original ones with the compressed versions.
That made me feel better since the sizes changes as below:
- cover.jpg came down from 788KB to 245KB
- profile.jpg came down from 66KB to 34KB
Removing AddThis
It’s a known thing that we should reduce the number of network requests that we make when we load a page. Also, it helps to reduce the different domains that we require to use. In my browser (Firefox), I pressed F12 to launch the developer tools and went to the network tab, and did a Ctrl-F5 to reload the whole page to see te network requests, domains and the durations.
Fortunately, it’s not so many that I can’t paste it here.
I coloured it up to separate the domains that were being accessed and at the main blog page, it’s basically:
- Our site – we need that, of course
- JQuery and Google fonts – we need JQuery for some of the stuff and our stylesheets need the fonts, etc.
- AddThis – it seems to be getting a few things… and also brings in moatads .com that doesn’t have a good reputation at all
- Google Analytics – for now, I use Google Analytics and need these till I find a replacement
So, what’s low hanging fruit? In a previous post, we had added AddThis to the site to make it easier for people to share content but this wasn’t really being used much. Also, we can see that it’s bringing in a few things including moatads .com which I don’t like the sound of. It seems more trouble than it’s worth.
Fortunately, for us, removing it is very easy. We had added a configuration in the _config.yml called addthis which would be checked by the code in the footer before inserting AddThis into the site. We set this to false and re-generate the site.
With that done, we try to get the scores again. The first scores are from mobile and the second from desktop.
That’s good! We have made some progress – more on mobile where we were really lagging, and a little bit more on desktop. For today, we will leave it here.