From 32f4b3f3808b4b0ba92cd07a076dfb24a5974c4a Mon Sep 17 00:00:00 2001 From: Tommy Parnell Date: Wed, 20 Feb 2019 11:00:16 -0500 Subject: [PATCH] convert to :heavy_check_mark: --- README.md | 75 +++++++++++++++++++++++++++---------------------------- 1 file changed, 37 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index 5acd6b9..c0c21a5 100644 --- a/README.md +++ b/README.md @@ -4,37 +4,37 @@ 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 - * `` - * or `defer` when scripts have dependencies +- [ ] critical link tags are in head +- [ ] less critical link tags are end of body +- [ ] less critical link tags lazy load + - [ ] `` + - [ ] 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` +- [ ] 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. -* Use media queries to load files based on use case +- [ ] 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. +- [ ] Use media queries to load files based on use case ```css @@ -45,23 +45,22 @@ A checklist to make sure you website will be fast! ## JS -* Bundles should always be minified -* Bundles should have 0 comments, and all license text extracted to a separate file +- [ ] 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 -* +- [ ] 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 +- [ ] 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