Jump Start Web Performance

Table of contents

1. Jump Start Web Performance
2. Notice of Rights
3. Notice of Liability
4. Trademark Notice
5. About SitePoint
6. About SiteGround
7. About Craig Buckler
8. Preface
   1. Who Should Read This Book?
   2. Conventions Used
      1. Code Samples
      2. Tips, Notes, and Warnings
   3. Supplementary Materials
9. Chapter 1: Web Performance Matters
   1. The Cost of Poor Performance
      1. User Costs
      2. Business Costs
      3. Environmental Costs
   2. The Reason for the Woeful Web
      1. Excuse #1: “We Don’t Have a Performance Problem!”
      2. Excuse #2: “Our Users Never Complain?”
      3. Excuse #3: “Our Users Have High-end Devices”
      4. Excuse #4: “Our Customers Use Modern Browsers”
      5. Excuse #5: “We’ll Address Performance Later”
      6. Excuse #6: “Some Systems Require More Bandwidth and Processing”
      7. Excuse #7: “Expanding Page Weight is the Price of Progress”
      8. Excuse #8: “Slimming Pages Means Dumbing Down, with Fewer Features and Effects”
      9. Excuse #9: “Improving Performance Increases Complications and Maintenance”
      10. Excuse #10: “Our Client is Happy!”
   3. Where do I Start?
10. Chapter 2: Testing Tools
    1. Create a Test Plan
    2. Identify Performance Bottlenecks
    3. Performance Tool Concepts
       1. The Browser Rendering Process
    4. Google Lighthouse/Chrome Audits
    5. DevTools’ Network Panel
    6. Chrome’s Performance Monitor
    7. Developer Tools’ Performance Panel
    8. DevTools’ Console Logs
       1. performance.now()
       2. Performance Marks and Measures
    9. WebPageTest.org
       1. WebPageTest API
    10. More Performance Assessment Tools
11. Chapter 3: Quick Snacks
    1. Consider Your Hosting Plan
       1. Shared Hosting
       2. Dedicated Server Hosting
       3. Virtual Private Server (VPS) Hosting
       4. Cloud Hosting
       5. Switch to a More Appropriate Hosting Option
       6. Scale Resources
       7. Switch Hosts
    2. Use a Content Delivery Network
    3. Use Image and Video CDNs
       1. Asset Management
       2. Optimal Formatting and Compression
       3. Art Direction, Sizing, and Effects
    4. Activate Server Compression
    5. Activate HTTP/2
    6. Leverage Browser Caching
    7. Enable CMS Page Caching
       1. Are Videos Necessary?
    8. Check Your Primary Images
       1. Resize Large Bitmaps
       2. Choose an Appropriate Image Format
       3. Avoid Base64 Encoding
       4. Compress Images Effectively
    9. Concatenate and Minify CSS
    10. Concatenate and Minify JavaScript
    11. Minify HTML
    12. Load JavaScript at the End of the Page
    13. Preload Assets
    14. Remove Unused Assets
    15. Assess Analytics Performance
    16. Something More Substantial?
12. Chapter 4: Simple Recipes
    1. Optimize Your Database
       1. Use a Query Analyzer
       2. Create Indexes
       3. Simplify Queries
       4. Create Additional Database Connections
       5. Consider a Server or Memory Upgrade
       6. Cache Results
       7. Use Background Processing
       8. Use Alternative Data Systems
    2. Remove or Optimize Social Media Buttons
       1. Use URL-based Share Links
       2. Use the Web Share API
    3. Be Wary of Third-party Scripts
    4. Use Responsive Images
    5. Define Responsive Image Aspect Ratios
    6. Implement Art Direction
    7. Lazy Load Images and Iframes
    8. Play Audio and Video on Demand
    9. Replace Images with CSS3 Effects
    10. Use SVGs Effectively
        1. 1. Add SVGs Using an <img> Tag
        2. 2. Add SVGs as CSS Background Images
        3. 3. Embed SVGs into the Page
    11. Consider Image Sprites
    12. Consider OS Fonts
    13. Embed Web Fonts with <link>
    14. Limit Font Styles and Text
    15. Use a Good Font-loading Strategy
    16. Consider Variable Fonts
    17. Use Modern CSS3 Layouts
    18. Remove Unused CSS
    19. Be Wary of Expensive CSS Properties
    20. Embrace CSS3 Animations
    21. Avoid Animating Expensive Properties
    22. Indicate Which Elements Will Animate
    23. Use CSS Containment
    24. Check the Save-Data Header
    25. Adopt Progressive Web App Technologies
        1. 1. Enable HTTPS
        2. 2. Create a Web App Manifest
        3. 3. Create a Service Worker
    26. Power Down Inactive Tabs
    27. Consider Inlining Critical CSS
    28. Provide Accelerated Mobile Pages (AMP)
    29. Feeling Full Yet?
13. Chapter 5: Life-Changing Diets
    1. Evaluate CMS Templates and Plugins
    2. Reduce Client-side Code
    3. Optimize JavaScript Code
       1. Use JavaScript Sparingly
       2. Avoid Long-running Tasks
       3. Bind Events Sparingly
       4. Analyze Modified Code
    4. Modify the DOM Effectively
       1. Cache Regularly Used Nodes
       2. Minimize Reflows
       3. Batch-update Styles
       4. Batch-update Elements
       5. Use requestAnimationFrame
    5. Consider Progressive Rendering
    6. Use Server-side Rendering
    7. Do You Need a JavaScript or CSS Framework?
    8. Use a Static Site Generator
    9. Use a Build System
    10. Use Progressive Enhancement
    11. Adopt a Performance Budget
    12. Create a Style Guide
    13. Simplify and Streamline
    14. Learn to Love the Web
14. Chapter 6: Check, Please!