Level: Anfänger
Sprachen: HTML, .htaccess, CSS
Eine schnelle Ladezeit verbessert das Google Ranking in jedem Fall.
Um die Ladezeit und die Verbesserungsmöglichkeiten einer Seite anzuzeigen, stellt Google die sogenannten „PageSpeed Insights“ zur Verfügung. Außerdem ist „Googles Lighthouse“ direkt in den Chrome Entwicklertools unter „Audits“ zu finden.
Ein guter Score (im Bereich von 90-100 Punkten) ist zu empfehlen, um das User-Erlebnis, als auch das SEO zu verbessern.
Folgendes sollte dringend beachtet werden:
Nutze minimierte Stylesheets und JavaScript-Dateien
Um die Ladezeiten zu verkürzen, reicht es oft schon aus, CSS und JS-Dateien zu verkleinern. Dies geht mit sogenannten Minifiern, welche als Plugins für viele Code-Editoren (zum Beispiel Minify für Sublime Text) zur Verfügung stehen oder Online genutzt werden können.
Wichtig ist außerdem, dass wichtigere Scripts und Styles zuerst geladen werden (dies kann auch über eine Inline-Integration passieren) und unwichtigeres später. Daher ist es ratsam, JS-Dateien nicht im <head>-Bereich der Seite, sondern ganz unten vor dem </body>-Tag einzufügen:
<!Doctype html>
<html lang="de">
<head>
<!-- Falsch! -->
<script src="assets/unwichtigescripts.js"></script>
</head>
<body>
<!-- Richtig! -->
<script src="assets/unwichtigescripts.js"></script>
</body>
</html>
Nutze neue Bildformate
Anstelle von JPEG oder PNG Bildern, ist es ratsam, neuere Formate wie JPEG 2000 oder WebP zu verwenden. Die neueren Formate sparen vor allem Dateigrößen ein.
Es gibt viele Converter, die Bilder in diese Formate umwandeln.
Da die Formate .webp und .jp2 noch nicht von allen Browsern unterstützt werden, muss ein Fallback eingerichtet werden:
<picture>
<source srcset="img/bild.webp" type="image/webp">
<source srcset="img/bild.png" type="image/png">
<img src="img/bild.png" alt="">
</picture>
Nutze „lazy-loading“ für Bilder und iFrames
Zwar ist ist das neue „loading=lazy“-Attribut bisher nur in Chrome verfügbar, wird aber in Zukunft auch in andere Browser integriert. Außerdem gibt es entsprechende Plugins für WordPress und co.
Durch dieses Attribut werden Bilder und iFrames erst dann geladen, wenn sie auch sichtbar sind.
<img src="bild.webp" loading="lazy" alt="">
<iframe src="iframe.html" loading="lazy"></iframe>
Cache für Dateien einrichten
Um die Ladezeiten weiter zu verkürzen, müssen einige Dateien gecached werden. Dafür verwenden wir die .htaccess-Datei, um die zu cachenden Dateien zu definieren und die „Lifetime“ des Caches festzulegen:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 500 seconds"
ExpiresByType font/ttf "access plus 180 days"
ExpiresByType image/gif "access plus 180 days"
ExpiresByType image/ico "access plus 180 days"
ExpiresByType image/jpeg "access plus 180 days"
ExpiresByType image/jpg "access plus 180 days"
ExpiresByType image/png "access plus 180 days"
ExpiresByType image/jp2 "access plus 180 days"
ExpiresByType image/webp "access plus 180 days"
ExpiresByType text/css "access plus 14 days"
ExpiresByType text/javascript "access plus 14 days"
ExpiresByType application/x-javascript "access plus 14 days"
ExpiresByType application/javascript "access plus 14 days"
</IfModule>
Die Speicherdauer kann natürlich nach Belieben geändert werden. Sinnvoll ist es, Bilder länger zu cachen, da sich diese im Regelfall nicht ändern. JavaScript- und CSS-Dateien sollte man eher kürzer speichern, es sei denn, du hast nicht vor, an diesen Änderungen vorzunehmen.
Wenn all diese Tips befolgt wurden, sollte die Seite nun einen deutlich besseren Score erreichen. Google gibt aber auch dann weiterhin Infos, wie der Score verbessert werden kann.
