Jeder von uns stößt ab und an auf Webseiten, die einfach nicht laden wollen. Dies ist für den User unangenehm und für den Seitenbetreiber oft eine Katastrophe. Der Page Speed hat nämlich gigantische Auswirkungen auf die Profitabilität des Internetprojekts. In diesem Beitrag zeigen wir, wie die Ladegeschwindigkeit fast jeder Site verbessert werden kann.
Deshalb ist Page Speed so wichtig
Im Prinzip gibt es vier sehr gute Gründe, um die eigene Site auf Geschwindigkeit zu optimieren. An erster Stelle steht das Nutzererlebnis. Ist die Seite nicht innerhalb von 0-2 Sekunden geladen, steigt die Absprungrate stark an. Dies hat zum einen negativen Einfluss auf das Google-Ranking. Mittlerweile kann der Suchmaschinengigant auf die Bounce Rate zugreifen – Chrome und Google Analytics sei Dank. Jedes Mal, wenn ein Besucher die aufgerufene Seite vorschnell verlässt, kann dies die Position in den Suchergebnisseiten verschlechtern.
Ebenso dramatisch verhält es sich mit den Auswirkungen auf Verkaufsabschlüsse. Studien haben gezeigt, dass bereits nach 3 Sekunden Ladedauer der Umsatz um rund 35 % sinken kann.
Was verlangsamt Webseiten?
Ziel sollte es sein, die Ladezeit auf unter 2 Sekunden zu drücken. Natürlich hat man nicht auf alles einen Einfluss. Es können aber durchaus einige Stellschrauben angezogen werden. So sollte man schon bei der Wahl des Templates darauf achten, dass dieses nicht durch große Bilddateien aufgebläht ist. Je kleiner die verwendeten Dateien, desto besser. Ja, auch der HTML und CSS-Code selber kann für eine Verlangsamung der Webseite verantwortlich sein! Hier ist zu prüfen, ob der Code verschlankt werden kann. Problematisch kann auch die Nutzung von Pagebuildern sein. Elementor und Brizy helfen zwar bei der Gestaltung und Pflege der Page, können den Abruf dieser aber auch verlangsamen.
Natürlich sollte die Seite auch auf einem schnellen Server liegen. Entscheidend sind dabei Arbeitsspeicher und Prozessorgeschwindigkeit. Wird der Webspace mit anderen Kunden geteilt, sollte man genau hinschauen – kommt es zu Überlastungen der Ressourcen?
Bilder optimieren und komprimieren
Der erste Schritt sollte es sein, die eingebetteten Bilder genau zu betrachten. In der Regel werden diese bereits im JPEG oder PNG Format vorlegen. Durch spezielle Software und Plug-ins können diese aber in vielen Fällen noch weiter verkleinert werden. Tools wie tinypng entfernen Meta-Daten, was die Dateien weiter verkleinert. Eine Alternative ist die Nutzung des verlustfreien WebP Formats. Da dieses aber noch nicht weit genug verbreitet ist, muss unbedingt ein Fallback-Bild angegeben werden, um die Darstellung in allen Browsern zu gewährleisten. Dies könnte so in den Quellcode eingebaut werden:
<picture>
<source srcset=“img/testbild.webp“ type=“image/webp“>
<source srcset=“img/testbild2.jpg“ type=“image/jpeg“>
<img src=“img/testbild2.jpg“ alt=“Fallback-Bild“>
</picture>
Bilder: Lazy Load und weitere Tricks
Für jedes einzelne Bild sollte man im HTML Code die genaue Größe angeben und die Datei in den angegebenen Maßen auch bereitstellen. Ansonsten muss der Browser das Bild erst skalieren, was sinnlos Ressourcen verbraucht. Auch dem mobilen Traffic sollte man Rechnung tragen. Auf kleinen Bildschirmen sind niedriger aufgelöste Bilder sinnvoll, während diese auf dem Desktop verpixelt wirken. Technisch lässt sich dies durch eine automatische Erkennung der Bildschirmgröße lösen. Der Server wird dann angewiesen, entweder das kleine oder das große Bild zu laden.
Ein weiterer interessanter Trick ist die Verwendung von „Lazy Load“. Bei dieser Technik werden erst jene Bilder geladen, die sichtbar sind. Erst beim Scrollen erscheinen weitere Elemente.
Was ist Caching und warum ist es entscheidend?
Jedes Mal, wenn der Nutzer eine Website aufruft, stellt er viele Anfragen an den Server. Ganz konkret bedeutet dies, dass das Laden jedes Elements immer neu angefragt wird. Dies wirkt sich negativ auf die Ladezeit aus. Caching ist eine Technik, bei der bestimmte Elemente zwischengespeichert werden – entweder auf dem Server (Serverseitiges Caching) oder im Browser. Für das Browser-Caching stehen einem verschiedene WordPress-Plug-ins zur Verfügung, wie etwa WP-Rocket oder WP Total Cache. Wenn der Nutzer die Webseite mehrfach besucht oder aber Unterseiten aufruft, wird die Ladezeit stark verkürzt. Denn: Der Code der Website sowie manche Bilddateien liegen bereits auf dem Rechner des Users vor.
Viele Cache-Plug-ins bieten auch die Möglichkeit, den Code der Webseite zu optimieren. Dies geschieht entweder durch eine Gzip-Komprimierung und/oder der Konsolidierung verschiedener JS oder CSS Dateien. Auch eine händische Verkleinerung des Codes kann Wirkung entfalten. Dazu muss dieser manuell begutachtet werden. Wo besteht Potenzial zur Verschlankung? Sind Kommentare vorhanden, die entfernt werden können?
Prefetching und Prerendering anwenden
Eine weitere Profi-Technik ist die Verwendung von Prefetching und Prerendering. Dabei wird antizipiert, welche Website-Ressource der User als Nächstes anfragen wird. Diese wird bereits vorgeladen (Prefetching). Eine solche Ressource lässt sich granular bestimmen – es kann eine Schriftart, ein Bild oder ein Teil des Codes sein. Wird eine ganze Seite vorgeladen, spricht man vom Prerendering. Zur Umsetzung einfach folgende Zeile in den Quellcode einfügen:
<link rel=“prerender“ href=“//prerendering-seite.de/verzeichnis“>
Damit lassen sich Ladezeiten von weniger als 50 ms realisieren.
Fazit
Wie wir gesehen haben, kann die Optimierung der Ladegeschwindigkeit von Webseiten ein komplexes Unterfangen sein. Durch die Verwendung von Plug-ins können auch Anfänger akzeptable Resultate erzielen. In manchen Fällen ist es jedoch sinnvoll, die Experten von 3m5 zu konsultieren. Die Agentur für Webentwicklung am Standort Stuttgart hilft dabei, das letzte Quantum an Geschwindigkeit aus Ihrer Webseite herauszukitzeln. So heben Sie sich von der Konkurrenz ab und verbessern Ihre Konvertierungsrate!
Neue Kommentare