15 ways to a blistering-fast web site

@portentint

TO A BLISTERING FAST SITE15 AYW S

@portentint

Ian LurieCEO & Founder, Portent, Inc.

@portentint

i am a liar

15 > 10There’s just so much

IT’S LOTS OF LITTLE THINGS

@portentint

I am chill… I am chill…

@portentint

@portentint

i am not chill omg why is this so hard all the

brainpower of every dev team and you still can’t compress

your images or use disk caching or compress viewstate wtf is

going on?!!!!

@portentint

So what?

@portentint

HERE’S THE THING

@portentint

NO POLITICS TODAYI PROMISE

@portentint

BUT NET NEUTRALITYCHANGES MAY MAKE BANDWIDTH PRECIOUS

@portentint

WHY?

$-

$10.00

$20.00

$30.00

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

Page Value vs. Load Time

@portentint

SITE SPEED FACTORS

@portentint

TOOLS

@portentint

Every tool interprets results & has bias

@portentintPagespeed Insights: B

@portentintPagespeed Insights: B-

@portentint

Pagespeed Insights favors transmission and rendering

@portentint

Pagespeed Insights but great for fast analysis and helpand excellent rendering tips

@portentint

Webpagetest.org: > 8 seconds

Webpagetest.org: B+

@portentintWebpagetest.org: B+

Webpagetest.orgmay cause insanityignores lazy loadingshows TTFBfilm strip view, shows times

@portentintPingdom.com: A-


More accurate


Breakdown by type/domain etc

tools.pingdom.comstill abstractionpurely transmission-focused

Portent.com loadGood wifiNo cache2.5s load.7s DOM

Portent.com load4GNo cache4s load1.25s DOM

@portentint

check out these guns,

baby

@portentint

check out these guns,

baby

learn actual vs. perceived load time.

Learn to read the HTTP Archive (HAR)

@portentint

Resource-by-resource view

@portentint

Full transfer details

@portentint

HTML parsed (no CSS, js, etc.)

@portentint

Fully loaded

@portentint

Filmstrip thingy

@portentint

For the nerds

Audit

@portentint

View >> Developer >> Developer Tools >> Network

@portentint

Time to get to work

@portentint

TRANSMISSION

more compression next time…

@portentint

Use the right image format

1

@portentint

PNG format, 800 x 540: 1,000kb

@portentint

JPG: 30kb

PNG: 13kb

why won’t anyone do

this?!!!

@portentint

700kb png 64kb jpg

@portentint

JPG = PhotosPNG = Fewer colors

@portentint

Compress images

2

@portentint@portentint


HAR

@portentint

Compression tools

Imageoptim (Mac)Caesium (PC)Fireworks/Photoshop


272kb jpg


139kb jpg

@portentint

1.2kb

@portentint

.4kb

@portentint

JPGs: Start with 60%PNGs: Start with 256 color

@portentint

Combining techniques

@portentint

@portentint

350kb

@portentint

200kb

@portentint

150kb

@portentint

No text, no logos in jpgs!!!

@portentint

Layering instead: 150kb, sharper image

@portentint

Minify

3

@portentint

Not minified: 260kb

@portentint

Minified: 84kb

@portentint

PageSpeed

@portentint

Use .MIN.JS version of javascript libraries

@portentint

jscompress.com

@portentint

cssminifier.com

@portentint

GZIP Compression

4

@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

Use with extreme caution over SSL

@portentint

<ifModule mod_gzip.c>mod_gzip_on Yesmod_gzip_dechunk Yesmod_gzip_item_include file .(html?|txt|css|js|php|pl)$mod_gzip_item_include handler ^cgi-script$mod_gzip_item_include mime ^text/.*mod_gzip_item_include mime ^application/x-javascript.*…mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*</ifModule>

Apache

@portentint

gzip on;gzip_comp_level 2;gzip_http_version 1.0;gzip_proxied any;gzip_min_length 1100;gzip_buffers 16 8k;gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rsstext/javascript;

nginx

@portentint

IIS

☑︎

@portentint

The Result

@portentint

Original home page: 4.1mbNew home page: 1.75mb

@portentint

Original home page: 3.7mbNew home page: 1.5mb

@portentint

Far-future Expires Headers

5

@portentint

this file doesn’t change

that often.

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

@portentint

Apache: mod_expiresnginx: ngx_http_headers_moduleIIS: clientCache, httpExpires, ???

