Debugging frontend performance (Day 2)

Description

Tim Kadlec and Patrick Meenan explain how the construction of websites and applications impacts performance as well as how to quickly debug and resolve performance issues. Tim and Patrick dive into how browsers work, how web pages are delivered, backend and front-end issues, optimizations, and techniques to get the best performance and provide hands-on experience for working on web performance.

There are many aspects to delivering and maintaining a fast web experience for users. Tim Kadlec and Patrick Meenan explain how the construction of websites and applications impacts performance as well as how to quickly debug and resolve performance issues. Tim and Patrick dive into how browsers work, how web pages are delivered, backend and frontend issues, optimizations, and techniques to get the best performance and provide hands-on experience for working on web performance.

The training will be a combination of instructional material and hands-on exercises. You will learn how to integrate performance into your development culture and make it part of your development cycle from development through release and into maintenance.

Topics include:

• A deep understanding of how browsers load and render content
• How to use browser developer tooling and online tools (like WebPagetest) to identify and diagnose web performance issues/opportunities
• How to identify and resolve frontend single points of failure
• How new technologies impact web performance (HTTP/2, service workers, resource hints, etc.)
• How to effectively use synthetic and real-user performance monitoring
• How to integrate performance budgeting and testing into your development process to catch issues quickly

Outline

Day 1:

• Background on browsers: How they work and how pages load (90 minutes)
• Break (30 minutes)
• Background on browsers continued (90 minutes)
  *Lunch (60 minutes)
• Measuring performance (90 minutes)
• Break (30 minutes)
• Frontend single points of failure (45 minutes)
• Service workers (45 minutes)

Day 2:

• Dev tools (90 minutes)
• Break (30 minutes)
• Interactive performance (90 minutes)
• Lunch (60 minutes)
• TLS performance (45 minutes)
• HTTP/2 (45 minutes)
• Break (30 minutes)
• Continuous integration (90 minutes)