TerribleDev/WebPerformanceChecklist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

convert to ✔️

Browse Source
This commit is contained in:
Tommy Parnell
2019-02-20 11:00:16 -05:00
committed by GitHub
parent bb85717cac
commit 32f4b3f380
1 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
README.md
View File

@@ -4,37 +4,37 @@ A checklist to make sure you website will be fast!
## HTML ## HTML
* critical link tags are in head - [ ] critical link tags are in head
* less critical link tags are end of body - [ ] less critical link tags are end of body
* less critical link tags lazy load - [ ] less critical link tags lazy load
* `<link rel="preload" as="style" onload="this.rel='stylesheet'" id='dashicons-css' ` - [ ] `<link rel="preload" as="style" onload="this.rel='stylesheet'" id='dashicons-css' `
* JS loads with the async property - [ ] JS loads with the async property
* `<script async src="https://hi.js"></script>` - [ ] `<script async src="https://hi.js"></script>`
* or `defer` when scripts have dependencies - [ ] or `defer` when scripts have dependencies
## Fonts ## Fonts
* Fonts should always load `woff2` first - [ ] Fonts should always load `woff2` first
* `woff` for fallback - [ ] `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. - [ ] 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` - [ ] eot, or truetype is only needed for `IE < 10`
## CSS ## CSS
* Avoid expensive selectors when possible - [ ] Avoid expensive selectors when possible
* `border-radius` - [ ] `border-radius`
* `box-shadow` - [ ] `box-shadow`
* `transform` - [ ] `transform`
* `filter` - [ ] `filter`
* `:nth-child` - [ ] `:nth-child`
* `position: fixed;` - [ ] `position: fixed;`
* Partial matching: `[class^="wrap"]` - [ ] Partial matching: `[class^="wrap"]`
* Don't use universal selectors - [ ] 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. - [ ] 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 - [ ] 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. - [ ] 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 - [ ] Use media queries to load files based on use case
```css ```css
<link href="style.css" rel="stylesheet" media="all"> <link href="style.css" rel="stylesheet" media="all">
@@ -45,23 +45,22 @@ A checklist to make sure you website will be fast!
## JS ## JS
* Bundles should always be minified - [ ] Bundles should always be minified
* Bundles should have 0 comments, and all license text extracted to a separate file - [ ] Bundles should have 0 comments, and all license text extracted to a separate file
## Assets ## Assets
* All assets should be fingerprinted - [ ] All assets should be fingerprinted
* All assets should have `Cache-Control: max-age=365000000, immutable` as a header - [ ] All assets should have `Cache-Control: max-age=365000000, immutable` as a header
* Assets should be served over http/2 - [ ] Assets should be served over http/2
* Assets should only be served on a cookieless domain - [ ] Assets should only be served on a cookieless domain
* All files should be cached by a CDN - [ ] All files should be cached by a CDN
* Support Brotli compression - [ ] Support Brotli compression
* 15-30% smaller than gzip - [ ] 15-30% smaller than gzip
* Compress with gzip, or zopfli as a fallback to brotli - [ ] Compress with gzip, or zopfli as a fallback to brotli
*
## PWA ## PWA
* Use a service worker to cache assets - [ ] Use a service worker to cache assets
* Use a service worker to prefetch pages users will most likely navigate to next - [ ] Use a service worker to prefetch pages users will most likely navigate to next
* Support offline, and spotty networks - [ ] Support offline, and spotty networks