Lots of Little Things: Site Speed, 2017

LOTS OF LITTLE THINGSMAKING A SITE FAST EVERYWHERE

Ian Lurie
CEO & Founder, Portent, Inc.
@portentint

@portentint
7 second load time

WHY?
$-
$10.00
$20.00
$30.00
1 2 3 4 5 6 7 8 9
Load time (seconds)
Page Value vs. Load Time

Every tool interprets results & has bias

@portentint
Webpagetest.org: > 8 seconds
Webpagetest.org: B+

Learn to read the HTTP Archive (HAR)
A+++++++

Separates DOM content load from

@portentint
View >> Developer >> Developer Tools >> Network

TRANSMISSION
more
compression
next time…

PNG format, 800 x 540: 1,000kb

@portentint
JPG: 30kb
PNG: 13kb
why won’t
anyone do
this?!!!

@portentint
700kb png 64kb jpg

JPG = Photos
PNG = Fewer colors, like logos

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

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

@portentint
Combining techniques

Layering instead: 150kb, sharper image

Use .MIN.JS version of javascript libraries

Google javascript libraries
https://developers.google.com/speed/libraries/

Hey, thanks! I’ll
extract it here.
I’m going to
compress these
files for you so
they arrive more
quickly.

@portentint
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_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+rss
text/javascript;
nginx

@portentint
CHECKGZIPCOMPRESSION.COM

Original home page: 4.1mb
New home page: 1.75mb

Original home page: 3.7mb
New home page: 1.5mb

Use a CDN
(not a bandwidth thing)
5

@portentint
hellloooooo
No CDN

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

SERVING
a bit to the
left, please…
I better get a
tip for this

@portentint
Time to First Byte
Time between request and
delivery of first data

@portentint
what the
hell?!!!!

@portentint
Sure!
may i have
index.html?
No Caching

Request
Starts
Queries database
Generates page
Response

@portentint
i’m thinking…
any time now…
No Caching

@portentint
Apache: Memcached
IIS: Check a box
nginx: Memcached

Hi There!!! Hi There!!!
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut 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 sint
occaecat cupidatat non proident, sunt in culpa
qui ofﬁcia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut 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 sint occaecat ctat non proident, sunt in culpa qui
ofﬁcia deserunt mollit anim id est laborum.
Hi There!!!
Hi There!!!
yep. here’s the
first bit…
can i get
thispage.html?
0s 2s

Hi There!!!
Hi There!!!
can i get
thispage.html?
and the text...
and what you
need to make it
look good
0s 2s

Hi There!!!
Hi There!!!
can i get
thispage.html?
and the first
image…
and what you
need to make it
look good
0s 2s

Hi There!!!
Hi There!!!
can i get
thispage.html?
and the other
stuff
and what you
need to make it
look good
0s 2s

can i get
thispage.html?
Hi There!!!
occaecat cupidatat non sunt in culpa qui ofﬁcia
deserunt mollit anim id est laborum.
Hi There!!!
here’s
the images the
text the scripts
and everything
else good
luck
0s 2s

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

At least get rid of the white space
Your browser has to load and parse it

Only load javascript you
need, when you need it

@portentint
<script src=”foo.js" async></script>
Execute asynchronously

@portentint
<script src=”foo.js" defer></script>
Execute after page is parsed

@portentint
Or just put it at the bottom of the page!!!

@portentint
Javascript after CSS, always

Inline this
Browser can do basic
rendering without
another request

Be ready to explain actual vs.
perceived load time

WHY?
$-
$10.00
$20.00
$30.00
1 2 3 4 5 6 7 8 9
Load time (seconds)
Page Value vs. Load Time
Prove value

Incremental improvement
Caching servers
Defer via javascript
Progressive video load
Code acceleration
CSS optimization
Javascript optimization
Server-side/db optimization

Ian Lurie
@portentint
www.portent.com
http://portent.co/speedy-sites
http://portent.co/page-speed-guide
Donations Accepted (small bills only)

Lots of Little Things: Site Speed, 2017

Lots of Little Things: Site Speed, 2017

Recommandé

Contenu connexe

Tendances

Tendances(6)

Similaire à Lots of Little Things: Site Speed, 2017

Similaire à Lots of Little Things: Site Speed, 2017(20)

Plus de Ian Lurie

Plus de Ian Lurie(20)

Lots of Little Things: Site Speed, 2017