Performance-Steigerung durch Bildoptimierung bei TYPO3
Lesezeit: 1 Minuten
Bildnachweis: Foto von Marek Levak auf pexels
WebentwicklungTYPO3
Wir stellen in diesem Artikel eine neue Möglichkeit vor, mit dem CMS TYPO3 erhebliche Performance-Steigerungen in der SEO einer Website zu realisieren. Durch eine Optimierung der Ausgabe der Bildgrößen erreichen wir
die bestmögliche Anzeigequalität auf jedem Endgerät
die bestmögliche Performance beim Laden der Website (Dateigröße, Anzeige der Bilder)
Optimierte Bildausgabe - Wie funktioniert das?
Aktuell werden auf Websites meist die Bilder nach TYPO3-Standard-Einstellungen ausgeliefert. TYPO3 generiert aus dem im Backend hinterlegten Bild eine kleinere, optimierte Web-Version des Bildes im Frontend. Auf dem Smartphone, Tablet und PC wird dann - egal in welcher Bildschirmgröße - immer das gleiche Bild angezeigt, nur eben skaliert auf die benötigte Höhe und Breite.
Wir haben in den letzten Monaten immer wieder an dem Prozess gearbeitet und ihn deutlich optimiert und verfeinert.
In dem von Simple Web-Solutions optimierten Prozess lädt für alle hinterlegten Bilder für jeden Viewport (z.B. Handy, Tablet, PC, WQHD-Monitor) zwar jeweils der gleiche Bildausschnitt (und das gleiche Bild), jedoch in den passenden Größen für das jeweilige Ausgabegerät. Das bedeutet, dass für einen Slider, z.B. auf dem Handy, ein Bild mit den Maßen 300x150px angezeigt wird, auf dem WQHD-Monitor selbiges jedoch deutlich größer mit 2560×1000px.
Die Methode führt zu deutlich besseren SEO-Rankings. Durch das Laden der richtigen Bilder und Bildgrößen erreicht man sofort deutlich verbesserte Ladezeiten der Website. Das liegt daran, dass die Bilder beispielsweise auf dem Smartphone in der zum Bildschirm passenden Auflösung geladen werden und nicht größer. Am Desktop-PC, also z.B. einem FullHD Monitor, werden die Bilder dann entsprechend größer ausgegeben.
In einem zweiten Schritt haben wir den Prozess weiter verfeinert, da gleich große Bildschirme auch unterschiedliche Auflösungen haben können (z.B. ein 27 Zoll-Monitor mit FullHD, WQHD oder 4K). Wir laden hier also pro passenden Viewport nochmals die beste Auflösung des Bildes, je nach Auflösung des Monitors. Da nur die Bilder angezeigt werden, welche auch geladen werden, erreichen wir so die bestmögliche Performance aus den Bilddaten der Website.
Unser Fazit
Wir empfehlen, die Optimierung unbedingt in Ihrer TYPO3-Umgebung einzusetzen. Das Thema Bildoptimierung ist bei Messungen des Page Speeds ein Schlüsselindikator für gute Website-Performance und begünstigt direkt bessere Suchmaschinenplatzierungen.
Sprechen Sie uns gerne direkt an. Für Rückfragen und weitere Informationen stehen wir gerne zur Verfügung.