Lots of ways to speed up your site
-
Upload
ian-lurie -
Category
Technology
-
view
50.596 -
download
0
Transcript of Lots of ways to speed up your site
![Page 1: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/1.jpg)
@portentint
WAYS TO MAKE YOUR SITE FASTER THE SITE SPEED DOWNLOAD
![Page 2: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/2.jpg)
@portentint
hp://portent.co/speedy-sites
![Page 3: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/3.jpg)
@portentint
SITE SPEED IS A LITTLE SCARY
WHAT THE HELL IS TTFB?!!!
![Page 4: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/4.jpg)
@portentint
WE’LL WALK THROUGH IT
well, that’s a relief
![Page 5: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/5.jpg)
@portentint
I’ll explain relative difficul, impact & when to use each technique
![Page 6: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/6.jpg)
@portentint
Ratings Scale
difficul: impact:
![Page 7: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/7.jpg)
@portentint
These are just the techniques I’ve found to be the biggest wins
![Page 8: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/8.jpg)
@portentint
WHY?
![Page 9: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/9.jpg)
@portentint
HERE’S THE THING
FASTER IS BETTER
![Page 10: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/10.jpg)
@portentint
HERE’S THE THING
MOSTLY.
heh. Oops.
![Page 11: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/11.jpg)
@portentint
must… deliver…
![Page 12: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/12.jpg)
@portentint
HERE’S THE THING
![Page 13: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/13.jpg)
@portentint
HERE’S THE THING
![Page 14: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/14.jpg)
@portentint
HERE’S THE THING
![Page 15: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/15.jpg)
@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
![Page 16: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/16.jpg)
@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?!!!!
![Page 17: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/17.jpg)
@portentint
THREE BOTTLENECKS
![Page 18: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/18.jpg)
@portentint
SERVING
![Page 19: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/19.jpg)
@portentint
TRANSMISSION
![Page 20: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/20.jpg)
@portentint
RENDERING
![Page 21: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/21.jpg)
@portentint
DIAGNOSTIC TOOLS
![Page 22: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/22.jpg)
@portentint
GOOGLE PAGE SPEED INSIGHTS BASIC ANALYSIS
![Page 23: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/23.jpg)
@portentint
Mostly transmission diagnostics
![Page 24: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/24.jpg)
@portentint
developers.google.com/speed/pagespeed/insights/
![Page 25: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/25.jpg)
@portentint
YSLOW READ YOUR WEB SITE’S MIND
![Page 26: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/26.jpg)
@portentint
Powerful
![Page 27: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/27.jpg)
@portentint
Less intuitive
![Page 28: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/28.jpg)
@portentint
yslow.org
![Page 29: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/29.jpg)
@portentint
WEBPAGETEST.ORG A HAPPY MEDIUM
![Page 30: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/30.jpg)
@portentint
Captures many important stats Hard-to-read HAR
![Page 31: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/31.jpg)
@portentint
WHY YOU CAN’T TRUST TOOLS
![Page 32: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/32.jpg)
@portentint
Webpagetest.org: > 8 seconds
![Page 33: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/33.jpg)
@portentint
Pingdom: 1.67 seconds
![Page 34: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/34.jpg)
@portentint
Reali
![Page 35: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/35.jpg)
@portentint
USE HAR SITE SPEED SUPERPOWERS
![Page 36: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/36.jpg)
@portentint
HAR: A direct, step-by-step view of site load & rendering
![Page 37: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/37.jpg)
@portentint
![Page 38: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/38.jpg)
@portentint
![Page 39: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/39.jpg)
@portentint
![Page 40: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/40.jpg)
@portentint
![Page 41: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/41.jpg)
@portentint
DIAGNOSING BOTTLENECKS & SPEEDING UP YOUR SITE
![Page 42: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/42.jpg)
@portentint
TRANSMISSION
![Page 43: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/43.jpg)
@portentint
WHY START WITH TRANSMISSION? IT’S GOT THE EASIEST WINS
![Page 44: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/44.jpg)
@portentint
Blue = Download time
It’s about bandwidth
![Page 45: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/45.jpg)
@portentint
Image Compression
difficul: impact:
![Page 46: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/46.jpg)
@portentint
Google PageSpeed
![Page 47: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/47.jpg)
@portentint
HAR
![Page 48: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/48.jpg)
@portentint
JPG format, 100% quali, 800 x 540: 400kb
![Page 49: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/49.jpg)
@portentint
JPG format, 90% quali, 800 x 540: 217kb
![Page 50: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/50.jpg)
@portentint
JPG format, 80% quali, 800 x 540: 100kb
![Page 51: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/51.jpg)
@portentint
JPG format, 60% quali, 800 x 540: 67kb
![Page 52: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/52.jpg)
@portentint
Page Speed Insights…
![Page 53: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/53.jpg)
@portentint
…But it only does png
![Page 54: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/54.jpg)
@portentint
Compression tools Imageoptim (Mac) Caesium (PC) Fireworks/Photoshop
![Page 55: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/55.jpg)
@portentint
Start at 60% JPG and work your way up/down
![Page 56: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/56.jpg)
@portentint
Start at 128 color PNG
![Page 57: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/57.jpg)
@portentint
USE WHEN WHY THE HELL NOT?!
![Page 58: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/58.jpg)
@portentint
Use the right image format
difficul: impact:
![Page 59: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/59.jpg)
@portentint
PNG format, 800 x 540: 1,000kb
![Page 60: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/60.jpg)
@portentint
JPG format, 100% quali: 60kb
![Page 61: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/61.jpg)
@portentint
PNG format, 32m color: 13kb
![Page 62: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/62.jpg)
@portentint
PNG format, 256k color: 8kb
![Page 63: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/63.jpg)
@portentint
USE WHEN WHY THE HELL NOT?!
![Page 64: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/64.jpg)
@portentint
Minification
difficul: impact:
![Page 65: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/65.jpg)
@portentint
Not minified: 260kb
![Page 66: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/66.jpg)
@portentint
Minified: 32kb
![Page 67: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/67.jpg)
@portentint
Google PageSpeed
![Page 68: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/68.jpg)
@portentint
Use .MIN.JS version of javascript libraries
![Page 69: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/69.jpg)
@portentint
jscompress.com
![Page 70: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/70.jpg)
@portentint
cssminifier.com
![Page 71: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/71.jpg)
@portentint
HTML, too
![Page 72: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/72.jpg)
@portentint
USE WHEN Always
![Page 73: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/73.jpg)
@portentint
HTTP compression
difficul: impact:
![Page 74: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/74.jpg)
@portentint
Lossless compression of HTML, javascript, css, other files
![Page 75: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/75.jpg)
@portentint
Hey, thanks! I’ll extract it here.
I’m going to compress these files for you so they arrive more
quickly.
![Page 76: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/76.jpg)
@portentint
CHECKGZIPCOMPRESSION.COM
![Page 77: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/77.jpg)
@portentint
Google PageSpeed
![Page 78: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/78.jpg)
@portentint
Apache mod_deflate
![Page 79: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/79.jpg)
@portentint
nginx ngx_hp_gzip_module
![Page 80: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/80.jpg)
@portentint
IIS Click the checkbox
![Page 81: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/81.jpg)
@portentint
Not always possible with 3rd-par scripts
![Page 82: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/82.jpg)
@portentint
NOT OVER SSL unless you really know what you’re doing
![Page 83: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/83.jpg)
@portentint
USE WHEN Any non-encrypted
![Page 84: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/84.jpg)
@portentint
Expires Headers
difficul: impact:
![Page 85: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/85.jpg)
@portentint
this file doesn’t change
that often.
ok, i’ll save it to my hard drive.
![Page 86: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/86.jpg)
@portentint
Google PageSpeed
![Page 87: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/87.jpg)
@portentint
Not possible w/ 3rd-par scripts
![Page 88: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/88.jpg)
@portentint
Apache mod_expires
![Page 89: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/89.jpg)
@portentint
nginx ngx_hp_headers_module
![Page 90: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/90.jpg)
@portentint
IIS clientCache or hpExpires or …?
![Page 91: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/91.jpg)
@portentint
USE WHEN Site uses many static files
![Page 92: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/92.jpg)
@portentint
HERE’S THE THING TEST.
my bad.
![Page 93: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/93.jpg)
@portentint
RENDERING
![Page 94: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/94.jpg)
@portentint
It’s about browser performance How quickly can a browser ‘draw’ this page?
![Page 95: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/95.jpg)
@portentint
Webpagetest.org
![Page 96: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/96.jpg)
@portentint
This line
HAR view
This number
![Page 97: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/97.jpg)
@portentint
APPARENT RENDER TIME
MEASURED RENDER TIME
![Page 98: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/98.jpg)
@portentint
Load order
difficul: impact:
![Page 99: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/99.jpg)
@portentint
CSS first. Javascript last.
![Page 100: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/100.jpg)
@portentint
<script src=“script.js” defer>
Load in parallel, don’t block
![Page 101: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/101.jpg)
@portentint
<script src=“script.js” async>
Load in parallel, execute as soon as possible
![Page 102: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/102.jpg)
@portentint
Tag managers…?
![Page 103: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/103.jpg)
@portentint
Google PageSpeed
![Page 104: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/104.jpg)
@portentint
HAR
![Page 105: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/105.jpg)
@portentint
May break 3rd-par javascript
![Page 106: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/106.jpg)
@portentint
USE WHEN You can
![Page 107: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/107.jpg)
@portentint
Parallel downloads
difficul: impact:
![Page 108: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/108.jpg)
@portentint
3 different subdomains
![Page 109: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/109.jpg)
@portentint
Parallel load
![Page 110: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/110.jpg)
@portentint
USE WHEN You can use multiple subdomains
You use a CDN
![Page 111: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/111.jpg)
@portentint
Optimizing HTML
difficul: impact:
![Page 112: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/112.jpg)
@portentint
35,000 lines of code Render time: 1.5s
html: 900kb
![Page 113: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/113.jpg)
@portentint
why?
![Page 114: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/114.jpg)
@portentint
Put in .css instead
![Page 115: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/115.jpg)
@portentint
Much beer
![Page 116: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/116.jpg)
@portentint
Minified html
![Page 117: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/117.jpg)
@portentint
DOM elements (yslow)
![Page 118: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/118.jpg)
@portentint
At least get rid of the white space
![Page 119: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/119.jpg)
@portentint
USE WHEN Always
![Page 120: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/120.jpg)
@portentint
Lazy loading
difficul: impact:
![Page 121: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/121.jpg)
@portentint
Image loads when I scroll to here
![Page 122: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/122.jpg)
@portentint
hp://portent.co/load-lazy
![Page 123: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/123.jpg)
@portentint
USE WHEN You have below-the-fold images
You have a gallery
![Page 124: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/124.jpg)
@portentint
DNS prefetch
difficul: impact:
![Page 125: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/125.jpg)
@portentint
HAR
![Page 126: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/126.jpg)
@portentint
<link rel="dns-prefetch" href="//domainname.com" /> <link rel=“dns-prefetch” href=“https://api.twitter.com” />
![Page 127: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/127.jpg)
@portentint
Prefetch/Prerender
difficul: impact:
![Page 128: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/128.jpg)
@portentint
You go to this page a lot.
I’m going to get it ready ahead of
time.
![Page 129: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/129.jpg)
@portentint
Most popular page prerendered
![Page 130: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/130.jpg)
@portentint
![Page 131: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/131.jpg)
@portentint
<link rel="prerender" href=”images/kittens.jpg">
Load file in advance
![Page 132: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/132.jpg)
@portentint
<link rel=”prefetch" href="http://my-site.com/bar.html">
Load & render page in advance
![Page 133: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/133.jpg)
@portentint
USE WHEN You know certain pages dominate
![Page 134: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/134.jpg)
@portentint
HERE’S THE THING TEST!!!
d’oh
![Page 135: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/135.jpg)
@portentint
SERVING
![Page 136: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/136.jpg)
@portentint
Nerds required
yeah baby
![Page 137: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/137.jpg)
@portentint
TTFB: Time To First Byte
![Page 138: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/138.jpg)
@portentint
Google PageSpeed
![Page 139: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/139.jpg)
@portentint
HAR
![Page 140: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/140.jpg)
@portentint
Time to First Byte (TTFB) should not > 500ms
![Page 141: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/141.jpg)
@portentint
But <250ms is beer
![Page 142: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/142.jpg)
@portentint
CDN
difficul: impact:
![Page 143: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/143.jpg)
@portentint
No CDN
hellloooooo
![Page 144: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/144.jpg)
@portentint
CDN
![Page 145: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/145.jpg)
@portentint
A lot of work, but also helps with hp compression, parallel loading, cookieless delivery, expires headers
![Page 146: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/146.jpg)
@portentint
USE WHEN You can
![Page 147: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/147.jpg)
@portentint
disk & query caching
difficul: impact:
![Page 148: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/148.jpg)
@portentint
STORED ON DISK
![Page 149: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/149.jpg)
@portentint
That’s a long time. Are you using disk caching?
![Page 150: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/150.jpg)
@portentint
Stalled may indicate a page generation boleneck. Use disk/query caching
![Page 151: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/151.jpg)
@portentint
USE WHEN …
![Page 152: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/152.jpg)
@portentint
keep-alive
difficul: impact:
![Page 153: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/153.jpg)
@portentint
No keep-alive
Sure!may i have
index.html?
![Page 154: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/154.jpg)
@portentint
No keep-alive
Sure!may i have
index.html?
ok! can I have styles.css? uh, ok
![Page 155: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/155.jpg)
@portentint
No keep-alive
Sure!may i have
index.html?
ok! can I have styles.css? uh, okthanks! can i have
jquery.js?
![Page 156: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/156.jpg)
@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?
![Page 157: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/157.jpg)
@portentint
Maintains connection, so fewer ‘handshakes’
Keep-alive
![Page 158: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/158.jpg)
@portentint
Keep-alive
Sure!can i have index.html, image.gif, jquery.js
and styles.css please?
![Page 159: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/159.jpg)
@portentint
USE WHEN Always
![Page 160: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/160.jpg)
@portentint
php/code acceleration
difficul: impact:
![Page 161: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/161.jpg)
@portentint
Xcache APC
![Page 162: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/162.jpg)
@portentint
USE WHEN It’s available
![Page 163: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/163.jpg)
@portentint
pre-rendering/server caching
difficul: impact:
![Page 164: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/164.jpg)
@portentint
Request page
Store rendered page
Deliver page
Generate page Web/application server
Phantomjs
Cache server
![Page 165: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/165.jpg)
@portentint
USE WHEN It’s doable
![Page 166: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/166.jpg)
@portentint
HERE’S THE THING TEST!!!
whoopsie
![Page 167: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/167.jpg)
@portentint
GOOGLE AMP? FACEBOOK INSTANT PAGES?
![Page 168: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/168.jpg)
@portentint
First, do it right
![Page 169: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/169.jpg)
@portentint
MORE TO DO
![Page 170: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/170.jpg)
@portentint
Sprites/Reduce HTTP calls Responsive image scaling
CSS optimization Javascript optimization
Cookieless delivery
![Page 171: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/171.jpg)
@portentint
REMEMBER THE BOTTLENECKS
![Page 172: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/172.jpg)
@portentint
SERVING
![Page 173: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/173.jpg)
@portentint
TRANSMISSION
![Page 174: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/174.jpg)
@portentint
RENDERING
![Page 175: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/175.jpg)
@portentint
HERE’S THE THING TEST!!!
![Page 176: Lots of ways to speed up your site](https://reader033.fdocuments.net/reader033/viewer/2022042907/588505a51a28ab7d698b660f/html5/thumbnails/176.jpg)
@portentint
Ian Lurie @portentint www.portent.com
hp://portent.co/speedy-sites hp://portent.co/page-speed-guide