Warum Ihr PrestaShop-Theme 15 Schriften laedt, die Sie nicht brauchen

Die versteckten Kosten von Font-Bloat in PrestaShop-Themes

Oeffnen Sie die DevTools Ihres Browsers, wechseln Sie zum Netzwerk-Tab, filtern Sie nach "Font" und laden Sie Ihren PrestaShop-Shop neu. Wenn Sie mehr als drei oder vier Font-Dateien sehen, die heruntergeladen werden, haben Sie ein Problem, das Sie stillschweigend Kunden kostet. Die meisten PrestaShop-Themes werden mit einer erstaunlichen Anzahl von Font-Ressourcen ausgeliefert, die der durchschnittliche Shop niemals verwendet, und jede einzelne davon verzoegert den Moment, in dem Ihre Besucher tatsaechlich Ihren Inhalt lesen koennen.

Font-Bloat ist eines der am meisten uebersehenen Performance-Probleme in PrestaShop. Shop-Betreiber verbringen Stunden damit, Bilder zu optimieren, CCC (Combine, Compress, Cache) zu aktivieren und Server-Konfigurationen zu optimieren, ignorieren aber die Tatsache, dass ihr Theme 800KB oder mehr an Font-Dateien bei jedem einzelnen Seitenaufruf laedt. Dieser Artikel erklaert genau, warum das passiert, wie Sie Ihr Font-Loading pruefen und was Sie dagegen tun koennen.

Wie PrestaShop-Themes Fonts buendeln

PrestaShop-Themes werden als eigenstaendige Pakete vertrieben. Wenn ein Theme-Entwickler ein Theme erstellt, moechte er, dass es fuer moeglichst viele Shops sofort funktioniert. Das bedeutet, dass jede Font-Variante und Icon-Bibliothek eingeschlossen wird, die man moeglicherweise brauchen koennte. Das Ergebnis ist ein Theme, das mit weit mehr Font-Ressourcen ausgeliefert wird, als ein einzelner Shop jemals verwenden wird.

Ein typisches PrestaShop-Theme enthaelt drei Kategorien von Fonts. Erstens gibt es Display-Fonts, die fuer Ueberschriften, Fliesstext und UI-Elemente verwendet werden. Dies sind normalerweise Google Fonts wie Roboto, Open Sans, Lato oder Montserrat. Zweitens gibt es Icon-Fonts wie FontAwesome, Material Icons oder theme-spezifische Icon-Sets. Drittens gibt es Fallback- oder dekorative Fonts, die das Theme fuer bestimmte Komponenten wie Banner, Badges oder Werbeabschnitte verwendet.

Das Problem potenziert sich, weil jede Font-Familie typischerweise in mehreren Schnitten und Stilen ausgeliefert wird. Ein einzelner Font wie Roboto koennte Regular (400), Medium (500), Bold (700) und deren kursive Varianten enthalten, jeweils als separate WOFF2-Datei. Multiplizieren Sie das mit zwei oder drei Font-Familien plus einer Icon-Bibliothek, und Sie erreichen schnell 12 bis 15 einzelne Font-Dateien, die auf jeder Seite geladen werden.

Das FontAwesome-Problem

FontAwesome verdient seinen eigenen Abschnitt, weil es der groesste einzelne font-bezogene Performance-Suender in PrestaShop-Themes ist. Die vollstaendige FontAwesome 5-Bibliothek wiegt ungefaehr 150KB allein fuer die Webfont-Datei, plus weitere 60-80KB fuer sein CSS. FontAwesome 6 ist sogar noch groesser. Die Bibliothek enthaelt ueber 1.600 Icons, aber der durchschnittliche PrestaShop-Shop verwendet vielleicht 20 bis 30 davon.

Das bedeutet, Sie zwingen jeden Besucher, ueber 200KB an Font- und CSS-Daten herunterzuladen, nur damit Sie ein Warenkorb-Icon, eine Such-Lupe und ein paar Social-Media-Logos anzeigen koennen. Dies ist ein absurdes Verhaeltnis, und es passiert, weil Theme-Entwickler es einfacher finden, die gesamte Bibliothek einzuschliessen, als sie fuer die spezifischen Beduerfnisse jedes Shops zu reduzieren.

Das Classic-Theme in PrestaShop 1.7 und 8.x enthaelt FontAwesome 4.7, das etwas kleiner ist, aber immer noch Hunderte von Icons enthaelt, die Sie niemals verwenden werden. Das Hummingbird-Theme in PrestaShop 8.x hat sich von FontAwesome zugunsten von SVG-Icons abgewandt, was eine bedeutende Verbesserung ist, aber viele Drittanbieter-Themes und -Module verlassen sich immer noch auf FontAwesome und laden ihre eigene Kopie zusaetzlich zu dem, was das Theme bereitstellt.

