Weniger Verbindungen vor dem ersten Bild
Jeder zusätzliche Host, mit dem eine Seite spricht, kostet eine DNS-Abfrage und einen TLS-Handshake, bevor das erste Byte ankommt. Kommen die Schriften vom selben Server wie das HTML, reisen sie über eine Verbindung, die bereits offen ist. Die Hauptschriftdatei laden wir vorab, damit der Browser sie anfordert, bevor er das Stylesheet fertig gelesen hat.
Wir liefern Manrope und IBM Plex Mono in zwei Subsets aus, Latin und Latin Extended. Das zweite enthält die türkischen Buchstaben, damit die türkischen Seiten nicht auf eine Systemschrift zurückfallen, während die echte lädt.
Ein Video, zwei Kodierungen
Das Startvideo blieb in 4K; ein weicheres Bild wollten wir nicht. Geändert hat sich die Kodierung. Browser, die AV1 dekodieren können, erhalten eine Datei mit 3,1 MB. Alle anderen erhalten eine H.264-Version mit 10,7 MB. Die Seite prüft die Antwort des Browsers auf canPlayType und wählt eine aus. Die Datei, die wir ersetzt haben, hatte 23,7 MB.
Das Video lädt außerdem erst, wenn sein Abschnitt in die Nähe des sichtbaren Bereichs kommt. Bis dahin zeigt der Browser ein Posterbild, das klein ist und früh ankommt.
Caching, das zur Datei passt
Schriften ändern sich nie, deshalb werden sie ein Jahr lang zwischengespeichert. Das Video wird dreißig Tage zwischengespeichert. HTML wird gar nicht zwischengespeichert, damit eine Korrektur beim nächsten Besuch sichtbar ist. Stylesheets tragen eine Version in ihrer URL; so können wir sie ein Jahr lang cachen und Änderungen trotzdem sofort ausliefern.
Datenschutz und Kontrolle
Ein Font-Dienst sieht die IP-Adresse aller, die die Seite öffnen. Bei einer selbst gehosteten Schrift erfährt kein Dritter etwas, das die Seite nicht ohnehin erfährt. Die Dateien bleiben außerdem, wo sie sind: Kein Dienst kann sie abschalten, umbenennen oder seine Bedingungen ändern.
Das einzige externe Skript, das auf der Website geblieben ist, ist ein Analyse-Beacon ohne Cookies. Wir nennen es hier bewusst, damit die Aussage oben richtig bleibt.
Was es gekostet hat
Einen Nachmittag. Die Schriften in Subsets zerlegen, das Video zweimal kodieren, die Cache-Regeln schreiben und danach jede Seite prüfen. Für eine kleine Website ist das ein fairer Tausch gegen Seiten, die von einer einzigen Quelle laden und ohne fremde Erlaubnis weiter funktionieren.
Wenn Sie dieselbe Änderung für Ihr eigenes Produkt abwägen, beginnen Sie mit den Schriften. Sie lassen sich am leichtesten umziehen und sind das Erste, worauf ein Besucher wartet.