Web Performance

Web Performance in Action: Building Fast Web Pages

Jeremy L. Wagner, 2016

Inhaltsverzeichnis des Buches

Copyright
Brief Table of Contents
Table of Contents
Foreword
Preface
Acknowledgments
About this Book
About the Author
About the Cover Illustration
Chapter 1. Understanding web performance
1.1. Understanding web performance
1.1.1. Web performance and the user experience
1.1.2. How web browsers talk to web servers
1.1.3. How web pages load
1.2. Getting up and running
1.2.1. Installing Node.js and Git
1.2.2. Downloading and running the client’s website
1.2.3. 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. Performing the final weigh-in
1.6. Summary
Chapter 2. Using assessment tools
2.1. Evaluating with Google PageSpeed Insights
2.1.1. Appraising website performance
2.1.2. Using Google Analytics for bulk reporting
2.2. Using browser-based assessment tools
2.3. Inspecting network requests
2.3.1. Viewing timing information
2.3.2. Viewing HTTP request and response headers
2.4. Rendering performance-auditing tools
2.4.1. Understanding how browsers render web pages
2.4.2. Using Google Chrome’s Timeline tool
2.4.3. Identifying problem events: thy enemy is jank
2.4.4. Marking points in the timeline with JavaScript
2.4.5. Rendering profilers in other browsers
2.5. Benchmarking JavaScript in Chrome
2.6. Simulating and monitoring devices
2.6.1. Simulating devices in the desktop web browser
2.6.2. Debugging websites remotely on Android devices
2.6.3. Debugging websites remotely on iOS devices
2.7. Creating custom network throttling profiles
2.8. Summary
Chapter 3. Optimizing CSS
3.1. Don’t talk much and stay DRY
3.1.1. Write shorthand CSS
3.1.2. Use shallow CSS selectors
3.1.3. Culling shallow selectors
3.1.4. LESS is more and taming SASS
3.1.5. Don’t repeat yourself
3.1.6. Going DRY
3.1.7. Finding redundancies with csscss
3.1.8. Segment CSS
3.1.9. Customize framework downloads
3.2. Mobile-first is user-first
3.2.1. Mobile-first vs. desktop-first
3.2.2. Mobilegeddon
3.2.3. Using Google’s mobile-friendly guidelines
3.2.4. Verifying a site’s mobile-friendliness
3.3. Performance-tuning your CSS
3.3.1. Avoiding the @import declaration
3.3.2. @import serializes requests
3.3.3. <link> parallelizes requests
3.3.4. Placing CSS in the <head>
3.3.5. Preventing the Flash of Unstyled Content
3.3.6. Increasing rendering speed
3.3.7. Using faster selectors
3.3.8. Constructing and running the benchmark
3.3.9. Examining the benchmark results
3.3.10. Using flexbox where possible
3.3.11. Comparing box model and flexbox styles
3.3.12. Examining the benchmark results
3.4. Working with CSS transitions
3.4.1. Using CSS transitions
3.4.2. Observing CSS transition performance
3.4.3. Optimizing transitions with the will-change property
3.5. Summary
Chapter 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 above-the-fold styles
4.2.2. Loading 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.6. Considerations for multipage websites
4.7. Summary
Chapter 5. Making images responsive
5.1. Why think about image delivery?
5.2. Understanding image types and their applications
5.2.1. Working with raster images
5.2.2. Working with SVG images
5.2.3. Knowing what image formats to use
5.3. Image delivery in CSS
5.3.1. Targeting displays in CSS by 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
Chapter 6. Going further with images
6.1. Using image sprites
6.1.1. Getting 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
Chapter 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 by using the unicode-range property
7.4. Optimizing the loading of fonts
7.4.1. Understanding font-loading problems
7.4.2. Using the CSS font-display property
7.4.3. Using the font-loading API
7.4.4. Using Font Face Observer as a fallback
7.5. Summary
Chapter 8. Keeping JavaScript lean and fast
8.1. Affecting script-loading behavior
8.1.1. Placing the <script> element properly
8.1.2. Working with asynchronous script loading
8.1.3. Using async
8.1.4. Using async reliably with multiple scripts
8.2. Using leaner jQuery-compatible alternatives
8.2.1. Comparing the alternatives
8.2.2. Exploring the contenders
8.2.3. Comparing file size
8.2.4. Comparing performance
8.2.5. Implementing an alternative
8.2.6. Using Zepto
8.2.7. Understanding caveats on using Shoestring or Sprint
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.3.6. Using the Fetch API
8.3.7. Polyfilling the Fetch API
8.4. Animating with requestAnimationFrame
8.4.1. requestAnimationFrame at a glance
8.4.2. Timer function-driven animations and requestAnimationFrame
8.4.3. Comparing performance
8.4.4. Implementing requestAnimationFrame
8.4.5. Dropping in Velocity.js
8.5. Summary
Chapter 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. Registering the service worker
9.2.3. Intercepting and caching network requests
9.2.4. Measuring the performance benefits
9.2.5. 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
Chapter 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.2.3. Invalidating cached assets
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
Chapter 11. Looking to the future with HTTP/2
11.1. Understanding why we need HTTP/2
11.1.1. Understanding the problem with HTTP/1
11.1.2. Solving common HTTP/1 problems via HTTP/2
11.1.3. Writing a simple HTTP/2 server in Node
11.1.4. Observing the benefits
11.2. Exploring how optimization techniques change for HTTP/2
11.2.1. Asset granularity and caching effectiveness
11.2.2. Identifying performance antipatterns for HTTP/2
11.3. Sending assets preemptively with Server Push
11.3.1. Understanding Server Push and how it works
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
Chapter 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
Appendix A. Tools reference
A.1. Web-based tools
A.2. Node.js-based tools
A.2.1. Web servers and related middleware
A.2.2. Image processors and optimizers
A.2.3. Minifiers/reducers
A.2.4. Font conversion tools
A.2.5. gulp and gulp plugins
A.2.6. PostCSS and PostCSS plugins
A.3. Other tools
Appendix B. Native equivalents of common jQuery functionality
B.1. Selecting elements
B.2. Checking DOM readiness
B.3. Binding events
B.3.1. Simple event binding
B.3.2. Triggering events programmatically
B.3.3. Targeting elements that don’t exist yet
B.3.4. Removing event bindings
B.4. Iterating over a set of elements
B.5. Manipulating classes on elements
B.6. Accessing and modifying styles
B.7. Getting and setting attributes
B.8. Getting and setting element contents
B.9. Replacing elements
B.10. Hiding and showing elements
B.11. Removing elements
B.12. Going further
Index
List of Figures
List of Tables
List of Listings