Post processing tips for users (WPO)

[DanielRuf]

Some tips from my past Web Performance Optimization experience.

• Minimize the css and html (for example with html-minifier-next, a successor of html-minifier and html-minifier-terser*) ¹
• Generate brotli files (for html and css files) to deliver them via webserver if supported (brotli -5 *.{html,css} often yielded the best results for encoding + decoding time, the maximum with -9 does not save much more bytes but results in bigger decoding times)
• Use system fonts and try to avoid big font files (woff2 is best, others are worse) ²
• For images use a decent compression tool with good defaults (caesium, squoosh.app), or run the tools directly (mozjpeg, ...) with needed quality settings (60 - 75% image quality and lossless is often ok)
• Use the right image format (better - worse: webp > jpeg > png) - (I'm not a big fan of avif)
• (Further steps are not possible without using / changing html: lazy loading of images, blurhash, sourceset / picture element)
• ...

Further tips can be found at https://calendar.perfplanet.com/

---

* I was a maintainer of html-minifier-terser and the new version introduces some improvements

Footnotes

1. https://github.com/j9t/html-minifier-next ↩

2. https://github.com/system-fonts/modern-font-stacks ↩

[DanielRuf]

Not yet complete, just a quick draft. Maybe helpful for some users.
More details will be added (e.g. how to deliver precompiled brotli files via Apache).

[jaredkrinke]

This is nice info and I thought about setting up a wiki, but I feel like this is not really luasmith-specific. Is there some general web site optimization resource that luasmith docs could just link to?

[DanielRuf]

This is nice info and I thought about setting up a wiki, but I feel like this is not really luasmith-specific. Is there some general web site optimization resource that luasmith docs could just link to?

There was much content and also specific websites (I also made some slides for a talk in ~2019 / 2020 with code snippets to get the most performance with the smallest amount of changes).

I will check, what websites are currently best suited. Unfortunately Google took down their great web performance optimization guide, which contained many things like image optimization via qunatization settings, lossless vs lossy settings, color palettes and more.

[DanielRuf]

Addy Osmani from the Google Chrome team still has his guide version for images online: https://images.guide/
But I will have to do some research to find out, if there is a replacement for the other guide which contained parts of this and much more.

I will come back with the most helpful guides / links then, that cover the solutions.