make fast sites

@henshaw #pubcon

Make Fast SitesPresented by: Jon Henshaw

@henshaw #pubcon

Why do I need to make a fast site?

@henshaw #pubcon

Fast sites get more traffic

@henshaw #pubcon

Fast sites make more money

@henshaw #pubcon

“Cool! I’ll use AMP for that.”

@henshaw #pubcon

WAIT! 😱

@henshaw #pubcon

AMP is about Google, not you

@henshaw #pubcon

Do you get traffic from sites other than Google?

@henshaw #pubcon

Do you get direct traffic and share your URL offline?

@henshaw #pubcon

Do you like having control of your site?

@henshaw #pubcon

Did you know there was already a standard for web pages called HTML?

It makes AMP markup redundant and unnecessary

@henshaw #pubcon

You need a fast site, not AMP

@henshaw #pubcon

AMP is made for serving ads, faster

@henshaw #pubcon

Good UX is a conscious decision

@henshaw #pubcon

☑ Optimize code

@henshaw #pubcon

Identify and test which JS and CSS code is actually being used

@henshaw #pubcon

Conditionally serve code

@henshaw #pubcon

Consolidate JS and CSS code

@henshaw #pubcon

Use inline CSS and JS

@henshaw #pubcon

☑ Optimize fonts

@henshaw #pubcon

Google Fonts are great, but they can also slow down your site

@henshaw #pubcon

1.6 MB 😲

@henshaw #pubcon

Linked fonts should be used sparingly

@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; }

@henshaw #pubcon

System fonts look great and are optimized for screens

@henshaw #pubcon

☑ Optimize Images

@henshaw #pubcon

Responsive images are not optimized images

@henshaw #pubcon

Optimization is serving a different image

@henshaw #pubcon

Do it with the SRCSET IMG attribute

@henshaw #pubcon

SRCSET can deliver smaller and different images to improve speed and UX

@henshaw #pubcon

Smaller versions for mobile

1024px800px

550px360px

@henshaw #pubcon

Different versions for mobile

@henshaw #pubcon

Versions optimized for UX

Mobile Desktop

@henshaw #pubcon

Regular IMG code

<img src=“cat.png” alt=“my cat”>

@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”>

@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”>

@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”>

@henshaw #pubcon

WordPress supports SRCSET natively, but it doesn’t work if you want to use different images

@henshaw #pubcon

Reduce and compress image size

@henshaw #pubcon

Use SVG for simple images

and icons

@henshaw #pubcon

Use PNG for screenshots and

non-complex images

@henshaw #pubcon

Use JPG for photos and

complex images

@henshaw #pubcon

Compress with ImageOptim https://imageoptim.com/

@henshaw #pubcon

Compress with FileOptimizer https://coywolf.io/fileoptimizer

@henshaw #pubcon

EWWW Image Optimizer https://coywolf.io/ewww

@henshaw #pubcon

☑ Optimize Server-Side

@henshaw #pubcon

WP Rocket https://wp-rocket.me/

@henshaw #pubcon

Gzip via .htaccess

@henshaw #pubcon

Gzip via PHP

@henshaw #pubcon

Test Gzip https://coywolf.io/gziptest

@henshaw #pubcon

Gzip Resource https://coywolf.io/gzip

@henshaw #pubcon

Use a CDN and HTTP/2

@henshaw #pubcon

HTTP/1.1

@henshaw #pubcon

HTTP/2

@henshaw #pubcon

HTTP/2, CDN, Security, and SSL https://coywolf.io/freessl

@henshaw #pubcon

☑ Optimize UX

@henshaw #pubcon

A good UX is clear, focused and doesn't overwhelm the visitor

@henshaw #pubcon

Pages overloaded with content and numerous ads disorients the visitor.

@henshaw #pubcon

Focus on the primary purpose and consider a linear presentation of content

@henshaw #pubcon

Use Resource Hints to speed up navigation

@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">

@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/">

@henshaw #pubcon

Adapted from https://makefastsites.com/

@henshaw #pubcon

My next big thing… https://coywolf.marketing/