HTTP-2

View Github Repository Open presentation in a new window

Schepp

See all presentation from Schepp

HTTP-2

2 1

HTTP-2

Vortrag über HTTP/2 und seine Auswirkungen auf den etablierten Workflow

On Github Schepp / HTTP-2

HTTP/2

Die Zukunft beginnt jetzt.

Wir schreiben das Jahr...

1991

Ende der Sowjetunion

Nirvana Nevermind

und

HTTP/0.9

findet seine erste Erwähnung

1996

offiziell als HTTP/1.0 spezifiziert.

HTTP/1.0

Je eine kurzlebige TCP-Verbindung pro HTTP-Abfrage/Antwort-Pärchen

HTTP/1.0

Daten werden ASCII codiert übertragen

HTTP/1.0

Header sind beliebig erweiterbar und werden bei jeder Anfrage mitgeschickt

GET /fotostrecke/screenshots-spiegel-online-1996-bis-heute-fotostrecke-16056-3.html HTTP/1.1
Host: www.spiegel.de
Connection: keep-alive
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Pragma: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
DNT: 1
Accept-Encoding: gzip,deflate,sdch
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,fr;q=0.2
Cookie: POPUPCHECK=1402636825271; JSESSIONID=FC8674D0216AB1B92E09619BCD8CC9C7; spVcData2=6-10%3B10-15; __utma=159392383.976977501.1321345516.1402553897.1402569936.627; __utmc=159392383; __utmz=159392383.1402553897.626.40.utmcsr=facebook.com|utmccn=(referral)|utmcmd=referral|utmcct=/; __utmv=159392383.|1=custID=f380b31359c26298908199a247d8a3f1=1; mx_nam_id=03de4a6b-b79e-4c74-81eb-7c4999e36205

ab 1997

wird HTTP/1.1 entwickelt. Es wird 1999 spezifiziert.

HTTP/1.1

Spezifiziert persistente TCP-Verbindungen

Persistente TCP-Verbindungen

...helfen, den Effekt von TCP Slow Start zu reduzieren

Quelle

TCP Slow Start

Quelle

TCP Slow Start

Quelle

HTTP/1.1

Um die Serverlast herunterzufahren wird die Anzahl erwünschter TCP-Verbindungen eingeschränkt:

single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

In der Praxis halten die Browser 6 Verbindungen zu einem Host auf.

Stehen sie hinter einem Proxy sind es nur 2 - 4.

HTTP/1.1

Spezifiziert außerdem Pipelining

HTTP/1.1

Beim Pipelining kann ein Requests abgesetzt werden, noch BEVOR die Antwort des vorherigen da ist.

HTTP/1.1

Durch Pipelining werden Latenzen zwischen den Requests einer TCP-Verbindung nicht mehr aufaddiert.

Pardon: WÜRDEN...

Proxies sagen leider nein zu Pipelining.

Schade.

Pipelining Support

System IE NEIN Chrome JA, aber abgeschaltet Firefox JA, aber abgeschaltet Server JA Proxies NEIN

Quelle

Währenddessen im Web...

Webseite 1991

1 Request

Seite schnell, alles smooth, macht Spaß!

Webseite 1996

7 Requests

Alles okay!

Webseite 1998

85 Requests

Ähm... 85 Requests?

Webseite heute

172 Requests

(ohne Werbung)

172 Requests? WTF-Copter!

1995 - heute

HTTP Requests: von 3 auf 96

Quelle

Breitband to the Rescue?

Nope!

Quelle

An increase from 5Mbps to 10Mbps results in a disappointing 5% improvement in page load times.

Google

Problem Nr. 1: Latenzen!

Latenz durch Distanz

innerhalb Deutschlands < 50 ms USA 100–150 ms Fernost bis zu 300 ms

Latenz durch Technologie

100BaseT-Ethernet 1 ms WLAN 802.11b 10 ms Kabel allgemein 10 ms DSL-6000 ohne Fastpath 40 ms DSL-2000 ohne Fastpath 55 ms ISDN 200 ms UMTS 300–400 ms GPRS 700–1000 ms

Blockade durch serverseitige Verarbeitung

Zeitverlust abhängig von Servergeschwindigkeit

Einwirkung von Latenzen: ...

Abschnitt Zeitverlust Entfernungslatenz 90 ms Übertragungszeit 135 ms Wartezeit Server 45 ms Gesamtzeit 270 ms

Effekt von 3-facher Bandbreite: ...

Abschnitt 1x Bandbreite 3x Bandbreite Entfernungslatenz 90 ms 90 ms Übertragungszeit 135 ms 45 ms Wartezeit Server 45 ms 45 ms Gesamtzeit 270 ms 180 ms
Abschnitt 1x Bandbreite 10x Bandbreite Entfernungslatenz 90 ms 90 ms Übertragungszeit 135 ms 13 ms Wartezeit Server 45 ms 45 ms Gesamtzeit 270 ms 148 ms

Problem Nr. 2: HTTP/1.x!

Geringe Parallelisierbarkeit

Browser machen nur 6 parallele TCP-Verbindungen auf.

(bzw. 2 - 4 hinter einem Proxy)

Das Ergebnis: Aufaddieren von Latenzen

Ungenutzte Wartezeiten

Requests müssen in Reihe abgearbeitet werden.

Pipelining würde da helfen.

Auch ein Problem: Das "First in Line Blocking"

Kein Abbruchmechanismus

Sind alle TCP-Verbindungen mit Anfragen belegt, kann sich der Browser vorerst nicht mehr umentscheiden.

Blöd, wenn der Browser genau dann das <script>-Tag im Fuß der Seite findet.

Aufgeblasene Header

Das ständige Mitsenden der Header führt zu langsameren Anfragen.

Ein durchschnittlicher Header liegt bei 600 Bytes.

Der SPON Header mit samt Cookie kommt z.B. auf knapp 1 KB.

Übertragungszeit bei einem 1 MBit/s Upstream: 10 ms pro Request.

Was tun wir bisher dagegen?

Concatenieren

grunt.initConfig({
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/a.js', 'src/b.js', 'src/c.js'],
      dest: 'dist/scripts.js',
    },
  },
});

Bitmap-Spriting

grunt.initConfig({
    sprite:{
      all: {
        src: 'path/to/your/sprites/*.png',
        destImg: 'destination/of/spritesheet.png',
        destCSS: 'destination/of/sprites.css'
      }
    }
  });

SVG-Spriting

<svg viewBox="0 0 100 100">
   <use xlink:href="defs.svg#icon-1"></use>
</svg>

Icon Fonts verwenden

Ressourcen via Data-URIs inlinen

Nachteil:

Ändert sich ein Fragment aus diesen Datei-Paketen, muss alles neu übertragen werden.

Desweiteren: Ressourcen über mehrere Hosts verteilen

"Domain Sharding"

  • Jeder Extra-Host ermöglicht 6 zusätzliche TCP-Verbindungen
  • Cookie-Header werden nur noch an den Haupt-Host gesendet

Nachteile:

Jeder zusätzliche Host muss per DNS-Abfrage aufgelöst werden.

Jeder zusätzliche Host muss durch die TCP Slow Start Phase.

Ab 4 Hosts dreht sich der Vorteil ins Negative um.

Puh, was für ein Aufwand!

Enter HTTP/2!

HTTP/2 ≈ SPDY

(siehe auch: Genesis)

HTTP/2

Daten werden binär codiert übertragen.

  • Effizienter zu parsen
  • Kompakter
  • Weniger fehleranfällig

HTTP/2

textual protocols like HTTP/1.x [...] often have a number of affordances to “help” with things like whitespace handling, capitalisation, line endings, blank links and so on.

Quelle

HTTP/2

Headerdaten werden nur einmal zwischen den Parteien ausgetauscht. Sie gelten fortan für alle nachfolgenden Requests automatisch.

Wenn sich Header-Abschnitte später ändern, werden nur diese Teile neu übertragen (z.B. nach einem Login).

HTTP/2

