Web Performance Playbook

Web Performance Playbook image

9 Focus Areas for Developers and Designers

Publisher: O'Reilly Media

Release Date: February 2018

Duration: 1 hours 26 minutes

Watch on Safari with a 10-day trial

Start your free trial now

The web today is as competitive an environment as any that a business will face. Whether yours is a retail site, a news and information site, or whatever it might be, getting and keeping visitors there is a tougher challenge than ever, especially with so many competing sites just a click or tap away. And nothing will send your visitors heading for another site faster than a slow-loading page, or animations that grind to a halt and freeze the page on your users.

Web performance is important. Not only can it help increase the loyalty of your visitors, it can help you achieve higher rankings in search results. To stay ahead of the competition, whether you’re a web designer or developer you need to be well versed in the terminology and basic skills that underpin web performance technology to ensure that your sites respond as expected, with no lag time apparent to your visitors.

In this screencast, expert Eli Fitch takes you on a hands-on, introductory exploration of the impact that web performance—good and bad—can have on you and your users. In this series of short, easy-to- absorb videos, Eli introduces you to the major topics that define web performance so that you can determine where to start and see how web performance can improve your apps. You’ll look at methods to improve web performance, from image optimization and code minification, to lazy loading and SVG icons. You’ll also investigate techniques like front loading and how to optimize animation performance. If you are an entry- to intermediate-level web developer, you need to spend a little time with Eli and let him show you how improve your website’s performance.

What you’ll learn—and how you can apply it.

  • Image optimization, front loading, animation performance, and much more
  • Understand critical rendering, script loading, and code minification
  • How to use lazy loading, loading indicators, and SVG icons

This screencast is for you because…

  • You understand web performance is important, but need an overview of what’s involved
  • You need to understand how to frame the importance of web performance for other people in your company
  • You’re interested in taking on performance tasks, but need to know about the various other parts
  • You’re a front end developer or designer and you want to advance your skills in important, but non-core, areas


  • You should have knowledge of CSS and HTML
  • You should be familiar with SVG

Table of Contents

Chapter: Introduction


01m 21s

About the Author

00m 46s

Chapter: Web Performance Fields

Image Optimization

12m 32s

Font Loading

11m 46s

Animation Performance

14m 45s

Critical Rendering

07m 35s

Script Loading

08m 27s

Code Minification

06m 37s

Lazy Loading

07m 34s

Loading Indicators

12m 51s

Chapter: Conclusion


01m 49s

  • Publication date: 21.02.2018
  • Source