lots of ways to speed up your site

@portentint

WAYS TO MAKE YOUR SITE FASTER THE SITE SPEED DOWNLOAD

@portentint

hp://portent.co/speedy-sites

@portentint

SITE SPEED IS A LITTLE SCARY

WHAT THE HELL IS TTFB?!!!

@portentint

WE’LL WALK THROUGH IT

well, that’s a relief

@portentint

I’ll explain relative difficul, impact & when to use each technique

@portentint

Ratings Scale

difficul: impact:

@portentint

These are just the techniques I’ve found to be the biggest wins

@portentint

WHY?

@portentint

HERE’S THE THING

FASTER IS BETTER

@portentint

HERE’S THE THING

MOSTLY.

heh. Oops.

@portentint

must… deliver…

@portentint

HERE’S THE THING

@portentint

WHY?

$-

$10.00

$20.00

$30.00

1 2 3 4 5 6 7 8 9 Load time (seconds)

Page Value vs. Load Time

@portentint

WHY?

$-

$10.00

$20.00

$30.00

1 2 3 4 5 6 7 8 9 Load time (seconds)

Page Value vs. Load Time

WHY NOT?!!!!

@portentint

THREE BOTTLENECKS

@portentint

SERVING

@portentint

TRANSMISSION

@portentint

RENDERING

@portentint

DIAGNOSTIC TOOLS

@portentint

GOOGLE PAGE SPEED INSIGHTS BASIC ANALYSIS

@portentint

Mostly transmission diagnostics

@portentint

developers.google.com/speed/pagespeed/insights/

@portentint

YSLOW READ YOUR WEB SITE’S MIND

@portentint

Powerful

@portentint

Less intuitive

@portentint

yslow.org

@portentint

WEBPAGETEST.ORG A HAPPY MEDIUM

@portentint

Captures many important stats Hard-to-read HAR

@portentint

WHY YOU CAN’T TRUST TOOLS

@portentint

Webpagetest.org: > 8 seconds

@portentint

Pingdom: 1.67 seconds

@portentint

Reali

@portentint

USE HAR SITE SPEED SUPERPOWERS

@portentint

HAR: A direct, step-by-step view of site load & rendering

@portentint

@portentint

DIAGNOSING BOTTLENECKS & SPEEDING UP YOUR SITE

@portentint

TRANSMISSION

@portentint

WHY START WITH TRANSMISSION? IT’S GOT THE EASIEST WINS

@portentint

Blue = Download time

It’s about bandwidth

@portentint

Image Compression

difficul: impact:

@portentint

Google PageSpeed

@portentint

HAR

@portentint

JPG format, 100% quali, 800 x 540: 400kb

@portentint


@portentint

Page Speed Insights…

@portentint

…But it only does png

@portentint

Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop

@portentint

Start at 60% JPG and work your way up/down

@portentint

Start at 128 color PNG

@portentint

USE WHEN WHY THE HELL NOT?!

@portentint

Use the right image format

difficul: impact:

@portentint

PNG format, 800 x 540: 1,000kb

@portentint

JPG format, 100% quali: 60kb

@portentint

PNG format, 32m color: 13kb

@portentint

PNG format, 256k color: 8kb

@portentint

USE WHEN WHY THE HELL NOT?!

@portentint

Minification

difficul: impact:

@portentint

Not minified: 260kb

@portentint

Minified: 32kb

@portentint

Google PageSpeed

@portentint

Use .MIN.JS version of javascript libraries

@portentint

jscompress.com

@portentint

cssminifier.com

@portentint

HTML, too

@portentint

USE WHEN Always

@portentint

HTTP compression

difficul: impact:

@portentint

Lossless compression of HTML, javascript, css, other files

@portentint

Hey, thanks! I’ll extract it here.

I’m going to compress these files for you so they arrive more

quickly.

@portentint

CHECKGZIPCOMPRESSION.COM

@portentint

Google PageSpeed

@portentint

Apache mod_deflate

@portentint

nginx ngx_hp_gzip_module

@portentint

IIS Click the checkbox

@portentint

Not always possible with 3rd-par scripts

@portentint

NOT OVER SSL unless you really know what you’re doing

@portentint

USE WHEN Any non-encrypted

@portentint

Expires Headers

difficul: impact:

@portentint

this file doesn’t change

that often.

ok, i’ll save it to my hard drive.

@portentint

Google PageSpeed

@portentint

Not possible w/ 3rd-par scripts

@portentint

Apache mod_expires

@portentint

nginx ngx_hp_headers_module

@portentint

IIS clientCache or hpExpires or …?

@portentint

USE WHEN Site uses many static files

@portentint

