List of Listings

Chapter 1. Understanding web performance

Listing 1.1. Configuring the Node HTTP server to use compression

Listing 1.2. Enabling server compression on Apache web servers

Chapter 3. Optimizing CSS

Listing 3.1. LESS and SASS selector nesting

Listing 3.2. LESS/SASS nested selectors after compilation

Listing 3.3. A portion of csscss output

Listing 3.4. Combined CSS rule from csscss output

Listing 3.5. Problematic csscss output

Listing 3.6. Mobile-first CSS boilerplate

Listing 3.7. Box model styling

Listing 3.8. Flexbox styling with flexbox properties in bold

Listing 3.9. Simple CSS hover state transition

Chapter 4. Understanding critical CSS

Listing 4.1. Using the preload resource hint to asynchronously load a CSS file

Listing 4.2. Using PHP to inline a style sheet

Chapter 5. Making images responsive

Listing 5.1. The #masthead styling for the Legendary Tones website

Listing 5.2. Media query breakpoint

Listing 5.3. The universal max-width rule for all img elements

Listing 5.4. The <picture> element on the Legendary Tones website

Listing 5.5. Adding new image treatments for different devices via <picture>

Listing 5.6. Adding images for high-DPI displays by using <picture>

Listing 5.7. Inlined SVG in HTML

Chapter 6. Going further with images

Listing 6.1. Fallback to PNG for browsers without SVG support

Listing 6.2. Using imagemin to optimize all JPEGs in a folder

Listing 6.3. Using imagemin to optimize PNGs

Listing 6.4. Encoding JPEG images into lossy WebP with imagemin

Listing 6.5. Encoding PNG images into lossless WebP with imagemin

Listing 6.6. Establishing fallbacks with <picture>

Listing 6.7. Preparing images for the lazy loading script

Listing 6.8. Beginning the lazy loader

Listing 6.9. The initializing and destroying functions

Listing 6.10. Defining the scanImages method

Listing 6.11. Defining the inViewport method

Listing 6.12. Defining the loadImage method

Listing 6.13. Defining the removeClass property

Chapter 7. Faster fonts

Listing 7.1. @font-face declaration for Open Sans Regular

Listing 7.2. @font-face declarations for remaining Open Sans font variants

Listing 7.3. Apache server configured to compress TTF and EOT fonts

Listing 7.4. unicode-range values

Listing 7.5. @font-face for Open Sans Regular Cyrillic subset

Listing 7.6. Deferring loading of font subsets with JavaScript

Listing 7.7. Using the font-display property

Listing 7.8. Controlling font display by using the fonts-loaded class

Listing 7.9. Using the font-loading API

Listing 7.10. Conditionally adding the fonts-loaded class via PHP

Listing 7.11. <noscript> alternative to JavaScript font loading

Listing 7.12. Conditionally loading Font Face Observer and font-loading scripts

Listing 7.13. Using Font Face Observer to control the loading of fonts

Chapter 8. Keeping JavaScript lean and fast

Listing 8.1. Configuring Alameda and defining behaviors.js as an AMD module

Listing 8.2. jQuery checking for DOM readiness

Listing 8.3. Checking for DOM readiness with addEventListener

Listing 8.4. querySelector and querySelectorAll vs. jQuery’s core $ method

Listing 8.5. Binding a click event on an item with addEventListener

Listing 8.6. jQuery-centric appointment scheduling modal launch code

Listing 8.7. Appointment-scheduling modal event binding using native JavaScript

Listing 8.8. classList vs. jQuery’s removeClass and addClass methods

Listing 8.9. The jQuery-dependent openModal function

Listing 8.10. The jQuery-independent openModal function

Listing 8.11. Modifying attributes with jQuery vs. native JavaScript

Listing 8.12. jQuery’s html method vs. JavaScript’s innerHTML property

Listing 8.13. Attribute and element content modification via jQuery

