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

The Critical Request

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

Other Decks in Programming

Transcript

  1. The Critical Request
    Ben Schwarz
    @benschwarz
    !

    View Slide

  2. calibreapp.com

    View Slide

  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)

    View Slide

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

    View Slide

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

    View Slide

  6. View Slide

  7. User navigates

    View Slide

  8. User navigates

    View Slide

  9. User navigates
    First Paint

    View Slide

  10. User navigates
    First Paint

    View Slide

  11. User navigates
    First Paint

    View Slide

  12. User navigates
    First Paint First Contentful Paint

    View Slide

  13. User navigates
    First Paint First Contentful Paint

    View Slide

  14. User navigates
    First Paint First Contentful Paint

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  18. Load + Render Timeline

    View Slide

  19. Load + Render Timeline

    View Slide

  20. onLoad
    Load + Render Timeline

    View Slide

  21. onLoad
    First Meaningful Paint
    Load + Render Timeline

    View Slide

  22. onLoad
    First Meaningful Paint
    Load + Render Timeline

    View Slide

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

    View Slide

  24. onLoad
    First Meaningful Paint
    First Meaningful Paint
    Text & Lead content has been rendered

    View Slide

  25. ← Critical requests
    A critical request is one that contains
    an asset that is essential to the content
    within the users viewport

    View Slide

  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

    View Slide

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

    View Slide

  28. Resource queuing

    View Slide




  29. My website





    Resource queuing

    View Slide




  30. My website





    Resource queuing
    Queue

    View Slide




  31. My website





    app.css
    Resource queuing
    Queue

    View Slide




  32. My website





    app.css
    app.js
    Resource queuing
    Queue

    View Slide




  33. My website





    app.css
    app.js
    font.woff
    Resource queuing
    Queue

    View Slide

  34. Inspecting request priority

    View Slide

  35. Inspecting request priority

    View Slide

  36. View Slide

  37. View Slide

  38. app.css
    app.js
    font.woff
    Assets are prioritised by type
    Queue
    Highest
    High
    Lowest
    … and how they are referenced

    View Slide

  39. app.css
    app.js
    font.woff
    Assets are prioritised by type
    Queue
    Highest
    High
    Lowest
    • HTML (Highest)
    … and how they are referenced

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    High (when placed before )
    Otherwise, Medium



    Low Priority

    View Slide

  46. How fonts are fetched

    View Slide

  47. How fonts are fetched
    1. The stylesheet targets an element with a font declaration
    body { font-family: Calibre; }

    View Slide

  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");
    }

    View Slide

  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");
    }

    View Slide

  50. Auditing and improving performance.
    3.

    View Slide

  51. Auditing
    atlassian.com

    View Slide

  52. Test using poor conditions

    View Slide

  53. Test using poor conditions

    View Slide

  54. Create a performance trace

    View Slide

  55. Create a performance trace

    View Slide

  56. View Slide

  57. View Slide


  58. Preload
    Critical, essential resources.
    Required for fonts!
    HTML

    View Slide


  59. Preload
    Critical, essential resources.
    Required for fonts!
    HTML
    Link: ; rel=preload; as=font; crossorigin
    As a HTTP Header

    View Slide

  60. Local overrides

    View Slide

  61. Local overrides

    View Slide




  62. Use preload for critical resources
    Every browser that supports preload
    also supports WOFF. Preload those!

    View Slide

  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

    View Slide

  64. HTML
    CSS
    Font Weight 1
    Font Weight 2
    Font Weight 3
    Network timeline
    After preload
    2-3 seconds until text is visible

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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

    View Slide

  69. HTML
    CSS
    Font Weight 1
    Font Weight 2
    Font Weight 3
    Network timeline
    After font-display
    Text is always visible

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

  73. Audit
    improvement
    notes

    View Slide

  74. Audit
    improvement
    notes
    1. Use to
    preload essential fonts.

    View Slide

  75. Audit
    improvement
    notes
    1. Use to
    preload essential fonts.
    2. Use font-display: swap; to ensure
    text is always visible.

    View Slide

  76. Audit
    improvement
    notes
    1. Use 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.

    View Slide

  77. Audit
    improvement
    notes
    1. Use 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.

    View Slide

  78. Priority Hints
    github.com/WICG/priority-hints


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

    View Slide

  79. Audit
    checklist

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

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

    View Slide

  86. Project timeline
    Performance usually happens here

    View Slide

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

    View Slide

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

    When performance should happen

    View Slide

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

    View Slide


  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

    View Slide

  91. Performance workbook

    View Slide

  92. Performance workbook

    View Slide

  93. Performance workbook
    Estimated gain Achieved gain Difficulty Estimated cost

    View Slide

  94. Performance workbook
    Estimated gain Achieved gain Difficulty Estimated cost
    Preload fonts 3 — 5 seconds FMP 3 seconds to FMP Easy Low

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  101. The
    performance
    advocate’s
    manifesto

    View Slide

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

    View Slide

  103. The
    performance
    advocate’s
    manifesto
    1. Performance is a baseline requirement.
    2. Every addition has a cost, therefore it
    should have a value.

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  107. calibreapp.com

    View Slide

  108. @benschwarz
    Cheers
    calibreapp.com

    View Slide