Jump Start Web Performance

Book description

Despite working on the web every day, few developers have a good word to say about the monster they've created. Achingly slow sites with annoying overlays, cookie agreements, instant notifications, and obtrusive ads litter the web landscape.

While there may be some excuses for complex web applications, there's little justification for sluggish content-based and ecommerce sites. People are notoriously impatient, and an unresponsive site receives fewer visitors and conversions.

This practical, short book provides advice, tips, and best practice for improving website performance, ranging from quick, five-minute configuration changes to major website overhauls. We primarily concentrate on front-end activities and server configurations to optimize the code delivered to a browser. Some back-end tips are provided, but this is often specific to your application, framework, database, and usage patterns. Server-side performance can often be improved with additional or more powerful computing resources.

Ideally, everyone involved in a project would consider performance from the start. Somewhat understandably, that rarely occurs, because no one can appreciate the speed of a website or application before it's been created. Many of the tips contained in this book can therefore be applied after your project has been delivered.

Publisher resources

View/Submit Errata

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!

Product information

  • Title: Jump Start Web Performance
  • Author(s): Craig Buckler
  • Release date: February 2020
  • Publisher(s): SitePoint
  • ISBN: 9781925836332

You might also like

book

ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化

by Ilya Grigorik, 和田 祐一郎/株式会社プログラミングシステム社

現代のアプリケーションエンジニアは、UIやデータ処理、開発言語、プラットフォームの仕様や癖だけでなく、サーバやネットワークについても、上から下まで、表から裏まで広く知ることを求められます。本書は「ブラウザ」に関連し、インターネットで使用されるさまざまなネットワーク技術をまとめたものです。HTTP/2.0やWebRTCなどの最新技術、WebSocketやXMLHttpRequestなどのブラウザAPI、そしてそれらの土台となるTCPやUDPやトランスポート層についてまでを幅広くカバーします。また改善前後の性能・速さを可能な限り具体化し、それぞれの場面においてのパフォーマンス改善幅を示します。

article

Use GitHub Copilot: Additional Tips

by Rizel Scarlett

Using GitHub Copilot can feel like magic. The tool automatically fills out entire blocks of code--but …

article

Run Llama-2 Models Locally with llama.cpp

by Federico Castanedo

Llama is Meta’s answer to the growing demand for LLMs. Unlike its well-known technological relative, ChatGPT, …

book

Back-end Performance

by Bruno Skvorc, Christopher Pitt, Tonino Jankov, Reza Lavaryan, Daniel Berman

Performance simply matters. Technology may allow us to "go bigger", but maybe not necessarily be better …