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

122.224 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
  • I like this service ⇒ www.HelpWriting.net ⇐ from Academic Writers. I don't have enough time write it by myself.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • I’ve personally never heard of companies who can produce a paper for you until word got around among my college groupmates. My professor asked me to write a research paper based on a field I have no idea about. My research skills are also very poor. So, I thought I’d give it a try. I chose a writer who matched my writing style and fulfilled every requirement I proposed. I turned my paper in and I actually got a good grade. I highly recommend ⇒ www.HelpWriting.net ⇐
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • I have always found it hard to meet the requirements of being a student. Ever since my years of high school, I really have no idea what professors are looking for to give good grades. After some google searching, I found this service ⇒ www.HelpWriting.net ⇐ who helped me write my research paper.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • ⇒ www.WritePaper.info ⇐ This service will write as best as they can. So you do not need to waste the time on rewritings.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Very nice tips on this. In case you need help on any kind of academic writing visit website ⇒ www.WritePaper.info ⇐ and place your order
       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

×