Welche Maßnahmen können Sie ergreifen, damit Ihre Website schneller lädt? Ein Überblick:
Technisch:
- Dateigröße von Bildern dynamisch gestalten:
Verwenden Sie so genannte Responsive Bilder (Responsive Images). Mit dieser Technik sagen Sie dem Browser: “Hey, wenn Du eine kleine Auflösung hast, dann nimm das kleine Bild, wenn Du einen größeren Bildschirm hast, dann nimm das größere Bild”. Bei kleineren Bildschirmen kann man dann natürlich eine Grafik wählen, die auch wesentlich weniger Kilobyte hat, so dass die Website dann insgesamt schneller geladen wird auf dem Smartphone. Die Umsetzung sieht zunächst etwas kryptisch aus im HTML, aber inzwischen gibt es viele Editoren, mit denen man verschiedene Bilder bequem über eine Oberfläche auswählen und testen kann (auch der Page Builder in unserem RundUmsorgt Paket ). Alle technischen Details zum Thema Responsive Images finden Sie auf der Website https://developer.mozilla.org. - Bildformat:
Bei notwendigen großen Bilddateien lohnt sich einige Sorgfalt bei der Auswahl des Dateiformates sowie eines möglichst hohen Kompressionsgrades unter Berücksichtigung sichtbarer Qualitätsverluste. Je nach Motiv lassen sich besonders kleine Dateien bei Verwendung des relativ neuen Formates WebP erzeugen, das allerdings wiederum etwas Mehraufwand hinsichtlich der Einbindung in für alle Browser geeigneter Weise erfordert.
Richtiges Bildformat und Kompressionsgrad hängen immer vom Motiv ab und sind letztlich durch Versuch zu ermitteln. In diesem Blog-Eintrag wurde hierzu schon näher ausgeführt. - Optimieren Sie die Reihenfolge, in der Ressourcen geladen und interpretiert werden:
Oft werden im Kopfbereich von HTML-Seiten umfangreiche CSS- und Skriptdateien nachgeladen, die zu diesem Zeitpunkt noch gar nicht benötigt werden, aber das Rendern der Seite verzögern (“render blocking resources”). Binden Sie derartige Ressourcen nach Möglichkeit weiter unten im HTML ein, lassen Sie Skripte verzögert ausführen (z.B. durch defer-Attribute), notieren Sie wichtige CSS-Vorgaben inline und laden den Rest später, so dass möglichst schnell sichtbare Inhalte gerendert werden können. Selbst Webfonts können im Nachhinein geladen werden und dann die bereits gerenderten Schriften ersetzen. Hierzu dient die CSS-Angabe “font-display: swap;” für den entsprechenden font-face-Eintrag. - Komprimierte Übertragung:
Für alle textbasierten Ressourcen (HTML, CSS, Skripte) sollten Sie serverseitig eine komprimierte Übertragung einstellen. Hierzu wird bei Apache-Servern meist durch passende Einträge in der .htaccess-Datei ein geeignetes Verfahren wie GZIP aktiviert. Wo stattdessen oder zusätzlich andere Webserver-Software wie etwa NginX läuft, sind an entsprechend anderer Stelle ähnliche Vorgaben nötig. - Minified Stylesheets und Scriptdateien:
Zusätzlich können Sie HTML-, CSS- und Skriptdateien durch Löschung aller nur der menschlichen Lesbarkeit dienender Eigenschaften wie etwa Zeilenumbrüche zusätzlich verkleinert (“minified”) bereitstellen. - Cache-Vorgaben setzen:
Für jede Art von Ressourcen, die beim Aufruf der Seite vom Server geladen werden (HTML, CSS, JScript, Grafiken), sollte die Cache-Lebensdauer definiert werden. Ohne Cache-Richtlinie laden Clients bei jedem Aufruf jede Ressource neu vom Server. Ist dagegen für meist gleichbleibende Ressourcen eine längere Cache-Laufzeit wie etwa 30 Tage oder 1 Jahr angegeben, so bedient der Client sich zunächst aus dem lokalen Cache, was unterm Strich Ladezeit spart. Die Cache-Vorgaben werden typischerweise durch Einträge in der .htaccess-Datei von Apache-Webservern eingestellt. Auch hier sind bei abweichender Server-Software alternative Vorgehensweisen zu wählen. - Lazy-Loading:
Lazy Loading bedeutet, dass Elemente erst dann geladen werden, wenn sie in den sichtbaren Bereich des Browsers gelangen, vorher nicht. Das spart natürlich massig, besonders auf Seiten, die viele Bilder wie z.B. Fotogalerien einbinden. Lazy Loading implementiert man zurzeit mit JavaScript (Ja, auch das erfordert wieder das Einbinden 😉 ) - Zusammenfassung von Requests:
Fassen Sie viele externe Anfragen (Requests) zusammen, z.B. fassen Sie viele einzelne Javascript Dateien, die einzeln eingebunden werden zu einer Datei zusammen. Das gleiche gilt für Stylesheets. Bei wenig Style-Angaben lohnt es sich eventuell, diese “inline”, d.h. ganz ohne externe Datei einzubinden. Dies sollte man aber im Einzelfall ausprobieren. - Sauberes HTML:
Schreiben Sie gutes HTML, wenn die Website manuell erstellt wird. Sauberes, einfaches HTML sorgt dafür, dass Ihre Seite schneller geladen werden kann. Natürlich muss man hier die Nutzbarkeit abwägen, so haben z.B. Pagebuilder in WordPress immer einen gewissen Overhead, also benötigen mehr HTML-Elemente, damit sich die einzelnen Elemente besser steuern lassen. Auf der anderen Seite haben Sie Ihre Website in Stunden aufgebaut statt in Wochen und können sich die restliche Zeit mit der Performance beschäftigen 🙂
Inhaltlich:
- Streichen Sie die benutzten Bilder oder andere Medien auf der Startseite auf ein Minimum zusammen. Die Versuchung ist groß, so viel wie möglich auf die Homepage zu packen. Damit überfordern Sie aber nicht nur Ihre Leserschaft, Sie sorgen auch dafür, dass jede Menge Kilobyte erst einmal vom Server zum Browser geladen werden müssen. Es gilt natürlich: Je weniger Ballast, desto schneller.
- “Frontpage Hygiene”. Es ist normal und gut, dass während einer langen Lebenszeit einer Website immer mehr Bereiche hinzukommen. Aber oftmals sind Sie vielleicht auch hier versucht, neue Infos erstmal direkt auf Ihrer Startseite zu platzieren. Aber auch die alten Informationen sind ja wichtig, so dass sich im Laufe der Jahre mehr und mehr auf einer einzigen Seite befindet, die Website wird überladen. Aufräumen erfordert an dieser Stelle allerdings gute Kenntnisse über das Besucherverhalten auf Ihrer Website, denn wenn Sie einfach radikal aufräumen kann es passieren, dass gut laufende “Call To Actions” nicht mehr verfügbar sind und Sie somit den Besucherstrom beeinträchtigen.
- Vermeiden Sie zu viele “goldene Henkel” und Spielereien, gerade auf der Homepage. Ich weiß, man will “beeindrucken”. Aber versuchen Sie, sich auf Ihre Essenz, auf das Wesentliche zu konzentrieren. Außerdem sind die neuesten technischen Spielereien im Web-Design von heute in spätestens einem Jahr wieder hinfällig und wirken dann altbacken.
- Wenn Sie ein Element statt als <Img>-Ressource genau so gut mit Text und CSS darstellen können, dann sollten Sie sich die Mühe machen, es lohnt sich.
