Page 1
@portentint
TO A BLISTERING FAST SITE15 AYW S
Page 2
@portentint
Ian LurieCEO & Founder, Portent, Inc.
@portentint
i am a liar
Page 3
15 > 10There’s just so much
Page 4
IT’S LOTS OF LITTLE THINGS
Page 5
@portentint
I am chill… I am chill…
Page 13
@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?!!!!
Page 14
@portentint
So what?
Page 15
@portentint
HERE’S THE THING
Page 16
@portentint
HERE’S THE THING
Page 17
@portentint
NO POLITICS TODAYI PROMISE
Page 18
@portentint
BUT NET NEUTRALITYCHANGES MAY MAKE BANDWIDTH PRECIOUS
Page 19
@portentint
WHY?
$-
$10.00
$20.00
$30.00
1 2 3 4 5 6 7 8 9Load time (seconds)
Page Value vs. Load Time
Page 20
@portentint
SITE SPEED FACTORS
Page 21
@portentint
TOOLS
Page 22
@portentint
Every tool interprets results & has bias
Page 23
@portentintPagespeed Insights: B
Page 24
@portentintPagespeed Insights: B-
Page 25
@portentintPagespeed Insights: B-
Page 26
@portentint
Pagespeed Insights favors transmission and rendering
Page 27
@portentint
Pagespeed Insights but great for fast analysis and helpand excellent rendering tips
Page 28
@portentint
Webpagetest.org: > 8 seconds
Webpagetest.org: B+
Page 29
@portentintWebpagetest.org: B+
Page 30
Webpagetest.orgmay cause insanityignores lazy loadingshows TTFBfilm strip view, shows times
Page 31
@portentintPingdom.com: A-
Page 32
@portentintPingdom.com: A-
More accurate
Page 33
@portentintPingdom.com: A-
Breakdown by type/domain etc
Page 34
tools.pingdom.comstill abstractionpurely transmission-focused
Page 35
Portent.com loadGood wifiNo cache2.5s load.7s DOM
Page 36
Portent.com load4GNo cache4s load1.25s DOM
Page 37
@portentint
check out these guns,
baby
Page 38
@portentint
check out these guns,
baby
learn actual vs. perceived load time.
Page 39
Learn to read the HTTP Archive (HAR)
Page 40
@portentint
Resource-by-resource view
Page 41
@portentint
Full transfer details
Page 42
@portentint
HTML parsed (no CSS, js, etc.)
Page 43
@portentint
Fully loaded
Page 44
@portentint
Filmstrip thingy
Page 45
@portentint
For the nerds
Audit
Page 46
@portentint
View >> Developer >> Developer Tools >> Network
Page 47
@portentint
Time to get to work
Page 48
@portentint
TRANSMISSION
more compression next time…
Page 49
@portentint
Use the right image format
1
Page 50
@portentint
PNG format, 800 x 540: 1,000kb
Page 51
@portentint
PNG format, 800 x 540: 1,000kb
Page 52
@portentint
PNG format, 800 x 540: 1,000kb
Page 53
@portentint
JPG: 30kb
PNG: 13kb
why won’t anyone do
this?!!!
Page 54
@portentint
700kb png 64kb jpg
Page 55
@portentint
JPG = PhotosPNG = Fewer colors
Page 56
@portentint
Compress images
2
Page 57
@portentint@portentint
Page 58
@portentint@portentint
HAR
Page 59
@portentint
Compression tools
Imageoptim (Mac)Caesium (PC)Fireworks/Photoshop
Page 60
@portentint@portentint
272kb jpg
Page 61
@portentint@portentint
139kb jpg
Page 62
@portentint
1.2kb
Page 64
@portentint
JPGs: Start with 60%PNGs: Start with 256 color
Page 65
@portentint
Combining techniques
Page 68
@portentint
350kb
Page 69
@portentint
200kb
Page 70
@portentint
150kb
Page 71
@portentint
No text, no logos in jpgs!!!
Page 72
@portentint
Layering instead: 150kb, sharper image
Page 73
@portentint
Minify
3
Page 74
@portentint
Not minified: 260kb
Page 75
@portentint
Minified: 84kb
Page 76
@portentint
PageSpeed
Page 77
@portentint
Use .MIN.JS version of javascript libraries
Page 78
@portentint
jscompress.com
Page 79
@portentint
cssminifier.com
Page 80
@portentint
GZIP Compression
4
Page 81
@portentint
Hey, thanks! I’ll extract it here.
I’m going to compress these files for you so they arrive more
quickly.
Page 82
@portentint
CHECKGZIPCOMPRESSION.COM
Page 84
Use with extreme caution over SSL
Page 85
@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
Page 86
@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
Page 87
@portentint
IIS
☑︎
Page 88
@portentint
The Result
Page 89
@portentint
Original home page: 4.1mbNew home page: 1.75mb
Page 90
@portentint
Original home page: 3.7mbNew home page: 1.5mb
Page 91
@portentint
Far-future Expires Headers
5
Page 92
@portentint
this file doesn’t change
that often.
ok, i’ll save it to my hard drive.
Page 93
@portentint
Apache: mod_expiresnginx: ngx_http_headers_moduleIIS: clientCache, httpExpires, ???
Page 94
What about parallel downloads? Sprites?HTTP2 will make requests cheaperYou be the judge
Page 95
@portentint
Use a CDN(not a bandwidth thing)
6
Page 96
@portentint
hellloooooo
No CDN
Page 98
@portentint
Use CDN javascript librarieshttps://developers.google.com/speed/libraries/
Page 99
@portentint
Use Cookieless Domains
7
Page 100
@portentint
Cookieless domains
Page 101
@portentint
1.7kbRemove cookie: 1.2kb
(compress: .3kb)
Page 103
100 files * 550b55kbAgain. And again. And again.
Page 104
AlsoPacket = max 1500 bytes500 byte cookie + 1.5kb image = 2kbIncreases round trips
Page 105
@portentint
SERVING
a bit to the left, please…
Page 106
@portentint
Time to First ByteTime between request and delivery of first data
Page 107
@portentint
This is too long
Page 108
@portentint
what the hell?!!!!
Page 109
@portentint
can i get index.html,
please?
Page 110
@portentint
one sec…
Page 111
@portentint
Request
Code
Database
Code
Response
Page 112
@portentint
zzzzz
Page 113
@portentint
Remove Redirect Chains
8
Page 114
@portentint
http://foo.com
http://www.foo.com
https://www.foo.com
Page 115
@portentint
http://foo.com
http://www.foo.com
https://www.foo.com
Page 116
@portentint
Use Keep-Alive
9
Page 117
@portentint
Sure!may i have
index.html?
No keep-alive
Page 118
@portentint
Sure!may i have
index.html?
ok! can I have styles.css? uh, ok
No keep-alive
Page 119
@portentint
No keep-alive
Sure!may i have
index.html?
ok! can I have styles.css? uh, okthanks! can i have
jquery.js?
Page 120
@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
Page 121
@portentint
Sure!can i have index.html, image.gif, jquery.js
and styles.css please?
Keep-alive maintains connections for fewer handshakes
Page 122
@portentint
Use Caching
10
Page 123
@portentint
STORED ON DISK
Page 124
@portentint
STORED IN MEMORY
Page 125
@portentint
Bypasses this
Page 126
@portentint
i’m backyou missed me,
admit it
Page 127
@portentint
nginx
Varnish
Apache
MySQL
builds pages
stores pages
serves pages
Page 128
@portentint
Use the right database for the job
11
Page 129
@portentint
NOSQL
use NOSQL and you’ll be happy and attractive.
Page 131
@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
Page 132
@portentint
Practice Good Mechanics
12
Page 133
@portentint
Putting a database on a web server is like…
Page 134
@portentint
RENDERING
well, $#&!
Page 135
Perceived vs. Actual Load Time
Page 136
@portentint
6.19s
Page 137
@portentint
6.34s
Page 138
@portentint
6.78s
Page 140
@portentint
Optimize HTML
13
Page 141
@portentint
Clean it or defer it
Page 142
@portentint
35,000 lines of codeRender time: 1.5shtml: 900kb
Page 143
@portentint
why?
Page 144
@portentint
At least get rid of the white space
Your browser has to load and parse it
Page 145
@portentint
Defer drop-down generation using javascript
Page 146
@portentint
Remove/compress Viewstate
Page 148
@portentint
Prefetch and Prerender
14
Page 149
@portentint
<link rel="dns-prefetch" href="//domainname.com" /><link rel=“dns-prefetch” href=“https://api.twitter.com” />
Make the DNS connection in advance
Page 150
@portentint
<link rel="prerender" href=”images/kittens.jpg">
Load file in advance
Page 151
@portentint
<link rel=”prefetch" href="http://my-site.com/bar.html">
Load & render page in advance
Page 152
@portentint
Prioritize content
15
Page 153
@portentint
Load Javascript Later
Page 154
@portentint
<script src=”foo.js" async></script>
Execute asynchronously
Page 155
@portentint
<script src=”foo.js" defer></script>
Execute after page is parsed
Page 156
Inline Critical CSS
Page 157
@portentint
Inline this
Browser can do basic rendering without another request
Page 158
@portentint
Use this
Page 159
@portentint
Use this
Page 160
Try Lazy Loading
Page 161
@portentint
Image loads when I scroll to here
Page 162
@portentint
http://portent.co/load-lazy
Page 163
Progressive Animation
Page 164
@portentint
4.57sload an image
first!!!
Page 165
Have Video Alternative Content
Page 166
@portentint
Static image when I arrive
Page 167
Then Defer Video Load
Page 168
@portentint
Prioritize video as relevant
Page 169
Progressive Video
Page 170
@portentint
10s video
20s video
Full-length video
Page 171
Responsive Video
Page 172
@portentint
3G/small
4G/bigger
Tablet/wifi
Desktop/direct
Page 174
@portentint
HTTP/2
Page 175
@portentint
HTTP/2 reverses many best practices because HTTP calls are cheaper.
Page 176
@portentint
No need for sprites, code concatenation.
Page 177
@portentint
SSL 100% required
Page 178
@portentint
No need for sharding
Page 179
@portentint
10% adoption so far
Page 181
@portentint
GETTING BUY IN
Page 182
@portentint
The Drag Race
Page 183
@portentint
Learn the HAR
Page 184
Be ready to explain actual vs. perceived load time
Page 185
@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
Page 186
@portentint
Incremental improvement
Page 187
IT’S LOTS OF LITTLE THINGS
Page 188
@portentint
Ian [email protected]
http://portent.co/speedy-sites
http://portent.co/page-speed-guide
Donations Accepted (small bills only)