Speed Metrics Guide Choosing the Right Metrics to Use When Evaluating Websites
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...
| Otros Autores: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Berkeley, CA :
Apress
2024.
|
| Edición: | 1st ed. 2024. |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009803405506719 |
Tabla de Contenidos:
- Intro
- 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.
