Web Performance in Action
Building Fast Web Pages
Jeremy L. Wagner
Foreword by Ethan Marcotte
  • December 2016
  • ISBN 9781617293771
  • 376 pages
  • printed in black & white

An invaluable, accessible reference for the modern web developer.

From the Foreword by Ethan Marcotte, author of Responsive Web Design

Web Performance in Action is your companion guide to making websites faster. You'll learn techniques that speed the delivery of your site's assets to the user, increase rendering speed, decrease the overall footprint of your site, as well as how to build a workflow that automates common optimization techniques.

Table of Contents detailed table of contents

1. Understanding Website Performance

1.1. Why Web Optimization?

1.1.1. Web Optimization and the User Experience

1.1.2. How Web Browsers Talk to Web Servers

1.1.3. How Web Pages Load

1.2. Up and Running

1.2.1. Installing Node and Git

1.2.2. Simulating a Network Connection

1.3. Auditing the Client's Website

1.4. Optimizing the Client's Website

1.4.1. Minifying Assets

1.4.2. Using Server Compression

1.4.3. Optimizing Images

1.5. The Final Weigh-in

1.6. Summary

2. Using Assessment Tools

2.1. Evaluating with Google PageSpeed Insights

2.1.1. Appraising Website Speed

2.1.2. Using Google Analytics for Bulk Reporting

2.2. Using Browser-based Assessment Tools

2.3. Network Request Inspection

2.3.1. Viewing Timing Information

2.3.2. Viewing HTTP Request and Response Headers

2.4. Rendering Performance Auditing Tools

2.4.1. How Browsers Render Webpages

2.4.2. Google Chrome's Timeline Tool

2.4.3. Identifying Problem Events: Thy Enemy is Jank

2.4.4. Marking Timeline Recordings in Your Code

2.4.5. Rendering Profilers in Other Browsers

2.5. Simple Benchmarking of JavaScript in Chrome

2.6. Simulating and Monitoring Devices

2.6.1. Simulating Devices via the Desktop Web Browser

2.6.2. Remote Debugging of Websites on Android Devices

2.6.3. Remote Debugging of Websites on iOS Devices

2.7. Creating Custom Network Throttling Profiles

2.8. Summary

3. Optimizing CSS

3.1. Don't Talk Much and Stay DRY

3.1.1. Writing Shorthand CSS

3.1.2. Use Shallow CSS Selectors

3.1.3. Don't Repeat Yourself (DRY)

3.1.4. Segmenting CSS

3.1.5. Customizing Framework Downloads

3.2. Mobile-first is User-first

3.2.1. Mobile-first vs. Desktop-first

3.2.2. Mobilegeddon

3.3. Performance Tuning Your CSS

3.3.1. Avoid the @import Declaration

3.3.2. Placing CSS in the <head>

3.3.3. Using Faster Selectors

3.3.4. Use Flexbox Where Possible

3.3.5. Using CSS Transitions

3.4. Summary

4. Understanding Critical CSS

4.1. What Does Critical CSS Solve?

4.1.1. Understanding the Fold

4.1.2. Understanding Render Blocking

4.2. How Does Critical CSS Work?

4.2.1. Loading of Above the Fold Styles

4.2.2. Loading of Below the Fold Styles

4.3. Implementing Critical CSS

4.3.1. Getting the Recipe Website Up and Running

4.3.2. Identifying and Separating Above the Fold CSS

4.3.3. Loading Below the Fold CSS

4.4. Weighing the Benefits

4.5. Making Maintainability Easier

4.5.1. Considerations for Multipage Websites

4.6. Summary

5. Making Images Responsive

5.1. Why Think About Image Delivery?

5.2. Understanding Image Types and Their Applications

5.2.1. Raster Images

5.2.2. SVG Images

5.2.3. Knowing What Images to Use

5.3. Image Delivery in CSS

5.3.1. Targeting Displays in CSS Using Media Queries

5.3.2. Targeting High DPI Displays with Media Queries

5.3.3. Using SVG Background Images in CSS

5.4. Image Delivery in HTML

5.4.1. The Universal max-width Rule for Images

5.4.2. Using srcset

5.4.3. Using the <picture> Element

5.4.4. Polyfilling Support with Picturefill

5.4.5. Using SVG in HTML

5.5. Summary

6. Going Further with Images

6.1. Using Image Sprites

6.1.1. Up and Running

6.1.2. Generating the Image Sprite

6.1.3. Using the Generated Sprite

6.1.4. Considerations for Image Sprites

6.1.5. Falling Back to Raster Image Sprites with Grumpicon

6.2. Reducing Images

6.2.1. Reducing Raster Images with imagemin

6.2.2. Optimizing SVG Images

6.3. Encoding Images with WebP

6.3.1. Encoding Lossy WebP Images with imagemin

6.3.2. Encoding Lossless WebP Images with imagemin

6.3.3. Supporting Browsers That Don’t Support WebP

6.4. Lazy Loading Images

6.4.1. Configuring the Markup

6.4.2. Writing the Lazy Loader

6.4.3. Accommodating Users Without JavaScript

6.5. Summary

7. Faster Fonts

7.1. Using Fonts Wisely

7.1.1. Selecting Fonts and Font Variants

7.1.2. Rolling Your Own @font-face Cascade

7.2. Compressing EOT and TTF Font Formats

