I came across this fantastic comment from Addy Osmani on of his AMA here:


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