« Zum Blog

Shopware Ladezeiten Challenge Teil III - Schriftarten

Die erste Optimierung - Schriftarten

Heute möchte ich mich der ersten Optimierung der Webseite annehmen. Im letzten Blogeintrag habe ich festgestellt, dass die Schriftarten der Installation das Laden der Webseite blockieren. Bevor es losgeht noch einmal mein Ziel für die Shopware Ladezeiten Challenge: Meine Shopware Installation soll innerhalb von 2 Sekunden in 3G Netzwerken laden und einen Google PageSpeed Wert on 90 erreichen (Mobil und Desktop).

Hier die Links zu den anderen Blogeinträgen:

In diesem Blogeintrag werde ich mich mit den folgenden Themen beschäftigen:

Recap: Das Problem

In der Performance Analyse des Webpage Test ist dieses Bild zu finden. In dem Bild sieht man alle Verbindungen, die der Browser zu dem Server aufgebaut hat. Die Anzahl der Verbindungen zu einer bestimmten Domain sind dabei begrenzt. (Meist auf 6 Verbindungen.) Ich werde im Weiteren die einzelnen Verbindungen als Pipes bezeichnen. Die erste Pipe geht also zur Domain led-vision-germany.de, die zweite zu ocsp.comodoca.com und die zehnte zu Google Analytics.

Beim Laden der Seite wird nach dem HTML zuerst das CSS geladen. Das ist der kurze grüne Balken am Anfang der 4. Pipe, der bei 0,6 Sekunden startet und bei ca. 0,7 Sekunden beendet ist. Ab 0,8 Sekunden werden dann die Schriftarten geladen. Das sind die roten Balken in den Pipes 4 bis 9. Da Schriftarten im CSS definiert werden, wissen wir nun, dass das Parsen (dem Übersetzen des Browsers) des CSS ca. 100 Millisekunden benötigt.

Im letzten Blogeintrag findet sich eine detaillierte Beschreibung, wie Shopware mit Einkaufswelten umgeht. Hier wichtig zu wissen ist, dass Shopware zuerst den Header und Footer im HTML ausliefert. Die eigentliche Einkaufswelt wird dann per JavaScript nachgeladen. Da das JavaScript (hellbraun) hier zwischen 0,75 Sekunden und 1,2 Sekunden geladen wird, wird der Inhalt in dieser Zeit noch nicht einmal angefragt. Erst wenn das JavaScript geladen ist (bei 1,2 Sekunden) und wieder eine der Pipes frei ist (bei 1,5 Sekunden) kann der eigentliche Inhalt nachgeladen werden. Der Inhalt ist hier einer der beiden kurzen, blauen HTML Anfragen, die ab 1,5 Sekunden in Pipe 4 bzw. 8 geladen werden. (Bitte beachte auch, dass der Browser kein Bild anzeigt, solange die Schriftarten nicht geladen sind. Der Bildschirm bleibt also weiß.)

In einem Satz zusammengefasst ist das Problem folgendes: Durch das Laden der Schriftarten wird das Laden des Inhalts meiner Seite blockiert und die Seite bleibt in dieser Zeit weiß. Das ist nicht Sinn der Sache.

Wie findet ich die richtige LESS Datei?

Die Überschrift nimmt es schon vorweg, die Lösung des Problems liegt in einer LESS Datei. Für alle, die nicht wissen was eine LESS Datei ist, hier eine kurze Erklärung. Jede Webseite beinhaltet CSS, das das Design der Webseite definiert. Um die Entwicklung des Designs zu vereinfachen, wurde LESS entwickelt. LESS nimmt dem Designer die verschiedensten Aufgaben ab. In diesem Kontext ist nur wichtig, dass LESS das Arbeiten mit mehreren Dateien vereinfacht. Sobald der Designer die Arbeit beendet hat, führt LESS alle Inhalte zusammen und speichert das gesamte Design in einer einzelnen Datei ab. Die Webseite muss dann nur noch eine Datei einbinden, an Stelle von vielen.

