Speed metrics guide : choosing the right metrics to use when evaluating websites

Faster websites offer a better user experience and typically have higher conversion rates. It can be challenging to know where to invest to meaningfully improve a website's speed. Investing correctly to improve speed starts with understanding how to correctly measure speed and knowing how to use those measurements to identify the biggest opportunities. Speed Metrics Guide helps marketers, SEOs, business leaders, designers, and everybody else involved in website performance select the right metrics to use to optimize their website's speed. Each chapter examines a specific metric, discusses what it measures, why the metric matters and what tactics will help improve that metric. What You'll Learn The best metrics and tools to help you measure website speed, including Google's Core Web Vitals How and when to best use each metric Where each metric fits within the website loading process How to use each metric to find different ways of improving website speed Who This book Is For Non-technical audience, including marketers, SEOs, designers, and UX professionals. 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 Why is my website loading slowly? Where should I invest to improve speed? How do I know if those changes made a difference? This book will answer these questions and provide the metrics available to measure website speed. Everybody who manages and maintains a website needs to measure the website's speed. Everybody has a role to play in improving the website's speed. SEOs need to improve core web vitals to compete in organic rankings. Marketers need to improve speed to increase conversion rates. Designers need to create faster websites to improve the user experience. Speed Metrics Guide will help marketers, SEOs, business executives, founders, designers, and more know which metrics to use when measuring their website's speed. Learn how to measure each metric, when it is best to use each metric, and what to do when each metric is slow. What You Will Learn The most important metrics to use to measure website speedThe meaning of each metric and what to do if that metric is slowerWhen to use a given metric and how to measure it Who This Book is For A non-technical audience, including marketers, SEOs, designers, and UX professionals looking to decide what metrics to use to measure website speed so that you can address the correct speed problems on the website Why is my website loading slowly? Where should I invest to improve speed? How do I know if those changes made a difference? This book will answer these questions and provide the metrics available to measure website speed. Everybody who manages and maintains a website needs to measure the website's speed. Everybody has a role to play in improving the website's speed. SEOs need to improve core web vitals to compete in organic rankings. Marketers need to improve speed to increase conversion rates. Designers need to create faster websites to improve the user experience. Speed Metrics Guide will help marketers, SEOs, business executives, founders, designers, and more know which metrics to use when measuring their website's speed. Learn how to measure each metric, when it is best to use each metric, and what to do when each metric is slow. You will: Examine the most important metrics to use to measure website speed Understand the meaning of each metric and what to do if that metric is slower Know when to use a given metric and how to measure it