What about parallel downloads? Sprites?HTTP2 will make requests cheaperYou be the judge

@portentint

Use a CDN(not a bandwidth thing)

6

@portentint

hellloooooo

No CDN

@portentint

CDN

@portentint

Use CDN javascript librarieshttps://developers.google.com/speed/libraries/

@portentint

Use Cookieless Domains

7

@portentint

Cookieless domains

@portentint

1.7kbRemove cookie: 1.2kb

(compress: .3kb)

@portentint

meh

100 files * 550b55kbAgain. And again. And again.

AlsoPacket = max 1500 bytes500 byte cookie + 1.5kb image = 2kbIncreases round trips

@portentint

SERVING

a bit to the left, please…

@portentint

Time to First ByteTime between request and delivery of first data

@portentint

This is too long

@portentint

what the hell?!!!!

@portentint

can i get index.html,

please?

@portentint

one sec…

@portentint

Request

Code

Database

Code

Response

@portentint

zzzzz

@portentint

Remove Redirect Chains

8

@portentint

http://foo.com

http://www.foo.com

https://www.foo.com

@portentint

Use Keep-Alive

9

@portentint

Sure!may i have

index.html?

No keep-alive

@portentint

Sure!may i have

index.html?

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

No keep-alive

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

No keep-alive

@portentint

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

and styles.css please?

Keep-alive maintains connections for fewer handshakes

@portentint

Use Caching

10

@portentint

STORED ON DISK

@portentint

STORED IN MEMORY

@portentint

Bypasses this

@portentint

i’m backyou missed me,

admit it

@portentint

nginx

Varnish

Apache

MySQL

builds pages

stores pages

serves pages

@portentint

Use the right database for the job

11

@portentint

NOSQL

use NOSQL and you’ll be happy and attractive.

@portentint

SQL

@portentint

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sintoccaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id estlaborum.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantiumdoloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quiavoluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quiadolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi temporaincidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velitesse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptasnulla pariatur?

NOSQL

@portentint

Practice Good Mechanics

12

@portentint

Putting a database on a web server is like…

@portentint

RENDERING

well, $#&!

Perceived vs. Actual Load Time

@portentint

6.19s

@portentint

6.34s

@portentint

6.78s

@portentint

Oy.

@portentint

Optimize HTML

13

@portentint

Clean it or defer it

@portentint

35,000 lines of codeRender time: 1.5shtml: 900kb

@portentint

why?

@portentint

At least get rid of the white space

Your browser has to load and parse it

@portentint

Defer drop-down generation using javascript

@portentint

Remove/compress Viewstate

Minify!!!

@portentint

Prefetch and Prerender

14

@portentint

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

Make the DNS connection in advance

@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

Prioritize content

15

@portentint

Load Javascript Later

@portentint

<script src=”foo.js" async></script>

Execute asynchronously

@portentint

<script src=”foo.js" defer></script>

Execute after page is parsed

Inline Critical CSS

@portentint

Inline this

Browser can do basic rendering without another request

@portentint

Use this

Try Lazy Loading

@portentint

Image loads when I scroll to here

@portentint

http://portent.co/load-lazy

Progressive Animation

@portentint

4.57sload an image

first!!!

Have Video Alternative Content

@portentint

Static image when I arrive

Then Defer Video Load

@portentint

Prioritize video as relevant

Progressive Video

@portentint

10s video

20s video

Full-length video

Responsive Video

@portentint

3G/small

4G/bigger

Tablet/wifi

Desktop/direct

@portentint

AMP

@portentint

HTTP/2

@portentint

HTTP/2 reverses many best practices because HTTP calls are cheaper.

@portentint

No need for sprites, code concatenation.

@portentint

SSL 100% required

@portentint

No need for sharding

@portentint

10% adoption so far

@portentint

@portentint

GETTING BUY IN

@portentint

The Drag Race

@portentint

Learn the HAR

Be ready to explain actual vs. perceived load time

@portentint

WHY?

$-

$10.00

$20.00

$30.00

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

Page Value vs. Load Time

Prove value

@portentint

Incremental improvement

IT’S LOTS OF LITTLE THINGS

@portentint

Ian [email protected]

http://portent.co/speedy-sites

http://portent.co/page-speed-guide

Donations Accepted (small bills only)

15 ways to a blistering-fast web site

Marketing