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.
SPEED
MATTERS
100ms 1s 10s
Response Time in Man-computer Conversational Transactions
Robert B. Miller, 1968
Instant
Seamless Yawn!
Our p...
Bing did some experiments
+1s - 2.8%
+1s$/
Time to click +2s
Bing
WalmartWallmart made some improvements
-1s +2%
Shopzilla
http://velocityconf.com/velocity2009/public/schedule/detail/7709
$$$
+12% +25% -50%
From 6-9s down to 1.2s
Strangeloop Networks
Strangeloop Networks
Strangeloop Networks
The network
1 2 3 4 5 6 7 8 9 10
1.36s1.37s1.38s1.39s1.41s1.44s1.50s
1.63s
1.95s
3.11s
PageLoadTime
Bandwidth (Mbps)
Bandwidth doesn’t...
300k image downloading slowed 40x
Browser Server
Minimum round trips to
download a file
71kB
143kB
214kB
285kB
1 2 3 4 5 6 7 8 9 10 11
(TCP Segments)
Round Trips
Size
Impact of latency
1
2
3
4
0 20 40 60 80 100 120 140 160 180 200 220 240
PageLoadTime(s)
Round Trip Time (ms)
The front-end
really matters
80% of time is front-end
news.bbc.co.uk
ebay.co.uk
debenhams.co.uk
direct.gov.uk
amazon.co.uk
mumsnet.com
guardian.co.uk
0...
Still got to fix the backend!
327k (32%) bigger in one year
Onload ≠ User perception
2.0s 88% rendered 5.2s window.onload
So how do we
measure speed?
Uptime monitoring (Pingdom)
Synthetic testing
Only the HTML request measured
Real user monitoring (RUM)
New Relic RUM
APDEX
GA site speed
GA site speed
GA site speed
GA Site speed sample rate
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-XX']);
_gaq.push(['_setSiteSpeedSampl...
1
2 3
4
5 6
10
8
9
4
11
13
12
7
14
7
GA User timing
_gaq.push([‘_trackTiming’,
‘jQuery’,‘Load Library’, 20,
‘Google CDN’,50]);
GA User timing
GA User timing
Performance benchmarking
How do I make
it faster?
Google PageSpeed Insight
WebPagetest
stevesouders.com/hpws/
browserdiet.com
How do I make
it faster across
all those devices?
Responsive Design
1. Build mobile first responsive designs
2. Keep CSS background images in scoped media
queries
3. Conditionally load JavaS...
Responsive Images using
Picturefill & WebP
Dynamic image generation
CSS focal point
Adam Bradley
github.com/blog/
Adaptive Design
Device detection (WURFL)
Going mobile
first is harder
than you think
igvita.com
igvita.com
igvita.com
speedcurve.com
@markzeman
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Speed matters - measuring front-end web performance
Terminou este documento.
Transfira e leia offline.
Próximos SlideShares
Measuring web performance
Avançar
Próximos SlideShares
Measuring web performance
Avançar
Transfira para ler offline e ver em ecrã inteiro.

Compartilhar

Speed matters - measuring front-end web performance

Baixar para ler offline

Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman!

Learn more on the SpeedCurve blog
http://speedcurve.com/blog/

Speed matters - measuring front-end web performance

  1. SPEED MATTERS
  2. 100ms 1s 10s Response Time in Man-computer Conversational Transactions Robert B. Miller, 1968 Instant Seamless Yawn! Our perception of response time 3s - Recommended Load Time 6.5s - Alexa 2000 Fall 2012 Miller Response Time 1968
  3. Bing did some experiments +1s - 2.8% +1s$/ Time to click +2s Bing
  4. WalmartWallmart made some improvements -1s +2%
  5. Shopzilla http://velocityconf.com/velocity2009/public/schedule/detail/7709 $$$ +12% +25% -50% From 6-9s down to 1.2s
  6. Strangeloop Networks
  7. Strangeloop Networks
  8. Strangeloop Networks
  9. The network
  10. 1 2 3 4 5 6 7 8 9 10 1.36s1.37s1.38s1.39s1.41s1.44s1.50s 1.63s 1.95s 3.11s PageLoadTime Bandwidth (Mbps) Bandwidth doesn’t matter (much)
  11. 300k image downloading slowed 40x Browser Server
  12. Minimum round trips to download a file 71kB 143kB 214kB 285kB 1 2 3 4 5 6 7 8 9 10 11 (TCP Segments) Round Trips Size
  13. Impact of latency 1 2 3 4 0 20 40 60 80 100 120 140 160 180 200 220 240 PageLoadTime(s) Round Trip Time (ms)
  14. The front-end really matters
  15. 80% of time is front-end news.bbc.co.uk ebay.co.uk debenhams.co.uk direct.gov.uk amazon.co.uk mumsnet.com guardian.co.uk 0 1 2 3 4 5 Backend Frontend
  16. Still got to fix the backend!
  17. 327k (32%) bigger in one year
  18. Onload ≠ User perception 2.0s 88% rendered 5.2s window.onload
  19. So how do we measure speed?
  20. Uptime monitoring (Pingdom)
  21. Synthetic testing
  22. Only the HTML request measured
  23. Real user monitoring (RUM)
  24. New Relic RUM
  25. APDEX
  26. GA site speed
  27. GA site speed
  28. GA site speed
  29. GA Site speed sample rate var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXX-XX']); _gaq.push(['_setSiteSpeedSampleRate', 100]); _gaq.push(['_trackPageview']);
  30. 1 2 3 4 5 6 10 8 9 4 11 13 12 7 14 7
  31. GA User timing _gaq.push([‘_trackTiming’, ‘jQuery’,‘Load Library’, 20, ‘Google CDN’,50]);
  32. GA User timing
  33. GA User timing
  34. Performance benchmarking
  35. How do I make it faster?
  36. Google PageSpeed Insight
  37. WebPagetest
  38. stevesouders.com/hpws/
  39. browserdiet.com
  40. How do I make it faster across all those devices?
  41. Responsive Design
  42. 1. Build mobile first responsive designs 2. Keep CSS background images in scoped media queries 3. Conditionally load JavaScript and even HTML fragments based on screen size and capabilities 4. Implement a responsive images solution 5. Handle retina images very carefully and err on the side of performance Jason Grigsby
  43. Responsive Images using Picturefill & WebP
  44. Dynamic image generation
  45. CSS focal point Adam Bradley
  46. github.com/blog/ Adaptive Design
  47. Device detection (WURFL)
  48. Going mobile first is harder than you think
  49. igvita.com
  50. igvita.com
  51. igvita.com
  52. speedcurve.com @markzeman
  • janjagoda

    Jun. 15, 2018
  • rubiaferdias

    May. 13, 2016
  • lalitkale

    Oct. 13, 2015
  • fasoulas

    May. 1, 2015
  • paulocoimbra

    Nov. 6, 2014
  • LeandroNunes1

    Sep. 9, 2014
  • brsmith

    Feb. 4, 2014
  • junepac

    Dec. 11, 2013
  • EduardoSantos7

    Oct. 2, 2013
  • evroekel

    Oct. 1, 2013
  • AlannahOpenEd

    Sep. 30, 2013
  • slngtod

    Sep. 30, 2013
  • tano_tano

    Sep. 30, 2013

Why speed matters, examples of the impact saving a few seconds of load time has had on revenue and engagement. The network constraints and what makes the web slow? Bandwidth, latency and it's fundamental impact on the speed of the web. An overview of tools for measuring performance, uptime monitoring, real user monitoring and performance benchmarking. How to make your website faster. Optimization tools and techniques. Muti-device challenges. Responsive vs Adaptive and delivering to mobile within a second. Drop that donut superman! Learn more on the SpeedCurve blog http://speedcurve.com/blog/

Vistos

Vistos totais

8.212

No Slideshare

0

De incorporações

0

Número de incorporações

45

Ações

Baixados

63

Compartilhados

0

Comentários

0

Curtir

13

×