@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
HERE’S THE THING
FASTER IS BETTER
@portentint
HERE’S THE THING
MOSTLY.
heh. Oops.
@portentint
must… deliver…
@portentint
HERE’S THE THING
@portentint
HERE’S THE THING
@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
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
JPG format, 100% quali, 800 x 540: 400kb
@portentint
JPG format, 90% quali, 800 x 540: 217kb
@portentint
JPG format, 80% quali, 800 x 540: 100kb
@portentint
JPG format, 60% quali, 800 x 540: 67kb
@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
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
<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
<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
Time to First Byte (TTFB) should not > 500ms
@portentint
But <250ms is beer
@portentint
CDN
difficul: impact:
@portentint
No CDN
hellloooooo
@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
HERE’S THE THING TEST!!!
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
HERE’S THE THING TEST!!!
@portentint
Ian Lurie @portentint www.portent.com
hp://portent.co/speedy-sites hp://portent.co/page-speed-guide