Performance

Why bigger is not always better

Mike Selander

http://bit.ly/1ReJbyx

Why Bother?

Each 1-second delay means:

11% fewer page views
16% decrease in customer satisfaction
7% loss in conversions

ROI

Amazon: Increased revenues by 1% for every 100ms of improvement
Yahoo: Increased traffic by 9% for every 400ms of improvement
Mozilla: Dropped page load time by 2.2 seconds and saw 60 MILLION more downloads/year

Speed Concepts

Smaller sized objects

Less http requests

Optimized rendering path

The Site

Before

Static HTML site on Cloudflare
Average of 23.9 seconds to load
~ 15mb page weight
170 resources loaded

2,549 hours/year of waiting

4.837 TB/year

$368,640/year in end-user bandwidth

Results

WordPress site on WP Engine

Before After
Load Time 23.9 .75
Page Weight 15mb 2.4mb
Resources 170 61

Diagnosing

The Overview

Pingdom tools

Practical Tips

Pagespeed Insights

In Depth

Webpage speed test

The Build

Spring Cleaning!

Got rid of everything we could

2600 lines of HTML

8 js files

5 css files

Refactor

Async/Defer

	
	

Mobile first

Do


@media (min-width: 700px){}
@media (min-width: 900px){}
@media (min-width: 1100px){}
							

Don't


@media (max-width: 700px){}
@media (max-width: 1100px){}
							

SVG


Washington



							

Images

Compress images

Lossless

Lossy

Image compressors

Compressor.io
tinyPNG
WP Smush
Image Optim

event trigger images

CSS Sprites

.jpg - 418 kb

.png - 637 kb

Hosting

WP Host

WP Engine
Pantheon
Pagely

Cheap Host?
Use a Caching plugin

WP Rocket
WP Super Cache
W3 Total Cache

CDN

Cloudflare
Max CDN
Rackspace

Still more to do

Never Ending Battle

Thank you

MikeSelander.com
@Mike_Selander

Old Town Media

http://bit.ly/1ReJbyx