Speed Metrics Guide: Choosing the Right Metrics to Use When Evaluating Websites

✍ Scribed by Matthew Edgar

• Tongue: English
• Leaves: 246
• Category: Library

✦ Table of Contents

Table of Contents
About the Author
Introduction
Part I: Initial Connection
Chapter 1: DNS Lookup Time
What DNS Lookup Time Measures
DNS Resolution Steps
How a Visitor’s Geographic Location Affects DNS Lookup Time
DNS TTL: IP Address Cache Duration
Optimal DNS TTL Value
Implications of Third-party Resources
Measuring DNS Lookup Time
DNS Lookup Time Benchmarks
Global DNS Lookup Time: DNS Speed Benchmark
Domain Connections: WebPageTest
Dig Test: DiG GUI
Ways to Improve DNS Lookup Time
Select Faster DNS Provider
Prefetch Third-Party Domains: dns-prefetch and preconnect
Recap: When to Use DNS Lookup Time
Chapter 2: Time to First Byte (TTFB)
What Time to First Byte Measures
Process Before the Server Sends the First Byte
How Servers Build a Response
How Redirects Impact TTFB
Scenario 1: Redirect Destination URL on the Same Domain
Scenario 2: Redirect Destination URL on Another Domain
Implications of Third-party Resources
Measuring Time to First Byte
TTFB Benchmarks
TTFB by Location: KeyCDN Performance Test
TTFB Details: Byte Check
TTFB Additional Details: WebPageTest
Ways to Improve Time to First Byte
Caching Internal Resources
Choose Faster Hosting Provider
Recap: When to Use Time to First Byte
Part II: Displaying the Page
Chapter 3: DOMContentLoaded Time
What DOMContentLoaded Measures
HTML Parsing
Document Object Model (DOM)
How CSS Affects Parsing
How JavaScript Affects Parsing
Measuring DOMContentLoaded
DCL Time Benchmarks
DOM Size Benchmarks
Browser Timings: GTmetrix
DOM Elements: PageSpeed Insights
DOM Nodes: Google Chrome DevTools
Ways to Improve DOMContentLoaded
HTML Reduction
Changing How JavaScript Loads: Async and Defer
Asynchronous Loading
Deferring JavaScript Load
Recap: When to Use DOMContentLoaded
Chapter 4: Total Requests and Transfer Size
What Total Requests and Transfer Size Measure
Requested File Types
Fetch Priority
Compression
How Images Are Compressed
How Other Files Are Compressed
Measuring Total Requests and Transfer Size
Total Request Benchmarks
Transfer Size Benchmarks
Transfer Size and Resource Size: Chrome DevTools
Total Requests by Type: WebPageTest
Ways to Improve Total Requests and Transfer Size
Consolidating Multiple JavaScript or CSS Files
Domain Sharding and Third-Party Hosts
Make the Files Smaller: Minification
When to Use Total Requests and Transfer Size
Chapter 5: First Contentful Paint
What First Contentful Paint Measures
Critical Rendering Path
CSS Object Model (CSSOM) and Style Calculation
Layout and Reflow
Content Evaluated by FCP
Related Metrics: Start Render and First Paint
How Fonts Affect Painting
Measuring First Contentful Paint
FCP Benchmarks
Visualizing FCP: GTmetrix and WebPageTest
Critical Rendering Path Details: Chrome DevTools
Ways to Improve First Contentful Paint
Font Loading: Avoiding FOIT and FOUT
Lazy Load: Image and Iframe
When to Use First Contentful Paint
Part III: Completing the Website Load
Chapter 6: Time to Interactive and Total Blocking Time
What Time to Interactive and Total Blocking Time Measure
Main Thread
Defining Long Task and Task Blocking Time
Visitor Interactions When the Main Thread Is Blocked
When TTI Occurs
Comparing Importance: TTI vs. TBT
Measuring Time to Interactive and Total Blocking Time
TBT and TTI Benchmarks
Visualize TTI: GTmetrix Speed Visualization
Main Thread Processing: WebPageTest
Find Long Tasks: Chrome DevTools
Ways to Improve Total Blocking Time and  Time to Interactive
Simplify Layout Calculation and Painting: Avoid Layout Thrashing
Move Work Off the Main Thread: Web Workers
When to Use Total Blocking Time and Time to Interactive
Chapter 7: Total Load: Onload Time, Fully Loaded Time, Speed Index
What Do Onload Time, Fully Loaded Time, and Speed Index Measure
Onload Time and Dependent Resources
Fully Loaded Time and Network Idle Time
Speed Index and Visually Complete
Determining When the Website Finishes Loading
Measuring Total Load Metrics
Onload Time Benchmarks
Fully Loaded Time Benchmarks
Speed Index Benchmarks
Onload and Fully Loaded Time: GTmetrix
Speed Index and Visual Progress: WebPageTest
Ways to Improve Total Load Time
Progress Indicators Improve Perception of Speed
Recap: When to Use Total Load Metrics
Part IV: Core Web Vitals
Chapter 8: Largest Contentful Paint
What Largest Contentful Paint Measures
Viewport and First Viewport
Defining “Largest”
How LCP Compares to FCP
When LCP Occurs
Measuring Largest Contentful Paint
LCP Benchmarks
Identify LCP Element: WebPageTest
Measuring Visitor Viewport Size: GA4
Ways to Improve Largest Contentful Paint
Preload LCP Elements
Use Faster Image Formats: WebP and AVIF
Recap: When to Use Largest Contentful Paint
Chapter 9: Cumulative Layout Shift
What Cumulative Layout Shift Measures
Shifting Elements
Layout Shift
Layout Shifts That Are Not Evaluated
Expected vs. Unexpected Shifts
How Layout Shifting Is Scored
Session Windows
How CLS Relates to Speed
Measuring Cumulative Layout Shift
CLS Benchmarks
Identify What Shifts and Session Windows: WebPageTest
Find Shifting Element Coordinates and Viewport Size: Chrome DevTools
Ways to Improve Cumulative Layout Shift
Identify Late-Running JavaScript Files
Reserve Space
Recap: When to Use Cumulative Layout Shift
Chapter 10: Interaction to Next Paint
What Interaction to Next Paint Measures
Events and Event Handler Code
Interaction Process
Measuring Interactions
How INP Relates to FID
How INP Relates to the DOM
How INP Compares to Total Blocking Time and  Time to Interactive
Measuring Interaction to Next Paint
INP Benchmarks
Simulate Interactions: DebugBear's INP Profiler
Breakdown INP: Web Vitals Extension
Find Event Handler Code: Firefox DevTools
Ways to Improve Interaction to Next Paint
Processing Time: Improve Event Handler Code
Presentation Delay: Optimize Animations
Recap: When to Use Interaction to Next Paint
Chapter 11: Conclusion: Choosing Website Speed Metrics
Summary
Appendix A: Metrics Recap
Regular Monitoring
Core Web Vitals – SEO and UX
Speed KPIs
Deeper Diagnostic
For General Communication
Appendix B: PageSpeed Insights
Field Data
Lab Data
Opportunities and Diagnostics
Appendix C: References and Additional Information
Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Appendix B
Index