Google Fonts und die Performance-Steuer

Google Fonts sind der beliebteste Webfont-Dienst, und PrestaShop-Themes machen starken Gebrauch davon. Das Laden von Google Fonts auf die Standard-Art erzeugt jedoch eine Kette von performance-schaedlichen Anfragen.

Wenn Ihr Theme Google Fonts ueber den Standard-Link-Tag laedt, muss der Browser sich zuerst mit fonts.googleapis.com verbinden, um die CSS-Datei herunterzuladen. Diese CSS-Datei sagt dem Browser dann, die eigentlichen Font-Dateien von fonts.gstatic.com herunterzuladen. Jede dieser Verbindungen erfordert DNS-Aufloesung, TCP-Handshake und TLS-Aushandlung. Bei mobilen Verbindungen kann diese Kette 300-500ms Verzoegerung hinzufuegen, bevor ein einzelnes Zeichen Text auf dem Bildschirm gerendert wird.

Noch schlimmer: Google Fonts CSS verwendet den font-display-Deskriptor standardmaessig auf "swap" gesetzt seit 2019, aber viele aeltere Themes referenzieren noch Google Fonts CSS-URLs, die vor dieser Aenderung liegen. Ohne font-display: swap kann der Browser allen Text auf der Seite verbergen, bis der Font heruntergeladen ist, was den gefuerchteten Flash of Invisible Text (FOIT) erzeugt, bei dem Besucher eine bis drei Sekunden lang eine leere Seite sehen.

Es gibt auch ein Datenschutzproblem. Das Laden von Fonts von Googles CDN bedeutet, dass Google Informationen ueber jeden Besucher Ihres Shops erhaelt, einschliesslich seiner IP-Adresse und der besuchten Seiten. Unter der DSGVO erfordert dies eine ausdrueckliche Einwilligung, und ein deutsches Gericht entschied im Januar 2022, dass die Verwendung von Google Fonts ohne Einwilligung gegen die DSGVO verstoesst und Bussgelder nach sich zieht.

Wie Sie Ihr Font-Loading pruefen

Bevor Sie das Problem beheben koennen, muessen Sie genau verstehen, welche Fonts Ihr Theme laedt und welche Sie tatsaechlich brauchen. Hier ist ein systematischer Ansatz.

Oeffnen Sie Chrome DevTools (F12), gehen Sie zum Netzwerk-Tab und aktivieren Sie das Kontrollkaestchen "Cache deaktivieren". Laden Sie Ihre Seite neu und filtern Sie nach "Font" in der Filterleiste. Sie sehen jede Font-Datei, die der Browser herunterlaed. Notieren Sie die Dateinamen, Groessen und die Initiator-Spalte, die Ihnen sagt, welche CSS-Datei jeden Font angefordert hat.

Verwenden Sie als Naechstes den Coverage-Tab in den DevTools (Strg+Umschalt+P, dann "Coverage" eingeben). Starten Sie eine Coverage-Aufnahme und navigieren Sie durch Ihren Shop. Der Coverage-Tab zeigt Ihnen genau, wie viel von jeder CSS-Datei tatsaechlich verwendet wird. Fuer das CSS von FontAwesome werden Sie typischerweise 90% oder mehr als unbenutzt markiert sehen.

Sie koennen auch das Lighthouse-Audit in den DevTools verwenden. Fuehren Sie ein Performance-Audit durch und suchen Sie nach den Moeglichkeiten "Ungenutztes CSS reduzieren" und "Sicherstellen, dass Text waehrend des Webfont-Ladens sichtbar bleibt". Lighthouse wird font-bezogene Performance-Probleme spezifisch hervorheben.

Fuer eine gruendlichere Analyse verwenden Sie WebPageTest (webpagetest.org), um einen Test von einer mobilen Verbindung aus durchzufuehren. Betrachten Sie das Wasserfall-Diagramm und finden Sie die Font-Anfragen. Beachten Sie, wann sie im Verhaeltnis zu anderen Ressourcen mit dem Laden beginnen und wie lange sie dauern. Bei einer 3G-Verbindung werden Font-Ladeverzoegerungen schmerzlich offensichtlich.

Nicht verwendete Fonts Schritt fuer Schritt entfernen

Sobald Sie wissen, welche Fonts Ihr Theme laedt und welche Sie tatsaechlich brauchen, ist es Zeit, den Ueberschuss zu entfernen. Der Ansatz unterscheidet sich je nach Architektur Ihres Themes.

Fuer Themes, die Google Fonts ueber einen Link-Tag im Header-Template laden, finden Sie die Template-Datei, die die Google Fonts-Referenz enthaelt. Bei den meisten Themes ist dies in templates/layout/head.tpl oder einer aehnlichen Datei. Wenn Sie ein Child-Theme verwenden, kopieren Sie dieses Template vor dem Bearbeiten in Ihr Child-Theme-Verzeichnis. Entfernen oder aendern Sie den Google Fonts-Link, um nur die Schnitte und Familien einzuschliessen, die Sie tatsaechlich verwenden.

Fuer FontAwesome pruefen Sie, ob Ihr Theme es ueber eine CSS-Datei im assets/css-Verzeichnis oder ueber einen CDN-Link laedt. Wenn es eine lokale Datei ist, haben Sie zwei Moeglichkeiten. Sie koennen das vollstaendige FontAwesome-Paket durch eine Teilmenge ersetzen, die nur die Icons enthaelt, die Sie verwenden, oder Sie koennen die Icon-Font-Nutzung vollstaendig durch Inline-SVGs ersetzen.

Um FontAwesome zu reduzieren, verwenden Sie ein Tool wie IcoMoon (icomoon.io) oder Fontello (fontello.com). Diese Tools lassen Sie nur die spezifischen Icons auswaehlen, die Sie brauchen, und generieren eine benutzerdefinierte Font-Datei, die vielleicht 5-10KB statt 150KB gross ist. Sie muessen die CSS-Klassennamen aktualisieren, wenn das Tool andere generiert, aber die meisten erlauben es Ihnen, die originalen FontAwesome-Klassennamen beizubehalten.

Pruefen Sie fuer Google Fonts jede CSS-Datei in Ihrem Theme auf @font-face-Deklarationen. Theme-Entwickler importieren Fonts manchmal direkt im CSS statt ueber das Head-Template. Verwenden Sie die DevTools-Suche (Strg+Umschalt+F), um alle geladenen Ressourcen nach "@font-face" und "fonts.googleapis.com" zu durchsuchen.

font-display: swap implementieren

Wenn Sie Web-Fonts beibehalten, stellen Sie unbedingt sicher, dass sie den font-display: swap-Deskriptor verwenden. Dies weist den Browser an, Text sofort mit einem Fallback-Systemfont anzuzeigen, waehrend der Web-Font im Hintergrund heruntergeladen wird. Sobald der Web-Font bereit ist, tauscht der Browser ihn ein. Dies eliminiert FOIT und stellt sicher, dass Ihr Inhalt sofort lesbar ist.

Fuer Google Fonts, die ueber CDN geladen werden, fuegen Sie den display=swap-Parameter zur URL hinzu. Aendern Sie zum Beispiel fonts.googleapis.com/css2?family=Roboto:wght@400;700 zu fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap. Beachten Sie, dass Google diesen Parameter 2019 standardmaessig hinzugefuegt hat, aber viele PrestaShop-Themes immer noch aeltere URL-Formate verwenden.

Fuer selbst gehostete Fonts mit @font-face-Deklarationen in Ihrem CSS fuegen Sie font-display: swap zu jedem @font-face-Block hinzu. Oeffnen Sie die CSS-Datei Ihres Themes, die die @font-face-Regeln enthaelt, und fuegen Sie die Eigenschaft hinzu. Sie gehoert innerhalb des @font-face-Blocks neben font-family, src und font-weight.

Beachten Sie, dass font-display: swap einen Flash of Unstyled Text (FOUT) verursachen kann, bei dem Text kurz im Fallback-Font erscheint, bevor zum Web-Font gewechselt wird. Dies ist eine viel bessere Erfahrung als unsichtbarer Text, aber Sie koennen den visuellen Ruck minimieren, indem Sie Fallback-Fonts waehlen, die den Metriken Ihres Web-Fonts nahekommen. Die CSS-Eigenschaften size-adjust, ascent-override und descent-override helfen dabei.

Selbst-Hosting von Fonts vs. CDN-Loading

Das Selbst-Hosting Ihrer Fonts anstelle des Ladens von Googles CDN bietet mehrere bedeutende Vorteile fuer PrestaShop-Shops.

Die Performance verbessert sich, weil Sie den zusaetzlichen DNS-Lookup und die Verbindung zu Googles Servern eliminieren. Ihre Fonts laden von derselben Domain wie Ihre anderen Assets, was bedeutet, dass der Browser bestehende Verbindungen wiederverwenden kann. Mit HTTP/2 oder HTTP/3 koennen alle Ihre Font-Dateien gleichzeitig ueber eine einzelne Verbindung heruntergeladen werden.

Die Datenschutz-Compliance wird einfacher, da Besucherdaten nicht mehr an Google gesendet werden. Dies eliminiert ein DSGVO-Problem vollstaendig, und Sie muessen Google Fonts nicht zu Ihrem Cookie-Consent-Banner hinzufuegen.

Die Zuverlaessigkeit verbessert sich, weil Sie nicht von einem externen Dienst abhaengig sind. Wenn Googles CDN ein Problem hat (selten, aber es kommt vor), laden Ihre Fonts trotzdem.

Um Google Fonts selbst zu hosten, verwenden Sie das google-webfonts-helper-Tool (gwfh.mranftl.com/fonts), das eine einfache Oberflaeche bietet, um jeden Google Font im WOFF2-Format mit dem korrekten @font-face-CSS herunterzuladen. Laden Sie nur die Schnitte und Stile herunter, die Sie brauchen, platzieren Sie die Dateien in Ihrem Theme-Verzeichnis assets/fonts und fuegen Sie das @font-face-CSS zu Ihrem Theme-Stylesheet hinzu.

Der einzige potenzielle Nachteil des Selbst-Hostings ist, dass Sie die Moeglichkeit eines Cache-Treffers verlieren, wenn der Besucher denselben Font bereits von Googles CDN auf einer anderen Website geladen hat. Allerdings haben Browser dieses Cross-Site-Caching aus Datenschutzgruenden seit 2020 weitgehend eliminiert, sodass dieser Vorteil in der Praxis nicht mehr existiert.

Font-Subsetting: Die Radikalloesung

Font-Subsetting bedeutet das Entfernen von Zeichen, die Sie nicht brauchen, aus einer Font-Datei. Ein typischer lateinischer Web-Font enthaelt Zeichen fuer Dutzende von Sprachen, von denen viele Ihr Shop nicht verwendet. Durch Subsetting auf nur die Zeichen, die Ihr Shop benoetigt, koennen Sie Font-Dateigrössen um 50-70% reduzieren.

Das Tool pyftsubset aus der fonttools-Python-Bibliothek ist der zuverlaessigste Weg zum Subsetting von Fonts. Sie koennen genau angeben, welche Unicode-Bereiche eingeschlossen werden sollen. Fuer einen Shop, der nur auf Deutsch und Englisch operiert, koennten Sie auf Basic Latin (U+0020-007F) plus Latin-1 Supplement (U+00A0-00FF) fuer Waehrungssymbole und Sonderzeichen subsetten.

Fuer Shops, die in mehreren Sprachen operieren, muessen Sie vorsichtiger sein. Schliessen Sie die Unicode-Bereiche fuer alle Sprachen ein, die Ihr Shop unterstuetzt. Google Fonts CSS macht dies tatsaechlich automatisch mit unicode-range-Deskriptoren und laedt Zeichenteilmengen nach Bedarf, aber selbst gehostete Fonts brauchen manuelles Subsetting.

Ein einfacherer Ansatz ist die ausschliessliche Verwendung des WOFF2-Formats und die Aufgabe der Unterstuetzung fuer aeltere Formate. WOFF2 verwendet Brotli-Kompression und erzeugt Dateien, die 30% kleiner als WOFF sind. Jeder moderne Browser unterstuetzt WOFF2, sodass es keinen Grund gibt, WOFF-, TTF- oder EOT-Formate einzuschliessen, es sei denn, Sie muessen Internet Explorer 11 unterstuetzen. Viele PrestaShop-Themes liefern immer noch alle vier Formate fuer Abwaertskompatibilitaet aus, die nicht mehr notwendig ist.

System-Font-Stacks: Die kostenlose Alternative

Die radikalste Loesung fuer Font-Performance ist, gar keine Web-Fonts zu verwenden. Moderne Betriebssysteme werden mit hochwertigen Fonts ausgeliefert, die hervorragend auf dem Bildschirm aussehen. Ein System-Font-Stack verwendet den Font, den das Betriebssystem bereitstellt, was null Font-Dateien zum Herunterladen und sofortiges Text-Rendering bedeutet.

Der moderne System-Font-Stack sieht so aus: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif. Dies gibt Ihnen San Francisco auf Apple-Geraeten, Segoe UI auf Windows und Roboto auf Android. Alle diese sind saubere, moderne, gut lesbare Sans-Serif-Fonts.

