My Website Is Slow!
 Where Do I Start?

Transcript

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

   Where Do I Start?
   Harry Roberts – @csswizardry
   

   View Slide

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

   View Slide

3. View Slide

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

   View Slide

5. Where do I start?!
   

   View Slide

6. Guess
   

   View Slide

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

   View Slide

8. Client-Supplied URLs
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. View Slide

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

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. Site-Speed Topography
    

    View Slide

19. View Slide

20. 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: 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
    

    View Slide

21. “The physical appearance of
    

    the natural features of an area of land,
    

    especially the shape of its surface.”
    

    View Slide

22. View Slide

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

    View Slide

24. View Slide

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

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. Implied Issues
    Shortcuts
    Delta between TTFB and FCP is render-blocking resources (i.e. your ).
    
    
    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.
    

    View Slide

30. 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?
    

    View Slide

31. View Slide

32. Why is the homepage LCP so slow?
    

    View Slide

33. View Slide

34. Why is SRP first-byte so slow?
    

    View Slide

35. View Slide

36. Why does the Model page have poor SI?
    

    View Slide

37. View Slide

38. Largest != most important.
    

    View Slide

39. speakerdeck.com/csswizardry/lcp
    

    View Slide

40. Why does the PDP shift so much?
    

    View Slide

41. View Slide

42. Why does the SRP shift so much?
    

    View Slide

43. View Slide

44. Why are the PDP and SRP so much slower?
    

    View Slide

45. View Slide

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

    View Slide

47. View Slide

48. 
    

    View Slide

49. Problem: That was all based on assumptions.
    

    View Slide

50. URLs
    
    
    Location
    
    
    Device type
    
    
    Network conditions
    

    View Slide

51. URL Problem? Solution
    

    View Slide

52. — unsplash.com/photos/nEJmnfCCPmI
    

    View Slide

53. Google Analytics
    

    View Slide

54. View Slide

55. View Slide

56. Behavior » Site Speed » Overview
    

    View Slide

57. View Slide

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

    View Slide

59. View Slide

60. View Slide

61. Behavior » Site Speed » Page Timings
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

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

    View Slide

66. Site Speed is not a number.
    

    View Slide

67. Site Speed is not a number.
    

    View Slide

68. … » Site Speed » Page Timings » Distribution
    

    View Slide

69. 30.26 + 46.40 = 76.66%
    

    View Slide

70. 94.8%
    

    View Slide

71. View Slide

72. 
    

    View Slide

73. Problem: This will be gone on 1 July 2023
    

    View Slide

74. View Slide

75. View Slide

76. Chrome User eXperience Report
    

    View Slide

77. developer.chrome.com/docs/crux
    

    View Slide

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

    View Slide

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

    View Slide

80. pagespeed.web.dev
    

    View Slide

81. View Slide

82. CrUX API
    

    View Slide

83. $ curl -s --request POST 'https://
    

    chromeuxreport.googleapis.com/v1/records:queryRecord?
    

    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"]}'
    

    View Slide

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

    View Slide

85. Problem: You still need to decide the URLs.
    

    View Slide

86. Problem: You need to graph the data.
    

    View Slide

87. Treo
    

    View Slide

88. #notAnAd
    

    View Slide

89. View Slide

90. View Slide

91. View Slide

92. View Slide

93. View Slide

94. View Slide

95. View Slide

96. Not one of those URLs was in our initial list!
    

    View Slide

97. View Slide

98. View Slide

99. Back to WebPageTest!
    

    View Slide

100. Search Console
     

     View Slide

101. search.google.com
     

     View Slide

102. Insights on a plate.
     

     View Slide

103. Search Console » Core web vitals
     

     View Slide

104. View Slide

105. View Slide

106. View Slide

107. URL Groups
     

     View Slide

108. www.site.com
     

     View Slide

109. www.site.com/forum/
     

     View Slide

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

     View Slide

111. View Slide

112. View Slide

113. View Slide

114. URL Groups are a bit of a mess…
     

     View Slide

115. View Slide

116. Back to WebPageTest!
     

     View Slide

117. Summary
     

     View Slide

118. URL Problem? Solution
     

     View Slide

119. Gather data from various sources.
     

     View Slide

120. Use smart shortcuts.
     

     View Slide

121. Use new insights to inform future testing.
     

     View Slide

122. Go looking for trouble.
     

     View Slide

123. Problem URL Solution
     

     View Slide

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

     View Slide