7.3. Subsetting Fonts

7.3.1. Manually Subsetting Fonts

7.3.2. Delivering Font Subsets Using the unicode-range Property

7.4. Optimizing the Loading of Fonts

7.4.1. Understanding Font Loading Problems

7.4.2. Using the Font Loading API

7.4.3. Using Font Face Observer as a Fallback

7.5. Summary

8. Keeping JavaScript Lean and Fast

8.1. Affecting Script Loading Behavior

8.1.1. Placing the <script> Element Properly

8.1.2. Asynchronous Script Loading

8.2. Leaner jQuery-compatible Alternatives

8.2.1. Comparing the Alternatives

8.2.2. Implementing an Alternative

8.3. Getting by Without jQuery

8.3.1. Checking for the DOM to be Ready

8.3.2. Selecting Elements and Binding Events

8.3.3. Using classList to Manipulate Classes on Elements

8.3.4. Reading and Modifying Element Attributes and Content

8.3.5. Making AJAX Requests with the Fetch API

8.4. Animating with requestAnimationFrame

8.4.1. requestAnimationFrame at a Glance

8.4.2. Implementing requestAnimationFrame

8.4.3. Dropping in Velocity.js

8.5. Summary

9. Boosting Performance with Service Workers

9.1. What are Service Workers?

9.2. Writing Your First Service Worker

9.2.1. Installing the Service Worker

9.2.2. Intercepting and Caching Network Requests

9.2.3. Measuring the Performance Benefits

9.2.4. Tweaking Network Request Interception Behavior

9.3. Updating your Service Worker

9.3.1. Versioning your Files

9.3.2. Cleaning up Old Caches

9.4. Summary

10. Fine-tuning asset delivery

10.1. Compressing assets

10.1.1. Following compression guidelines

10.1.2. Using Brotli compression

10.2. Caching assets

10.2.1. Understanding caching

10.2.2. Crafting an optimal caching strategy

10.3. Using CDN assets

10.3.1. Using CDN-hosted assets

10.3.2. What to do if a CDN fails

10.3.3. Verifying CDN assets with Subresource Integrity

10.4. Using resource hints

10.4.1. Using the preconnect resource hint

10.4.2. Using the prefetch and preload resource hints

10.4.3. Using the prerender resource hint

10.5. Summary

11. Looking to the Future with HTTP/2

11.1. Why We Need HTTP/2

11.1.1. Understanding the Problem with HTTP/1

11.1.2. How HTTP/2 Solves Common HTTP/1 Problems

11.1.3. Writing a Simple HTTP/2 Server in Node

11.1.4. Observing the Benefits

11.2. How Optimization Techniques Change for HTTP/2

11.2.1. Asset Granularity and Caching Effectiveness

11.2.2. Identifying Performance Anti-patterns for HTTP/2

11.3. Pre-emptively Sending Assets with Server Push

11.3.1. What is Server Push and How Does It Work?

11.3.2. Using Server Push

11.3.3. Measuring Server Push Performance

11.4. Optimizing for Both HTTP/1 and HTTP/2

11.4.1. How HTTP/2 Servers Deal with HTTP/2-Incapable Browsers

11.4.2. Segmenting Your Users

11.4.3. Serving Assets According to Browser Capability

11.5. Summary

12. Automating Optimization with gulp

12.1. Introducing gulp

12.1.1. Why Should I Use a Build System?

12.1.2. How gulp Works

12.2. Laying Down the Foundations

12.2.1. Structuring Your Project’s Folders

12.2.2. Installing gulp and its Plugins

12.3. Writing gulp Tasks

12.3.1. The Anatomy of a gulp Task

12.3.2. Writing the Core Tasks

12.3.3. Writing the Utility Tasks

12.4. Going a Little Further with gulp Plugins

12.5. Summary

About the Technology

Nifty features, hip design, and clever marketing are great, but your website will flop if visitors think it's slow. Network conditions can be unpredictable, and with today's sites being bigger than ever, you need to set yourself apart from the competition by focusing on speed. Achieving a high level of performance is a combination of front-end architecture choices, best practices, and some clever sleight-of-hand. This book will demystify all these topics for you.

About the book

Web Performance in Action is your guide to making fast websites. Packed with "Aha!" moments and critical details, this book teaches you how to create performant websites the right way. You'll master optimal rendering techniques, tips for decreasing your site's footprint, and technologies like HTTP/2 that take your website's speed from merely adequate to seriously fast. Along the way, you'll learn how to create an automated workflow to accomplish common optimization tasks and speed up development in the process.

What's inside

  • Foolproof performance-boosting techniques
  • Optimizing images and fonts
  • HTTP/2 and how it affects your optimization workflow

About the reader

This book assumes that you're familiar with HTML, CSS, and JavaScript. Many examples make use of Git and Node.js.

About the author

Jeremy Wagner is a professional front-end web developer with over ten years of experience.


Buy
combo $44.99 pBook + eBook + liveBook
eBook $35.99 pdf + ePub + kindle + liveBook

FREE domestic shipping on three or more pBooks

An excellent and practical guide through the forest of web performance issues.

Alexey Galiullin, Global Orange

By far the most valuable book I have read on web performance. A true time-saver for you and your users.

Kevin Liao, Sotheby's

A thorough compendium of tools and techniques for improving web performance.

Noreen Dertinger, Dertinger Informatics