How We Rebuilt the Hege Website to Get a Perfect PageSpeed Score. Part 4: Optimize HTML and JavaScript
TODO
Our Journey to PageSpeed Eldorado Continues
Welcome to the fourth part in our series on perfect website performance.
If you haven’t read the previous parts, here you go:
You don’t have to read them to follow along in this article. But they’re full of chunky delicious details, so go check them out later if you haven’t!
As for this article, we’ll pick up where we left off in part 3, and turn to the dynamic duo of HTML and JavaScript.
Optimize HTML and JavaScript
There’s a lot to be said about this.
How much can you save?
Well let’s compare to our old site. It wasn’t terrible by any means, but because it was hosted on Webflow, there was a lot of crap being pulled in that we had no control over.
Old:
HTML: 27.6 kB JS jQuery: 31.4 kB JS 1: 14.31 kB JS 2: 13.46 kB JS 3: 29.27 kB JS 4: 7.12 kB
Total: 123.16 kB (JS not loaded async)
New:
HTML: 34.2 kB (how much is actual html?) JS: 2.38 kB
Total: 36.58 kB (JS loaded async)
Additional:
CSS: 30.1 kB DGO: 21.71 kB Plex mono: 19.54 kB Plex mono bold: 19.67 kB
Total: 88.02 kB
Level 1: Don’t Use a Framework
Level 2: Use Native Features Instead (Dialogs, Popovers, …)
Level 3: Minify and Shorten Fingerprints
- Write custom HTML, no framework
- Write custom CSS, no framework
- Write custom JS, no framework
- Use HTML dialog
- Use HTML popover
- Use native scroll snapping instead of Javascript
- Minify JS
- Use tidy
- Shorter asset fingerprints
- Load JS async with low prio
- No render-blocking JS
- Don’t set unnecessary OpenGraph fields
Conclusion: XX
conclusion here
The Next Step: Optimize CSS
So far in this series we’ve shown how to optimize fonts and images. Those are two huge pieces that you have to get right to make a website fast. But they’re not enough.
Optimizing HTML and JavaScript is also an important piece of the puzzle.
But that’s for next week, when we’ll take a look at how to write lean semantic HTML, use modern HTML features instead of JavaScript, and dig really deep to optimize fingerprinting to shave that little extra piece off the page weight.
Until then, have a great week, and make sure to jump into our Telegram and say hi to all the Hegends in there. Good vibes guaranteed!
— Team Hege
TODO PS. Check out the piece “BLUE AETHER” below. This collectible is up for sale on DRiP!
