Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
Measuring web performance
Measuring web performance
Wird geladen in …3
×
1 von 63

Speed matters - measuring front-end web performance

14

Teilen

Herunterladen, um offline zu lesen

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/

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

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

×