My Journey into Web Speed Optimization — (Part 2)
This is part two of a story I published the other day about how The Web Needs Faster Websites. That article prompted a lot of discussion and some very worthwhile tips that I never knew about at the time of publishing the first article. The discussion around it has provoked me to further foray into the world of website speed optimization.
Cloudflare — The Good, The Bad and the Incredible
One of the comments on the last post was that I might have been ‘throwing the baby out with the bathwater’ when I said “DON’T USE CDNs FOR FILES”. So I wanted to clarify that I did indeed just mean don’t use it for things such as JQuery or Bootstrap as these can horrendously impact your loading speeds.
But, whilst these are things you should avoid like the plague, that doesn’t necessarily mean you shouldn’t use them altogether. The very concept of having a content delivery network serving up your site is an incredible one. In fact I do actually serve my main site using the Cloudflare CDN and it’s something I’d highly recommend everyone else does too, it’s incredible to think what they provide for free.
The end result of these findings were me logging into my cloudflare account and changing some of the settings:
With auto-minification enabled I’ve managed to reduce my homepage’s size by around 150KB, considering the site was 694KB in total initially, that’s over a 20% saving. Fan-fucking-tastic.
Messing about in cloudflare’s settings for my domain I also enabled cloudflare’s rocket loader service which should hopefully improve the speed of any of the pages that do include javascript, not that there is many of them.
Changing My Cache Settings:
One of the commenters had a pretty sharp eye and noticed that my cache settings were set to just 4 hours. This definitely has to be changed as almost nothing changes that quickly on what is essentially a hobby site for me. In the worst case scenario in which I mess something up and need the cache to reload quickly I can just force a new version to load by using style.css?v=1234. This seems like an incredibly easy win thanks to cloudflare’s software as long as I keep the caching level set to standard.
After exhausting the list of settings I could play with for free on cloudflare, I moved onto how I could obtain some other nice little wins.
SVGs To the Rescue!
I’d like to thank reddit user spryes for this next tip. On my homepage I’ve got about 500KB of images being loaded in just of which 13 of them are just the same image repeated but in different colours. With SVG images I would be able to load in one image and then customize that with a bit of css magic. With this nice wee tip I’ll have saved myself around 250KB of page to load on the homepage with no loss to the actual aesthetics.
I created a decent svg background image for my front page which doesn’t look too bland and can be modified with css in case I want to randomize! So I’ve now reduced the page size down to 325.0KB which is roughly half of what it was in the first place.
Having the category titles within an image also hampers SEO so this was an excellent win that could boost search engine rankings as well, #booyah.
Reducing my Main Background Image
Another very quick win was compressing the image quality of my main background image. I managed to shave off another 20KB from an image that doesn’t necessarily need to be of the highest quality again. I could have gone further with it still and taken it down to half quality but I wanted to retain a fuzzier look, as opposed to a pixelated one.
FontAwesome You Beast!
Fontawesome is amazing. It allows you to easily incorporate a huge variety of icons onto your websites with minimal coding. It’s also amazingly humongous for the grand total of 2 icons I use on the home page and the ~4 icons I use on my article pages. 65.6KB for 6 small icons is slightly overkill for something that accounts for 20% of my homepage’s size.
Sadly they don’t provide a slimmed down version of the library so I’m unfortunately going to have to make a few code changes and switch to a more compact library or remove the font library all together.
Enter Stage Right — flaticon.com
After a little bit of research I found what I was looking for, a selective, icon font family that would allow me to download only what I needed. I selected the few icons I did need and in the process removed my social sharing widget in my sidebar. Currently it’s lacking in functionality and it would be nice to have a plugin solution taking care of all the millions of social shares every one of my articles receive every minute.
With Flaticon.com I was able to get rid of around 70KB of size on my homepage and actually got to choose some nicer icons in the process. Overall the size savings I’m making are pretty remarkable and should definitely make some impact in site performance. I was also able to clean up my repo a little bit and remove about a hundred no longer used font files, win-win.
The Latest PageSpeed Insight Stats:
After all of these optimizations I’ve now been able to get my google pagespeed score up to 91/100, not bad but still not perfect. I’m wanting to hit 100/100 for both desktop and mobile, there’s no point trying to do these things in half measures.
And on my ever favourite pingdom tool I’m now down to a 254.6KB homepage size:
Enabling HTTP2 on Nginx
This was one thing that was mentioned in the comments section that I was really quite intrigued about. It’s something I don’t think a lot of web developers are acutely aware of, I know just about nothing about http2 and will have to spend the next week or two researching before I pull the trigger and upgrade my server to http2.
The Outcome
So I’ve managed to bring my homepage size down by a half and shave off a substantial portion of every page load. I’ve managed to get my pagespeed insights up to 93/100 for desktop and 79/100 for mobile. If I’m to get 100 then I will have to research further into optimizing css delivery and prioritizing the content that renders instantly.
This will most likely not be the last part of this web optimization saga as I’m finding this topic incredibly interesting and rather fun. I can see why some people specialise in this for huge companies that serve hundreds of millions of pages per day, I’ve only just touched the surface of extreme website optimization and I’m eager to continue.
Link and Follow — Support My Blog!
If you thought this was a mildly scintillating read and wish to see more then please show your support by hitting that recommend button and following me for more!
If you haven’t I’d recommend you check out the first part of this post here:
