One of the selling points of SSGs is that the produced sites are fast and I have always taken care to check, every once in a while, that my site was fast ... but not lately. And when I checked on Google PageSpeed Insights I was horrified to see it scoring 20 points out of 100.
So, I started to see what the heck had happened.
Google PageSpeed HATES Youtube
Each embedded video is seen as 4MB of blocking things loading and making your page suck.
Solution: defer loading them using https://github.com/groupboard/ytdefer
Bundling things still works
It has been years since it was promised that bundling multiple CSS files into a large one or merging multiple JS files into a single script would not be worth it.
Well, according to PageSpeed, it's still worth it. Luckily Nikola has good support for it, so I made sure EVERYTHING was bundled. That also involved getting some things off CDNs and into my assets folder:
Google fonts are SLOW
Like, 400ms for two fonts. So, you can self-host them using https://google-webfonts-helper.herokuapp.com/fonts
- preload the fonts using something like
<link rel="preload" href="/assets/fonts/pt-serif-v11-latin-regular.woff2" as="font">
Check CSS for
Even after bundling them, if a CSS file uses
@import that will still be a separate request.
Check compression and caching
Make sure your web server is doing the right things there.
Remove useless stuff
I was loading font-awesome for ONE ICON. There, gone.
Did it work?
Now the score hovers around 96 to 98 so, yes it did. And indeed the page feels very, very snappy.