Site-Speed Topography Demo

all-pages.jpg

article-page.jpg

documentation.md

Site-Speed Topography

• Official Article
• Example Spreadsheet – please do not share

Site-Wide Overview

1. Identical First Paint and First Contentful Paint mean that we show either a font or an image in our first render—this means we do not have any web-font issues.
2. Large gap between First Contentful and Largest Contentful Paint means we’re waiting a long time for an image.
3. Gaps between Largest Contentful Paint and SpeedIndex means we’re waiting for above-the-fold but not-largest content to paint.
   • This is usually a cookie banner or similar late-loaded content.
4. Gaps between First, First Contentful, and Largest Contentful Paints show a series of issues with firstly a web-font and, secondly, an image.
   • This suggests that this is the only page with a web-font issue—does it use a different font than the others?
5. Identical First, First Contentful, and Largest Contentful Paints mean that our first render contained everything we needed.
   • The largest piece of content on this page was textual.
6. Individual outliers can also be seen in this view. This page has a higher Time to First Byte.
   • Is is expensive to build the search results page on the back-end?

Page-Level Insights

1. Gaps between TTFB and FP suggest render-blocking resources.
2. Gaps between FP and FCP is likely a web-font issue.
3. Gaps between FCP and LCP are slow- or late-loaded images.
4. Gaps between LCP and SI are slow-loading regions of non-largest but above the fold content.