Page Speed der Webseite
Die Webseiten-Geschwindigkeit d.h. eine schnelle Auslieferung und Darstellung der Webseite ist eine der Stellschrauben für das technische SEO, steigert die Aufenthaltsdauer des Besuchers und verringert die Absprungrate.
Mögliche Gründe langsamer Webseiten
Eine langsame Webseite kann viele Gründe haben. Neben der Geschwindigkeit des Servers, können im Backend komplexe Datenbankabfragen der Auslöser für eine lange Ladezeit der Webseite sein. Im Frontend sind die Ursachen oft JavaScript, Schriften und CSS Code, welche das Rendering blockieren und sich negativ auf die Ladezeit auswirken.
Bildoptimierung WebP
Neben den oben genannten Gründen sind Bilder ein weiterer Punkt, um eine Verbesserung der Ladezeit der Webseite zu erzielen. Webseiten sind heutzutage mit sehr vielen Bildern bestückt, und je nach Größe, Qualität und Anzahl ist dies einer der wichtige Bausteine um eine Optimierung der Webseite vorzunehmen.
Gerade in mobilen Netzen merkt man sehr schnell, ob eine Webseite schlank und effizient umgesetzt ist. Mit neueren Desktop-Browsern kann eine langsamere Mobilfunkverbindung gewählt werden, um das Ladeverhalten der Webseite zu simulieren.
Bilder kann man komprimieren, jedoch ensteht dadurch ein Qualitätsverlust. Das Bildformat WebP bietet viele Vorteile, da es JPEG und PNG vereint. Das bedeutet verlustbehaftete sowie verlustfreie Kompression und Unterstützung von Transparenzen und Animationen. Hier kann je nach Bild und Optimierung bis zu 30% - 40% in der Dateigröße eingespart werden. Das Image Format WebP wird mittlerweile von allen modernen Browsern außer Safari unterstützt, somit sollte man nicht zögern, diesen Vorteil auch einzusetzen.
Konvertierung der Bilder zu WebP
Bilder können mit den entsprechenden Tools umgewandelt werden. Es gibt Online Tools wie Squoosh oder Online-Convert.com zum Konvertieren der Bilder.
Für Photoshop gibt es ein Plugin zum Download, Sketch hat bereits die Funktionalität Bilder im WebP Format zu speichern.
Für die Kommandozeile bzw. Console steht cwebp zur Verfügung.
Einbindung WebP mit dem picture Element inklusive Fallback
Um das Image-Format WebP zu implementieren, kann man das
<picture>
<source type="image/webp" srcset="bild.webp">
<source type="image/jpeg" srcset="bild.jpg">
<img src="image.jpg" alt="Mein Bild">
</picture>Bilder WebP, Lösungsansatz Service Worker (PWA)
Bei Verwendung eines CMS-Systems wie zum Beispiel Joomla oder Wordpress könnte die obige Implementierung mit etwas höherem Aufwand verbunden sein bzw. es wird ein zusätzliches Plugin dafür benötigt.
Um dennoch von den Vorteilen des Image Formates WebP zu profitieren, besteht die Möglichkeit das Laden der Bilder über die Technik eines Service Worker zu kontrollieren. Der Service Worker agiert als eine Art Proxy und kontrolliert alle Requests, um wie gewünscht anstelle des JPEG oder PNG das Format WebP zu verwenden.
Zuerst ist eine Registrierung des Service Workers in der Index-Datei erforderlich. Die Methode der Registrierung ist hier Async, um das Rendering nicht zu blockieren.
window.addEventListener('load', async () => {
if ("serviceWorker" in window.navigator) {
try {
await window.navigator.serviceWorker.register('/serviceworker.js')
} catch (error) {
console.error(error)
}
}
})Im Service Worker File werden dann alle Requests kontrolliert und nach den "jpg oder png" gefiltert. Wenn der Browser das Bildformat WebP unterstützt, würde das auf dem Server vorhandene Bild ausgeliefert werden. Ein Fallback für Browser wie Safari, welche momentan WebP noch nicht unterstützen, wird nicht benötigt.
self.addEventListener('fetch', e => {
if (e.request.url.match(/\.(jpe?g|png)$/)) {
let isSupportedWebP = false
if (e.request.headers.has('accept')) {
isSupportedWebP = e.request.headers
.get('accept')
.includes('webp')
}
if (isSupportedWebP) {
const req = e.request.clone()
const splitUrl = req.url.split('.')
const returnImageUrl = splitUrl[0]+ '.webp'
e.respondWith(
fetch(returnImageUrl, {
mode: 'no-cors'
})
)
}
}
})Nach der Installation des Service Workers, würde dieser dann alle Bilder im optimierten Format WebP ausliefern. Als nächsten Schritt könnte man den Service Worker benutzen, um die Bilder in einen Cache zu legen und diese dann Offline bereitzustellen. Bei der Wahl dieser Methode wäre der erste Schritt zu einer Progressiven Web App vollzogen. Somit kann man weitere Features wie Offlinefähigkeit implementieren, um hier eine besser Ladezeit zu erreichen.
WebP Bilder ein klarer Vorteil
Bei der Verwendung von WebP Bilder auf Ihre Webseite kann man nur profitieren, egal welche Implementierungsmethode gewählt wird. Die Wahl der Methode "Service Worker" ist ein ausbaufähiger Lösungsansatz, welcher in Richtung Progressive Web App zielt. Durch die verschiedenen Möglichkeiten Bilder in WebP einzubinden, sprechen viele Argumente für die Programmierung von performanten Webseiten.
Benötigen Sie Beratung zur Optimierung Ihre Webseite bezugnehmend auf Geschwindigkeit? Haben Sie Fragen zur Implementierung von WebP Bildern?
15 Tipps zur Optimierung einer PWA (Progressive Web App) Lesen Sie mehr...
Progressive Web App - unverzichtbar für jede Webseite? Lesen Sie mehr...
Psychologie der Farben - Überzeugung des Webseiten-Besuchers mit Light- oder Dark Mode? Lesen Sie mehr...