Site Speed Fundamentals
•
1 like•190 views
Giving and introduction to the site speed topic and talking about the limiting factors of site-speed, how site-speed can me measured and monitored, how site-speed can be connected to business metrics and finally about typical site speed optimizations.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Site Speed Fundamentals
Similar to Site Speed Fundamentals (20)
Recently uploaded
Recently uploaded (20)
Site Speed Fundamentals
- 2. What is Site Speed?
- 3. Site Speed -> Page Speed
- 6. Time until page gets fully loaded.
- 7. Time until user can start interacting with page.
- 8. Why is Site Speed important?
- 9. Need for speed is proven
- 10. http://www.nngroup.com/articles/response-times-3-important-limits/ Jakob Nielsen on response time limits 0.1 seconds make user feel that the system is reacting instantaneously
- 11. http://www.nngroup.com/articles/response-times-3-important-limits/ Jakob Nielsen on response time limits 0.1 seconds make user feel that the system is reacting instantaneously 1 second is the limit for the user's flow of thought to stay uninterrupted
- 12. http://www.nngroup.com/articles/response-times-3-important-limits/ Jakob Nielsen on response time limits 0.1 seconds make user feel that the system is reacting instantaneously 1 second is the limit for the user's flow of thought to stay uninterrupted 10 seconds is the limit for keeping the user's attention focused on the dialogue
- 13. Site speed has an impact on conversion rates ...
- 15. … and other business metrics ● bounce rate ● cart size ● revenue ● time on site ● page views http://www.soasta.com/whitepapers/time-is-money-the-business-value-of-web-performance/ Time is Money, The Business Value of Web Performance, Tammy Everts ● user satisfaction ● user retention ● organic search traffic ● brand perception ● productivity
- 16. However sites are getting bigger
- 18. But next billion users will access Web ...
- 19. … through feature phones, like a Nokia X2-01, ... https://brucelawson.github.io/talks/2015/velocity/velocity-AMS.pdf Top Handsets: India
- 20. ... and bad (2G) networks https://brucelawson.github.io/talks/2015/velocity/velocity-AMS.pdf Network Bangladesh https://www.stateoftheinternet.com/trends-visualizations- connectivity-global-heat-map-internet-speeds-broadband-adoption. html
- 21. What does Site Speed depend on?
- 22. Latency and bandwidth mostly
- 23. Latency Time from source sending a packet to destination receiving it
- 24. Latency Time from source sending a packet to destination receiving it Bandwidth Maximum throughput of a logical or physical communication path
- 26. Submarine fibre links 70 Tbit/s http://submarinecablemap.com
- 27. http://www.speedtest.net Last mile Leipzig cable 5 Mbit/s
- 28. Last mile Bangladesh 2G EDGE network 500 Kbit/s
- 29. Site speed depends most on network latency and round trip times (RTT) ...
- 32. Dallas New York Sydney https://wondernetwork.com/pings/Dallas Distance 2235 km RTT 42.45 ms
- 33. Dallas New York Sydney https://wondernetwork.com/pings/Dallas Distance 2235 km RTT 42.45 ms Speed of light in vacuum = ~300 km/ms Speed of light in optical fiber = ~200 km/ms RTT = 2236 km * 1 ms / 200 km * 2 = 22.36 ms Deviation = 22.36 ms / 42.45 ms - 100 = 47,32%
- 36. Dallas New York Sydney https://wondernetwork.com/pings/Dallas Distance 13822 km RTT 194.23 ms
- 37. Site speed depends on DNS lookup, TCP handshake and TCP slow-start
- 38. Application Layer Transport Layer Network Layer Network Interface Layer Short reminder - TCP/IP Network Model TCP/IP Layers HTTP TCP/IP Protocols FTP Telnet SMTP DNS TCP UDP IP ARP ICMP IGMP Ethernet Token Ring Other Link-Layer Protocols https://en.wikipedia.org/wiki/Internet_protocol_suite
- 39. Loading a basic Web site ... we need DNS ● to resolve domain name, i.e. www.spreadshirt.com, to IP address we need HTTP ● to load HTML and depending resources like CSS, Javascript and Images
- 40. Application Layer Transport Layer Network Layer Network Interface Layer DNS Protocol Stack TCP/IP Layers HTTP TCP/IP Protocols FTP Telnet SMTP DNS TCP UDP IP ARP ICMP IGMP Ethernet Token Ring Other Link-Layer Protocols https://en.wikipedia.org/wiki/Internet_protocol_suite
- 41. Application Layer Transport Layer Network Layer Network Interface Layer HTTP Protocol Stack TCP/IP Layers HTTP TCP/IP Protocols FTP Telnet SMTP DNS TCP UDP IP ARP ICMP IGMP Ethernet Token Ring Other Link-Layer Protocols https://en.wikipedia.org/wiki/Internet_protocol_suite
- 42. Ethernet IP TCP Protocols are wrapped in each other HTTP
- 43. Ethernet IP TCP Each protocol adds additional overhead HTTP Ethernet header … (uncompressed) IP header … (uncompressed) TCP header … (uncompressed) HTTP Header … (uncompressed) HTTP Payload … (compressed or uncompressed) like HTML, Javascript, CSS, Images 1460 byte payload 1480 byte payload 1500 byte payload
- 44. Three-way handshake starts TCP connection
- 46. Data exchange starts via TCP slow-start
- 50. How many round trips do we need for loading a Web page?
- 51. Round trips required DNS lookup 1 RTT TCP handshake 1 RTT HTTP Request 1-n RTTs
- 52. How many round trips are required for loading www.speadshirt.com from different locations? DNS TCP handshake HTTP request Sum Dallas - New York 42.45 ms 42.45 ms 2 x 42.45 ms 169.80 ms (4) Dallas - Sydney 194.23 ms 194.23 ms 2 x 194.23 ms 776.92 ms (4) spreadshirt.com = 500 byte (header) + 24 kb (compressed payload) = 25 576 byte segments = 25 576 byte / 1460 byte = 17,5 = ~18 initial congestion window (segments) = 10 (instead of 4 see link) -> 14 600 byte https://tools.ietf.org/html/rfc6928 Increase of initial congestion window from 4 to 10
- 53. Why don’t we use multiple TCP connections to parallelize things?
- 54. Number of TCP connections per domain is limited http://www.browserscope.org/?category=network&v=top Browser Connections per Domain Max Connections Chrome 46.0.2490 6 10 Safari 9.0.1 6 16 Firefox 42.0.1 6 17 Internet Explorer 11 13 17
- 55. Each additional TCP connection comes at a cost!
- 56. Site Speed depends on processing time
- 57. DNS lookup Initial connection (TCP handshake + Client send) Time to first byte (Server processing) Content download (Client receive)
- 58. Site Speed also depends on critical rendering path (CRP) and page load times
- 59. Render tree construction works as follows
- 61. Problem is that CSS is render blocking
- 62. 2 critical resources 2 or more round trips for the minimum critical path length 9 KB of critical bytes https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
- 63. Next problem is that WebFonts block text painting
- 65. And Javascript is parser blocking
- 66. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ 3 critical resources 2 or more round trips for the minimum critical path length 11 KB of critical bytes
- 67. The difference is ...
- 69. But wait. Does the whole page need to be rendered?
- 71. Viewport
- 72. Viewport Above the fold Below the fold
- 74. User can start interacting with page Page is fully loaded Page starts loading
- 75. How can we measure Site Speed and its business impact?
- 76. Which metrics are available?
- 77. Core metrics overview time to first byte
- 78. Core metrics overview time to first byte start render time
- 79. Core metrics overview time to first byte start render time above the fold time
- 80. Core metrics overview time to first byte start render time above the fold time page load time
- 81. Metric details time to first byte start render time page load time fully loaded above the fold time
- 83. Metric details DNS lookup Init TCP connection Server processing Content download
- 84. Metric details Number of resources and transfered bytes + order of resources
- 85. How can we continuously measure Site Speed?
- 90. Real user monitoring with SOASTA
- 93. How can we optimize Site Speed?
- 94. How do we find out what needs to be optimized?
- 95. Focus on important pages ● pages that drive in traffic ● pages where people browse and search ● pages that have impact on business metrics
- 97. Focus on frontend rather than backend backend frontend
- 98. Focus on important resources
- 99. Have a look at third party content
- 100. Have baseline measurements in connection to business metrics in place
- 101. Find out what to optimize Start with free tools like ● WebPagetest http://www.webpagetest.org ● PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ ● Chrome Developer Tools https://developer.chrome.com/devtools#audits Consider to buy tools like ● Zoompf https://zoompf.com
- 102. Which optimization rules exist?
- 103. Basic Optimizations ● Avoid landing page redirects ● Reuse connections ● Reduce HTTP requests ● Reduce DNS lookups ● Improve server response times ● Leverage caching ● Enable compression ● Minify resources ● Optimize images ● Shard dominant domains ● Serve static content from cookieless domain ● Make Javascript and CSS external ● Optimize CSS delivery ● Prioritize visible content ● Flush document early ● Remove render-blocking Javascript ● Use asynchronous scripts ● Reduce DOM complexity ● Optimize CSS ● Optimize Javascript ● ... https://developers.google.com/speed/docs/insights/rules http://stevesouders.com/efws/blogposts.php
- 104. Live Demo
- 105. HTTP/2 is on its way and will make some optimizations obsolete
- 106. Key take aways
- 107. Key take aways ● Latency, bandwidth and TCP/IP network model are limiting factors ● Look at frontend times if you want to improve user experience ● Understand critical rendering path and page load times ● Setup baseline measurements in connection to business metrics ● Optimize in iterations and compare results (or better run A/B tests)