Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
@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
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
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
difficul‫:﬚‬
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
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_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
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_h‫﬙‬p_headers_module
@portentint
IIS
clientCache or h‫﬙‬pExpires 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
HAR
@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 be‫﬙‬er
@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
h‫﬙‬p://portent.co/load-lazy
@portentint
USE WHEN
You have below-the-fold images
You have a gallery
@portentint
DNS prefetch
difficul‫:﬚‬
impact:
@portentint
HAR
@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
@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
HAR
@portentint
Time to First Byte (TTFB) should not > 500ms
@portentint
But <250ms is be‫﬙‬er
@portentint
CDN
difficul‫:﬚‬
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
difficul‫:﬚‬
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
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 ...
@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
h‫﬙‬p://portent.co/speedy-sites
h‫﬙‬p://portent.co/page-speed-guide
Upcoming SlideShare
Loading in …5
×

of

Lots of ways to speed up your site Slide 1 Lots of ways to speed up your site Slide 2 Lots of ways to speed up your site Slide 3 Lots of ways to speed up your site Slide 4 Lots of ways to speed up your site Slide 5 Lots of ways to speed up your site Slide 6 Lots of ways to speed up your site Slide 7 Lots of ways to speed up your site Slide 8 Lots of ways to speed up your site Slide 9 Lots of ways to speed up your site Slide 10 Lots of ways to speed up your site Slide 11 Lots of ways to speed up your site Slide 12 Lots of ways to speed up your site Slide 13 Lots of ways to speed up your site Slide 14 Lots of ways to speed up your site Slide 15 Lots of ways to speed up your site Slide 16 Lots of ways to speed up your site Slide 17 Lots of ways to speed up your site Slide 18 Lots of ways to speed up your site Slide 19 Lots of ways to speed up your site Slide 20 Lots of ways to speed up your site Slide 21 Lots of ways to speed up your site Slide 22 Lots of ways to speed up your site Slide 23 Lots of ways to speed up your site Slide 24 Lots of ways to speed up your site Slide 25 Lots of ways to speed up your site Slide 26 Lots of ways to speed up your site Slide 27 Lots of ways to speed up your site Slide 28 Lots of ways to speed up your site Slide 29 Lots of ways to speed up your site Slide 30 Lots of ways to speed up your site Slide 31 Lots of ways to speed up your site Slide 32 Lots of ways to speed up your site Slide 33 Lots of ways to speed up your site Slide 34 Lots of ways to speed up your site Slide 35 Lots of ways to speed up your site Slide 36 Lots of ways to speed up your site Slide 37 Lots of ways to speed up your site Slide 38 Lots of ways to speed up your site Slide 39 Lots of ways to speed up your site Slide 40 Lots of ways to speed up your site Slide 41 Lots of ways to speed up your site Slide 42 Lots of ways to speed up your site Slide 43 Lots of ways to speed up your site Slide 44 Lots of ways to speed up your site Slide 45 Lots of ways to speed up your site Slide 46 Lots of ways to speed up your site Slide 47 Lots of ways to speed up your site Slide 48 Lots of ways to speed up your site Slide 49 Lots of ways to speed up your site Slide 50 Lots of ways to speed up your site Slide 51 Lots of ways to speed up your site Slide 52 Lots of ways to speed up your site Slide 53 Lots of ways to speed up your site Slide 54 Lots of ways to speed up your site Slide 55 Lots of ways to speed up your site Slide 56 Lots of ways to speed up your site Slide 57 Lots of ways to speed up your site Slide 58 Lots of ways to speed up your site Slide 59 Lots of ways to speed up your site Slide 60 Lots of ways to speed up your site Slide 61 Lots of ways to speed up your site Slide 62 Lots of ways to speed up your site Slide 63 Lots of ways to speed up your site Slide 64 Lots of ways to speed up your site Slide 65 Lots of ways to speed up your site Slide 66 Lots of ways to speed up your site Slide 67 Lots of ways to speed up your site Slide 68 Lots of ways to speed up your site Slide 69 Lots of ways to speed up your site Slide 70 Lots of ways to speed up your site Slide 71 Lots of ways to speed up your site Slide 72 Lots of ways to speed up your site Slide 73 Lots of ways to speed up your site Slide 74 Lots of ways to speed up your site Slide 75 Lots of ways to speed up your site Slide 76 Lots of ways to speed up your site Slide 77 Lots of ways to speed up your site Slide 78 Lots of ways to speed up your site Slide 79 Lots of ways to speed up your site Slide 80 Lots of ways to speed up your site Slide 81 Lots of ways to speed up your site Slide 82 Lots of ways to speed up your site Slide 83 Lots of ways to speed up your site Slide 84 Lots of ways to speed up your site Slide 85 Lots of ways to speed up your site Slide 86 Lots of ways to speed up your site Slide 87 Lots of ways to speed up your site Slide 88 Lots of ways to speed up your site Slide 89 Lots of ways to speed up your site Slide 90 Lots of ways to speed up your site Slide 91 Lots of ways to speed up your site Slide 92 Lots of ways to speed up your site Slide 93 Lots of ways to speed up your site Slide 94 Lots of ways to speed up your site Slide 95 Lots of ways to speed up your site Slide 96 Lots of ways to speed up your site Slide 97 Lots of ways to speed up your site Slide 98 Lots of ways to speed up your site Slide 99 Lots of ways to speed up your site Slide 100 Lots of ways to speed up your site Slide 101 Lots of ways to speed up your site Slide 102 Lots of ways to speed up your site Slide 103 Lots of ways to speed up your site Slide 104 Lots of ways to speed up your site Slide 105 Lots of ways to speed up your site Slide 106 Lots of ways to speed up your site Slide 107 Lots of ways to speed up your site Slide 108 Lots of ways to speed up your site Slide 109 Lots of ways to speed up your site Slide 110 Lots of ways to speed up your site Slide 111 Lots of ways to speed up your site Slide 112 Lots of ways to speed up your site Slide 113 Lots of ways to speed up your site Slide 114 Lots of ways to speed up your site Slide 115 Lots of ways to speed up your site Slide 116 Lots of ways to speed up your site Slide 117 Lots of ways to speed up your site Slide 118 Lots of ways to speed up your site Slide 119 Lots of ways to speed up your site Slide 120 Lots of ways to speed up your site Slide 121 Lots of ways to speed up your site Slide 122 Lots of ways to speed up your site Slide 123 Lots of ways to speed up your site Slide 124 Lots of ways to speed up your site Slide 125 Lots of ways to speed up your site Slide 126 Lots of ways to speed up your site Slide 127 Lots of ways to speed up your site Slide 128 Lots of ways to speed up your site Slide 129 Lots of ways to speed up your site Slide 130 Lots of ways to speed up your site Slide 131 Lots of ways to speed up your site Slide 132 Lots of ways to speed up your site Slide 133 Lots of ways to speed up your site Slide 134 Lots of ways to speed up your site Slide 135 Lots of ways to speed up your site Slide 136 Lots of ways to speed up your site Slide 137 Lots of ways to speed up your site Slide 138 Lots of ways to speed up your site Slide 139 Lots of ways to speed up your site Slide 140 Lots of ways to speed up your site Slide 141 Lots of ways to speed up your site Slide 142 Lots of ways to speed up your site Slide 143 Lots of ways to speed up your site Slide 144 Lots of ways to speed up your site Slide 145 Lots of ways to speed up your site Slide 146 Lots of ways to speed up your site Slide 147 Lots of ways to speed up your site Slide 148 Lots of ways to speed up your site Slide 149 Lots of ways to speed up your site Slide 150 Lots of ways to speed up your site Slide 151 Lots of ways to speed up your site Slide 152 Lots of ways to speed up your site Slide 153 Lots of ways to speed up your site Slide 154 Lots of ways to speed up your site Slide 155 Lots of ways to speed up your site Slide 156 Lots of ways to speed up your site Slide 157 Lots of ways to speed up your site Slide 158 Lots of ways to speed up your site Slide 159 Lots of ways to speed up your site Slide 160 Lots of ways to speed up your site Slide 161 Lots of ways to speed up your site Slide 162 Lots of ways to speed up your site Slide 163 Lots of ways to speed up your site Slide 164 Lots of ways to speed up your site Slide 165 Lots of ways to speed up your site Slide 166 Lots of ways to speed up your site Slide 167 Lots of ways to speed up your site Slide 168 Lots of ways to speed up your site Slide 169 Lots of ways to speed up your site Slide 170 Lots of ways to speed up your site Slide 171 Lots of ways to speed up your site Slide 172 Lots of ways to speed up your site Slide 173 Lots of ways to speed up your site Slide 174 Lots of ways to speed up your site Slide 175 Lots of ways to speed up your site Slide 176
Upcoming SlideShare
30/ 60/ 10: The Golden Ratio for Social Marketing
Next
Download to read offline and view in fullscreen.