Listing 8.14. Attribute and element content modification via native JavaScript

Listing 8.15. Getting an attribute via jQuery’s attr method

Listing 8.16. Getting an attribute via the getAttribute method

Listing 8.17. Fetch API–driven AJAX request with a JSON response

Listing 8.18. Fetch API–driven AJAX request

Listing 8.19. Conditionally loading the Fetch API polyfill

Listing 8.20. Animating with a timer function (setTimeout)

Listing 8.21. Animating with requestAnimationFrame

Listing 8.22. Animation function using setTimeout

Listing 8.23. Substituting requestAnimationFrame in place of setTimeout

Listing 8.24. requestAnimationFrame fallback using setTimeout

Chapter 9. Boosting performance with service workers

Listing 9.1. Service worker support detection and installation code

Listing 9.2. Caching assets in the service worker’s install event

Listing 9.3. Intercepting and caching additional assets in the fetch event

Listing 9.4. Adding a regular expression to check for HTML requests

Listing 9.5. Handling HTML requests with a network first/cache for offline pattern

Listing 9.6. Updating the cache name and the assets to cache

Listing 9.7. Removing old caches in the activate event

Chapter 10. Fine-tuning asset delivery

Listing 10.1. Compressing all file types with the compression module

Listing 10.2. A Brotli-capable web server written in Node

Listing 10.3. Configuring the Brotli compression level

Listing 10.4. Setting Cache-Control headers by file type

Listing 10.5. Automated cache invalidation in PHP

Listing 10.6. A reusable fallback script loader

Chapter 11. Looking to the future with HTTP/2

Listing 11.1. Importing modules needed for the HTTP/2 server

Listing 11.2. Setting up SSL certificates on the server

Listing 11.3. Writing the HTTP/2 server behavior

Listing 11.4. Pushing content in Apache when a user requests an HTML file

Listing 11.5. Writing a Server Push response in a Node HTTP/2 server

Listing 11.6. Detecting the HTTP version

Listing 11.7. Adding a class to the <html> tag when the HTTP version downgrades

Listing 11.8. Isolating other requests that don’t require modification

Listing 11.9. Scripts on the Weekly Timber site

Listing 11.10. Optimal handling of scripts for HTTP/1 on the Weekly Timber website

Listing 11.11. Transforming the delivery of scripts based on the HTTP version

Listing 11.12. Serving assets by protocol in PHP

Chapter 12. Automating optimization with gulp

Listing 12.1. Importing all modules needed for the gulpfile

Listing 12.2. The HTML minification task

Listing 12.3. The LESS compilation/CSS optimization task

Listing 12.4. The JavaScript uglification task

Listing 12.5. The script concatenation task

Listing 12.6. Optimizing your PNGs, JEPGs, and SVGs with imagemin

Listing 12.7. The WebP conversion task

Listing 12.8. The watch task

Appendix B. Native equivalents of common jQuery functionality

Listing B.1. Using querySelector and querySelectorAll

Listing B.2. Triggering events programmatically without jQuery

Listing B.3. An event-triggering helper function

Listing B.4. Binding behavior to elements that don’t exist yet without jQuery

Listing B.5. Iterating over a set of elements without jQuery

Listing B.6. Manipulating element classes with jQuery

Listing B.7. Manipulating element classes without jQuery

Listing B.8. Conditionally toggling classes using classList

Listing B.9. Checking for an existing class with classList.contains

Listing B.10. Setting styles with jQuery

Listing B.11. Getting an element’s style without jQuery

Listing B.12. A helper function for setting multiple CSS properties without jQuery

Listing B.13. Setting attributes with jQuery

Listing B.14. Setting attributes without jQuery

Listing B.15. Getting and setting element contents with jQuery

Listing B.16. Getting and setting element contents without jQuery

Listing B.17. Setting an element’s text content

Listing B.18. Hiding and showing elements with the style object

Listing B.19. Removing multiple elements from the DOM without jQuery