PageSpeed Insights (Google)

Bakehouse liefert alle technischen Grundlagen, um einen gutes Ergebnis beim PageSpeed (Google-Insights) zu erreichen. Um tatsächlich gute Messergebnisse zu erzielen, muss bei der Erstellung, Konzeption und Befüllung auf einige wichtige Punkte Rücksicht genommen werden. 

Wichtig: Wird bereits beim Design und bei der Befüllung keine Rücksicht auf den PageSpeed genommen, kann der Programmierer am Ende keine Wunder mehr vollbringen. 

Größe der Seite in Megabyte

Je kleiner die Seite, umso besser. Vollbildgalerien mit vielen Slidern auf der Startseite schauen zwar gut aus, sind aber ein Problem für die Ladezeiten. 

Generell gilt: je weiter die Bilder komprimiert werden können, umso besser. 

Bilder – auch Hintergrundbilder in Content-Elementen – sollen immer nur mit den Bakehouse-Image- und Backgroundimage-Viewhelpern geladen werden. So wird immer die kleinstmögliche Dateigröße geladen.

Es gilt: Wenn man als Integrator direkt auf /uploads/tx_bh/ referenziert kann das Bakehouse Bilder nicht in der Größe reduzieren. 

Bilder in /fileadmin/images/ sollen nach Möglichkeit immer manuell komprimiert und von Metadaten befreit werden. Hilfreich dafür: https://tinypng.com/

Es sollte wenn möglich immer JPG oder SVG verwendet werden. PNG soll nur in Ausnahmefällen Verwendung finden.

Videos im Header schauen gut aus, sind aber mitunter ein enormes Problem für die Ladezeit. Wenn sich ein Video im Header nicht verhindern lässt, bei der Komprimierung maximal eine Datenrate von mehr als zwei Mbit pro Sekunde nicht überschreiten.

Weiterleitungen

Weiterleitung brauchen Zeit und machen das Laden der Seite langsam. Im Optimalfall befindet sich bereits auf der Root-Page Inhalt. 

Eine Standard-Weiterleitung von http://www.hotel.at/ auf http://www.hotel.at/de/home/ wirkt sich schlecht auf den Score aus. Besser wird bereits auf der ersten Seite Inhalt präsentiert. 

Wird folgender Code im .htaccess eingebaut, werden alle Aufrufe auf die Seite ohne www und ohne https automatisch auf https://www weitergeleitet. So können unter Umständen bis zu zwei Redirects gespart werden. Achtung: Es befindet sich mitunter bereits ein ähnlicher Eintrag in der .htaccess Datei - dieser kann im Fall ersetzt werden.

Ist eine Seite nur mit SSL über https erreichbar, kann in der .htaccess ganz oben auf Zeile 1 mit folgendem Code bereits das Antwortpaket auf die erste Anfrage verschlüsselt werden. Mitunter kann so ein weiterer Redirect eingespart werden.  

Achtung: Es handelt sich bei diesen Methoden nicht um die Standardeinstellung von Apache. Wird eine der oben angeführten Lösungen verwendet, muss von uns Cookis etwas an der Serverkonfiguration geändert werden, um den vollen Performance-Vorteil zu erreichen. Ein kurzes Mail an support@bakehouse.at reicht und wir helfen gerne weiter. 

Caching

Wenn ein Browser Dateien zwischenspeichern kann, erhält die Seite ein besseres Ergebnis beim PageSpeed. Das Caching von Seiten kann über die .htaccess Datei gesteuert werden. Eine Webplattform ist eine delikate Angelegenheit und ein falsch gesetzter Cache-Header kann das Funktionieren einer Seite verhindern. Wir empfehlen daher folgenden getesteten Code: 

Achtung: Auf Dateien von Drittanbietern hat man als Integrator keinen Einfluss. Es empfiehlt sich also, immer so wenig Dateien von externen Quellen nachzuladen, wie möglich. Auch Tracking-Codes können ein Problem sein.

Während der Entwicklung kann es Sinn machen, in der Mobilversion den Cache zu deaktivieren. Bei Onlinestellung sollte unbedingt der Cache der Seite aktiviert werden. 

CSS und Javascript

Sowohl CSS und Javascript können das Laden einer Seite nicht nur verzögern, sondern sogar anhalten. Sogenanntes 'Render-Blocking' wird vom PageSpeed enorm abgestraft. Wir empfehlen deshalb folgende Codes im Root-Typoscript einzubauen. Diese fassen CSS- und JS-Dateien in jeweils eine Datei zusammen und verschieben diese an eine möglichst späte Stelle im Renderprozess. Der Vorgang wird nur im Front-End ausgeführt um ein möglichst einfaches Debugging der Seite im Backend zu ermöglichen. Teile dieser Codes sind Bakehouse spezifisch und funktionieren in Typo3 nicht.

Fonts (Schriften)

Schriften werden oft von externen Quellen geladen und blocken mit ihrem @import das Rendern der Seite. Gerade Adobe Fonts (vormals Typekit) stellt ein großes Problem dar, aber auch Googles eigene Lösung Google Webfonts sorgt für einen schlechten Score beim PageSpeed.

Wir empfehlen Schriften wenn möglich immer lokal im /fileadmin/ zu speichern und direkt von dort einzubinden. Selbstverständlich muss die Schrift entsprechend lizensiert sein. 

Google Webfonts können beispielsweise hier geladen werden: https://google-webfonts-helper.herokuapp.com/fonts

Wenn möglich soll für die Schriften außerdem eine Fallback-Methode mitgegeben werden. Damit kann Text auch dann schon gerendert werden, wenn die Schrift noch gar nicht geladen ist.

Lazy Loading BETA

Das Bakehouse unterstützt LazyLoading für Background Images. Vor dem erfolgreichen Laden wird eine Farbfläche mit der Durchschnittsfarbe des Bilds angezeigt. 

© 2014 Cookis Webworks |
Akzeptieren
Mehr Infos
Diese Seite verwendet Cookies.