Web Performance in Action: Building Faster Web Pages

378 Pages·2017·30.67 MB·English

by  Jeremy Wagner

IN ACTION
BUILDING FAST WEB PAGES
Jeremy L. Wagner
F Ethan Marcotte
OREWORDBY
M A N N I N G
Web Performance in Action
BUILDING FAST WEB PAGES
JEREMY L. WAGNER
MANNING
SHELTER ISLAND
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
20 Baldwin Road
PO Box 761
Shelter Island, NY 11964
Email: [email protected]
©2017 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Many of the designations used by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning
Publications was aware of a trademark claim, the designations have been printed in initial caps
or all caps.
Recognizing the importance of preserving what has been written, it is Manning’s policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Recognizing also our responsibility to conserve the resources of our planet, Manning books are
printed on paper that is at least 15 percent recycled and processed without the use of elemental
chlorine.
Manning Publications Co. Development editor: Susanna Kline
20 Baldwin Road Review editor: Ivan Martinovic´
PO Box 761 Technical development editor: Nick Watts
Shelter Island, NY 11964 Project editor: Kevin Sullivan
Copyeditor: Sharon Wilkey
Proofreader: Elizabeth Martin
Technical proofreader: David Fombella Pombal
Typesetter: Gordan Salinovic
Cover designer: Marija Tudor
ISBN 9781617293771
Printed in the United States of America
1 2 3 4 5 6 7 8 9 10 – EBM – 21 20 19 18 17 16
brief contents
1 ■ Understanding web performance 1
2 ■ Using assessment tools 22
3 ■ Optimizing CSS 51
4 ■ Understanding critical CSS 83
5 ■ Making images responsive 102
6 ■ Going further with images 130
7 ■ Faster fonts 164
8 ■ Keeping JavaScript lean and fast 196
9 ■ Boosting performance with service workers 223
10 ■ Fine-tuning asset delivery 242
11 ■ Looking to the future with HTTP/2 274
12 ■ Automating optimization with gulp 303
iii

