forget amp – make fast sites!
TRANSCRIPT
![Page 1: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/1.jpg)
Jon Henshaw
ForgetAMP–MakeFastSites!
@henshawhttps://www.slideshare.net/jonhenshaw
![Page 2: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/2.jpg)
Al Gore invented the internet
1983
A brief history of the internet
![Page 3: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/3.jpg)
Al Gore invented the internet
1983
1999
goatse.cx launched and made us question everything we knew
A brief history of the internet
![Page 4: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/4.jpg)
Al Gore invented the internet
1983 2003ish
Fast internet!
1999
goatse.cx launched and made us question everything we knew
A brief history of the internet
![Page 5: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/5.jpg)
Al Gore invented the internet
1983 2003ish
Fast internet!
1999
goatse.cx launched and made us question everything we knew
2010ishgive or take 5 years…I’m not good with dates
Marketers and advertisers began their campaign to ruin the internet
A brief history of the internet
![Page 6: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/6.jpg)
Al Gore invented the internet
1983 2003ish
Fast internet!The ruining of the internet is almost complete
Nowish
1999
goatse.cx launched and made us question everything we knew
2010ishgive or take 5 years…I’m not good with dates
Marketers and advertisers began their campaign to ruin the internet
A brief history of the internet
![Page 7: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/7.jpg)
![Page 8: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/8.jpg)
🐴💩
![Page 9: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/9.jpg)
AMP is Google-centric
![Page 10: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/10.jpg)
Do you get traffic from sites other than Google?
![Page 11: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/11.jpg)
✅ Do you get traffic from sites other than Google?
Do you get direct traffic and share your URL offline?
![Page 12: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/12.jpg)
✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic?
Do you like having control of your site?
![Page 13: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/13.jpg)
✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic? ✅ Do you like having control of your site?
You need a fast site, not AMP
![Page 14: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/14.jpg)
AMP vs Open Web
![Page 15: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/15.jpg)
![Page 16: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/16.jpg)
Forbes AMP post hosted on Google
![Page 17: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/17.jpg)
Ads
![Page 18: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/18.jpg)
Persistent overlay ad
![Page 19: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/19.jpg)
More Ads Every single screen view is interrupted with ads
![Page 20: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/20.jpg)
MOR ads!!!
😱
![Page 21: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/21.jpg)
![Page 22: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/22.jpg)
Simple CTA to signup for email newsletter
![Page 23: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/23.jpg)
Only one ad after the introduction
![Page 24: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/24.jpg)
Uninterrupted reading 😍
![Page 25: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/25.jpg)
“Google’s AMP doesn’t fix bad UX, but it’s great at delivering more ads, FASTER!”
@henshaw #BrightonSEO
![Page 26: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/26.jpg)
Good UX is a conscious decision
![Page 27: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/27.jpg)
Why fast sites?
![Page 28: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/28.jpg)
Fast sites get more traffic and make more money
![Page 29: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/29.jpg)
How do I make my site fast?
![Page 30: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/30.jpg)
☑ Refactor the code
![Page 31: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/31.jpg)
Identify and test which JS and CSS code is actually being used
![Page 32: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/32.jpg)
Conditionally serve code only on the pages that need it
![Page 33: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/33.jpg)
Consolidate code that’s used on all pages into one JS and CSS file
![Page 34: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/34.jpg)
Use inline CSS
![Page 35: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/35.jpg)
Use inline JS (put at end of page)
![Page 36: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/36.jpg)
☑ Use System Fonts
![Page 37: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/37.jpg)
Google’s fonts are great, but they can also slow down your site
![Page 38: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/38.jpg)
Lato = 1.2MB
😲
![Page 39: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/39.jpg)
Linked fonts should be used sparingly or not at all
![Page 40: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/40.jpg)
Use system fonts instead with this CSS code
body { font-family:-apple-system, BlinkMacSystemFont,"Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif; }
![Page 41: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/41.jpg)
System fonts look great and are optimized for screens
![Page 42: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/42.jpg)
☑ Optimize images
![Page 43: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/43.jpg)
Responsive images are not optimized images
![Page 44: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/44.jpg)
Optimization is serving a different image
![Page 45: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/45.jpg)
Do it with the SRCSET IMG attribute
![Page 46: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/46.jpg)
SRCSET can deliver smaller and different images to improve speed and UX
![Page 47: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/47.jpg)
Smaller versions for mobile
1024px800px
550px360px
![Page 48: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/48.jpg)
Different versions for mobile
![Page 49: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/49.jpg)
Versions optimized for UX
Mobile Desktop
![Page 50: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/50.jpg)
Regular IMG code
<img src=“cat.png” alt="my cat">
![Page 51: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/51.jpg)
SRCSET is an IMG attribute
<img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
![Page 52: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/52.jpg)
Specify device width
<img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
![Page 53: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/53.jpg)
Specify High DPI
<img src="cat.png"alt="my cat" srcset="cat-hd.png 2x, cat-sm.png 320w, cat-sm-hd.png 320w 2x, cat-med.png 768w, cat-med-hd.png 768w 2x" />
![Page 54: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/54.jpg)
SRCSET Responsive Images raven.link/srcsetwp
![Page 55: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/55.jpg)
Reduce and compress image size
![Page 56: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/56.jpg)
Use SVG for simple images
and icons
![Page 57: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/57.jpg)
Use PNG for screenshots and
non-complex images
![Page 58: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/58.jpg)
Use JPG for photos and
complex images
![Page 59: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/59.jpg)
Compress with ImageOptim raven.link/imageoptim
![Page 60: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/60.jpg)
Compress with FileOptim raven.link/fileoptim
![Page 61: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/61.jpg)
EWWW Image Optimizer raven.link/imgoptwp
![Page 62: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/62.jpg)
☑ Cache, Gzip & HTTP/2
![Page 63: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/63.jpg)
WP Rocket raven.link/rocket
![Page 64: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/64.jpg)
Gzip via .htaccess
![Page 65: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/65.jpg)
Gzip via PHP
![Page 66: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/66.jpg)
Test Gzip raven.link/gtest
![Page 67: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/67.jpg)
Gzip Resource raven.link/gzip
![Page 68: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/68.jpg)
CDN and HTTP/2
![Page 69: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/69.jpg)
HTTP/1 versus HTTP/2
![Page 70: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/70.jpg)
HTTP/1 versus HTTP/2
![Page 71: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/71.jpg)
HTTP/2, CDN, Security, SSL raven.link/freessl
![Page 72: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/72.jpg)
☑ Improve UX
![Page 73: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/73.jpg)
A good UX is clear, focused and doesn't overwhelm the visitor
![Page 74: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/74.jpg)
Pages overloaded with content and numerous ads disorients the visitor
![Page 75: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/75.jpg)
Focus on the primary purpose and consider a linear presentation of content
![Page 76: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/76.jpg)
Use Resource Hints to speed up navigation
![Page 77: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/77.jpg)
Use prefetch to load resources in the background
![Page 78: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/78.jpg)
<link rel=“prefetch” href=“/js/important.js“ >
![Page 79: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/79.jpg)
Use prerender for pages you’re confident the user will visit next
![Page 80: Forget AMP – Make Fast Sites!](https://reader034.vdocument.in/reader034/viewer/2022052117/5a65ae337f8b9a9a2f8b4a3f/html5/thumbnails/80.jpg)
<link rel=“prerender” href=“/tutorial/4/“ >