HERE’S THE THING TEST.

my bad.

@portentint

RENDERING

@portentint

It’s about browser performance How quickly can a browser ‘draw’ this page?

@portentint

Webpagetest.org

@portentint

This line

HAR view

This number

@portentint

APPARENT RENDER TIME

MEASURED RENDER TIME

@portentint

Load order

difficul: impact:

@portentint

CSS first. Javascript last.

@portentint

<script src=“script.js” defer>

Load in parallel, don’t block

@portentint

<script src=“script.js” async>

Load in parallel, execute as soon as possible

@portentint

Tag managers…?

@portentint

Google PageSpeed

@portentint

HAR

@portentint

May break 3rd-par javascript

@portentint

USE WHEN You can

@portentint

Parallel downloads

difficul: impact:

@portentint

3 different subdomains

@portentint

Parallel load

@portentint

USE WHEN You can use multiple subdomains

You use a CDN

@portentint

Optimizing HTML

difficul: impact:

@portentint

35,000 lines of code Render time: 1.5s

html: 900kb

@portentint

why?

@portentint

Put in .css instead

@portentint

Much beer

@portentint

Minified html

@portentint

DOM elements (yslow)

@portentint

At least get rid of the white space

@portentint

USE WHEN Always

@portentint

Lazy loading

difficul: impact:

@portentint

Image loads when I scroll to here

@portentint

hp://portent.co/load-lazy

@portentint

USE WHEN You have below-the-fold images

You have a gallery

@portentint

DNS prefetch

difficul: impact:

@portentint

HAR

@portentint

<link rel="dns-prefetch" href="//domainname.com" /> <link rel=“dns-prefetch” href=“https://api.twitter.com” />

@portentint

Prefetch/Prerender

difficul: impact:

@portentint

You go to this page a lot.

I’m going to get it ready ahead of

time.

@portentint

Most popular page prerendered

@portentint

@portentint

<link rel="prerender" href=”images/kittens.jpg">

Load file in advance

@portentint

<link rel=”prefetch" href="http://my-site.com/bar.html">

Load & render page in advance

@portentint

USE WHEN You know certain pages dominate

@portentint

HERE’S THE THING TEST!!!

d’oh

@portentint

SERVING

@portentint

Nerds required

yeah baby

@portentint

TTFB: Time To First Byte

@portentint

Google PageSpeed

@portentint

HAR

@portentint

Time to First Byte (TTFB) should not > 500ms

@portentint

But <250ms is beer

@portentint

CDN

difficul: impact:

@portentint

No CDN

hellloooooo

@portentint

CDN

@portentint

A lot of work, but also helps with hp compression, parallel loading, cookieless delivery, expires headers

@portentint

USE WHEN You can

@portentint

disk & query caching

difficul: impact:

@portentint

STORED ON DISK

@portentint

That’s a long time. Are you using disk caching?

@portentint

Stalled may indicate a page generation boleneck. Use disk/query caching

@portentint

USE WHEN …

@portentint

keep-alive

difficul: impact:

@portentint

No keep-alive

Sure!may i have

index.html?

@portentint

No keep-alive

Sure!may i have

index.html?

ok! can I have styles.css? uh, ok

@portentint

No keep-alive

Sure!may i have

index.html?

ok! can I have styles.css? uh, okthanks! can i have

jquery.js?

@portentint

No keep-alive

Sure!may i have

index.html?

ok! can I have styles.css? uh, okthanks! can i have

jquery.js?

can i have image.gif?

@portentint

Maintains connection, so fewer ‘handshakes’

Keep-alive

@portentint

Keep-alive

Sure!can i have index.html, image.gif, jquery.js

and styles.css please?

@portentint

USE WHEN Always

@portentint

php/code acceleration

difficul: impact:

@portentint

Xcache APC

@portentint

USE WHEN It’s available

@portentint

pre-rendering/server caching

difficul: impact:

@portentint

Request page

Store rendered page

Deliver page

Generate page Web/application server

Phantomjs

Cache server

@portentint

USE WHEN It’s doable

@portentint


whoopsie

@portentint

GOOGLE AMP? FACEBOOK INSTANT PAGES?

@portentint

First, do it right

@portentint

MORE TO DO

@portentint

Sprites/Reduce HTTP calls Responsive image scaling

CSS optimization Javascript optimization

Cookieless delivery

@portentint

REMEMBER THE BOTTLENECKS

@portentint

SERVING

@portentint

TRANSMISSION

@portentint

RENDERING

@portentint


@portentint

Ian Lurie @portentint www.portent.com

hp://portent.co/speedy-sites hp://portent.co/page-speed-guide

lots of ways to speed up your site

Technology