forget amp – make fast sites!

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/“ >

Adapted from

makefastsites.com