make fast sites
TRANSCRIPT
![Page 11: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/11.jpg)
@henshaw #pubcon
Did you know there was already a standard for web pages called HTML?
It makes AMP markup redundant and unnecessary
![Page 16: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/16.jpg)
@henshaw #pubcon
Identify and test which JS and CSS code is actually being used
![Page 21: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/21.jpg)
@henshaw #pubcon
Google Fonts are great, but they can also slow down your site
![Page 24: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/24.jpg)
@henshaw #pubcon
Consider using system fonts instead
body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto",
"Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }
![Page 30: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/30.jpg)
@henshaw #pubcon
SRCSET can deliver smaller and different images to improve speed and UX
![Page 35: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/35.jpg)
@henshaw #pubcon
SRCSET is an IMG attribute
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768 2x”>
![Page 36: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/36.jpg)
@henshaw #pubcon
Specify device width
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>
![Page 37: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/37.jpg)
@henshaw #pubcon
Specify Screen Resolution
<img src=“cat.png” alt=“my cat” srcset=“cat-hd.png 2x, cat-sm.png 320w, cat-sm-had.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x”>
![Page 38: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/38.jpg)
@henshaw #pubcon
WordPress supports SRCSET natively, but it doesn’t work if you want to use different images
![Page 43: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/43.jpg)
@henshaw #pubcon
Compress with ImageOptim https://imageoptim.com/
![Page 44: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/44.jpg)
@henshaw #pubcon
Compress with FileOptimizer https://coywolf.io/fileoptimizer
![Page 45: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/45.jpg)
@henshaw #pubcon
EWWW Image Optimizer https://coywolf.io/ewww
![Page 50: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/50.jpg)
@henshaw #pubcon
Test Gzip https://coywolf.io/gziptest
![Page 51: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/51.jpg)
@henshaw #pubcon
Gzip Resource https://coywolf.io/gzip
![Page 55: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/55.jpg)
@henshaw #pubcon
HTTP/2, CDN, Security, and SSL https://coywolf.io/freessl
![Page 57: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/57.jpg)
@henshaw #pubcon
A good UX is clear, focused and doesn't overwhelm the visitor
![Page 58: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/58.jpg)
@henshaw #pubcon
Pages overloaded with content and numerous ads disorients the visitor.
![Page 59: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/59.jpg)
@henshaw #pubcon
Focus on the primary purpose and consider a linear presentation of content
![Page 61: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/61.jpg)
@henshaw #pubcon
Use prefetch to load pages or resources in the background
<link rel="prefetch" href="/signup-form/ as="html"><link rel="prefetch" href="/js/script.js" as="script">
![Page 62: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/62.jpg)
@henshaw #pubcon
Use prerender for pages you’re confident the user will visit next
<link rel="prerender" href="/tutorial/step-4/">
<link rel="prerender" href="/landingpage/">
![Page 63: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/63.jpg)
@henshaw #pubcon
Adapted from https://makefastsites.com/
![Page 64: Make Fast Sites](https://reader031.vdocuments.us/reader031/viewer/2022020301/5a65ae337f8b9a9a2f8b4a3d/html5/thumbnails/64.jpg)
@henshaw #pubcon
My next big thing… https://coywolf.marketing/