Tobias Scheible Cyber Security & IT-Forensik Dozent
Schnelle Ladezeiten mit Systemschriftarten

Schnelle Ladezeiten mit Systemschriftarten

Um weiter die Geschwindigkeit meines Blogs zu erhöhen, bin ich das Thema Schriftarten angegangen. Ich habe mich von meinen bisherigen Web Fonts verabschiedet und setze jetzt konsequent auf Systemschriftarten, um die Ladezeit zu beschleunigen.

Sonntag, 23. Februar 2020
0 Kommentare

Um ein positives Nutzererlebnis zu schaffen, ist die Geschwindigkeit einer Website sehr wichtig. Gerade mit mobilen Endgeräten, die keine optimalen Funkverbindungen haben, sind langsame Websites sehr nervig. Dieses Thema wurde von der Entwicklergemeinde sehr stark forciert, nachdem Google 2010 bekanntgegeben hatte, dass die Geschwindigkeit Einfluss auf das Ranking hat. Außerdem wurde Anfang 2018 noch deutlicher auf die Position der Google-Suchergebnisse von Mobile-Websites in Abhängigkeit der Geschwindigkeit hingewiesen. Das sind die offiziellen Statements von Google, aber es gibt auch Untersuchungen, die keine echte Auswirkung feststellen können.

Ich selbst beschäftige mich sehr intensiv mit der Optimierung der Geschwindigkeit meines Blogs. Aber nicht aufgrund der theoretischen Auswirkung auf das Ranking, sondern um meinen Lesern ein optimales Nutzungserlebnis zu bieten. Gleichzeitig macht es aber natürlich auch viel Spaß, tief in die Technik zu gehen und versuchen, das Optimum zu erreichen.

Web Fonts

Individuelle Schriftarten können das Erscheinungsbild einer Website mit dem Auftritt des Unternehmens harmonisieren. So werden mittlerweile verschiedene Schriftarten mit unterschiedlichen Schriftschnitten in der Typografie von Websites eingesetzt. Allerdings handelt es sich bei Web Fonts zum Teil um sehr große Dateien. Die bekannte Schriftart Roboto von Google hat zum Beispiel eine Dateigröße von 2 MB. Ein erster Schritt zur Verringerung der Dateigröße ist die Entfernung aller nicht benötigten Zeichen. Dazu gehören die nicht zur deutschen Sprache gehörenden Zeichen. Dies sorgt im Beispiel von Roboto für eine Reduzierung der Dateigröße auf 434 KB. Mit der Verwendung des neuen Dateiformates WOFF2 kann die Dateigröße weiter verringert werden und liegt dann bei 193 KB. Hierbei sollten allerdings noch die TTF-Dateien als Alternative für ältere Webbrowser angeboten werden. Trotz der deutlichen Reduzierung der Dateigröße benötigen diese Schriftarten trotzdem noch eine gewisse Zeit, da einerseits zunächst der Download und anderseits die Verarbeitung durch den Webbrowser erfolgen muss.

Systemschriftarten

Ein neuer Trend ist die Verwendung von Systemschriftarten. Früher standen hierfür nur sehr wenige Schriftarten bereit, die auf allen Systemen noch installiert sind. Mittlerweile liefern die Betriebssysteme jedoch sehr moderne Schriftarten mit, die zudem für die Lesbarkeit auf Bildschirmen optimiert wurden. Gleichzeitig sorgen die flexiblen Layouts dafür, dass unterschiedliche Schriftgrößen keine Probleme mehr bereiten.

Bei den Systemschriftarten handelt es sich nicht um eine einzige Schriftart, sondern um eine Liste von Schriften der verschiedenen Betriebssysteme. Sie liegen in verschiedenen Schriftschnitten vor, daher kann problemlos auch eine Light oder Semibold Variante genutzt werden. Auf diese Methode setzen bereits die großen Seiten GitHub, Medium und WordPress. Github verwendet dafür die folgenden Schriftarten:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

Umsetzung im Blog

Hier in meinem Blog habe ich mich jetzt auch für den Schritt hin zu den Systemschriften entschieden. Dazu bin ich auf Github fündig geworden. Don Schnitzius hat dort mehrere Varianten an verschiedenen Kombinationen aus Systemschriftarten online gestellt. Für die Schrift ohne Serifen habe ich mich für die folgende Kombination entscheiden:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;

Und für die Serifenschrift in den Blog-Artikeln setze ich auf die folgende Kombination:

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

Fazit

Mit der Nutzung von Systemschriftarten konnte ich insgesamt fünf Server-Anfragen entfernen. Die Größe der Schriftarten war fast so groß wie der HTML-Code meiner Startseite und allen CSS-Dateien zusammen. Meine Seite habe ich mit verschiedenen Endgeräten getestet und überall konnten die Inhalte gut gelesen werden. Viele Besucher werden den Unterschied wahrscheinlich gar nicht merken. Damit kann die Seite noch schneller geladen werden, was die Entwicklertools von Firefox bestätigt haben. Bei den PageSpeed Insights Tools von Google konnte ich meine Punktzahl dadurch auch weiter steigern.

Über Tobias Scheible

Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <hr> <big> <small> <sub> <sup> <u>

Ihre E-Mailadresse wird nicht veröffentlicht. Mit dem Absenden anerkennen Sie die Datenschutzhinweis des Blogs.