Upgrade to Pro — share decks privately, control downloads, hide ads and more …

My Website Is Slow!
 Where Do I Start?

My Website Is Slow!
 Where Do I Start?

Working as a performance consultant, I tend to collaborate with many different clients over the course of a year. Two things they all have in common: they all know their website is slow, but they don’t know why or where.

When some sites can run to dozens of templates across thousands of pages, finding problem areas can feel like shooting in the dark, and making a start can feel completely paralysing. In this talk, we’ll look at some practical approaches, tools, and workflows to quickly and effectively determine where our primary liabilities lie, what they are, and—most importantly—which steps to take first.

Harry Roberts

May 24, 2023

More Decks by Harry Roberts

Other Decks in Technology


  1. Infoshare, Gdańsk – May 2023 My Website Is Slow! 

    Where Do I Start? Harry Roberts – @csswizardry
  2. “How do we know site speed is suffering? Customer complaints?

    Competitor benchmarking? Internal monitoring?”
  3. Guess Please don’t do this. This is a terrible idea.

    I would not recommend that at all I actually used to do this. Click around the site until I happened upon an issue. Day one was paralysing. Sure, I could make educated guesses. But any guess is not ideal.
  4. Client-Supplied URLs Let them do the work… They know their

    website better than I do—they tell me! Let’s think a level up from pages. Representative page types/templates. There are still going to be some blind spots. But this is the easiest place to start.
  5. Glossary JFC, WTF?! ATF: Above the Fold CLS: Cumulative Layout

    Shift CrUX: Chrome User eXperience Report CWV: Core Web Vital FCP: First Contentful Paint FP/SR: First Paint/Start Render GA: Google Analytics LCP: Largest Contentful Paint P<int>: <int>th Percentile PDP: Product Details Page S(E)RP: Search (Engine) Results Page SI: Speed Index TBT: Total Blocking Time TTFB: Time to First Byte
  6. “The physical appearance of 
 the natural features of an

    area of land, 
 especially the shape of its surface.”
  7. Clusters of Red or Green Overall page health. Horizontal runs

    of red show the page performs poorly in many areas. Green shows the opposite. Red at the start (TTFB) usually means red later on (e.g. LCP).
  8. Green to Red Good to bad… Vertically, how do individual

    metrics perform? Patterns usually emerge, but does anything buck the trend?
  9. Variability Our most troublesome metrics TTFB is our most stable

    metric. LCP is our most volatile. Highlights potential underlying differences between page types. The same metric being highly variable usually has significant causes.
  10. Implied Issues Shortcuts Delta between TTFB and FCP is render-blocking

    resources (i.e. your <head>). Delta between FCP and LCP is inefficient LCP candidates (e.g. lazy-loaded). Positive delta between SI and LCP is late-loaded ATF content. Positive delta between FP and FCP may be web-font problems. Highly prone to false-positives—double check everything.
  11. Questions What does it imply? Home and Product pages generally

    healthy; PDP and SRP are generally poor. Home page has great FCP but the worst LCP—lazy-loaded image? SRP has the worst TTFB—expensive/inefficient queries? Why does the model page have the best LCP but the worst SI? Why are the PDP and SRP so slow to start render? SRP has the worst CLS—is it client rendered?
  12. Problem: Load times from every page in every country in

    every browser on every device type, averaged.
  13. Problem: Load times from every page in every country in

    every browser on every device type, averaged.
  14. — developer.chrome.com/docs/crux/about/ “The Chrome User Experience Report [CrUX] is a

    dataset that reflects how real-world Chrome users experience popular destinations on the web.”
  15. $ curl -s --request POST 'https:// 

    KEY>' \ --header 'Accept: application/json' \ --header 'Content-Type: application/json' \ --data '{"formFactor":"PHONE","url":"https:// 
 ["largest_contentful_paint", "first_input_delay", 
  16. "largest_contentful_paint": { "histogram": [ { "start": 0, "end": 2500, "density":

    0.37880096751900411 }, { "start": 2500, "end": 4000, "density": 0.31850380096751846 }, { "start": 4000, "density": 0.30269523151347738 } ], "percentiles": { "p75": 4374 } } ...