Web Performance

A talk by Joacim Gunnarsson about Web Performance in general. It's focused on the client side and includes concrete tips how you can improve and plan the performance of your site.

Transcript

1. WEB PERFORMANCE Knowit Reaktor Stockholm joacim.gunnarsson@knowit.se http://joacim.me Knowit Developer Summit 2015 Saturday the 14th of November at 13:50 Radisson Blu Waterfront Stockholm, Room 24 JOACIM GUNNARSSON
2. Agenda • Why performance • Perception of Time • Aim for one second • How do I test my site? ◦ Speed Index • Latency vs Bandwidth • TCP Connections • SlowIt - Let’s fix it • Prefetching • Perceived Performance • Performance planning • The Future… Is here
3. Why performance?
4. Why performance? • 47% of the users expected a web page to load in less than 2 seconds • 40% of the users abandon sites with page load high than 3 seconds http://blog.jamesdbloom.com/WhyDoesWebPerformanceMatter.html
5. Why performance? • Google - 500ms slowdown equals 20% decrease in ad revenue.
6. Why performance? • Google - 500ms slowdown equals 20% decrease in ad revenue. • Amazon - 100ms slowdown – can mean a 1% decrease in revenue.
7. Why performance? • Google - 500ms slowdown equals 20% decrease in ad revenue. • Amazon - 100ms slowdown – can mean a 1% decrease in revenue. • Yahoo - 400ms improvement in load time translated to a 9% increase in traffic.
8. Why performance? • Google - 500ms slowdown equals 20% decrease in ad revenue. • Amazon - 100ms slowdown – can mean a 1% decrease in revenue. • Yahoo - 400ms improvement in load time translated to a 9% increase in traffic. • Google is so committed to speed and User Experience that they are, right within their search results, experimenting with affixing a "SLOW" label to slower websites
9. Perception of time
10. Preception of time “Alice: How long is forever? White Rabbit: Sometimes, just one second.” ― Lewis Carroll, Alice in Wonderland http://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
11. Preception of time • Objective Time http://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
12. Preception of time • Objective Time • Psychological Time http://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
13. Preception of time • Objective Time • Psychological Time Instant 0.1 - 0.2 second Immidiate 0.5 - 1 second User flow 2 - 5 seconds Attention span 5 - 10 seconds http://www.smashingmagazine.com/2015/09/why-performance-matters-the-perception-of-time/
14. Preception of time • Objective Time • Psychological Time Instant 0.1 - 0.2 second Immidiate 0.5 - 1 second User flow 2 - 5 seconds Attention span 5 - 10 seconds Average attention span 8 seconds
15. Aim for one second
16. Mobile and Latency https://developers.google.com/web/fundamentals/performance/
17. Mobile and Latency Above the fold (ATF)
18. How do I test my site?
19. How can I test my site? WebPageTest.org Start using it today!
20. How can I test my site?
21. Speed index
22. Speed index https://sites.google.com/a/webpagetest.org/docs/ https://developers.google.com/web/fundamentals/performance/
23. Speed index https://sites.google.com/a/webpagetest.org/docs/
24. Latency vs bandwidth
25. Latency vs bandwith https://zoompf.com/blog/2011/12/i-dont-care-how-big-yours-is A B A (STHLM) B (LA)
26. Latency vs bandwith https://zoompf.com/blog/2011/12/i-dont-care-how-big-yours-is A B A (STHLM) B (LA) 30ms 60ms 120 ms for one round trip
27. Latency vs bandwith https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
28. Latency vs bandwith https://www.belshe.com/2010/05/24/more-bandwidth-doesnt-matter-much/
29. What is latency? http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#RRC
30. What is latency? Generation Data rate Latency 2G 100–400 Kbit/s 300–1000 ms 3G 0.5–5 Mbit/s 100–500 ms 4G 1–50 Mbit/s < 100 ms http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#_evolution_of_3g_technologies
31. TCP Connections
32. TCP Three-way handshake Three-Way Handshake http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#RRC
33. TCP Slow start Three-Way Handshake • Always Keep Alive • Minimize the number of your HTTP requests for a good mobile experience • Can we deliver the page in one round trip? http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#RRC
34. TCP Connection (Slow start) http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#_evolution_of_3g_technologies
35. TCP Connection (Slow start) ~14kb with IW10 http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#_evolution_of_3g_technologies
36. SlowIt - Let’s fix it!
37. SlowIt - Let’s fix it! • SlowIt Landing Page ◦ Bootstrap 3 ◦ Responsive • Let’s make it better! • Google PageSpeed Insights Score above 85 is good
38. Images - Scale Serve scaled images • Scale • Choose the right format • Remove meta tags • Try SVG https://developers.google.com/web/fundamentals/performance/
39. Images - Optimize Optimize Tinypng https://tinypng.com/
40. Images - Optimize
41. Images - Responsive https://responsiveimages.org/
42. Render-blocking elements https://developers.google.com/web/fundamentals/performance/
43. Render-blocking elements https://developers.google.com/web/fundamentals/performance/
44. Render-blocking elements
45. Minify Minify CSS Minify Javascript Minify HTML* 66% 86% 17% 22%
46. Minify
47. Gzip compression Gzip is a must! https://www.youtube.com/watch?v=SWBkneyTyPU
48. Gzip compression Gzip is a must! https://developers.google.com/web/fundamentals/performance/
49. Gzip compression Gzip is a must! https://developers.google.com/web/fundamentals/performance/ PureCSS.min.css 4kb
50. 100/100
51. And a lot of other stuff to optimize • There are bunch of other things you can do to optimize https://developers.google.com/web/fundamentals/performance/
52. Prefetching
53. Dns-prefetch Browser Version Firefox 3.5+ Chrome 1.0+ Safari 5.01+ IE 9+ (prefetch)
54. Preconnect Browser Version Firefox 42 Chrome 46 Safari n/a IE n/a
55. Prefetch Browser Version Firefox 3.5+ Chrome 1.0+ Safari n/a IE 10+
56. Prerender Browser Version Firefox n/a Chrome 13+ Safari n/a IE 11+
57. Perceived Performance
58. Perceived Performance Instagram
59. Performance planning
60. The 20% rule The 20% rule or Weber-Fechner Law Compeditors download time * 0.8 = Lowest goal
61. Web performance budget Web performance budget • Look at competitors • Speedindex of 2500 • 14 kb rule • Images max weight 100kb • Total weight of all images less than 2 mb • Max number of HTTP requets 80 • The total weight of the website should not exceed 5 mb SEPARATION OF CONCERNS - Andy Hume • Core content • Enhancement • Leftovers https://vimeo.com/77967591
62. The future… is here
63. HTTP 2 • Orgins from SPDY by Google • Binary Framing Layer • Header Compression • One TCP connection • Multiplexing • Server push • And more Anti-patterns • Images Sprites • Merging css, js http://chimera.labs.oreilly.com/books/1230000000545/ch07.html#_evolution_of_3g_technologies “when we download the top 25 websites over simulated home network connections, we see a significant improvement in performance—pages loaded up to 55% faster.” -- A 2x Faster Web Chromium Blog
64. A word from O’REILLY... http://shop.oreilly.com/product/0636920028048.do
65. SlowIt - Let’s fix it! Takeaways • Performance is important • Aim for 1 second ATF rendering • Webpagetest.org - Start testing today! • Speed Index - Good mesurement • Keep number of HTTP requets low - Latecy is evil. • 14 KB with 10 Segments • Block rendering • Gzip • Web performance budget - 20% improvements • HTTP 2
66. Knowit Reaktor Stockholm joacim.gunnarsson@knowit.se http://joacim.me Knowit Developer Summit 2015 THANKS!!!