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

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
df-Capture.PNG
df-Capture.PNG
df-Capture.PNG