The Need for Speed, Teil 3: Der ultimative Guide für Website-Speed

2. Oktober 2018 | Analysen, Onpage 3 Kommentare

Geschwindigkeit ist wichtig für Nutzer und SEO: Niemand möchte mehrere Sekunden warten, bis eine Website geladen ist. Das Zitat „Zeit ist Geld“ von Benjamin Franklin gilt heute mehr denn je. Laut Google kostet eine Sekunde zusätzliche Mobile-Ladezeit bereits 20 Prozent des mobilen Umsatzes. Websites, die schneller laden als die Online-Konkurrenz, ranken auch bei Google besser. Wie ihr eure Website schneller macht, erklärt Tomek Rudzki, Head of Research und Development bei Elephate, die als „Best Small SEO Agency“ bei den European Search Awards 2018 gewinnen konnte.

Dieser Website Speed-Guide erscheint in insgesamt drei Teilen. Ihr lest gerade den dritten Teil. Hier geht es zu Teil 1 und hier zu Teil 2.

Gratis-Studie zu Pagespeed

15. Statische Ressourcen zwischenspeichern

Es gibt eine unterbewertete Eigenschaft von Browsern: Sie können statischen Inhalt zwischenspeichern.

Der Browser speichert Ressourcen wie das Logo und die CSS-Dateien im Cache. Wenn der Benutzer also die gleiche Seite (oder eine andere Seite auf der Website) erneut aufruft, können diese Ressourcen viel schneller geladen werden.

Um den Browser statische Dateien zwischenzuspeichern, sollten Sie die „Cache-control: max-age headers“ serverseitig einstellen.

Wie lange sollten die statischen Ressourcen zwischengespeichert werden? Die Google Developers-Dokumentation empfiehlt „eine Mindest-Cache-Zeit von einer Woche und vorzugsweise bis zu einem Jahr für statische Ressourcen oder Ressourcen, die sich selten ändern.“

16. Server für hohe Auslastung vorbereiten

Eure Website sollte auch dann schnell laden, wenn eine große Anzahl von Benutzern eure Seite parallel besucht. Dies kann mithilfe eines Tools namens LoadImpact geprüft werden. Das Tool emuliert bis zu 20 Benutzer, die eure Website gleichzeitig öffnen. Ich habe es überprüft und der Searchmetrics-Server funktioniert gut, wenn viele Benutzer es anfordern.

Aber das ist nicht immer der Fall, wie Sie auf dem folgenden Screenshot sehen können:

Wichtig zu wissen ist hierbei, dass der Googlebot erkennt, ob eure Website schnell reagiert. Wenn Google feststellt, dass Anfragen des Googlebot euren Server verlangsamen, kommt der Bot seltener zum Crawlen vorbei.

Es gibt einige Beweise aus dem Google Webmaster-Blog:

Bei Elephate haben wir viele Beispiele beobachtet, bei denen die Optimierung der Seitengeschwindigkeit dazu führte, dass Google mehr Seiten pro Tag crawlen konnte.

17. Backend optimieren

Obwohl ich mich in diesem Artikel stark auf die Frontend-Performance konzentriere, sollte ich wirklich auf das Backend eingehen.

18. Langsame Datenbankaufrufe

Der übliche Engpass bei der Website-Leistung besteht in langsamen, nicht optimierten Datenbankaufrufen. Sie können mit Tools wie NewRelic (paid) analysiert und anschließend behoben werden:

NewRelic kann euren Entwicklern wertvolle Einblicke geben, welche Datenbankabfragen potenziell optimiert werden könnten. Es ist ebenfalls eine gute Idee, Server-Caching einzuführen, wodurch die Anzahl teurer Datenbankanrufe drastisch reduziert werden kann.

19. Kombinieren externer JavaScript-Dateien in einem?

Als ich giphy.com in GTMetrix analyiserte, gab mir das Tool folgenden Hinweis: Versuche, 20 externe JavaScript-Skripte zu einem zu kombinieren.

In den meisten Fällen ist es eine schlechte Idee, mehrere Ressourcen zu kombinieren. Wenn ihr euer JavaScript zu einem kombiniert, ist dies eine riesige Datei, die analysiert werden muss. Dadurch kann es passieren, dass eure Website unter Umständen für einige Sekunden inaktiv ist.

Stattdessen solltet ihr eure Website für einen „Critical Rendering Path“ optimieren. Wenn ein Skript nicht für die Darstellung above von fold erforderlich ist, bringt es nichts, es gleichzeitig mit anderen Skripts zu laden, die für das Rendern benötigt werden?

© Ilya Grigorik, https://developers.google.com/web/fundamentals/performance/critical-rendering-path/

Bei Elephate haben wir festgestellt, dass Google ziemlich begrenzte Timeouts hat. Google wird wahrscheinlich nicht auf euer JavaScript warten, wenn es mehr als 5 Sekunden dauert, die JS-Datei abzurufen und auszuführen. Wenn ihr mehr darüber lesen wollt, könnt ihr Sie JavaScript vs. Crawl Budget: Ready Player One von meinem Kollegen Bartosz Góralewicz.

