O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introduction to Web Performance Optimization (WPO)

Video Description

In this Introduction to Web Performance Optimization (WPO) training course, expert author Kent Alstad will teach you about the tools and techniques to measure and optimize website performance. This course is designed for users that already have web development experience.

You will start by learning how browsers work, then jump into learning about measurement. From there, Kent will teach you about web performance optimization, server side optimization, and image optimization. This video tutorial also covers accelerating dynamic content, round-trip reduction, client side caching, and progressive rendering. You will also learn how to use your CDN effectively and how to optimize for the mobile web. Finally, you will learn about automated web performance optimization, including WPO server extensions, image optimizers, and mobile WPO automation.

Once you have completed this computer based training course, you will have learned how to measure and optimize website performance. Working files are included, allowing you to follow along with the author throughout the lessons.

Table of Contents

  1. Introduction
    1. What Is Web Performance Optimization? 00:03:02
    2. About The Author 00:00:39
    3. What WPO Is Not 00:00:56
    4. What To Expect From This Video 00:01:05
    5. How To Access Your Working Files 00:01:15
  2. How Browsers Work
    1. Mechanics Of A Web Request 00:05:03
    2. DOM Construction 00:01:24
    3. Important Events - DOMContentLoaded And OnLoad 00:02:24
    4. Browser Rendering Optimization 00:02:18
  3. Measurement
    1. What Do You Need To Measure? 00:04:03
    2. Measurement Options 00:09:05
    3. Measurement Examples 00:11:09
    4. Mobile Measurement Options 00:03:17
  4. What Is Web Performance Optimization?
    1. The Performance Equation - Part 1 00:00:31
    2. The Performance Equation - Part 2 00:02:03
    3. Waterfall Charts - Part 1 00:07:18
    4. Waterfall Charts - Part 2 00:02:54
    5. A Study Of Latency 00:07:28
    6. Payload Reduction 00:02:27
    7. Deferral Techniques 00:03:13
    8. Optimizing CSS 00:03:16
  5. Server Side Optimization
    1. Introduction To Async Behavior 00:05:35
    2. Non-Blocking IO 00:02:56
    3. Load Distribution 00:01:05
    4. Server Off-Load Techniques 00:01:06
    5. TLS Connection Optimizations 00:04:56
  6. Image Optimization
    1. Data URI 00:11:30
    2. Sprites 00:01:59
    3. Image Compression 00:04:52
    4. WebP, JPEG-XR And JPEG 2000 00:04:30
    5. Format Conversion Techniques 00:01:51
    6. Image Optimization Tools 00:04:39
  7. Accelerating Dynamic Content
    1. Using IFrames For Async Behavior 00:16:29
    2. Javascript Deferral 00:07:57
    3. Basic Gzip Compression 00:01:44
  8. Round-Trip Reduction
    1. Resource Combining 00:02:19
    2. In-Lining 00:03:33
    3. Out-Lining 00:03:06
    4. Preloading 00:07:21
  9. Client Side Caching
    1. Making A LocalStorage Cache - Read Through 00:12:14
    2. Controlling Cache Header Expiry 00:04:42
    3. Far-Future Expiry And Fingerprinting 00:09:37
    4. Caching HTML On The Client 00:06:13
  10. Progressive Rendering
    1. Progressive Image Rendering 00:05:44
    2. Lazy Loading Images 00:03:32
    3. Above The Fold Rendering Techniques 00:04:53
  11. Blackholes And Anti-Patterns
    1. DataURI Versus Page Reload Size 00:18:52
    2. Duplicate Download - Concatenated Resources Package 00:06:55
    3. Third Party Resources And Single Points Of Failure - SPOF 00:04:10
  12. Using Your CDN Effectively
    1. CDN Mechanics 00:06:45
    2. Cookie-Less Domains 00:05:31
    3. Managing Cache Expiry 00:06:08
    4. Caching Optimized HTML 00:05:08
  13. Optimizing For The Mobile Web
    1. What Is Different About Mobile Pages? 00:01:25
    2. Adjusting For Mobile Layout 00:08:36
    3. Mobile Javascript Execution 00:11:43
    4. Optimizing For Mobile Networks 00:03:24
    5. Responsive Web Design 00:05:07
    6. Adaptive Delivery 00:03:54
  14. HTTP 2
    1. What Is HTTP 2? 00:04:23
    2. Why Is HTTP 2 Faster? 00:03:14
    3. HTTP 2 In Action 00:05:42
    4. HTTP 2 Options 00:03:38
  15. Automated WPO
    1. What Is Automated WPO? 00:02:23
    2. Design-Time Versus Run-Time Optimizations 00:03:09
    3. WPO Embedded In The Network 00:01:50
    4. WPO Server Extensions 00:02:21
    5. Image Optimizers 00:02:40
    6. Mobile WPO Automation 00:01:43
    7. WPO As A Service 00:01:51
  16. Conclusion
    1. Wrap Up 00:03:29