O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
@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
Próximos SlideShares
Carregando em…5
×

Lots of ways to speed up your site

102.612 visualizações

Publicada em

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.

Publicada em: Tecnologia, Internet
  • How to start a wildly profitable 7 figure marketing business and get your first commission check tonight, click here ▲▲▲ https://bit.ly/2kS5a5J
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Earn a 6-Figure Side-Income Online... Signup for the free training HERE ♥♥♥ https://tinyurl.com/y3ylrovq
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Download The Complete Lean Belly Breakthrough Program with Special Discount. ◆◆◆ http://ishbv.com/bkfitness3/pdf
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • How to stop hair loss in just 2 weeks ■■■ http://t.cn/AiHip2fH
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • How to improve brain memory power naturally? Boost your brainpower with brain pill now... ◆◆◆ https://tinyurl.com/brainpill101
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×