web performance part 1 "networking theoretical basis"
DESCRIPTION
The presentation is devoted to some theoretical questions connected with Web Performance. Further presentations will dwell on more practical aspects of web applications performance improvement. All 4 presentations will help you reduce latency, enrich optimization of javascript code, discover tricky parts when working with API browser, see best practices of networking and learn lots of other important and interesting things. Enjoy! =)TRANSCRIPT
Web PerformanceNetworking Theoretical Basis
Andrew Kovalenko & Mykyta Semenistyi
Andrew KovalenkoEducation: Donetsk National University, Physics faculty.Medical Supplier Company “Lyapko”: 2007 - 2008.eGo Creative Media Solutions: 2008 - now.Position: Team Lead in Jaybird Marketing Group Team.
Author of the “KineticJS Starter” book. Author of the “BodyMotivator” project. Software Developer and Web Junkie. Twittering about frontend design and development.
Slogan: Software for the people!
@cybind http://blog.cybind.net
Mykyta Semenistyi
Donetsk National Technical UniThesis:“Network optimizations of web apps”
Binary Studio2012 - now
@msemenistyi
Why we need fast websites?
Fast website
better user engagement better user retention
higher conversions
Table of contents➔ latency & bandwidth➔ bufferbloat➔ TCP fast open➔ congestion control & avoidance➔ slow start restart➔ UDP➔ Wireless Networks➔ HTTP
Latency + Bandwidth ≈ Performance
Ilya Grigorik: High Performance Browser Networking
Internet & broadband adoption
More bandwidth doesn’t matter (much)
Ilya Grigorik: High Performance Browser Networking
Latency components
➔ propagation delay
➔ transmission delay
➔ processing delay
➔ queuing delay
Decreasing transatlantic latency with Hibernia Express
TCP/IP➔ retransmission of lost data
➔ in-order delivery
➔ congestion control and avoidance
➔ data integrity
➔ more
Three-way handshake
Three-way handshake
Ilya Grigorik: High Performance Browser Networking
TCP fast open (TFO)
Linux 3.7+
Bufferbloat
Linux 3.5+: CoDel
Flow control
Ilya Grigorik: High Performance Browser Networking
Congestion control & avoidance
Ilya Grigorik: High Performance Browser Networking
Slow start
Ilya Grigorik: High Performance Browser Networking
Slow start restart
The TCP profit
264 ms 96 msIlya Grigorik: High Performance Browser Networking
TCP performance checklist➔ Linux: 3.7+
➔ cwnd size = 10
➔ disable slow-start after idle
➔ enable window scaling
➔ eliminate redundant data transfers
➔ compress transferred data
➔ position servers closer to the user
➔ reuse established TCP connections
UDP
➔ Reliable
➔ Connection-oriented
➔ Segment retransmission and flow control through windowing
➔ Segment sequencing
➔ Acknowledge segments
➔ Unreliable
➔ Connectionless
➔ No windowing or retransmission
➔ No sequencing
➔ No acknowledgement
TCP UDP
Mobile networks
Ilya Grigorik: High Performance Browser Networking
Mobile networks performance checklist
➔ Preserve battery power
➔ Eliminate periodic and inefficient data transfers
➔ Anticipate network latency overhead
➔ Design for variable network interface availability
➔ Burst your data and return to idle
➔ Offload to WiFi networks
HTTP$> telnet google.com 80
Connected to 74.125.xxx.xxx
GET /about/
(hypertext response)(connection closed)
$> telnet website.org 80
Connected to xxx.xxx.xxx.xxx
GET /rfc/rfc1945.txt HTTP/1.0 User-Agent: CERN-LineMode/2.15 libwww/2.17b3Accept: */*
HTTP/1.0 200 OK Content-Type: text/plainContent-Length: 137582Expires: Thu, 01 Dec 1997 16:00:00 GMTLast-Modified: Wed, 1 May 1996 12:45:26 GMTServer: Apache 0.84
(plain-text response)(connection closed)
$> telnet website.org 80Connected to xxx.xxx.xxx.xxx
GET /index.html HTTP/1.1 Host: website.orgUser-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4)... (snip)Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Encoding: gzip,deflate,sdchAccept-Language: en-US,en;q=0.8Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3Cookie: __qca=P0-800083390... (snip)
HTTP/1.1 200 OK Server: nginx/1.0.11Connection: keep-aliveContent-Type: text/html; charset=utf-8Via: HTTP/1.1 GWADate: Wed, 25 Jul 2012 20:23:35 GMTExpires: Wed, 25 Jul 2012 20:23:35 GMTCache-Control: max-age=0, no-cacheTransfer-Encoding: chunked
100 <!doctype html>(snip)
100(snip)
0
GET /favicon.ico HTTP/1.1
0.9 (1991) 1.0 (1996) 1.1 (1999)
Components of HTTP request
WebPageTest.org
WebPerformanceLanding
Page
WebPageTest.org
HTCPCP/1.0The Hyper Text Coffee Pot Control Protocol (HTCPCP)
● controlling● monitoring● diagnosing
coffee pots.
It is specified in RFC 2324, published on 1 April 1998. http://www.error418.org/
HTTP 2.0➔ March 2012: Call for proposals for HTTP 2.0
➔ September 2012: First draft of HTTP 2.0
➔ July 2013: First implementation draft of HTTP 2.0
➔ April 2014: Working Group last call for HTTP 2.0
➔ November 2014: Submit HTTP 2.0 to IESG as a Proposed
Standard
Ilya Grigorik: High Performance Browser Networking
HTTP 2.0
➔ Improve latency over HTTP 1.1.
➔ Address the "head of line blocking".
➔ One TCP connection.
➔ Semantics of HTTP 1.1.
➔ Interact with HTTP 1.x.
goals
Ilya Grigorik: High Performance Browser Networking
HTTP 2.0
Ilya Grigorik: High Performance Browser Networking
Binary Framing Format
HTTP 2.0
Ilya Grigorik: High Performance Browser Networking
TCP Connection
HTTP 2.0prioritization
Ilya Grigorik: High Performance Browser Networking
➔ 0 - the highest.
➔ 2^31−1 - the lowest.
➔ no spec for implementation
CSS Fonts Icons Images
HTTP 2.0server push
Ilya Grigorik: High Performance Browser Networking
HTTP 2.0
Ilya Grigorik: High Performance Browser Networking
Streams Multiplexing
SPDYgoals
➔ Target 50% reduction in page load time.
➔ Avoid changes to content by website authors.
➔ Avoid changes in network infrastructure.
➔ Develop with the open-source community.
➔ Gather real performance data.
Ilya Grigorik: High Performance Browser Networking
Chrome, FF, IE11, Opera 12.10
SPDY/3