768 Likes

Share

Download to read offline

Lots of ways to speed up your site

Download to read offline

If you want a fast web site, you have to get a lot of things right. It's worth it - revenue rises steeply if you can get load times under 2 seconds. This is my ever-growing list of tips, tricks and warnings about improving page speed load times.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Lots of ways to speed up your site

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

    Nov. 30, 2021
  • JenniferEndres4

    Mar. 6, 2021
  • jesusam

    Sep. 24, 2019
  • VitaliyKotlyar3

    May. 31, 2019
  • Regency_Group

    Nov. 15, 2018
  • Vhjkjh

    Jul. 26, 2018
  • sirleidefatimajabali

    Apr. 25, 2018
  • tomasdd

    Sep. 8, 2017
  • Clipping-Path-House

    May. 1, 2017
  • YOUSEFALJNAABA

    Mar. 21, 2017
  • reviewmanagement

    Nov. 2, 2016
  • weikitfong

    Oct. 29, 2016
  • CihatKAHRAMAN

    Sep. 2, 2016
  • MiNDocR

    Sep. 2, 2016
  • DavidRFeig

    Aug. 12, 2016
  • FeyzRoot

    Jun. 22, 2016
  • InformationData

    Jun. 20, 2016
  • F4llRoot

    Jun. 12, 2016
  • Ev0lveRoot

    May. 18, 2016
  • mercroot

    May. 11, 2016

If you want a fast web site, you have to get a lot of things right. It's worth it - revenue rises steeply if you can get load times under 2 seconds. This is my ever-growing list of tips, tricks and warnings about improving page speed load times.

Views

Total views

136,038

On Slideshare

0

From embeds

0

Number of embeds

13,374

Actions

Downloads

493

Shares

0

Comments

0

Likes

768

×