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

The Critical Request

Ben Schwarz
June 21, 2018
Programming
11
6.7k

The Critical Request

The Critical Request: An investigation into what blocks render
Serving a website seems pretty simple: send some HTML, the browser figures out what resources to load next. Then we wait patiently for the page to be ready.

However, browsers are complex and without a firm grasp on how resources are prioritized, fetched and rendered we’re needlessly penalising our customers with serious performance repercussions.

In this talk we’ll study how browsers determine which requests should be made, in what order, and what prevents the browser from rendering content quickly.

We’ll perform a live performance audit and demonstrate how to make meaningful improvements that go beyond current industry practices of “compress things and make less requests”. After this session people of all backgrounds should have a better understanding of where to start improving webperf immediately.

See the article that started the Critical Request - https://calibreapp.com/blog/critical-request/

Ben Schwarz

June 21, 2018
Tweet

More Decks by Ben Schwarz

See All by Ben Schwarz
Beyond the bubble
benschwarz
0
640
Vanity performance metrics — Looking beyond the numbers
benschwarz
15
3.2k
Useful performance metrics
benschwarz
19
3.8k

Other Decks in Programming

See All in Programming
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
370
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
160
CSC305 Lecture 13
javiergs
PRO
0
130
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
400
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ～俺のやらかしを越えてゆけ～
techouse
52
32k
Progressive Web Apps für Desktop und Mobile mit Angular (Hands-on)
christianliebel
PRO
0
110
色々なIaCツールを実際に触って比較してみる
iriikeita
0
270
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
macOS でできる リアルタイム動画像処理
biacco42
7
2k
Amazon Neptuneで始めてみるグラフDB －OpenSearchによるグラフの全文検索－
satoshi256kbyte
4
330
Googleのテストサイズを活用したテスト環境の構築
toms74209200
0
270
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140

Featured

See All Featured
YesSQL, Process and Tooling at Scale
rocio
167
14k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Making the Leap to Tech Lead
cromwellryan
132
8.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.9k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
GitHub's CSS Performance
jonrohan
1030
460k
What's in a price? How to price your products and services
michaelherold
243
12k

