My site is cre­at­ed us­ing a tool I start­ed and on which I have put a ton of ef­fort over the last 10 years or so, called Niko­la, which is a stat­ic site gen­er­a­tor (SS­G).

One of the sell­ing points of SS­Gs is that the pro­duced sites are fast and I have al­ways tak­en care to check, ev­ery once in a while, that my site was fast ... but not late­ly. And when I checked on Google Page­Speed In­sights I was hor­ri­fied to see it scor­ing 20 points out of 100.

So, I start­ed to see what the heck had hap­pened.

Google PageSpeed HATES Youtube

Each em­bed­ded video is seen as 4MB of block­ing things load­ing and mak­ing your page suck.

So­lu­tion: de­fer load­ing them us­ing http­s://github.­com/­group­board­/yt­de­fer

Bundling things still works

It has been years since it was promised that bundling mul­ti­ple CSS files in­to a large one or merg­ing mul­ti­ple JS files in­to a sin­gle script would not be worth it.

Well, ac­cord­ing to Page­Speed, it's still worth it. Luck­i­ly Niko­la has good sup­port for it, so I made sure EV­ERY­THING was bun­dled. That al­so in­volved get­ting some things off CDNs and in­to my as­sets fold­er:

• pris­mjs
• jquery

Google fonts are SLOW

Like, 400ms for two fonts. So, you can self­-host them us­ing http­s://­google-web­fonts-helper.herokuap­p.­com/­fonts

Al­so:

• use font-display: swap
• preload the fonts using something like <link rel="preload" href="/assets/fonts/pt-serif-v11-latin-regular.woff2" as="font">

Check CSS for @import

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 serv­er is do­ing the right things there.

Remove useless stuff

I was load­ing font-awe­some for ONE ICON. There, gone.

Did it work?

Now the score hov­ers around 96 to 98 so, yes it did. And in­deed the page feels very, very snap­py.