The Future of Front-End Performance (long-format)
Abstract
Are you losing revenue to performance? 53% of mobile site visits are abandoned if a page takes longer than 3 seconds to load. Pinterest reduced load times by 40% and saw a 15% increase in sign ups. Starbucks implemented a 2x faster time to interactive resulting in a 65% increase in rewards registrations. AliExpress reduced load by 36% and saw a 10.5% increase in orders.
Performance is important. Tooling can be hard. Do flame charts intimidate you? Come learn about the various tools and metrics for measuring web application performance. We'll also deep-dive into the most common offenders so you can learn how to spot and fix them. During this talk, you will learn:
- The difference between lab/synthetic testing and field testing, or real user monitoring
- Which metrics matter and how they relate to user experience
- Latency and loading: HTTP2, code splitting, caching and service workers, resource and priority hints, progressive rendering and lazy loading, third party scripts
- Reducing code: tree shaking, responsible imports, performance budgets, differential serving
- Assets: responsive images, font loading, network client hints
- Perceived performance and UX
Prerequisites
To get the most out of this talk, you should have a working understanding of JavaScript, HTML, and CSS. A basic understanding of webpack would be helpful but is not required.
About the trainer
Sia Karamalegos is a web developer passionate about performance as well as an international conference speaker and writer. She is a Google Developer Expert in Web Technologies and a Women Techmakers ambassador. She co-organizes #FrontEndParty, GDG New Orleans, and NOLA Hack Night in the New Orleans area. She is the founder and lead developer for Clio + Calliope Web Development and was recognized in the Silicon Bayou 100, the 100 most influential and active people in tech and entrepreneurship in Louisiana. When she's not coding, speaking, or consulting, Sia likes to write stories and dabble in charcoal figure drawing. She's also an avid endurance athlete.
Twitter | Website | Github | Blog | StackOverflow | LinkedIn
Slides and Controls
The slides are deployed here. To advance the slides, use n
for next and p
for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.
Resources
Want to learn more about how to measure and improve performance? Here you go:
- Modern DevTools course by Umar Hansa
- /dev tips by Umar Hansa
- Optimize Website Speed with Chrome DevTools by Kayce Basques
- Assessing Loading Performance in Real Life with Navigation and Resource Timing by Jeremy Wagner
- User Timing API – Measuring User Experience Performance by Cody Arsenault
- Measure Performance with the RAIL Model by Meggin Kearney, et. al.
- Reduce JavaScript Payloads with Tree Shaking by Jeremy Wagner
- Reduce JavaScript Payloads with Code Splitting by Jeremy Wagner and Addy Osmani
- Lazy Loading Images and Video by Jeremy Wagner
- The Cost of JavaScript in 2018 by Addy Osmani
- The Cost of JavaScript by Addy Osmani
- Why Web Developers Need to Care about Interactivity by Philip Walton
- Preload, Prefetch And Priorities in Chrome by Addy Osmani
- Webpack build analysis on SurviveJS by Juho Vepsäläinen
- https://www.webpagetest.org/easy easy no configuration set up for a slow-3G connection and mid-level phone, specifically Chrome on a Motorola G (gen 4) tested from Dulles, Virginia on a 400 Kbps 3G connection with 400ms of latency.
- Responsive Images by Pete LePage
- Responsive Images Udacity Course by Google
- Optimizing Images in Webpack on SurviveJS by Juho Vepsäläinen
- Can You Afford It?: Real-world Web Performance Budgets by Alex Russell
- Deploying ES2015+ Code in Production Today by Philip Walton
- HTTP Caching by Ilya Grigorik
- Take a (Client) Hint! by Jeremy Wagner
- To push, or not to push?! - The future of HTTP/2 server push by Patrick Hamann
- The Future is Fast on performance and Gatsby.js by Jason Lengstorf
- If you have the chance, attend one of Harry Robert's talks or workshops on performance
- Does my site need HTTPS?
- Deploying ES2015+ Code in Production Today by Philip Walton
- Doing Differential Serving in 2019 by Jeremy Wagner and repo
- Serve modern code to modern browsers for faster page loads by Houssein Djirdeh (and click through for codelab)
Other sources:
- Speed is now a landing page factor for Google Search and Ads by Addy Osmani and Ilya Grigorik
- WPO Stats - Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics
- Why performance matters by Jeremy Wagner
- End to End Apps with Polymer (Polymer Summit 2017) talk by Kevin Schaaf which also shows the time to interactive video
- This is why I prefer Progressive Rendering + Bootstrapping. tweet by Paul Lewis with graphic comparing progressing rendering with SSR and CSR
- Why Waiting Is Torture by Alex Stone
- The Truth About Download Time by Christine Perfetti
- The need for mobile speed: How mobile latency impacts publisher revenue report by DoubleClick by Google