Transcript

  1. The Critical Request Ben Schwarz @benschwarz !

  2. calibreapp.com

  3. Performance status quo Follow the rules you know and love

    • Serve less requests • Use compression everywhere possible (Brotli, GZip) • Bundle and minimise scripts (UglifyJS) • Use asset hashing (app-0ff97b5.js), with “forever” cache headers • Use CDNs (Fastly, Netlify, Cloudflare, Cloudfront)

  4. Performance through the eyes of your users. 1.

  5. Users lose focus after 1 second. Abandonment rises dramatically after

    10 seconds.
  6. None

  7. User navigates

  8. User navigates

  9. User navigates First Paint

  10. User navigates First Paint

  11. User navigates First Paint

  12. User navigates First Paint First Contentful Paint

  13. User navigates First Paint First Contentful Paint

  14. User navigates First Paint First Contentful Paint

  15. User navigates First Paint First Contentful Paint First Meaningful Paint

  16. User navigates First Paint First Contentful Paint First Meaningful Paint

  17. User navigates First Paint First Contentful Paint First Meaningful Paint

  18. Load + Render Timeline

  19. Load + Render Timeline

  20. onLoad Load + Render Timeline

  21. onLoad First Meaningful Paint Load + Render Timeline

  22. onLoad First Meaningful Paint Load + Render Timeline

  23. Focus on these requests onLoad First Meaningful Paint Load +

    Render Timeline

  24. onLoad First Meaningful Paint First Meaningful Paint Text & Lead

    content has been rendered

  25. ← Critical requests A critical request is one that contains

    an asset that is essential to the content within the users viewport

  26. Often, these are: 1. CSS for the elements 
 on

    the page 2. Fonts 3. Logo 4. A lead image ← Critical requests A critical request is one that contains an asset that is essential to the content within the users viewport

  27. How do browsers decide which resources should be fetched? 2.

  28. Resource queuing

  29. <!DOCTYPE html> <html> <head> <title>My website </title> <link rel="stylesheet" media="screen"

    href="/css/app.css" /> <script src="app.js" async> </script> </head> <body> … Resource queuing

  30. <!DOCTYPE html> <html> <head> <title>My website </title> <link rel="stylesheet" media="screen"

    href="/css/app.css" /> <script src="app.js" async> </script> </head> <body> … Resource queuing Queue

  31. <!DOCTYPE html> <html> <head> <title>My website </title> <link rel="stylesheet" media="screen"

    href="/css/app.css" /> <script src="app.js" async> </script> </head> <body> … app.css Resource queuing Queue

  32. <!DOCTYPE html> <html> <head> <title>My website </title> <link rel="stylesheet" media="screen"

    href="/css/app.css" /> <script src="app.js" async> </script> </head> <body> … app.css app.js Resource queuing Queue

  33. <!DOCTYPE html> <html> <head> <title>My website </title> <link rel="stylesheet" media="screen"

    href="/css/app.css" /> <script src="app.js" async> </script> </head> <body> … app.css app.js font.woff Resource queuing Queue

  34. Inspecting request priority

  35. Inspecting request priority

  36. None
  37. None

  38. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest … and how they are referenced

  39. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) … and how they are referenced

  40. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) • Styles (Highest) … and how they are referenced

  41. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) • Styles (Highest) • Images (Low or Medium) … and how they are referenced

  42. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) • Styles (Highest) • Images (Low or Medium) • XHR/Fetch (High) … and how they are referenced

  43. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) • Styles (Highest) • Images (Low or Medium) • XHR/Fetch (High) • Fonts (Highest) … and how they are referenced

  44. app.css app.js font.woff Assets are prioritised by type Queue Highest

    High Lowest • HTML (Highest) • Styles (Highest) • Images (Low or Medium) • XHR/Fetch (High) • Fonts (Highest) • Scripts (Low, Medium or High!) … and how they are referenced

  45. Javascript request priorities For an in depth guide, see https://www.html5rocks.com/en/tutorials/speed/script-loading/

    by @jaffathecake <script src="name.js"> </script> High (when placed before <img>) Otherwise, Medium <script src=“name.js" async> </script> <script src=“name.js" defer> </script> <script src=“name.js" type=“module”> </script> Low Priority

  46. How fonts are fetched

  47. How fonts are fetched 1. The stylesheet targets an element

    with a font declaration body { font-family: Calibre; }

  48. How fonts are fetched 1. The stylesheet targets an element

    with a font declaration body { font-family: Calibre; } 2. The stylesheet has a corresponding @font-face declaration @font-face { font-family: "Calibre"; src: url("/fonts/calibre.woff2") format("woff2"), url("/fonts/calibre.woff") format("woff"); }

  49. How fonts are fetched 1. The stylesheet targets an element

    with a font declaration body { font-family: Calibre; } 3. There is text to render 2. The stylesheet has a corresponding @font-face declaration @font-face { font-family: "Calibre"; src: url("/fonts/calibre.woff2") format("woff2"), url("/fonts/calibre.woff") format("woff"); }

  50. Auditing and improving performance. 3.

  51. Auditing atlassian.com

  52. Test using poor conditions

  53. Test using poor conditions

  54. Create a performance trace

  55. Create a performance trace

  56. None
  57. None

  58. <link rel=“preload” href=“font.woff” as=“font” crossorigin /> Preload Critical, essential resources.

    Required for fonts! HTML

  59. <link rel=“preload” href=“font.woff” as=“font” crossorigin /> Preload Critical, essential resources.

    Required for fonts! HTML Link: <font.woff>; rel=preload; as=font; crossorigin As a HTTP Header

  60. Local overrides

  61. Local overrides

  62. <link rel="preload" href="/lineto-circular-book-c.woff" crossorigin as="font" /> <link rel="preload" href="/lineto-circular-medium-c.woff" crossorigin

    as="font" /> <link rel="preload" href=“/lineto-circular-bold-c.woff" crossorigin as="font" /> Use preload for critical resources Every browser that supports preload also supports WOFF. Preload those!

  63. HTML CSS Font Weight 1 Font Weight 2 Font Weight

    3 Network timeline Text gets rendered here Before preload 5-7 seconds until text is visible

  64. HTML CSS Font Weight 1 Font Weight 2 Font Weight

    3 Network timeline After preload 2-3 seconds until text is visible

  65. HTML CSS Font Weight 1 Font Weight 2 Font Weight

    3 Network timeline After preload 2-3 seconds until text is visible Text gets rendered here

  66. @font-face { font-family: LLCircularWeb; src: url(/lineto-circular-black-c.woff) format("woff"); font-weight: 800; font-style:

    normal; font-display: swap;
 } Add font-display: swap “ Display the text until the web font has loaded, then swap it out.

  67. HTML Network timeline Before font-display 2-3 seconds until text is

    visible HTML CSS Font Weight 1 Font Weight 2 Font Weight 3

  68. HTML Network timeline Before font-display 2-3 seconds until text is

    visible HTML CSS Font Weight 1 Font Weight 2 Font Weight 3 Text gets rendered here

  69. HTML CSS Font Weight 1 Font Weight 2 Font Weight

    3 Network timeline After font-display Text is always visible

  70. HTML CSS Font Weight 1 Font Weight 2 Font Weight

    3 Network timeline After font-display Text is always visible Text gets rendered here

  71. Font style matcher https://meowni.ca/font-style-matcher/ Monica Dinculescu @notwaldorf

  72. Font style matcher https://meowni.ca/font-style-matcher/ Monica Dinculescu @notwaldorf

  73. Audit improvement notes

  74. Audit improvement notes 1. Use <link rel=“preload” /> to preload

    essential fonts.

  75. Audit improvement notes 1. Use <link rel=“preload” /> to preload

    essential fonts. 2. Use font-display: swap; to ensure text is always visible.

  76. Audit improvement notes 1. Use <link rel=“preload” /> to preload

    essential fonts. 2. Use font-display: swap; to ensure text is always visible. 3. Have font fallbacks that look similar to avoid changes when webfonts load.

  77. Audit improvement notes 1. Use <link rel=“preload” /> to preload

    essential fonts. 2. Use font-display: swap; to ensure text is always visible. 3. Have font fallbacks that look similar to avoid changes when webfonts load. 4. Use woff2, woff where possible.

  78. Priority Hints github.com/WICG/priority-hints <img src=“image.jpg” importance=“high” /> <img src=“carousel-1.jpg” importance=“low”

    /> await fetch(‘api/endpoint.json’, {importance: ‘low’}) Experimental

  79. Audit checklist

  80. Audit checklist 1. Test under poor conditions to highlight performance

    issues.

  81. Audit checklist 1. Test under poor conditions to highlight performance

    issues. 2. Use the performance panel to explore the relationship between render, asset fetching, paints and JavaScript execution.

  82. Audit checklist 1. Test under poor conditions to highlight performance

    issues. 2. Use the performance panel to explore the relationship between render, asset fetching, paints and JavaScript execution. 3. Ensure critical requests are prioritised.

  83. Audit checklist 1. Test under poor conditions to highlight performance

    issues. 2. Use the performance panel to explore the relationship between render, asset fetching, paints and JavaScript execution. 3. Ensure critical requests are prioritised. 4. Iterate from good to great.

  84. Audit checklist 1. Test under poor conditions to highlight performance

    issues. 2. Use the performance panel to explore the relationship between render, asset fetching, paints and JavaScript execution. 3. Ensure critical requests are prioritised. 4. Iterate from good to great.

  85. Becoming a successful performance advocate at your company. 4.

  86. Project timeline Performance usually happens here

  87. Project timeline “Hey, is the website fast?” “ahhhh, um…”

  88. Project timeline “Let’s make this really great!” When performance should

    happen

  89. It ain't done until it's fast It ain't done until

    it's accessible

  90. … Can we schedule some more performance work? I have

    no idea how long it’ll take but we’ll hope for the best! Your manager You, without a plan

  91. Performance workbook

  92. Performance workbook

  93. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost

  94. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low

  95. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low Font-display: swap Instant text rendering Instant text rendering Easy Low

  96. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low Font-display: swap Instant text rendering Instant text rendering Easy Low Remove all webfonts Less download? ? Political hurdles with branding team

  97. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low Font-display: swap Instant text rendering Instant text rendering Easy Low Remove all webfonts Less download? ? Political hurdles with branding team Rewrite app in React ? ? Hard Very expensive

  98. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low Font-display: swap Instant text rendering Instant text rendering Easy Low Remove all webfonts Less download? ? Political hurdles with branding team Rewrite app in React ? ? Hard Very expensive Remove ads 10 seconds time to interactive improvement on mobile devices ? Medium All our revenue

  99. Performance workbook Estimated gain Achieved gain Difficulty Estimated cost Preload

    fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low Font-display: swap Instant text rendering Instant text rendering Easy Low Remove all webfonts Less download? ? Political hurdles with branding team Rewrite app in React ? ? Hard Very expensive Remove ads 10 seconds time to interactive improvement on mobile devices ? Medium All our revenue Delete all Javascript No JS, no problems ? Easy

  100. Sure Can we schedule some more performance work? I’ve summarised

    some research and ideas in this spreadsheet… I can run you through the details over a coffee? Your manager You, an intellectual

  101. The performance advocate’s manifesto

  102. The performance advocate’s manifesto 1. Performance is a baseline requirement.

  103. The performance advocate’s manifesto 1. Performance is a baseline requirement.

    2. Every addition has a cost, therefore it should have a value.

  104. The performance advocate’s manifesto 1. Performance is a baseline requirement.

    2. Every addition has a cost, therefore it should have a value. 3. Performance testing should be automated.

  105. The performance advocate’s manifesto 1. Performance is a baseline requirement.

    2. Every addition has a cost, therefore it should have a value. 3. Performance testing should be automated. 4. Draw conclusions and act on observed performance data.

  106. The performance advocate’s manifesto 1. Performance is a baseline requirement.

    2. Every addition has a cost, therefore it should have a value. 3. Performance testing should be automated. 4. Draw conclusions and act on observed performance data.

  107. calibreapp.com

  108. @benschwarz Cheers calibreapp.com