Schriftarten sind immer ein Teil des Designs und werden daher im CSS definiert. Da das CSS von Shopware aus den verschiedenen LESS Dateien generiert wird, wird die Schriftart in einer der LESS Dateien definiert. Dabei kann man die Dateien einfach nach dem Namen der Schriftarten, die der Browser herunterlädt, durchsuchen. Hier z.B. OpenSans-Regular.woff.

LESS Dateien können in Shopware an 2 unterschiedlichen Orten auftauchen: entweder im Theme oder als Teil der Plugins. Hier liegt auch schon der Hase begraben. Shopware bringt von Haus aus das Bare und das Responsive Theme mit. Darauf aufbauend wird normalerweise ein drittes Theme genutzt. Es gibt also schon drei Ordner mit LESS Dateien. Zusätzlich kann jedes Plugin noch LESS Dateien mitbringen. Hast Du wie ich 29 Plugins installiert, sind es also 29 weitere mögliche Orte.

Zum Glück sind alle Themes und Plugins gleich aufgebaut.

Du findest Deine Themes im Ordner themes/Frontend/. Jedes Theme hat einen eigenen frontend/_public/src/less Ordner. In diesem findest Du die LESS Dateien.

Dasselbe gilt für Plugins diese sind unter engine/Shopware/Plugins abgelegt. Je nachdem ob die Plugins zum Core gehören, von der Community sind oder Local installiert wurden, findest Du sie in ihrem eigenen Ordner. Hier ist es Konvention die LESS Dateien unter Views bzw resources abzulegen.

All diese Ordner kannst Du jetzt nach dem Namen der Schriftarten durchsuchen. (Falls Du Entwickler bist, kann Dein Codeeditor das wahrscheinlich übernehmen.) Der Fund sollte so ähnlich wie der folgende Code aussehen.

@font-face {
     font-family: 'Open Sans';
     src: url('@{OpenSansPath}/Light/OpenSans-Light.woff?@{shopware-revision}') format('woff'),
         url('@{OpenSansPath}/Light/OpenSans-Light.ttf?@{shopware-revision}') format('truetype');
     font-weight: 300;
     font-style: normal;
}

Leider kann ich dir nicht versprechen, dass die Dateien dort liegen, wo Du sie erwartest. In meinem Fall siehst Du den kleinen Ordner vendors in dem vorherigen Bild. Da lagen auch noch LESS Dateien und ich habe dort natürlich nicht nachgesehen. Ärgerlich.

Sobald Du die richtige Datei gefunden hast, musst Du einfach ein /* ... */ um das @font-face{ … } setzten. Damit kommentierst Du den Code aus und er wird vom LESS Compiler entfernt. Der Code von oben wird also zu:

/* @font-face {
     font-family: 'Open Sans';
     src: url('@{OpenSansPath}/Light/OpenSans-Light.woff?@{shopware-revision}') format('woff'),
         url('@{OpenSansPath}/Light/OpenSans-Light.ttf?@{shopware-revision}') format('truetype');
     font-weight: 300;
     font-style: normal;
} */

Jetzt muss das Theme erneut kompiliert werden und schon sind die Änderungen im Browser zu sehen.

Das Ergebnis

Visuell hat sich das Entfernen der Schriftarten nicht stark ausgewirkt. Das ist natürlich von Fall zu Fall unterschiedlich, aber hier bringt die zusätzliche Schriftart nicht viel. Bei der Performance Perspektive sieht das Ganze schon anders aus.

Zuerst einmal ist die Seite nun innerhalb von 3,7 statt 4,1 Sekunden geladen. Visuell vollständig ist sie sogar schon nach 2,5 Sekunden (davor 3). Das heißt, durch das Eliminieren der unnötigen Schriftarten wurden zwischen 0,3 und 0,4 Sekunden gespart (wenn man die schnellere Antwortzeit des Servers mit einbezieht – siehe First Byte). Das ist eine Verkürzung der Ladezeit um 10%, für mich ein guter Anfang.

Kleiner Tipp noch: Vergiss nicht den Cache wieder aufzuwärmen.

Bis nächste Woche!

 

« Zum Blog