forget amp – make fast sites!
TRANSCRIPT
Jon Henshaw
ForgetAMP–MakeFastSites!
@henshawhttps://www.slideshare.net/jonhenshaw
Al Gore invented the internet
1983
A brief history of the internet
Al Gore invented the internet
1983
1999
goatse.cx launched and made us question everything we knew
A brief history of the internet
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
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
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
🐴💩
AMP is Google-centric
Do you get traffic from sites other than Google?
✅ Do you get traffic from sites other than Google?
Do you get direct traffic and share your URL offline?
✅ Do you get traffic from sites other than Google? ✅ Do you get direct traffic?
Do you like having control of your site?
✅ 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
AMP vs Open Web
Forbes AMP post hosted on Google
Ads
Persistent overlay ad
More Ads Every single screen view is interrupted with ads
MOR ads!!!
😱
Simple CTA to signup for email newsletter
Only one ad after the introduction
Uninterrupted reading 😍
“Google’s AMP doesn’t fix bad UX, but it’s great at delivering more ads, FASTER!”
@henshaw #BrightonSEO
Good UX is a conscious decision
Why fast sites?
Fast sites get more traffic and make more money
How do I make my site fast?
☑ Refactor the code
Identify and test which JS and CSS code is actually being used
Conditionally serve code only on the pages that need it
Consolidate code that’s used on all pages into one JS and CSS file
Use inline CSS
Use inline JS (put at end of page)
☑ Use System Fonts
Google’s fonts are great, but they can also slow down your site
Lato = 1.2MB
😲
Linked fonts should be used sparingly or not at all
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; }
System fonts look great and are optimized for screens
☑ Optimize images
Responsive images are not optimized images
Optimization is serving a different image
Do it with the SRCSET IMG attribute
SRCSET can deliver smaller and different images to improve speed and UX
Smaller versions for mobile
1024px800px
550px360px
Different versions for mobile
Versions optimized for UX
Mobile Desktop
Regular IMG code
<img src=“cat.png” alt="my cat">
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" />
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" />
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" />
SRCSET Responsive Images raven.link/srcsetwp
Reduce and compress image size
Use SVG for simple images
and icons
Use PNG for screenshots and
non-complex images
Use JPG for photos and
complex images
Compress with ImageOptim raven.link/imageoptim
Compress with FileOptim raven.link/fileoptim
EWWW Image Optimizer raven.link/imgoptwp
☑ Cache, Gzip & HTTP/2
WP Rocket raven.link/rocket
Gzip via .htaccess
Gzip via PHP
Test Gzip raven.link/gtest
Gzip Resource raven.link/gzip
CDN and HTTP/2
HTTP/1 versus HTTP/2
HTTP/1 versus HTTP/2
HTTP/2, CDN, Security, SSL raven.link/freessl
☑ Improve UX
A good UX is clear, focused and doesn't overwhelm the visitor
Pages overloaded with content and numerous ads disorients the visitor
Focus on the primary purpose and consider a linear presentation of content
Use Resource Hints to speed up navigation
Use prefetch to load resources in the background
<link rel=“prefetch” href=“/js/important.js“ >
Use prerender for pages you’re confident the user will visit next
<link rel=“prerender” href=“/tutorial/4/“ >