Skip to content

Instantly share code, notes, and snippets.

@guidoschmidt

guidoschmidt/Webpage Resource Priorization.md

Last active August 8, 2017 07:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guidoschmidt/395e5df33a238cf7a96a9a5f8b2d0d94 to your computer and use it in GitHub Desktop.
Save guidoschmidt/395e5df33a238cf7a96a9a5f8b2d0d94 to your computer and use it in GitHub Desktop.
Download ZIP
Webpage Resource Loading
Raw
Webpage Resource Priorization.md

Resource priorization (Chrome)

  1. HTML Higest priority
  2. Styles Higest priority, Stylesheet referenced with @import are also highest priority
  3. Images
  • Low priority, if outside the viewport
  • Upgraded to medium priority, when they should be rendered in the visible viewport
  1. Ajax/XHR/fetch() High priority
  2. Scripts
  • <script></script> High, when appearing in the markup before and image
  • <script></script> Medium, when appearing in the markup after an image
  • async/defer Low
  • type="module" Low
  1. Fonts Are usually delayed, after the stylesheet (with the respecting @font-face declaration) has been loaded.

Controll resource priorization

  • <link rel="preload" href="font.woff" as="font"> instructs the browser to add font.woff to the browser's download queue at High priority. Also accepts media="" attributes, which will priorize basen on @media query rules: 
    <link rel="preload"
      herf="article-lead-sm.jpg"
      as="image"
      type="image/jpeg"
      media="only screen and (max-width: 48rem)">

Webfont best practices

Make use of the font-display property:

  • swap Will display the fallback font until the real web font is loaded (Chrome, Opera)
  • optional

Sources:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment