GST039 - Handgeklöppeltes HTML

Mit Stefan Wintermeyer haben wir über Ruby on Rails, das Phoenix Framework und Webperformance gesprochen. Wir kommen von Rails über Phoenix und die Vorzüge der BEAM/Erlang VM zu Webperformance. Insiderthemen wie TCP slow-start sind ebenso dabei wie einfach mal nur einmal jQuery ausliefern. Wir konnten Stefan sogar eine Reihe praktischer Tipps zu Optimierung von Performance entlocken. Abschließend widmen wir uns ausgiebig Vutuv, einem Open-Source Produkt von Stefan.

Wir sprachen mit Stefan Wintermeyer über Ruby/Rails, Phoenix und Webperformance.
Stefan Wintermeyer (00:00:00)

https://twitter.com/wintermeyer
aus Neuwied/Koblenz
Geschäftsführer von Amooma https://www.amooma.de/
Schwerpunkt: Ruby on Rails, Phoenix, WebPerformance, Feuerwehreinsätze
Rails seit ca. 8 Jahren
Autor von "Ruby on Rails 3.2" - http://ruby-auf-schienen.de/3.2/

Phoenix und/oder Rails (00:04:00)

Phoenix ist ein von Railsentwicklern in Elixir programmiertes Framework http://www.phoenixframework.org/
läuft auf BEAM (Virtuelle Maschine von Erlang)
"10x schneller als Rails"
Exkurs: typische Probleme in Railsprojekten:
Railskonventionen werden nicht konsequent genug umgesetzt
häufig Zoo an Tools (Memcache, Queue....) in größeren Railsprojekten
Deployment
Phoenix ist weniger stringent als Rails z.B. bei Namenskonventionen
kontinuierliches Deployment ist einfach: self-contained Packages werden erzeugt
kein Allheilmittel: mit einem schlagkräftigen Team von Rails-Entwicklern und Hardware kann man auch gute Software entwickeln
Verfügbarkeit Rails-Entwickler vs. Phoenix-Entwickler
Rails ist nach wie vor nett (ActiveRecord, Scaffolding, schnelles Prototyping mit SQLite)
Einstieg in Phoenix kann noch einfacher werden
Tipp zum Scaffolding in Rails: nutzen, aber Templates anpassen. Bringt Geschwindigkeit, für Knowhow-Transfer, um Fehler zu vermeiden

Wenn die Website lahmt: Webperformance (00:40:40)

Stefans Schwerpunkt ist Backend/Webperformance
trifft oft auf Cache-Probleme
Moderner Browser macht beim Tippen von URL bereits DNS-Lookup und ggf. wird TCP-Verbindung geöffnet
TCP startet mit kleinen Datenmengen, die bei erfolgreicher Zustellung exponentiell anwachsen ("slow-start Algorithmus", https://en.wikipedia.org/wiki/TCP_congestion_control#Slow_start)
Durchschnittliche Website hat heute eine Größe von 2 MB (https://www.wired.com/2016/04/average-webpage-now-size-original-doom/)
Ping Deutschland <> Sidney = 1 Sekunde, Ping nach USA 200 - 300 ms
Seite sollte < 2 Sekunden brauchen, 1 Sekunde ist Goldklasse, 1 Sekunde schnellere Website => 5 Prozent bessere Conversion
Tracking-Pixel/Scripts bremsen Seiten aus
Performance-Probleme durch Twitter Bootstrap mit jQuery
Zu technischen Herausforderungen beim Performancetuning kommen häufig "politische" Probleme (z.B. Gesichtsverlust bei anderen Abteilungen, wenn man Probleme zugibt)

Stefans Tipps für mehr Performance (00:59:14)

http://www.webpagetest.org/ ausprobieren
Buch von Ilya Grigorik lesen, gibt es auch klassisch als Buch https://hpbn.co/
Mit https://kraken.io/ alle Bilder optimieren
aktuell wird häufig HTTP/2 eingesetzt, funktioniert aber de facto nicht. Grund: Chrome akzeptiert HTTP/2 von Debian und anderen Distributionen nicht (wegen verwendete Kryptobibliotheken). Lösung: Backport benutzen.
mod_pagespeed für Apache analysiert Content und generiert optimierten Content (z.B. Minifizierung, Bilder resizen) - Ansatz hat für Stefan nicht funktioniert: https://developers.google.com/speed/pagespeed/module/
nur das CSS laden, das man auch wirklich braucht
Google schickt Header von Ergebnisseiten los, bevor Server Ergebnisse generiert hat, Ergebnisse werden übertragen, sobald sie fertig sind.

Vutuv: die Alternative zu Xing und LinkedIn (01:17:30)

https://www.vutuv.de/
Mission: "Xing & LinkedIn in Gut"
Ziel: soll auch mit geringer Bandbreite/teurem Internetzugang funktionieren - unter 28k Datenvolumen für "above the fold"
"above the fold" soll so schnell wie möglich sein ("above the fold" = Titelbild der Zeitung oberhalb des Knicks)
Hintergrund für "Schmalspuransatz": z.B. in Simbabwe kostet ein LinkedIn-Profil-Aufruf mehr als 50 Cent
benutzt kein JavaScript und kein CSS-Framework
HTML-Code wird ebenfalls auf Kompression hin optimiert (!)
verwendet Phoenix (siehe oben)
Bilder werden für "above the fold" als base64-String eingebettet, um TCP-Slow-Start-Pakete optimal auszunutzen
Vutuv ist jetzt Teil von Free Basics von Facebook - Programm, das 1 Milliarde Menschen kostenlosen Zugang zu grundlegenden Diensten für Entwicklungsländer (https://developers.facebook.com/docs/internet-org)
Code ist open-source (https://github.com/vutuv/vutuv) unter MIT-Lizenz
Pull Requests sind willkommen