jargon

Frontend & browser·topic 6 of 13

Loading, assets and the critical path

Byte order matters as much as byte count: the same page can feel instant or broken depending on what the browser was told to fetch first. This is the vocabulary of that ordering, and of the assets that most often get it wrong.

Read in order · tick what you already know

  1. 01

    the page stayed blank until a stylesheet in the head finished downloading from a third-party domain.

    Render-blocking resource

  2. 02

    the script downloaded in parallel but waited to run until the document had finished parsing.

    defer script

  3. 03

    the analytics script downloaded alongside the HTML and ran the moment it arrived, whenever that was.

    async script

  4. 04

    you optimise only what is visible before any scrolling and let everything below load later.

    Above the fold

  5. 05

    the styles for the first screen are inlined in the head and the rest of the stylesheet loads afterwards.

    Critical CSS

  6. 06

    you added a link tag to tell the browser about a file before anything on the page asked for it.

    Resource hint

  7. 07

    you opened the connection to the image host early so the first request did not pay for DNS and TLS.

    Preconnect

  8. 08

    you told the browser to fetch the hero font now, at high priority, because it is needed on this page.

    Preload

  9. 09

    you fetched the next page's code at low priority while the user was still reading this one.

    Prefetch

  10. 10

    you marked the hero image as high priority so it stopped queueing behind three carousel images.

    Priority hint

  11. 11

    you listed several image widths and let the browser pick one based on the screen and the layout.

    Responsive images

  12. 12

    you added one attribute and the images further down the page stopped downloading until they were near the viewport.

    Native lazy loading

  13. 13

    the text was invisible for a moment while the webfont loaded, then appeared all at once.

    font-display

  14. 14

    you shipped only the Latin characters and the font file went from 300 kilobytes to 30.

    Font subsetting

  15. 15

    the build fails when the main chunk goes over the number the team agreed on.

    Bundle budget