Site Speed Fundamentals
1 like•201 views
Site speed, determined by factors like latency and bandwidth, significantly impacts user interaction, conversion rates, and business metrics. Key aspects include the critical rendering path, TCP/IP network model, and optimization strategies such as reducing HTTP requests and improving server response times. Continuous measurement and iterative optimization are essential for enhancing site performance.
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)