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