In general, I try to go through the following list and check off if the site could be doing better on one or more of them:
😴 Lazy-load non-critical resources
🗜 Compress diligently! (GZip, Brotli)
📦 Cache effectively (HTTP, Service Workers)
⚡️ Minify & optimize everything
🗼 Preresolve DNS for critical origins
💨 Preload critical resources
📲 Respect data plans
🌊 Stream HTML responses
📡 Make fewer HTTP requests
📰 Have a Web Font loading strategy
🛣 Route-based chunking
📒 Library sharding
📱 PRPL pattern
🌴 Tree-shaking (Webpack, RollUp)
🍽 Serve modern browsers ES2015 (babel-preset-env)
🏋️♀️ Scope hoisting (Webpack)
🔧 Don’t ship DEV code to PROD
Phew, extensive list! Love the emojis :)
Great checklist! Thanks!
Could you clarifiy what you mean by library sharding? Awesome list by the way, thank you!
Thank you Addy for sharing the checklist, enough points for my next talk :-)
We’re a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.