HTTP

HyperText

Transfer

Protocol

(Obligatory abbreviation definition)

So what is it good for?

It's the communications protocol that runs on top of TCP/IP that's the foundation of data transfer on the web

Sounds neck-beardy. Why do I care?

Most of our performance optimization techniques are work-arounds for deficiencies in HTTP 1.1

HTTP/2

HTTP/2 is a whole different ballgame and addresses a lot of the deficiencies we've for which developed work-arounds. Using the techniques to optimize for HTTP 1 on a HTTP/2 server could actually degrade performance.

The HTTP/2 specification was published as RFC 7540 in May 2015. Most major modern browsers already support HTTP/2

Browser support is good and server support is coming along.

The HTTP request/response cycle

A drastically simplified description.

DNS Lookup

Domain Name Service
(Obligatory abbreviation definition)

DNS translates an IP address to a readable domain name

216.58.218.110 = www.google.com, for example

TCP/IP Connection

Oh lord, more neckbeardiness.

Transfer Control Protocol / Internet Protocol
(Obligatory abbreviation definition)

TCP handles the breaking of data into packets and IP handles the routing of the packets

Avoiding establishing these connection is the reason behind many of the performance optimization techniques developed over the years.

CSS Sprites, CSS & JS Concatenation, browser caching.

Establishing a TCP/IP Connection

This 3-way handshake is performed for every file requested from a server

(Obligatory internet meme)

How do we optimize our website?

Reducing the number of TCP/IP Connections

Concatenating files together

CSS & JS concatenation

CSS Sprites

Reducing file size

Image optimization

CSS & JS minification

Increasing number of parallel connections

Domain Sharding/CDN

Most browsers support a max of 6 connections per domain.
And more across multiple domains. (source)

What's the difference between HTTP 1 and HTTP 2?

(At least the bits I understand)

HTTP/2 sends all assets through a single TCP/IP connection

No more concatenating files together

No more CSS Sprites

No more CSS concatenation

No more JS concatenation

No more domain sharding

Each connection to a new domain means establishing a new TCP/IP connection.

Akamai HTTP/2 Demo

Links

Tools

• ImageMagick
• ImageOptim
• ImageOptim CLI
• Gulp
• Grunt
• Meme Generator

Bibliography

• http://designingforperformance.com/
• http://httparchive.org/
• https://httpwg.github.io/
• https://http2.github.io/
• https://tools.ietf.org/html/rfc7540
• https://en.wikipedia.org/wiki/Transmission_Control_Protocol
• https://en.wikipedia.org/wiki/Internet_protocol_suite
• http://www.tcpipguide.com/free/t_TCPConnectionEstablishmentProcessTheThreeWayHandsh-3.htm
• http://www.stevesouders.com/blog/2013/09/05/domain-sharding-revisited/

Get this project

• Slides: https://tmbritton.github.io/frontend-web-perf
• Demo Site Github repo: https://github.com/tmbritton/http-optimization