CDS Perf Review Clinic Takeaways

CDS '17 Retrospective

Chrome Dev Summit 2017 is behind us. I spent most of the run-up to the event putting together my "Workbox: Flexible PWA Libraries" talk, but beyond that, I was also involved in running on-site Performance Review Clinics that attendees could sign up for.

It's always a privilege to meet with the developers who are building web apps that I use every day, and to lend whatever guidance I could offer. Looking into the performance of a large group of production websites gives insights that you wouldn't get from just examining a site as a one-off. Patterns start to emerge about common areas for improvement.

I wanted to publicly share a few high-level groupings based on those patterns, and identify a handful of links for each area that contain useful guidance. It's by no means exhaustive, but I can say that each of these links contains solutions to a real-world performance issue that we identified during the Performance Review Clinics.

Linkdump!

Huge thanks go out to all the authors, many of whom I'm lucky enough to work with.

Overall Migration/End to End Case Study

• A React And Preact Progressive Web App Performance Case Study: Treebo

Loading and Prioritization

• Introduction to HTTP/2
• Resource Prioritization – Getting the Browser to Help You
• Deep dive into the murky waters of script loading

JavaScript

• Can You Afford It?: Real-world Web Performance Budgets
• JavaScript Start-up Performance

CSS

• critical: Extract & Inline Critical-path CSS in HTML pages
• The future of loading CSS
• loadCss: A function for loading CSS asynchronously

Caching

• HTTP Caching
• Caching best practices & max-age gotchas
• Service Workers: an Introduction
• Workbox: JavaScript libraries for Progressive Web Apps

Images/Multimedia Content

• Essential Image Optimization
• Lazy Loading Images Using Intersection Observer
• Inline SVG vs Icon Fonts [CAGEMATCH]
• Content Jumping (and How To Avoid It)
• A Better Method for Embedding YouTube Videos on your Website