Sia Karamalegos

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.

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.

More developers are starting to understand that web performance matters. From higher mobile search rankings to bottom-line revenue impacts, performance can make or break your web app. However, fixing performance can feel like a quagmire of expert-level nuanced understanding on so many topics. What would you think if I told you you could cut your JavaScript bundle size up to 50% by doing one thing only? Nearly 90% of worldwide web traffic runs on modern browsers, but we're transpiling all of our JavaScript down to ES5. That transpilation has a cost.

In this talk, we'll learn about differential serving, or serving modern bundles to modern browsers and legacy, transpiled bundles to older browsers. We'll talk about strategies, what to watch out for, and how to implement it using webpack. This talk is framework agnostic, and it's best if you have at least a basic understand of JavaScript.

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

In this first part of a 2-part series on web accessibility, we'll answer the questions: What does “accessibility” mean when it comes to the web? Why does it matter? What tools and resources should I use to make an accessible website or application? We'll also dive into hands-on exercises for fixing common accessibility issues such as semantic HTML, color contrast, keyboard access, and optimizing for screen readers. The exercises will continue in part 2 of this series.

The workshop parts 1 and 2 are meant to be taken together. Part 1 introduces us to accessibility and begins the hands-on exercises. Part 2 continues the exercises to cover the most common topics and issues in making websites accessible. Please come with a charged laptop. You must understand HTML, CSS, and JavaScript to get the most out of this workshop.

This is the continuation of the Web Accessibility Workshop 101, in which we learned the answers to the questions: What does “accessibility” mean when it comes to the web? Why does it matter? What tools and resources should I use to make an accessible website or application? In this part, we'll continue with hands-on exercises for fixing common accessibility issues such as semantic HTML, color contrast, keyboard access, and optimizing for screen readers.

The workshop parts 1 and 2 are meant to be taken together. Part 1 introduces us to accessibility and begins the hands-on exercises. Part 2 continues the exercises to cover the most common topics and issues in making websites accessible. Please come with a charged laptop. You must understand HTML, CSS, and JavaScript to get the most out of this workshop.