site speed fundamentals
TRANSCRIPT
Site Speed Fundamentals
What is Site Speed?
Site Speed -> Page Speed
Time until page gets fully loaded.
Time until user can start interacting with page.
Why is Site Speed important?
Need for speed is proven
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
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
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
Site speed has an impact on conversion rates ...
http://de.slideshare.net/devonauerswald/walmart-pagespeedslide
… 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
However sites are getting bigger
http://httparchive.org/trends.php?s=All&minlabel=Jan+1+2014&maxlabel=Oct+15+2015#bytesTotal&reqTotal
But next billion users will access Web ...
… through feature phones, like a Nokia X2-01, ...
https://brucelawson.github.io/talks/2015/velocity/velocity-AMS.pdf Top Handsets: India
... and bad (2G) networks
https://brucelawson.github.io/talks/2015/velocity/velocity-AMS.pdf Network Bangladeshhttps://www.stateoftheinternet.com/trends-visualizations-connectivity-global-heat-map-internet-speeds-broadband-adoption.html
What does Site Speed depend on?
Latency and bandwidth mostly
LatencyTime from source sending a packet to destination receiving it
LatencyTime from source sending a packet to destination receiving it
BandwidthMaximum throughput of a logical or physical communication path
http://chimera.labs.oreilly.com/books/1230000000545/ch01.html
Submarine fibre links 70 Tbit/s
http://submarinecablemap.com
http://www.speedtest.net
Last mile Leipzig cable 5 Mbit/s
Last mile Bangladesh 2G EDGE network 500 Kbit/s
Site speed depends most on network latency
and round trip times (RTT) ...
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Distance 2235 km
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Distance 2235 kmRTT 42.45 ms
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Distance 2235 kmRTT 42.45 ms
Speed of light in vacuum = ~300 km/msSpeed of light in optical fiber = ~200 km/msRTT = 2236 km * 1 ms / 200 km * 2 = 22.36 msDeviation = 22.36 ms / 42.45 ms - 100 = 47,32%
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Distance 13822 km
Dallas
New York
Sydney
https://wondernetwork.com/pings/Dallas
Distance 13822 kmRTT 194.23 ms
Site speed depends on DNS lookup, TCP handshake
and TCP slow-start
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 RingOther Link-Layer
Protocols
https://en.wikipedia.org/wiki/Internet_protocol_suite
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
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 RingOther Link-Layer
Protocols
https://en.wikipedia.org/wiki/Internet_protocol_suite
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 RingOther Link-Layer
Protocols
https://en.wikipedia.org/wiki/Internet_protocol_suite
Ethernet
IP
TCP
Protocols are wrapped in each other
HTTP
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 payload1480 byte payload
1500 byte payload
Three-way handshake startsTCP connection
http://chimera.labs.oreilly.com/books/1230000000545/ch02.html
Data exchange starts via TCP slow-start
How many round trips do we need for loading a Web page?
Round trips required
DNS lookup1 RTT
TCP handshake
1 RTT
HTTP Request1-n RTTs
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 = ~18initial congestion window (segments) = 10 (instead of 4 see link) -> 14 600 byte
https://tools.ietf.org/html/rfc6928Increase of initial congestion window from 4 to 10
Why don’t we use multiple TCP connections to parallelize things?
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
Each additional TCP connection comes at a cost!
Site Speed depends on processing time
DNS lookupInitial connection(TCP handshake +
Client send)
Time to first byte(Server processing)
Content download(Client receive)
Site Speed also depends on critical rendering path (CRP)
and page load times
Render tree construction works as follows
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
Problem is that CSS is render blocking
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/
Next problem is that WebFonts block text painting
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
And Javascript is parser blocking
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
The difference is ...
But wait. Does the whole page need to be rendered?
Viewport
Viewport Above the fold
Below the fold
ViewportMac
ViewportIPad
User can start interacting with page
Page is fully loaded
Page starts loading
How can we measure Site Speed and its business impact?
Which metrics are available?
Core metrics overview
time to first byte
Core metrics overview
time to first byte start render time
Core metrics overview
time to first byte start render time
above the fold time
Core metrics overview
time to first byte start render time
above the fold time page load time
Metric detailstime to first byte start render time page load time fully loaded
above the fold time
Metric detailsbackend frontend
Metric detailsDNS lookup
Init TCP connectionServer processing
Content download
Metric detailsNumber of resources and transfered bytes +
order of resources
How can we continuously measure Site Speed?
Generic testing with WebPagetest
Synthetic monitoringwith Rigor
Real user monitoringwith SOASTA
How can we optimize Site Speed?
How do we find out what needs to be optimized?
Focus on important pages
● pages that drive in traffic
● pages where people browse and search
● pages that have impact on business metrics
Compare to competition
Focus on frontend rather than backend
backend frontend
Focus on important resources
Have a look at third party content
Have baseline measurements in connection to business metrics in place
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
Which optimization rules exist?
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/ruleshttp://stevesouders.com/efws/blogposts.php
Live Demo
HTTP/2 is on its way and will make some optimizations obsolete
Key take aways
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)