Download as PDF, PPTX
Uploaded byMartin Breest
Site Speed Fundamentals
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.
More Related Content
Similar to Site Speed Fundamentals
Site Speed Fundamentals
- 1.
- 2. What is SiteSpeed?
- 3. Site Speed ->Page Speed
- 6. Time until pagegets fully loaded.
- 7. Time until usercan start interacting with page.
- 8. Why is SiteSpeed important?
- 9. Need for speedis proven
- 10. http://www.nngroup.com/articles/response-times-3-important-limits/ Jakob Nielsen onresponse 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 onresponse 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 onresponse 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 animpact on conversion rates ...
- 14.
- 15. … and otherbusiness 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 aregetting bigger
- 17.
- 18. But next billionusers will access Web ...
- 19. … through featurephones, 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 SiteSpeed depend on?
- 22. Latency and bandwidthmostly
- 23. Latency Time from sourcesending a packet to destination receiving it
- 24. Latency Time from sourcesending a packet to destination receiving it Bandwidth Maximum throughput of a logical or physical communication path
- 25.
- 26. Submarine fibre links70 Tbit/s http://submarinecablemap.com
- 27.
- 28. Last mile Bangladesh2G EDGE network 500 Kbit/s
- 29. Site speed depends moston network latency and round trip times (RTT) ...
- 30.
- 31.
- 32.
- 33. Dallas New York Sydney https://wondernetwork.com/pings/Dallas Distance 2235km 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%
- 34.
- 35.
- 36.
- 37. Site speed depends onDNS lookup, TCP handshake and TCP slow-start
- 38. Application Layer Transport Layer NetworkLayer 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 basicWeb 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 NetworkLayer 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 NetworkLayer 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 wrappedin each other HTTP
- 43. Ethernet IP TCP Each protocol addsadditional 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 TCPconnection
- 45.
- 46. Data exchange startsvia TCP slow-start
- 50. How many roundtrips do we need for loading a Web page?
- 51. Round trips required DNS lookup 1RTT TCP handshake 1 RTT HTTP Request 1-n RTTs
- 52. How many roundtrips 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 weuse multiple TCP connections to parallelize things?
- 54. Number of TCPconnections 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 TCPconnection comes at a cost!
- 56. Site Speed depends onprocessing time
- 57. DNS lookup Initial connection (TCPhandshake + Client send) Time to first byte (Server processing) Content download (Client receive)
- 58. Site Speed alsodepends on critical rendering path (CRP) and page load times
- 59. Render tree constructionworks as follows
- 60.
- 61. Problem is that CSSis render blocking
- 62. 2 critical resources 2or 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 isthat WebFonts block text painting
- 64.
- 65. And Javascript isparser blocking
- 66. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ 3 critical resources 2or more round trips for the minimum critical path length 11 KB of critical bytes
- 67.
- 69. But wait. Doesthe whole page need to be rendered?
- 71.
- 72. Viewport Above the fold Belowthe fold
- 73.
- 74. User can start interactingwith page Page is fully loaded Page starts loading
- 75. How can wemeasure Site Speed and its business impact?
- 76. Which metrics areavailable?
- 77. Core metrics overview timeto first byte
- 78. Core metrics overview timeto first byte start render time
- 79. Core metrics overview timeto first byte start render time above the fold time
- 80. Core metrics overview timeto first byte start render time above the fold time page load time
- 81. Metric details time tofirst byte start render time page load time fully loaded above the fold time
- 82.
- 83. Metric details DNS lookup InitTCP connection Server processing Content download
- 84. Metric details Number ofresources and transfered bytes + order of resources
- 85. How can wecontinuously measure Site Speed?
- 86.
- 88.
- 90.
- 93. How can weoptimize Site Speed?
- 94. How do wefind out what needs to be optimized?
- 95. Focus on importantpages ● pages that drive in traffic ● pages where people browse and search ● pages that have impact on business metrics
- 96.
- 97. Focus on frontendrather than backend backend frontend
- 98. Focus on importantresources
- 99. Have a lookat third party content
- 100. Have baseline measurements inconnection to business metrics in place
- 101. Find out whatto 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 rulesexist?
- 103. Basic Optimizations ● Avoidlanding 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.
- 105. HTTP/2 is onits way and will make some optimizations obsolete
- 106.
- 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)