In his Move Fast and Don’t Break Things presentation at An Event Apart in Seattle, Scott Jehl shared a number of resilient patterns and tools to help us establish and maintain performant access to our Web sites. Here's my notes from his talk:
- For successful Web design, people used to suggest we move fast and break things. Today we've become more responsible but things can still break for our users if we're not mindful.
- So many factors that can compromise the delivery of our Web sites are out of our control. We need to be aware of these in order to build resilience into our designs.
- We used to use browser detection and feature detection to ensure our sites were supported across Web browsers. Progressive enhancement's importance ballooned as a wide range of new devices for accessing the Web, touch interactions, and more browsers became popular.
- Trying to make a Web site look and work the same across devices was broken, we realized this was the wrong goal and we need to adapt to varying screens, networks, input types, and more.
- Some practices stay good. Progressive enhancement and accessibility prepared us for many of these changes but it is also a performance enhancement on its own.
- Figuring out how to make Web sites faster used to be hard but the tools we have for measuring performance have been improving (like PageSpeedTest and WebPageTest).
Making Web Sites Fast
- Critical CSS tools can look over a series of files and identify the common CSS you need across a number of different pages for initial rendering. If you inline your critical CSS, you can preload the rest of your CSS (not great browser support today).
- More weight does not mean more wait. You can prioritize when things load to make pages render much faster.
Keeping Web Sites Fast
- Making a web site fast is easier than keeping it fast. Over time, Web sites will add a number of third party services with unknown performance consequences.
- We can use a number of tools, like Lighthouse, to track performance unfriendly dependencies. Speed Curves will let you set performance budgets and see when things are over. This allows people to ask questions about the costs of what we're adding to sites.
- Varying content and personalization can increase optimizations but they are costly from a performance perspective since they introduce a second meaningful content render. Moving these features to the server-side can help a lot.
- Cloudflare has a solution that allows you to manipulate pages on their server before it comes down to browser. These server-side service workers allow you to adjust pages off the client and thereby avoid delays.
- Homepages and landing pages are often filled with big images and videos. They're difficult to keep performant because the change all the time and are often managed outside of a central CMS.
- For really image heavy pages, we can use srcset attributes to define multiple sizes of images. Writing this markup can be tricky if written by hand. Little helper apps can allow people to write good code.
- Soon we'll have a native lazy load feature in browsers for images and iframes. Chrome has it in testing now and can send aspect ratios before actual images.