GitHub, Bootstrap 5 und viele leistungsstarke Websites verwenden System-Font-Stacks. Der visuelle Unterschied zwischen einem System-Font und einem Google Font wie Open Sans oder Roboto ist minimal, besonders fuer Fliesstext. Die meisten Ihrer Kunden werden weder bemerken noch sich darum kuemmern, ob Ihr Shop Roboto vom Server geladen oder das bereits auf ihrem Android-Telefon installierte Roboto verwendet.

Um einen System-Font-Stack in PrestaShop zu implementieren, muessen Sie das CSS Ihres Themes aendern, um die bestehenden font-family-Deklarationen zu ersetzen, die @font-face-Regeln und Google Fonts Link-Tags entfernen und die Font-Dateien aus dem Assets-Verzeichnis Ihres Themes loeschen. Wenn Sie ein Child-Theme verwenden, koennen Sie die Font-Deklarationen des Parent-Themes ueberschreiben, ohne die Parent-Theme-Dateien zu aendern.

Was ist mit Icon-Fonts?

Wenn Sie FontAwesome oder einen anderen Icon-Font entfernen, brauchen Sie eine Alternative zum Anzeigen von Icons. Der beste moderne Ansatz sind Inline-SVGs. SVG-Icons rendern bei jeder Groesse scharf, koennen mit CSS gestaltet werden und fuegen nur Gewicht fuer die spezifischen Icons hinzu, die Sie verwenden, anstatt eine gesamte Icon-Bibliothek zu laden.

PrestaShops Hummingbird-Theme verwendet SVG-Icons nativ, was einer der Gruende ist, warum es besser performt als Classic. Wenn Ihr Theme FontAwesome verwendet, koennen Sie einzelne Icons durch SVGs aus Quellen wie Heroicons, Feather Icons oder sogar FontAwesomes eigenen SVG-Dateien ersetzen (die separat von der Font-Version verfuegbar sind).

Fuer einen PrestaShop-Shop brauchen Sie typischerweise weniger als 30 einzigartige Icons: Warenkorb, Suche, Benutzerkonto, Herz/Wunschliste, Pfeile, Social-Media-Logos und einige kategoriespezifische Icons. Als Inline-SVGs koennten diese insgesamt 10-15KB betragen, verglichen mit 150-200KB fuer den vollstaendigen FontAwesome-Font und CSS.

Die Auswirkungen messen

Messen Sie nach dem Entfernen ungenutzter Fonts die Verbesserung. Fuehren Sie Lighthouse vorher und nachher durch und vergleichen Sie den Performance-Score, First Contentful Paint (FCP) und Largest Contentful Paint (LCP). Font-Optimierung verbessert FCP typischerweise um 200-500ms bei mobilen Verbindungen.

Pruefen Sie die Gesamtuebertragungsgroesse im DevTools Netzwerk-Tab. Ein gut optimierter PrestaShop-Shop sollte insgesamt weniger als 50KB an Font-Daten uebertragen. Wenn Sie auf System-Fonts wechseln, sinkt diese Zahl auf null.

Ueberpruefen Sie auch, dass Ihr Shop weiterhin korrekt aussieht. Pruefen Sie jeden Seitentyp: Startseite, Kategorie, Produkt, Warenkorb und Checkout. Einige Themes verwenden bestimmte Fonts fuer bestimmte Elemente, und das Entfernen eines Fonts koennte unerwartetes Fallback-Rendering verursachen. Testen Sie immer gruendlich, bevor Sie Font-Aenderungen in der Produktion bereitstellen.

Zusammenfassung: Eine Font-Loading-Checkliste

Pruefen Sie Ihr aktuelles Font-Loading mit dem DevTools Netzwerk-Tab gefiltert auf Fonts. Identifizieren Sie, welche Fonts tatsaechlich verwendet werden, indem Sie die CSS-Coverage pruefen. Entfernen Sie alle Google-Fonts-Familien oder -Schnitte, die Sie nicht verwenden. Ersetzen Sie vollstaendige Icon-Fonts durch reduzierte Versionen oder Inline-SVGs. Fuegen Sie font-display: swap zu allen verbleibenden @font-face-Deklarationen hinzu. Hosten Sie Ihre Fonts selbst, anstatt sie von Googles CDN zu laden. Erwaegen Sie ausschliesslich WOFF2, um aeltere, groessere Formate zu eliminieren. Bewerten Sie, ob System-Fonts Ihre Web-Fonts vollstaendig ersetzen koennten. Messen Sie vorher und nachher mit Lighthouse und WebPageTest. Das Ziel ist einfach: Laden Sie nur, was Sie brauchen, laden Sie es effizient und lassen Sie Ihre Besucher niemals auf Fonts warten, die sie nicht sehen koennen.