WebPerformanceChecklist/README.md

Web Performance Checklist

A checklist to make sure you website will be fast!

HTML

• critical link tags are in head
• less critical link tags are end of body
• less critical link tags lazy load
  • <link rel="preload" as="style" onload="this.rel='stylesheet'" id='dashicons-css'
• JS loads with the async property
  • <script async src="https://hi.js"></script>
  • or defer when scripts have dependencies

Fonts

• Fonts should always load woff2 first
• woff for fallback
• You can use font-display: swap; to allow the browser to use a fallback font while custom font files are being downloaded.
• eot, or truetype is only needed for IE < 10

CSS

• Avoid expensive selectors when possible
  • border-radius
  • box-shadow
  • transform
  • filter
  • :nth-child
  • position: fixed;
  • Partial matching: [class^="wrap"]
• Don't use universal selectors
  • Universal selectors like *, [disabled], [type=“text”], etc. are very expensive for the browser to match, as every element in the DOM must be checked.
• Avoid deeply nested dependent selectors
  • The descendant selector is very costly, as the browser must check for a match with every descendant element. On a complex web page, this can result in thousands and thousands (perhaps even more) of descendant selector searches.

JS

• Bundles should always be minified
• Bundles should have 0 comments, and all license text extracted to a separate file

Assets

• All assets should be fingerprinted
• All assets should have Cache-Control: max-age=365000000, immutable as a header
• Assets should be served over http/2
• Assets should only be served on a cookieless domain
• All files should be cached by a CDN
• Support Brotli compression
  • 15-30% smaller than gzip
• Compress with gzip, or zopfli as a fallback to brotli

PWA

• Use a service worker to cache assets
• Use a service worker to prefetch pages users will most likely navigate to next
• Support offline, and spotty networks