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 full-size slide

  2. calibreapp.com

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  6. User navigates

    View full-size slide

  7. User navigates

    View full-size slide

  8. User navigates
    First Paint

    View full-size slide

  9. User navigates
    First Paint

    View full-size slide

  10. User navigates
    First Paint

    View full-size slide

  11. User navigates
    First Paint First Contentful Paint

    View full-size slide

  12. User navigates
    First Paint First Contentful Paint

    View full-size slide

  13. User navigates
    First Paint First Contentful Paint

    View full-size slide

  14. User navigates
    First Paint First Contentful Paint
    First Meaningful Paint

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. Load + Render Timeline

    View full-size slide

  18. Load + Render Timeline

    View full-size slide

  19. onLoad
    Load + Render Timeline

    View full-size slide

  20. onLoad
    First Meaningful Paint
    Load + Render Timeline

    View full-size slide

  21. onLoad
    First Meaningful Paint
    Load + Render Timeline

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  25. 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 full-size slide

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

    View full-size slide

  27. Resource queuing

    View full-size slide




  28. My website





    Resource queuing

    View full-size slide




  29. My website





    Resource queuing
    Queue

    View full-size slide




  30. My website





    app.css
    Resource queuing
    Queue

    View full-size slide




  31. My website





    app.css
    app.js
    Resource queuing
    Queue

    View full-size slide




  32. My website





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

    View full-size slide

  33. Inspecting request priority

    View full-size slide

  34. Inspecting request priority

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. 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 full-size slide

  38. 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 full-size slide

  39. 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 full-size slide

  40. 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 full-size 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)
    • XHR/Fetch (High)
    • Fonts (Highest)
    • Scripts (Low, Medium or High!)
    … and how they are referenced

    View full-size slide

  42. 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 full-size slide

  43. How fonts are fetched

    View full-size slide

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

    View full-size slide

  45. 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 full-size slide

  46. 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 full-size slide

  47. Auditing and improving performance.
    3.

    View full-size slide

  48. Auditing
    atlassian.com

    View full-size slide

  49. Test using poor conditions

    View full-size slide

  50. Test using poor conditions

    View full-size slide

  51. Create a performance trace

    View full-size slide

  52. Create a performance trace

    View full-size slide


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

    View full-size slide


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

    View full-size slide

  55. Local overrides

    View full-size slide

  56. Local overrides

    View full-size slide




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

    View full-size slide

  58. 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 full-size slide

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

    View full-size slide

  60. 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 full-size slide

  61. @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 full-size slide

  62. 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 full-size slide

  63. 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 full-size slide

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

    View full-size slide

  65. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  68. Audit
    improvement
    notes

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  71. 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 full-size slide

  72. 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 full-size slide

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


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

    View full-size slide

  74. Audit
    checklist

    View full-size slide

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

    View full-size slide

  76. 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 full-size slide

  77. 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 full-size slide

  78. 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 full-size slide

  79. 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 full-size slide

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

    View full-size slide

  81. Project timeline
    Performance usually happens here

    View full-size slide

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

    View full-size slide

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

    When performance should happen

    View full-size slide

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

    View full-size slide


  85. 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 full-size slide

  86. Performance workbook

    View full-size slide

  87. Performance workbook

    View full-size slide

  88. Performance workbook
    Estimated gain Achieved gain Difficulty Estimated cost

    View full-size slide

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

    View full-size slide

  90. 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 full-size slide

  91. 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 full-size slide

  92. 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 full-size slide

  93. 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 full-size slide

  94. 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 full-size slide

  95. 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 full-size slide

  96. The
    performance
    advocate’s
    manifesto

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  99. 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 full-size slide

  100. 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 full-size slide

  101. 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 full-size slide

  102. calibreapp.com

    View full-size slide

  103. @benschwarz
    Cheers
    calibreapp.com

    View full-size slide