O'Reilly logo
live online training icon Live Online training

Web Performance in Practice

Starting with Web Performance Optimization

Maximiliano Firtman

Web performance optimization is one of the most important disciplines in app and website development these days as it leads to greater conversion rates and better user experiences in all contexts. To achieve great performance, we need to learn the metrics, how to measure them, set our goals, and finally apply techniques that will improve user perception.

After this training you will have a clear idea of how to measure metrics, find issues and apply some basic techniques to improve user perception via a hands-on exercise that you can follow on your own computer.

What you'll learn-and how you can apply it

By the end of this live, hands-on, online course, you’ll understand:

  • The Web Performance Optimization Basics, including why is important, the drawbacks of not applying techniques and the frontend responsibility
  • Metrics to measure, and how to set the right goals for your project
  • Open Source Tools to measure and find performance issues
  • How the browser works, including a quick review of the network layer, HTTP/2 and the upcoming HTTP/3, the Cache process, and Service Workers.
  • The Basic Checklist of optimization techniques to apply on your website or web app to achieve your performance goals, enhance user's perception and increase conversion rates.

And you’ll be able to:

  • Set modern performance goals for your web content
  • Detect problems, bottlenecks and create a plan to mitigate them
  • Increase the user experience of your content, improving engagement and conversion rates
  • Audit your website and webapps to see what's missing and how can you improve perception metrics

This training course is for you because...

  • You’re a web developer or designer looking to increase user experience and perception
  • You're a web performance engineer looking to understand the modern metrics and techniques
  • You work with webs and PWAs looking to offer the fastest possible experience to your users
  • You want to become a performance engineer looking to understand the basics of Web Performance Optimization

Prerequisites

  • Basics of HTML, CSS, and JavaScript
  • Node.js 10+
  • Have the latest version of Chrome and Firefox installed

Recommended preparation:

Recommended follow-up:

About your instructor

  • Max Firtman is a mobile and web developer, trainer, speaker, and writer. Max teaches mobile HTML5 and performance trainings for top companies around the world. The founder of IT training company ITMaster, Max is a well-known professional in the mobile web community. He blogs about mobile web platforms on Mobilexweb.com, keeps compatibility tables updated at Mobilehtml5.org, and has written many books, including Programming the Mobile Web (available in a second edition) and the recent High Performance Mobile Web, published by O’Reilly Media. He is a frequent speaker at conferences, including QCon, Mobilism, OSCON, Velocity, Fluent, Google Developer Day, JSConf, GOTO, AdobeCamp, and many other events around the world. Max has been widely recognized for his work in the mobile web community. He is an Adobe Community Professional, Microsoft IE User Agent, Nokia Developer Champion, and BlackBerry Elite, among other distinctions.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Web Performance Optimization (1 hour)

  • Presentation: Intro, Metrics,
  • Discussion: Importance of WPO in the modern world
  • Discussion: Current Metrics and Goals for Web Performance
  • Presentation: Basic ideas on WPO, why is it important, the mobile world
  • Exercise: Get a first analysis of a website; reading metrics from WebPageTest and creating a first analysis of the situation
  • Poll: Importance of Web Performance, Metrics
  • Q&A (5 minutes)
  • Break (5 minutes)

Understand how the browser works (1 hour)

  • Discussion: DNS, TCP and HTTP, high-level overview
  • Discussion: the Mobile Web
  • Presentation: The browser mechanism
  • Exercise: Analyze a Waterfall Chart
  • Poll: The browser
  • Q&A (5 minutes)
  • Break (5 minutes)

Basic Network Checklist (1 hour)

  • Discussion: the importance of the first impression
  • Presentation: Basic checklist
  • Discussion: The Browser's Cache and Service Workers
  • Exercise: Apply basic techniques and see the results (10 minutes)
  • Q&A (5 minutes)
  • Break (5 minutes)

Optimizing Resources (1 hour)

  • Discussion: Loading Resources Techniques
  • Presentation: Image Optimization
  • Discussion: How to load JavaScript and CSS
  • Presentation: How to load Web Fonts
  • Presentation: Preload and Priority declarations
  • Exercise: Apply techniques to the lab and see results (15 minutes)
  • Q&A (5 minutes)