site speed fundamentals

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)