diff --git a/README.md b/README.md index 28d37f6..0f46679 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,58 @@ -# WebPerformanceChecklist +# 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 + * `` + +## 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 +