20. Nutzt HTTP/2

Seit Jahren verbinden sich alle Benutzer über das HTTP 1.1-Protokoll mit Websites. Es ist immer noch sehr beliebt, aber … schon 18 Jahre alt. Als HTTP 1.1 entworfen wurde, konnte sich niemand vorstellen, dass rund 40% der Weltbevölkerung das Internet nutzen würden.

Das moderne Web entwickelt sich weiter, daher brauchen wir Protokolle, die auf dem neuesten Stand sind und schnell erstellt werden. HTTP/2 ist ein Beispiel für ein solches Protokoll.

Es gibt viele Vorteile von HTTP/2 gegenüber HTTP 1/1:

  • Unterstützung für „Pushing“ von Ressourcen: Wenn ein Browser eine HTML-Datei anfordert, können Dateien, die für das Rendern erforderlich sind – etwa  CSS-Dateien – über primäre Images „gepusht“ werden. Dadurch können Webseiten schneller gerendert werden.
  • Header-Kompressionen
  • Ihr könnt mehrere Anfragen über eine einzige TCP-Verbindung senden (ich weiß, ich klingt geeky, aber diese Funktion ist wirklich ein Gamechanger).

Alle gängigen Browser und Server unterstützen HTTP/2. Allerdings: Falls ein Browser HTTP/2 nicht unterstützt, kann das alte HTTP 1.1-Protokoll verwendet werden.

Bei Verwendung von HTTP/2 wird HTTPS (verschlüsselte Verbindungen) verwendet. Um ehrlich zu sein, HTTPS macht das Web langsamer, aber: Jeder bewegt sich in Richtung HTTPS. Webbrowser markieren inzwischen Seiten, die HTTPS nicht verwenden, als ungesichert.

Sind wir fertig? Nein. Wir stehen erst am Anfang unserer Reise!

Ich habe mein Bestes getan, um euch so viele wertvolle Informationen wie möglich zur Verfügung zu stellen. Trotzdem stehen wir am Anfang unserer Reise. Die Checkliste ist lang; und es gibt viel mehr Dinge zu entdecken, wie PRPL-Muster & Code-Splitting, AMP, Entfernen von nicht verwendetem Code usw.

Aber ihr hoffe, ich konnte euch eine Grundlage geben, um einen kritischen Blick auf die Geschwindigkeit eurer Website zu werfen und – was noch wichtiger ist – die Tools vorzustellen, mit denen eure Seite noch schneller wird. Als nächstes empfehle ich euch, die Google-Dokumentation zur Web-Performance zu lesen – und sicherzustellen, dass Page Speed ein grundlegender Bestandteils eures SEO-Audits wird.

Tomek Rudzki ist Head of Research und Development bei Elephate, die als "Best Small SEO Agency" bei den European Search Awards 2018 ausgezeichnet wurde. Tomek ist ein begeisterter Daten-Analyst und Autor des beliebten The Ultimate Guide to JavaScript SEO sowie The Ultimate Guide to SEO Crawlers .
Alle Artikel von anzeigen.

Kommentare (3)

  1. 15. Okt. 2018 22.55 Uhr

    Danke für diesen Artikel. Ich hoste bei 1&1 aber die Servergeschwindigkeit gefällt mir gar nicht. Für eine schnelle Ladezeit sollte man Server bevorzugen, die gar nicht so sehr bekannt aber dafür schnell sind. Stimmt das?

    Danke im Voraus!

    LG Christoph

  2. 21. Okt. 2018 18.07 Uhr

    Kleiner Hinweis bzgl. HTTP2 und dem Kombinieren von JS/CSS Dateien. Ich lese leider immer öfters in Tutorials und Bücher das man JS und CSS Dateien kombinieren sollte. Das ist per se auch nicht verkehrt. Im nächsten Kapitel geht es dann allerdings um HTTP2 und niemand erwähnt das HTTP2 von vielen kleinen Dateien profitiert weil Diese parallel geladen werden können.

    Wer also auf HTTP2 benutzt, ist mit 10 kleinen Dateien sehr wahrscheinlich besser bedient als mit einer großen Datei.

    Ein weiterer Vorteil durch kleine Dateien sind mobile Geräte und der Cache. Wenn Dateien zu groß sind, werden Diese nicht in den Cache gespeichert und müssen immer wieder neu geladen werden. Bei älteren Geräten liegt das Cache Limit bereits bei 25kb. Eine kombinierte JS/CSS Datei ist heutzutage um einiges größer.

  3. 22. Okt. 2018 14.33 Uhr

    Hallo Christoph, die Hosting-Landschaft ist – auch innerhalb einzelner Anbieter – extrem vielfältig. Am besten, du informierst dich über dezidierte Hosting-Vergleiche, um deinen perfekten Anbieter zu finden.

Trackbacks (0)

Hinterlasse eine Antwort

Hinweis: Wenn Du hier keinen Namen einträgst (sondern ein Keyword) oder mir Dein Eintrag zu werbelastig erscheint, behalte ich mir das Recht vor Deinen Kommentar zu löschen oder zu editieren. Spart euch sowas hier also bitte!