contents
foreword xi
preface xii
acknowledgments xiii
about this book xv
about the author xix
about the cover illustration xx
1 Understanding web performance 1
1.1 Understanding web performance 2
Web performance and the user experience 2 ■ How web browsers
talk to web servers 3 ■ How web pages load 5
1.2 Getting up and running 6
Installing Node.js and Git 6 ■ Downloading and running the
client’s website 7 ■ Simulating a network connection 8
1.3 Auditing the client’s website 9
1.4 Optimizing the client’s website 11
Minifying assets 12 ■ Using server compression 15
Optimizing images 18
1.5 Performing the final weigh-in 20
1.6 Summary 21
v
vi CONTENTS
2 Using assessment tools 22
2.1 Evaluating with Google PageSpeed Insights 22
Appraising website performance 23 ■ Using Google Analytics for
bulk reporting 25
2.2 Using browser-based assessment tools 26
2.3 Inspecting network requests 27
Viewing timing information 27 ■ Viewing HTTP request and
response headers 29
2.4 Rendering performance-auditing tools 32
Understanding how browsers render web pages 32 ■ Using Google
Chrome’s Timeline tool 32 ■ Identifying problem events: thy enemy
is jank 35 ■ Marking points in the timeline with JavaScript 41
Rendering profilers in other browsers 42
2.5 Benchmarking JavaScript in Chrome 43
2.6 Simulating and monitoring devices 45
Simulating devices in the desktop web browser 45 ■ Debugging
websites remotely on Android devices 46 ■ Debugging websites
remotely on iOS devices 47
2.7 Creating custom network throttling profiles 48
2.8 Summary 50
3 Optimizing CSS 51
3.1 Don’t talk much and stay DRY 52
Write shorthand CSS 52 ■ Use shallow CSS selectors 55 ■ Culling
shallow selectors 56 ■ LESS is more and taming SASS 57 ■ Don’t
repeat yourself 58 ■ Going DRY 58 ■ Finding redundancies with
csscss 59 ■ Segment CSS 61 ■ Customize framework downloads 63
3.2 Mobile-first is user-first 63
Mobile-first vs. desktop-first 64 ■ Mobilegeddon 67 ■ Using Google’s
mobile-friendly guidelines 67 ■ Verifying a site’s mobile-friendliness 68
3.3 Performance-tuning your CSS 69
Avoiding the @import declaration 69 ■ @import serializes
requests 69 ■ <link> parallelizes requests 70 ■ Placing CSS in
the <head> 71 ■ Preventing the Flash of Unstyled Content 71
Increasing rendering speed 72 ■ Using faster selectors 72
Constructing and running the benchmark 73 ■ Examining the
benchmark results 74 ■ Using flexbox where possible 75
Comparing box model and flexbox styles 75 ■ Examining the
benchmark results 77
CONTENTS vii
3.4 Working with CSS transitions 77
Using CSS transitions 77 ■ Observing CSS transition performance 79
Optimizing transitions with the will-change property 80
3.5 Summary 82
4 Understanding critical CSS 83
4.1 What does critical CSS solve? 83
Understanding the fold 84 ■ Understanding render blocking 85
4.2 How does critical CSS work? 86
Loading above-the-fold styles 86 ■ Loading below-the-fold styles 87
4.3 Implementing critical CSS 88
Getting the recipe website up and running 88 ■ Identifying and
separating above-the-fold CSS 90 ■ Loading below-the-fold CSS 96
4.4 Weighing the benefits 97
4.5 Making maintainability easier 98
4.6 Considerations for multipage websites 100
4.7 Summary 101
5 Making images responsive 102
5.1 Why think about image delivery? 103
5.2 Understanding image types and their applications 105
Working with raster images 105 ■ Working with SVG
images 108 ■ Knowing what image formats to use 109
5.3 Image delivery in CSS 110
Targeting displays in CSS by using media queries 111 ■ Targeting
high DPI displays with media queries 113 ■ Using SVG
background images in CSS 116
5.4 Image delivery in HTML 117
The universal max-width rule for images 117 ■ Using srcset 118
Using the <picture> element 121 ■ Polyfilling support with
Picturefill 125 ■ Using SVG in HTML 127
5.5 Summary 128
6 Going further with images 130
6.1 Using image sprites 131
Getting up and running 132 ■ Generating the image sprite 132
Using the generated sprite 134 ■ Considerations for image
sprites 135 ■ Falling back to raster image sprites with Grumpicon 136
viii CONTENTS
6.2 Reducing images 137
Reducing raster images with imagemin 138 ■ Optimizing SVG
images 143
6.3 Encoding images with WebP 145
Encoding lossy WebP images with imagemin 146 ■ Encoding
lossless WebP Images with imagemin 147 ■ Supporting browsers
that don’t support WebP 149
6.4 Lazy loading images 150
Configuring the markup 151 ■ Writing the lazy loader 153
Accommodating users without JavaScript 160
6.5 Summary 162
7 Faster fonts 164
7.1 Using fonts wisely 165
Selecting fonts and font variants 165 ■ Rolling your own @font-
face cascade 167
7.2 Compressing EOT and TTF font formats 172
7.3 Subsetting fonts 173
Manually subsetting fonts 174 ■ Delivering font subsets by using
the unicode-range property 178
7.4 Optimizing the loading of fonts 184
Understanding font-loading problems 185 ■ Using the CSS font-
display property 186 ■ Using the font-loading API 188
Using Font Face Observer as a fallback 192
7.5 Summary 194
8 Keeping JavaScript lean and fast 196
8.1 Affecting script-loading behavior 197
Placing the <script> element properly 197 ■ Working with
asynchronous script loading 199 ■ Using async 199
Using async reliably with multiple scripts 201
8.2 Using leaner jQuery-compatible alternatives 203
Comparing the alternatives 203 ■ Exploring the contenders 203
Comparing file size 204 ■ Comparing performance 204
Implementing an alternative 205 ■ Using Zepto 205
Understanding caveats on using Shoestring or Sprint 206
CONTENTS ix
8.3 Getting by without jQuery 207
Checking for the DOM to be ready 207 ■ Selecting elements and
binding events 208 ■ Using classList to manipulate classes on
elements 210 ■ Reading and modifying element attributes and
content 211 ■ Making AJAX requests with the Fetch API 214
Using the Fetch API 214 ■ Polyfilling the Fetch API 215
8.4 Animating with requestAnimationFrame 217
requestAnimationFrame at a glance 217 ■ Timer function-driven
animations and requestAnimationFrame 217 ■ Comparing
performance 218 ■ Implementing requestAnimationFrame 219
Dropping in Velocity.js 221
8.5 Summary 222
9 Boosting performance with service workers 223
9.1 What are service workers? 224
9.2 Writing your first service worker 226
Installing the service worker 226 ■ Registering the service
worker 227 ■ Intercepting and caching network requests 230
Measuring the performance benefits 233 ■ Tweaking network
request interception behavior 233
9.3 Updating your service worker 236
Versioning your files 237 ■ Cleaning up old caches 238
9.4 Summary 240
10 Fine-tuning asset delivery 242
10.1 Compressing assets 243
Following compression guidelines 244 ■ Using Brotli compression 247
10.2 Caching assets 251
Understanding caching 252 ■ Crafting an optimal caching
strategy 256 ■ Invalidating cached assets 259
10.3 Using CDN assets 261
Using CDN-hosted assets 261 ■ What to do if a CDN fails 264
Verifying CDN assets with Subresource Integrity 265
10.4 Using resource hints 267
Using the preconnect resource hint 267 ■ Using the prefetch and preload
resource hints 269 ■ Using the prerender resource hint 271
10.5 Summary 272