Web-Schriftarten optimieren, ohne die Darstellung zu verändern

Beschleunige das Laden der Webfonts dieser Website, ohne das Erscheinungsbild zu verändern. Reduziere die Font-Bytes so weit wie möglich, behalte das Rendering identisch bei und beweise dies mit Vorher/Nachher-Pixel-Diffs. Behandle jede visuelle Änderung als Regression, es sei denn, ich genehmige sie. Wenn eine Optimierung das Rendering verändern würde, teile mir mit, was sie einspart und was sie ändert, und behalte das Erscheinungsbild der Website standardmäßig bei. Behalte das aktuelle Ladeverhalten bei: Fasse font-display oder Fallback-Schriften nicht an. Füge keine Font-Verarbeitung zum Build hinzu; schreibe ein Skript, das ich manuell ausführe, committe dessen Ausgabe und notiere, wann es erneut ausgeführt werden muss. Miss zuerst den aktuellen Zustand: die Größe jeder Font-Datei, die Glyphenanzahl, die variablen Achsen, die OpenType-Funktionen und das Hinting sowie die Font-Bytes pro Seite und was jede Seite vorlädt. Finde dann heraus, was die Website tatsächlich verwendet, und prüfe dabei Inline-Komponentenstile sowie Stylesheets: welche Zeichen im Inhalt vorkommen, welche Achsenwerte und Gewichte jede Schrift benötigt (einschließlich einmaliger Überschreibungen und Fett innerhalb von Kursiv), welche OpenType-Funktionen aktiviert sind, und CSS-Nebeneffekte wie `hyphens: auto`, das den Bindestrich U+2010 verwendet. Reduziere jede Schrift darauf. Behalte die verwendeten Zeichen sowie Latin-1 und Latin Extended-A bei und überlasse CJK den Systemschriften, wenn es heute so rendert. Begrenze variable Achsen auf die verwendeten Bereiche und fixiere eine Achse nur dann auf einen Wert, wenn nichts sie überschreibt. Entferne ungenutzte OpenType-Funktionen und Hinting. Teile jede Schrift in zwei Dateien auf. Ein kleiner Kern mit ASCII und der Interpunktion, die die meisten Seiten verwenden (geschweifte Anführungszeichen, Gedankenstriche, Auslassungspunkte), wird vorab geladen. Eine erweiterte Datei hinter `unicode-range` wird nur heruntergeladen, wenn eine Seite eines ihrer Zeichen benötigt. Das `unicode-range` jeder Datei sollte nur Zeichen auflisten, die sie tatsächlich enthält. Achte auf ein paar Dinge. Eine generierte Fallback-Fläche zwischen den Kern- und erweiterten Dateien zeichnet die erweiterten Zeichen, bevor die echte Schrift es tut. Schriften mit einem Reserved Font Name unter der OFL müssen nach dem Subsetting intern umbenannt werden. Überprüfe die generierten Dateien, da Font-Tools Eigenheiten haben. Bevor du es als abgeschlossen bezeichnest, erstelle eine Baseline aus demselben Inhalt und führe Pixel-Diffs vorher und nachher auf Seiten mit Code, Kursivschrift, akzentuierten Zeichen, Komponenten mit eigenen Schrift-Einstellungen und CJK durch. Erkläre jeden sichtbaren Unterschied: Inhaltsänderung, zu behebende Regression oder harmloses Sub-Pixel-Rounding. Miss die Bytes pro Seite erneut und bestätige, dass die erweiterten Dateien nur dort geladen werden, wo sie benötigt werden. Wenn du fertig bist, teile mir die Bytes vorher und nachher pro Schrift und pro Seite mit, die Pixel-Diff-Ergebnisse, alle Abweichungen von dem, was ich verlangt habe, und was sie gekostet haben, sowie wie das Skript erneut ausgeführt wird. Später könnte es sich lohnen, die Kernschrift in das globale Stylesheet einzubetten und die erweiterten Dateien nach dem Leerlauf vorab zu cachen.