My Website Is Slow!  Where Do I Start?

Infoshare, Gdańsk – May 2023 My Website Is Slow!  
Where Do I Start? Harry Roberts – @csswizardry

Hi There! I’m Harry. Consultant Web Performance Engineer Leeds, UK
@csswizardry speakerdeck.com/csswizardry

“How do we know site speed is suffering? Customer complaints?
Competitor benchmarking? Internal monitoring?”

Where do I start?!

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.

Client-Supplied URLs

“Can you provide a list of key pages or flows
for me to look at?”

“Are there any parts of the site to avoid completely?”

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.

Home: https://www.apple.com/ Product: https://www.apple.com/iphone/ Model: https://www.apple.com/iphone-14-pro/ PDP: https://www.apple.com/shop/buy-iphone/iphone-14-pro SRP: https://www.apple.com/us/search/airtag

Site-Speed Topography

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

“The physical appearance of   the natural features of an
area of land,   especially the shape of its surface.”

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).

Green to Red Good to bad… Vertically, how do individual
metrics perform? Patterns usually emerge, but does anything buck the trend?

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.

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.

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?

Why is the homepage LCP so slow?

Why is SRP first-byte so slow?

Why does the Model page have poor SI?

Largest != most important.

speakerdeck.com/csswizardry/lcp

Why does the PDP shift so much?

Why does the SRP shift so much?

Why are the PDP and SRP so much slower?

https://www.apple.com/ https://www.apple.com/iphone/ https://www.apple.com/iphone-14-pro/ https://www.apple.com/shop/buy-iphone/iphone-14-pro https://www.apple.com/us/search/airtag

Problem: That was all based on assumptions.

URLs Location Device type Network conditions

URL Problem? Solution

— unsplash.com/photos/nEJmnfCCPmI

Google Analytics

Behavior » Site Speed » Overview

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

Behavior » Site Speed » Page Timings

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

Site Speed is not a number.

… » Site Speed » Page Timings » Distribution

30.26 + 46.40 = 76.66%

Problem: This will be gone on 1 July 2023

Chrome User eXperience Report

developer.chrome.com/docs/crux

— 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.”

Problem: Only captures Chrome traffic; only captures Core Web Vitals.

pagespeed.web.dev

CrUX API

$ curl -s --request POST 'https://   chromeuxreport.googleapis.com/v1/records:queryRecord?   key=<API
KEY>' \ --header 'Accept: application/json' \ --header 'Content-Type: application/json' \ --data '{"formFactor":"PHONE","url":"https://   www.apple.com/shop/buy-iphone/iphone-14-pro","metrics":   ["largest_contentful_paint", "first_input_delay",   "cumulative_layout_shift"]}'

"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 } } ...

Problem: You still need to decide the URLs.

Problem: You need to graph the data.

#notAnAd

Not one of those URLs was in our initial list!

Back to WebPageTest!

Search Console

search.google.com

Insights on a plate.

Search Console » Core web vitals

URL Groups

www.site.com

www.site.com/forum/

www.site.com/forum/ } } Good Poor

URL Groups are a bit of a mess…

Back to WebPageTest!

Summary

URL Problem? Solution

Gather data from various sources.

Use smart shortcuts.

Use new insights to inform future testing.

Go looking for trouble.

Problem URL Solution

speakerdeck.com/csswizardry Thank You harry.is/for-hire

My Website Is Slow! Where Do I Start?

My Website Is Slow! Where Do I Start?

More Decks by Harry Roberts

Other Decks in Technology

Featured

Transcript

My Website Is Slow!  Where Do I Start?

My Website Is Slow!  Where Do I Start?