Geekstammtisch   /     GST039 - Handgeklöppeltes HTML

Description

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.

Subtitle
Wir sprachen mit Stefan Wintermeyer über Ruby/Rails, Phoenix und Webperformance.
Duration
7118
Publishing date
2016-12-28 18:12
Link
http://geekstammtisch.de/39-handgekloeppeltes-html
Contributors
  Dirk Breuer, Sebastian Cohnen, Stefan Wintermeyer
author  
Enclosures
https://cdn.podigee.com/media/podcast_902_geekstammtisch_episode_39_gst039_handgekloppeltes_html.m4a?v=1482941335&source=feed
audio/aac

Shownotes

Stefan Wintermeyer (00:00:00)

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