Skip to content

Instantly share code, notes, and snippets.

@csswizardry

csswizardry/all-pages.jpg Secret

Last active Feb 22, 2021
Embed
What would you like to do?
Site-Speed Topography Demo

Site-Speed Topography

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment