Lots of ways to speed up your site

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

@portentint
WAYS TO MAKE YOUR SITE FASTER
THE SITE SPEED DOWNLOAD

@portentint
h‫﬙‬p://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
diﬃcul‫,﬚‬ impact & when
to use each technique

@portentint
Ratings Scale
diﬃcul‫:﬚‬
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
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

@portentint

@portentint

@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
diﬃcul‫:﬚‬
impact:

@portentint
Google PageSpeed

@portentint
HAR

@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
diﬃcul‫:﬚‬
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
Miniﬁcation
diﬃcul‫:﬚‬
impact:

@portentint
Not miniﬁed: 260kb

@portentint
Miniﬁed: 32kb

@portentint
Google PageSpeed

@portentint
Use .MIN.JS version of
javascript libraries

@portentint
jscompress.com

@portentint
cssminiﬁer.com

@portentint
HTML, too

@portentint
USE WHEN
Always

@portentint
HTTP compression
diﬃcul‫:﬚‬
impact:

@portentint
Lossless compression of HTML,
javascript, css, other ﬁles

@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_deﬂate

@portentint
nginx
ngx_h‫﬙‬p_gzip_module

@portentint
IIS
Click the checkbox

@portentint
Not always possible
with 3rd-par‫﬚‬ scripts

@portentint
NOT OVER SSLunless you really know what you’re doing

@portentint
USE WHEN
Any non-encrypted

@portentint
Expires Headers
diﬃcul‫:﬚‬
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_h‫﬙‬p_headers_module

@portentint
IIS
clientCache or h‫﬙‬pExpires or …?

@portentint
USE WHEN
Site uses many static ﬁles

@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
diﬃcul‫:﬚‬
impact:

@portentint
CSS ﬁrst. 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
diﬃcul‫:﬚‬
impact:

@portentint
3 diﬀerent subdomains

@portentint
Parallel load

@portentint
USE WHEN
You can use multiple subdomains
You use a CDN

@portentint
Optimizing HTML
diﬃcul‫:﬚‬
impact:

@portentint
35,000 lines of code
Render time: 1.5s
html: 900kb

@portentint
why?

@portentint
Put in .css instead

@portentint
Much be‫﬙‬er

@portentint
Miniﬁed html

@portentint
DOM elements
(yslow)

@portentint
At least get rid of the white space

@portentint
USE WHEN
Always

@portentint
Lazy loading
diﬃcul‫:﬚‬
impact:

@portentint
Image loads when
I scroll to here

@portentint
h‫﬙‬p://portent.co/load-lazy

@portentint
USE WHEN
You have below-the-fold images
You have a gallery

@portentint
DNS prefetch
diﬃcul‫:﬚‬
impact:

@portentint
HAR

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

@portentint
Prefetch/Prerender
diﬃcul‫:﬚‬
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 ﬁle 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 be‫﬙‬er

@portentint
CDN
diﬃcul‫:﬚‬
impact:

@portentint
No CDN
hellloooooo

@portentint
CDN

@portentint
A lot of work, but also helps with
h‫﬙‬p compression, parallel loading,
cookieless delivery, expires headers

@portentint
USE WHEN
You can

@portentint
disk & query caching
diﬃcul‫:﬚‬
impact:

@portentint
STORED ON DISK

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

@portentint
Stalled may indicate a page
generation bo‫﬙‬leneck. Use
disk/query caching

@portentint
USE WHEN
…

@portentint
keep-alive
diﬃcul‫:﬚‬
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 ...

@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
diﬃcul‫:﬚‬
impact:

@portentint
Xcache
APC

@portentint
USE WHEN
It’s available

@portentint
pre-rendering/server caching
diﬃcul‫:﬚‬
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
h‫﬙‬p://portent.co/speedy-sites
h‫﬙‬p://portent.co/page-speed-guide

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

30/ 60/ 10: The Golden Ratio for So... by Rallyverse 270996 views

View on Slideshare

1 of 176 Ad

View on Slideshare

1 of 176 Ad