Headerdaten werden komprimiert.

Google observed an ~88% reduction in the size of request headers and an ~85% reduction in the size of response headers after enabling compression. This amounted to a saving of between 45 and 1142 ms in the overall page load time.

Quelle

HTTP/2

Tests der University of Delaware:

Request headers 1st 2nd HTTP Request 686.2 636.4 SPDY Request 379.4 (55%) 68.6 (10%) Response headers 1st 2nd HTTP Response 444.6 418.7 SPDY Response 202.0 (45%) 69.2 (17%)

HTTP/2

Es wird nur eine einzelne TCP-Verbindung zu jedem Host geöffnet.

Alle Übertragungsfragmente werden in diesen einen Datenstrom hineingewoben (gemultiplexed)

Es handelt sich also um ein automatisches Spriting/Concatenieren auf Protokollebene!

Quelle

Der Vergleich

Prioritized Streams

HTTP/2 kann das Mischverhältnis der in seinen Datenstrom gewobenen Daten zu jeder Zeit verändern und an neue Gegebenheiten anpassen.

Auch kann die Übertragung einer angefangenen Datei komplett gestoppt und verworfen werden.

Prioritized Streams

Der Browser kann so Ressourcen mit verschiedenen Prios anfordern:

  • Hoch: Hauptdokument & Frames
  • Mittel: JavaScript, CSS und Fonts
  • Niedrig: <link rel="subresource">, <video>, <audio>, <object> und AJAX-Calls
  • Sehr niedrig: Bilder, Favicon

Prioritized Streams

Ebenso kann der Server Ressourcen, die er für relevant hält, initiativ durch die Leitung drücken.

Das nennt sich dann "Server Push".

Server Push

Von 640 Bildfragmenten werden zuerst die des Schriftzugs Übertragen:

HTTP/2

ist bestandskompatibel und vollkommen transparent.

HTTP/2 wird grundsätzlich SSL-verschlüsselt verpackt, damit keine Übermittlungsstelle und auch kein Proxy etwas kaputt macht.

(um zu vermeiden, was mit HTTP-Pipelining passiert ist)

HTTP/2

Zudem wird die SSL-Handshake-Phase genutzt, um sich gegenseitig über HTTP/2-Fähigkeiten zu informieren.

Eine Aushandlung via unverschlüsseltem HTTP ist möglich:

GET /page HTTP/1.1
Host: server.example.com
Connection: Upgrade, HTTP2-Settings
Upgrade: HTTP/2.0
HTTP2-Settings: (SETTINGS payload in Base64)

Gegenstelle kann kein HTTP/2:

HTTP/1.1 200 OK 3
Content-length: 243
Content-type: text/html
(... HTTP 1.1 response ...)

Gegenstelle kann HTTP/2:

HTTP/1.1 101 Switching Protocols 4
Connection: Upgrade
Upgrade: HTTP/2.0
(... HTTP 2.0 response ...)

(Anwendungsszenario: Server-zu-Server-Kommunikation)

Serverseitige Vorteile

SPDY clients consume one Apache worker instead of six

Quelle

Benchmark

Ramp-up from 1 to 1000 users for 20 minutes.1 page call, wait for 5s, restart.

Quelle

Ergebnisse

HTTP HTTPS SPDY Max. pages/s 16.3 @ 120 users 15.9 @ 120 users 98 @ 777 users Response @ 100 users 1.1s 1.3s 1.1s Response @ 120 users 1.4 s 1.5s 1.1s Response @ 200 users 7.1s 7.8s 1.1s Response @ 777 users 70.2s 72s 2.7s First error 405 Users 225 Users 884 Users

Speicherverbrauch

System Memory 01:00 02:00 Diff = Consumed HTTP 3,357 MB 3,416 MB 59 MB HTTPS 3,500 MB 3,579 MB 79 MB SPDY 3,607 MB 3,631 MB 24 MB

CPU Idle-Time

(weniger ist besser)

Browser-Support Weltweit:

78.33%

Browser-Support Deutschland:

91.24%

HTTP/2 Support Desktop

