Moin!

Webmontag Kiel - 20. Mai 2019

Fast lane.

Webseiten schneller ausliefern.

About

Carolina Koehn

Kiel, Germany, Europe, Earth ...

Soz.-Wiss, Dipl-Soz-Päd, Mediengestalterin

Contao seit 2006

kikmedia.de | @carolinakoehn

Der Anlass.

Das Problem.

Source: Google/SOASTA Research, 2017.

Mehr Probleme.

"And sometimes, leaner is better too.
We found that 79% of pages were over 1MB, 53% over 2MB and 23% over 4MB.9
One image in particular caught our attention: It weighed a whopping 16MB."

Bis einer heult.

LTE, FTW?

Kann man machen.

Eine Tageszeitung

950 Millisekunden für's <html>.

Und dann 58000 Millisekunden für JavaScript.

5.000 Millisekunden Idle = Warten auf etwas anderes

Unter anderem auf der Mobilseite ...

  • Serverantwort nach 1.5 Sekunden
  • Gesamtgrösse 4 MB
  • DOM: 2500 Elemente
  • erste Inhalte nach 4.5 Sekunden
  • Interaktiv nach 15 Sekunden
  • jede Menge an blockenden Inhalten

Wobei:

  • Es gibt Platzhalterbilder
  • Man kann blocken
  • ...

Serverantwort?

Faktoren

  • Server an sich (Maschine)
  • Ressourcen auf dem Server
  • eingesetzter Software
    • Webserver
    • Scriptsprache
    • Scriptversionen
    • Anbindung
  • Hoster aus der Hölle

  • Virtuelle Server
  • geteilte Ressourcen
  • teilweise mehrere hundert Webseiten
  • Anbindung aus der Hölle

  • Rechenzentrum in Timbuktu
  • lange Leitungen
  • langsame Netzwerkhardware
  • Also: Augen auf bei der Hostingwahl.

    Faktoren

  • Menge des Inhaltes
  • Reine Texte vs. Bilder
  • Beigaben:
    • Stylesheets
    • Javascript
    • Schriften
    • Icons
    • Medien
  • Verbesserungen

  • Was brauche ich eigentlich?
  • Layout-Frameworks? Puh ...
  • Script-Frameworks? Puh ...
  • Muss alles sofort da sein?
  • Schriften? FOUT!
  • Komprimierung möglich?
  • Server / Konfiguration

  • Webserver
  • Apache, Lightpd, Nginx, etc.
  • HTTP-Version
  • Hey, http/2 verarbeitet parallel ... :-)

    Scripte

  • aktuelle PHP / Ruby / Node-Versionen
  • Beispiel: PHP 7.x ist um den Faktor 8 schneller als PHP 5.6
  • verbesserte Cachingmethoden
  • Einsatz als Servermodul
  • JS

  • Framework vs. Vanilla
  • Natives JS ist inzwischen sehr mächtig
  • Sind 250 kB jQuery notwendig?
  • Eine Seite ohne Slider braucht auch kein Javascript dafür
  • Styles

    Auch hier gilt:

    • komplette Frameworks (Foundation, Bootstrap, etc) sind massiv
    • besser individuell bauen
    • Eine Seite ohne Slider braucht auch kein CSS dafür

    Tracking

  • Per JS: Performancebremse par excellence
  • Besser:  Serverseitig
  • In Logs steht auch alles drin
  • Datenbank

  • Stored Procedures einsetzen
  • Anstatt bei jedem Aufruf "SELECT from WHERE foo = 'bar' AND bar = 'foo' AND ...
  • Vorformulierte Anfrage in Datenbank ausführen
  • Augen auf

  • Gilt auch bei der Datenbankwahl
  • teilweise dramatische Perfomanceunterschiede
  • MariaDB vs. PostgreSQL vs. MSSQL vs ..
  • Abhängig von der Nutzung
  • Bad Patterns vermeiden

  • durchdachter Aufbau
  • Elemente wiederverwenden
  • API-Aufrufe reduzieren
  • Bilder und Medien

  • angemessene Bildgrössen
  • <picture>
  • spezielle Versionen für unterschiedliche Screens
  • auch manche CMS können das
  • Platz reservieren
    • Bilddaten ggf. extern optimieren
    • Komprimierung sinnvoll einsetzen
    • neue Formate nur teilweise sinnvoll
    • ggf. Lazyloading

    Audio / Video

  • moderne Codecs nutzen
  • Autoload ist oft böse
  • Schrift

  • angepasste Webfonts nutzen
  • Dank HTTP/2 kein CDN nötig
  • sinnvolle Fallbacks einsetzen
  • @local abfragen
  • FOUT beachten
  • Strukturelles

    Aspekte:

    • Above the Fold
    • Blockendes JS
    • Schickimicky erst wenn alles unabdingbare da ist

    HTML-Struktur verändern

  • Basis-CSS gerne oben inline
  • Inline muss nicht erst geladen werden
  • Alles andere nach unten
  • JS eindampfen
  • Weiterleitungen

    ... vermeiden.

    Caching, Caching, Caching

  • unveränderliche Inhalte - 1 Jahr
  • CMS-Daten: 1 Jahr
  • moderne PHP-Frameworks erkennen Veränderungen
  • Cache wird dann teilweise invalidiert
  • Bilddaten werden dynamisch erzeugt - 1 Jahr
  • Proxieserver

    Was ist das?

    • Zwischengeschalteter Server
    • Cache
    • Nimmt Last vom Hauptsystem

    PWA

  • minimales JS
  • schreibt Seiteninhalt beim Client in den Cache
  • ggf. offline verfügbar
  • Ladezeit dann ggf. bei Null
  • CDN?

  • Kann bessere Anbindung ermöglichen
  • Vorteil: Immer nah
  • Aaaaber: Man hat es nicht in der Hand
  • Abhängig vom Anbieter
  • Kann richtig Geld kosten
  • Für grosse Seiten geeignet
  • Geschwindigkeit

    Maximale Zeit bis zur Anzeige:

    < 3 Sekunden

     

    Serverantwort

    Maximale Zeit bis zum ersten Byte:

    < 1.3 Sekunden

    Requests

    Maximale Anzahl an Requests für die komplette Seite:

    < 50 Anfragen

    Datenmenge

    Maximale Grösse der Seite:

    < 500 Kilobytes

    Ressourcen

    Testen:

    Linter

    To lint = 'von Fusseln befreien'

    Und auch:

    CSS / Critical Path

  • https://www.sitelocity.com/critical-path-css-generator
  • https://jonassebastianohlsson.com/criticalpathcssgenerator/
  • Moderne Lösungen

    Was kann ich nutzen?

    Was ist ein Polyfill?

    https://polyfill.io/v3/

    Komprimieren

  • Bilder komprimieren: Tinypng.com (https://tinypng.com/)
  • Vergleich unter https://compress-or-die.com/The-big-image-compression-tool-comparison/
  • CSS und JS: https://www.minifier.org/
  •  

    Fonts

    Eigene Webfonts einsetzen, wenn HTTP/2 läuft

    PWA

  • Was ist das? - https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/?hl=de
  • Builder - https://www.pwabuilder.com/
  • Danke für die Aufmerksamkeit.

    @carolinakoehn

    kikmedia.de