Table of Contents

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

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset