siakaramalegos / performance-pwx-2021

Future of Frontend Performance slides

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

Other sources:

About

Future of Frontend Performance slides