Improving your static site’s performance using PageSpeed Insights
One of the main reasons to choose a static site is performance - they are blazingly fast to serve to your users. But can they be faster? I decided to use Google PageSpeed Insights to find out.
After discovering my theme had an unminified jQuery, I decided to take a look at what other assets the theme included that I might not need, and whether I really needed jQuery at all. Straight away I spotted a couple of relatively large icon fonts that I was barely using so I stripped down to just the icons I needed using Fontello which reduced the size by over 90%!
$(document).ready(fn), selecting elements by CSS and selectors, some uses of
jQuery.each and in the jquery.tagcloud.plugin.
I went with this snippet by Denis Ciccale as replacement for the jQuery document ready code which made it as simple as replacing
I replaced the
Array.forEach; similarly for selecting elements by CSS selectors I used
With jQuery removed from one area I moved onto what to do with the tag cloud plugin. Should I remove it entirely? Find an alternative? Or perhaps rewrite the plugin to not depend on jQuery?
document.querySelectorAll returns a
NodeList, not an array of nodes or something that you can call
map on (which you can in jQuery). Converting the NodeList to an array with
The next step I took was to combine my CSS into a single a file to reduce the number of files the browser has to fetch. At this point my PageSpeed score was 88/100 on Mobile and and 94/100 on Desktop and the only remaining suggestion from PageSpeed that was directly under my control was to optimize CSS delivery (the other remaining suggestion was to improve server speed) and I decided to call it a day. I’ll cover my efforts to optimize CSS delivery in a future post.