Sia Karamalegos

Get in the Fast Lane: Measuring Web Performance

9:00 AM MDT

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 how to audit and fix common performance issues using Chrome DevTools, Lighthouse, PageSpeed Insights, and webpagetest.org.

During this hands-on, full-day workshop, you will learn how to:

• Optimize and familiarize yourself with your DevTools environment
• Understand which metrics matter
• Measure the performance of existing applications
• Diagnose and prioritize performance problems
• Implement performance fixes

We will profile real applications to both learn the tools of measurement as well as see real performance problems in action. By the end of this workshop, you will be familiar with the following performance concepts. Many will be covered in-depth with exercises, and others will be covered in an overview with resources to learn more.

• 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
• Buttery smooth UI: long-running JavaScript
• Perceived performance and UX

Prerequisites: To attend this workshop, you must already have a working understanding of JavaScript, HTML, CSS, git, and the command line, including installing npm packages and running npm scripts (or yarn). You must also have a basic understanding of Chrome DevTools, including inspecting an element and using the console. You do not need advanced mastery of DevTools as we will be learning about the Network and Performance tabs plus other tools during this session. A basic understanding of webpack would be very helpful, but the concepts can still be learned during this segment of the workshop.

Preparation: Please come with a laptop ready for development. You must have Chrome and Node (v 8+) installed.

Diving into Dev Tools for performance

8:30 AM MDT

Performance is important. Tooling can be hard. Do flame charts and waterfalls intimidate you? Come learn how to use common performance tools such as Chrome DevTools, Lighthouse, and webpagetest.org. We'll profile several websites with different performance issues to illustrate how to use each tool.

In this talk, I'll live-profile several sites to help you see how to approach performance analysis. It's best if you already know how to use the Chrome Dev Tools inspector, but we will approach the performance tools from a beginner's starting point. Attendees should be comfortable with HTML at a minimum.

The Future of Front-End Performance

10:30 AM MDT

Help! My app bundle is 5MB! My users are angry that my app is so slow! It’s easy to forget that performance matters when we are under pressure to deliver features quickly. What data should we use to inform our decisions?

From code splitting, lazy loading, and tree shaking to bundle analysis, progressive rendering, and modern transpiling, come learn how you can deliver a better experience to your users with high-performing front-end apps. This talk is library-agnostic (React, Angular, Vue, etc.).

See the code repository link for a gist that includes slides, resources, and more: https://github.com/siakaramalegos/web-performance-long