DEV Community


Discussion on: I'm Addy Osmani, Ask Me Anything!

addyosmani profile image
Addy Osmani Ask Me Anything

The first performance improvement that I check for is whether the site can be shipping less JavaScript while still providing most of their value to the end user. If you're sending down multiple megabytes of JS, that might be completely fine if your target audience are primarily on desktop, but if they're on mobile this can often dwarf the costs of other resources because it can take longer to process.

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:

✂️ Send less JavaScript (code-splitting)
😴 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

andy profile image
Andy Zhao (he/him)

Phew, extensive list! Love the emojis :)

iamsunny profile image
Sunny Sharma

Thank you Addy for sharing the checklist, enough points for my next talk :-)

rhymes profile image

Great checklist! Thanks!

superkarolis profile image
Karolis Ramanauskas

Could you clarifiy what you mean by library sharding? Awesome list by the way, thank you!