Webfonts optimiert einbinden
Mit der .htaccess könnt ihr ganz einfach und direkt verschiedene Dateien in den Cache des Browser legen, sodass Nutzer diese nur einmal und dann nie wieder herunterladen müssen. Das ist eine der wichtigsten Optimierungen für Wordpress, die gleichzeitig aber von vielen Anfängern vergessen wird. Doch darum geht es hier gar nicht, denn hier geht es um den Faktor Webfont. In letzter Zeit ist mir nämlich aufgefallen, dass vieles im Cache landet, doch einige Blogs vergessen die Webfonts korrekt zu cachen. Woran liegt das, habe ich mich gefragt, verschiedene Hostings ausprobiert und gemerkt, dass Webfonts sich nicht immer ganz so einfach optimieren und cachen lassen. Also dachte ich mir, ich schreibe einfach mal einen Artikel darüber, wie Webfonts richtig optimiert und dann perfekt komprimiert werden. Das Ganze ist gar nicht so schwer und beginnt erst einmal mit dem Löschen überflüssiger Zeichen, um die Schrift möglichst klein zu halten. Das bringt, je nach Font nämlich eine Menge, um genau zu sein werden aus 300 Kilobyte schnell mal 15 Kilobyte, sobald alles Überflüssige entfernt wurde und die Schrift im richtigen Format vorliegt. Also los gehts, optimieren wir ein paar Webfonts.
1. Webfont Generator
Zunächst einmal muss die Font in den Webfont Generator. Dort geht ihr auf “Expert” und wählt dann die entsprechenden Optionen aus, die ihr euch für eure Webfonts wünscht. Das Format .woff reicht vollkommen aus, das Rendering sollte so simpel wie möglich sein, also ruhig alles abwählen. Sieht die Schrift später komisch aus, könnt ihr immer noch Optionen hinzufügen und die Webfont noch einmal generieren. Doch zuerst mit dem Minimum probieren. Bei “Subsetting” dann unbedingt nur “German” auswählen, dort sind alle Standard-Zeichen enthalten, mehr braucht es nicht, mehr bedeutet schließlich auch Speicherplatz und Ladezeit. Die Schrift als Base64 einzufügen, halte ich nicht für brauchbar, da Base64 sich nur bedingt zum optimieren eignet und im Falle einer Webfont den Code nur unnötig aufbläht.
2. @Font-Face
Via Font-Face ist die Font nun in eure CSS-Datei integriert, eventuell nutzt ihr auch Inline CSS, den Vergleich der beiden Möglichkeiten hatten wir hier ja schon einmal besprochen, mitsamt Vor- und Nachteilen. Meiner Meinung nach würde ich außerdem nur noch die .woff einbinden, die jeder moderne Browser nutzen kann. Mehrere Formate bedeuten auch wieder weitere Zeilen im Code und all die Formate müssen schließlich auch geladen werden. Weniger ist mehr und wenn der Browser nicht modern genug ist, um .woff anzuzeigen – Ach kommt schon, wir leben nicht mehr in den 90ern. Aber nicht mit .woff2 verwechseln, denn das Format wird noch lange nicht von allen unterstützt. Scahde eigentlich, denn es ist noch einmal deutlich komprimierter und oft bis zu 50 Prozent kleiner als .woff.
@font-face{
font-family:'Schriftname';
font-weight:400;
src:url(http://MeineFont.woff)
}
Wo wir gerade bei der CSS angelangt sind: Je nach Schriftart, könnt ihr diese per Stylesheet noch weiter optimieren. Die Text-Rendering-Option sorgt zum Beispiel dafür, dass beim Rendern nicht so sehr auf die Genauigkeit geachtet wird, sondern die schnelle Ladezeit bzw. Geschwindigkeit im Fokus steht. Auch die Glättung unter MacOS sollte Pflicht sein, da Schriften auf einem Mac so deutlich hübscher und feiner aussehen.
text-rendering: optimizeSpeed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale}
3. Caching und Komprimierung
Der nächste Schritt dreht sich nun um das korrekte Caching und die richtige Optimierung eurer Schriftarten. Das eigentlich wichtigste. Der Grund, warum der Browsercache bei Webfonts oft nicht richtig funktioniert ist der, dass der Typ für die Schrift bzw. Datei erst einmal hinzugefügt werden muss, um dann korrekt gecached werden zu können. Das vergessen viele und merken dann nicht, dass ihre Webfont zwar geladen wird, aber nicht korrekt im Cache landet und den Default-Wert dafür nutzt. Das führt dann dazu, dass auf vielen Wordpress Blogs ständig die Webfont neu geladen wird. Das wiederum führt dazu, dass ich als Nutzer längere Ladezeiten in kauf nehmen muss und der Server mehr Daten überträgt und dadurch langsamer wird. Mit diesem Code fügt ihr die entsprechenden Webfont-Typen hinzu, legt sie für 1 Jahr in den Cache der Nutzer bzw. des Browsers und komprimiert sie dann noch via Gzip. Ich habe zur Übersicht mal alle gängigen Typen integriert, rate aber trotzdem nur zur Einbindung der .woff und nur dem dafür vorgesehenen Zeilen.
AddType font/ttf .ttf AddType font/otf .otf AddType font/woff .woff ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/woff
Webfont Performance verbessern
Das war es dann auch schon wieder. In drei einfachen Schritten haben wir Webfonts reduziert, korrekt hochgeladen und integriert. Nicht mehrere Fonts, sondern nur die Woff-Datei, die von allen modernen Browsern korrekt dargestellt und verarbeitet werden kann. Diese landet außerdem für ein Jahr im Cache des Browser, was bedeutet, dass der Besucher sie nur jedes Jahr herunterladen müssen bzw. nur dann, wenn er den Cache seines Browsers leert. Die zusätzliche Komprimierung der Webfont reduziert noch einmal ihre Größe, sodass am Ende nicht mehr viel übrig bleibt, was den eigenen Blog verlangsamen könnte. So und nicht anders werden Webfonts meiner Meinung nach eingebunden. Und bitte: Finger Weg von den Google Fonts, denn damit besteht pauschal wieder ein Datenschutzproblem auf eurer Website, schließlich wird Google bei jedem zugriff auf die Font so einiges speichern. Was genau? Ich weiß es nicht, aber Google ist Google. Webfonts kann man heutzutage auch kinderleicht selbst hosten und wie das blitzschnell geht, haben wir gerade gelernt.