✔ 9+* ✔ 11** ✔

*= ab OSX 10.11+ **= auf Windows 10+, auf Windows 8 nur SPDY

Can I Use

HTTP/2 Support Mobile

✘* ✔ 9,2+ ✔ ✘** ✔

*= Wird gerade durch Chrome (Views) ersetzt **= IE 11 auf Windows Mobile 8.1 kann nur SPDY

Can I Use

Serverseitige Unterstützung

  • Apache HTTP Server 2.4.17+ (ansonsten: mod_h2)
  • Apache Tomcat 8.5+
  • NGINX 1.9.5+
  • IIS auf Windows 10 und Windows Server 2016
  • Node.js 5.0+
  • Jetty 9.3+
  • und noch viele mehr…

Siehe HTTP/2 Implementations und Wikipedia

Unterstützung seitens CDNs

  • Akamai (mit Server Push!)
  • CloudFlare
  • Amazon CloudFront
  • Fastly (mit Server Push!)
  • und noch ein paar mehr.

Wikipedia

Firmen und Webseiten, die HTTP/2 nutzen

  • Google
  • Yahoo
  • Facebook
  • Twitter
  • WordPress.com
  • Synology

Handlungsempfehlungen

Ab jetzt HTTP/2 nutzen!

(Notfalls via zwischengeschaltetem HTTP/2-fähigem Load-Balancer)

Domain-Sharding vermeiden!

Es bringt uns keinerlei Vorteile mehr.

(stattdessen erzeugt es nur überflüssige DNS-Lookups)

Außerdem: Ein einzelner Host kann die Ressourcen-Priorisierung besser verwalten.

Den Einsatz von CDNs neu abwägen.

Spriting und Concatenieren absolut vermeiden!

Stattdessen: Zusehen, ob man seine Dateien nicht automatisiert noch kleiner bekommt!

(verrückt, oder?)

(Aber so kommen wir nah an das Konzept von Delta-Updates heran)

Server Push aktivieren

Server Push für alle kritischen Ressourcen konfigurieren!

Server Push aktivieren

Inoffizieller Standard , solche Ressourcen für den Server zu kennzeichnen, läuft via Header-Directive:

X-Associated-Content: "/foo.css":1,"/bar.js":1,"/baz.js":1

(Prio 0 = Hoch, Prio 7 = Niedrig)

Legacy Browser?

Was tun, wenn man gleichzeitig viele alte Clients bedienen muss?

Apaches mod_pagespeed

# Disable concatenation for SPDY/HTTP 2.0 clients
<ModPagespeedIf spdy>
  ModPagespeedDisableFilters combine_css,combine_javascript
</ModPagespeedIf>

# Shard assets for HTTP 1.x clients only
<ModPagespeedIf !spdy>
  ModPagespeedShardDomain www.site.com s1.site.com,s2.site.com
</ModPagespeedIf>

Profit!

Danke!

Weiterführende Literatur

Bildnachweise

  • Golden abstract science fiction: Shutterstock - pixelparticle
  • Sonnenuntergang: Shutterstock - Natalia Dobryanskaya
  • Soviet: Shutterstock - Triff
  • Tim Berners Lee: Wikipedia
  • Code Matrix: Shutterstock - Sebastian Kaulitzki
  • Frau mit Laptop: Shutterstock - Voyagerix
  • Cables: Shutterstock - Eugene Sergeev
  • Deutschlandkarte: DeStatis, David Liuzzo
  • Hubschrauber: usmilitaryhelicopters.org
  • Cloud Computing Concept: Shutterstock - olegganko
  • shiny space, futuristic wave: Shutterstock - majcot
  • Prism: Shutterstock - mejnak
  • Grass: Shutterstock - noppharat
  • Engine start stop button: Shutterstock - Peter Gudella
  • Planet Facebook or Planet Earth? - Paul Butler
  • Walt Disney Concert Hall - Graham@Flickr
  • Schnappschuss: Stefan Nitzsche
  • Animierte GIFs: devopsreactions.tumblr.com & gifsoup.com
0