Addy Osmani's 18-Point Web Performance Checklist

I was just perusing Addy Osmani's Ask Me Anything from this summer. While the post is full of wisdom, this comment stands out as web dev gold:

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

Web performance is critical for user experience. Prioritize it before it becomes a problem.

Happy coding ❀️

Did you find this post useful? Show some love!
DISCUSSION (8)

Some additional things to not do...

  • Don't include 20 different user tracking scripts.
  • Don't ignore performance.
  • Don't use the default web server configurations.
  • Don't use video backgrounds.
  • Don't load the page and then make a dozen ajax calls for content.
  • Don't use assets from third parties.
  • Don't rely on cookies.
  • Don't try to figure out my location.
  • Don't try to track every mouse click, scroll or movement.
  • Don't have long timeouts.
  • Don't cheap on hosting.
  • Don't forget to test usability under load.
  • Don't forget to test usability across multiple browsers/os.
  • Don't forget to enable TLS.
  • Don't include 20 different user tracking scripts.

"* Don't use video backgrounds"

Pretty please with sugar on top! Video breakthroughs may sound like a good idea, but in reality you're just learning how someone likes solve one specific problem. You're not really learning programming, or something even more important: problem solving.

πŸ“² Respect data plans

So true – whatdoesmysitecost.com/ is a great resource to make you feel guilty about this one :)

My absolute #1 that everyone always seems to miss room these lists: minimise DOM complexity. This is the single most performance thing that users will notice once the content loads client side. The simpler the DOM, the quicker CSS rules can be applied and JavaScript selectors can search for the right nodes. Fast initial load times are worthless, if the site kills the CPU when trying to make any changes at all to the dynamic content.

A lot of these items could be addressed with minimal effort and complexity via server side rendering.

Very useful we added to our checklist for making Gitote great!

Meanwhile on the "real internet" I keep finding these

The biggest issue on the web are the images not JS and CSS, you should focus on the biggest ROI.

Classic DEV Post from Sep 15

Alcohol and developer culture

A candid discussion on alcohol in the developer community. Is your company culture slowly murdering your employees?

Ben Halpern
A Canadian software developer who thinks he’s funny.

DEV is where software developers hang out.

Sign up (for free)