1. Ermittle Seiten mit übermäßig hohen Umlaufzeiten (Round Trip Requests, RTRs).
Die Minimierung von RTRs beginnt damit, sie sich bewusst zu machen. Viele Seiten werden mehr als 100 RTRs pro Seite aufweisen, aber dein eigentliches Ziel sollten weniger als 50 sein. Häufig stellen Entwickler oder Experten in der Suchmaschinenoptimierung, die alle Anfragen auf einer Seite ansehen, fest, dass einige der angeforderten Elemente fehlen (404), ohne dass es jemandem auffällt. Auch wenn diese Elemente nicht mehr vorhanden sind, dauert es dennoch einen Moment, bis der Browser feststellt, dass die Anfrage nicht umsetzbar ist. Daher sollten derartige Seiten sofort entfernt oder repariert werden.
Du solltest auch Assets reparieren, die verschoben wurden und eine 301- oder 302-Antwort auslösen. Diese Antworten bedeuten, dass der Browser zu einem Ort navigieren musste und dann weitere Anweisungen befolgte, um das Asset an anderer Stelle zu erhalten. Und natürlich kostet jeder neue Ort Zeit. Es ist, als würdest du einkaufen gehen und im Lebensmittelgeschäft aber erfahren, dass sie den benötigten Artikel nicht führen, du ihn aber in einem anderen Lebensmittelgeschäft in der Nähe erhalten kannst. Noch schlimmer wird es, wenn es eine Kette von Weiterleitungen gibt. Dann wäre es, als würdest du das zweite Lebensmittelgeschäft aufsuchen, nur um zu erfahren, dass dieses den gesuchten Artikel ebenfalls nicht mehr führt, sodass du jetzt ein drittes Geschäft aufsuchen musst.
2. Kombiniere Dateien, wo immer möglich.
Der nächste Schritt hin zu einer optimierten Website besteht darin, Dateien (wie JavaScript und CSS) zu kombinieren. Wenn eine Seite beispielsweise zehn Formatvorlagen (CSS-Dateien) verwendet, die alle in einer kombiniert werden könnten, solltest du dies tun. Ebenso gilt: Wenn du eine Vielzahl von JavaScript-Dateien verwendest, die in einer kombiniert werden könnten, solltest du auch das tun. Versuche, in den Kategorien website-weit und vorlagenspezifisch zu denken. Für JavaScript, das auf jeder Seite der Website vorkommt, solltest du eine website-weite JavaScript-Datei erstellen, und eine vorlagenspezifische JavaScript-Datei für jede Seitenvorlage auf der Website. Dasselbe kann du auch mit CSS-Dateien tun. Es ist auch hilfreich, sicherzustellen, dass diese Dateien immer mit dem gleichen Dateinamen und den gleichen Standorten referenziert werden, wenn sie ordnungsgemäß gespeichert sind.
3. Optimiere die Wiedergabereihenfolge.
Nachdem du Dateien gelöscht und zusammengefasst hast, um die Gesamtzahl der RTRs zu reduzieren, kannst du die Reihenfolge anpassen, in der Elemente angefragt werden, um die Geschwindigkeit zu erhöhen. Ebenso wie bei einem Kochrezept, bei dem bestimmte Schritte abgeschlossen werden müssen, bevor weitere Schritte beginnen können, gibt es auch eine bestimmte Reihenfolge, der ein mobiler Browser folgen muss – und an die muss man sich bei Erstellen einer Seite halten. Zurück zum Beispiel mit den Lebensmitteln: Wenn dein Rezept eine Zutat erfordert, die für zwei Tage mariniert werden muss, benötigst du als Erstes die Zutaten für die Marinade, damit du mit dem Marinieren beginnen kannst, bevor du den Rest der Zutaten besorgst.
Wenn wir diese Analogie in die Web-Welt übertragen, ist die Marinade das Render-Blocking, da kein anderer Schritt des Kochprozesses beginnen kann, bevor dieser Schritt abgeschlossen ist. Du kannst dich nur insofern auf die nächsten Kochschritte vorbereiten, indem du während des Marinierens die übrigen Zutaten besorgst. Es ist der kritische Rendering-Pfad, bei dem du die kritischen Elemente wie das Head Tag, den Seiteninhalt und das Grundlayout der Seite priorisierst und die Elemente, die weniger kritisch sind, verzögerst, insbesondere, wenn diese das Laden wichtigerer Elemente verzögern würden. Dies kann die Ladeerfahrung für Benutzer drastisch verbessern und ihnen Zuversicht vermitteln, dass der Rest der Seite auch schnell geladen wird. Zudem erhalten sie Assets, mit deren Bewertung sie beginnen können, während der Ladevorgang stattfindet.
4. Erstelle eine Seitenladestrategie.
Da Suchmaschinen menschliche Benutzer imitieren, erleben sie Seiten auf ähnliche Weise, wie du selbst. Das Beste, was du tun kannst, um Anfragen auf Geschwindigkeit nachzukommen, besteht darin, zu wissen, was für die Benutzer- und die Bot-Erfahrung in den ersten Sekunden, die sie auf deiner Seite verbringen, von Bedeutung ist. Und das sind in der Regel die Informationen im Head-Tag sowie der Text und die Bilder auf der Seite. Normalerweise dauert es einige Sekunden, bis alle interaktiven Funktionen einer Website voll funktionsfähig sind, weshalb JavaScript meistens nicht zuerst geladen werden muss. Stattdessen können visuelle Darstellungen des JavaScripts wie z. B. Eingabefenster oder Expander als Platzhalter geladen werden, bevor das JavaScript erforderlich ist. Das Laden von JavaScript ist besonders langsam und umständlich. Um sicherzustellen, dass das Laden von JavaScript nicht so lange dauert, dass Benutzer und Bots lange Zeit eine leere Seite anstarren müssen, ist es ideal, einen Aspekt als erstes zu laden, und anschließend das JavaScript im Hintergrund zu laden, während die Benutzer die Seite ansehen.
Neben JavaScript laden auch Videos und Bilder sehr langsam. Videos und Bilder, die weiter unten auf der Seite angezeigt werden, sollten nicht die Erfahrung oben auf der Seite beinträchtigen, wo Benutzer und Bots normalerweise beginnen. Dieses Konzept, das Laden von Inhalten, die nicht sichtbar sind, aufzuschieben, wird als „bedarfsgetriebenes“ Laden, oder Lazy Loading, bezeichnet. Lazy Loading kann auf verschiedene Arten erfolgen (in aufgeführter Reihenfolge [deferred], parallel zu anderen Elementen [async] und per Lazy-Loading Meta-Tag von Google).
Das beste Tool zur Suche nach Möglichkeiten für Bilder, die bedarfsgetrieben geladen werden können, ist Google PageSpeed Insights. Um Bilder zu optimieren, kannst du auch das Lazy-Load Image Tag von Google verwenden, aber bislang funktioniert dieses nur für Chrome Browser auf Mobilgeräten und Desktops (was in Zukunft möglicherweise ausgebaut wird). Egal, für welche Methode du dich entscheidest: du solltest das URL-Prüftool der Google Search Console verwenden, um sicherzustellen, dass die Elemente, die per Lazy Loading geladen werden, in der Seitendarstellung des Tools und im gerenderten HTML-Code sichtbar sind.
5. Komprimiere so viel wie nur möglich.
Nachdem du die RTR für jede Seitenvorlage minimiert und priorisiert hast, solltest du möglichst viel komprimieren. Durch Komprimierung kannst du die Seitengeschwindigkeit erhöhen, indem du Bandbreite einsparst. Die gzip-Komprimierung ist eine Methode zur Komprimierung von Dateien und kann auf den meisten Servern eingerichtet werden, aber es sind auch noch andere Optionen verfügbar. Du kannst zudem die meisten Codes einen Minimalisierungsprozess durchlaufen lassen, was wiederum die Größe der endgültigen Übertragungsdatei reduziert. Allerdings ist es schwierig, mithilfe diese Methoden Bilder zu komprimieren. Du kannst die Seite „Performance Review“ (Leistungsüberprüfung) auf WebPageTest.org nutzen, um eine umfassende Optimierungscheckliste einzusehen, die alle Assets auf der Seite anzeigt, und ob sie mit gzip oder anderweitig komprimiert wurden.
Um Bilder zu komprimieren (statt gzip-Komprimierung oder Minimierung), ist es wichtig, dass der Designer dem Entwickler die Bilder im komprimiertesten Format zur Verfügung stellt und so die Größe der Bilddateien reduziert. Im Grunde geht es darum, die endgültige Datei so klein wie möglich zu machen, ohne dass die Qualität des Bildes beeinträchtigt wird. Fotos sollten generell als JPG-Dateien gespeichert werden, Symbole und Illustrationen als GIF-Dateien. Um große Bilder auf Vollbildcomputern hervorragend aussehen zu lassen, ohne kleine mobile Bildschirme ins Stocken zu bringen, solltest du stattdessen das Protokoll für Responsive Images oder einen Bild-Server wie den von Fastly verwenden, um eine vorskalierte Version des Bildes dynamisch an kleinere Bildschirme zu senden.
6. Speichere die richtigen Seiten zum richtigen Zeitpunkt zwischen.
Der nächste Schritt besteht darin, Browsern und Bots dabei zu helfen, zu erkennen, was wiederverwendet werden kann und was jedes Mal neu abgerufen werden muss, und zwar durch Browser-Caching. Caching ist eine Funktion, die auf unterschiedliche Arten eingerichtet werden kann – eine von ihnen erfolgt über CDNs (Content Delivery Network). Die meisten Elemente einer Website – vor allem bei Websites, die höchstens einmal pro Woche geändert werden und keine Echtzeit-Informationen wie Nachrichten, Wetter oder Sportbewertungen übermitteln – können bis zu einem Jahr zwischengespeichert werden. Caching bedeutet, dass der Browser beim Besuch einer Seite durch einen Benutzer den örtlichen Speicher durchsucht, um zu erkunden, ob bereits eine Datei vorhanden ist, die für die Erstellung der Seite gebraucht wird. Das reduziert Umlaufzeiten und verbessert die Ladezeit. Suchmaschinen-Bots betrachten Seiten immer, als hätten sie sie noch nie zuvor besucht, sodass sie kein aktives Caching verwenden, aber sie können Caching registrieren und gegebenenfalls zur Schätzung der Ladezeit einer Seite verwenden.
Im Hinblick auf Caching ist es wichtig zu verstehen, dass es auf Dateinamen und deren Speicherort auf dem Server basiert. Wenn du also eine Datei auf vielen Seiten verwendest, wie beispielsweise ein Logo, solltest du sie immer mit dem gleichen Dateinamen und einer URL referenzieren, auch, wenn sie an mehreren Orten auf deinem Server vorhanden ist. Du kannst diese Funktion zu deinem Vorteil nutzen, da es bedeutet, dass du einfach nur den Dateinamen eines Elements und dessen Referenz im HTML-Code aktualisieren musst, um eine neue Version des zwischengespeicherten Elements zu erhalten. Wenn du also beispielsweise dein Logo optimierst, musst du einfach nur den Dateinamen von „Logo“ auf „Logov2“ ändern. Dadurch wird die neue Version zwischengespeichert und die alte Version vergessen. Wenn du ein Element also für ein Jahr zwischenspeicherst, bedeutet das nicht, dass du das Element ein Jahr lang nicht ändern wirst, sondern, dass, falls du Änderungen vornimmst, du das aktualisierte oder neue Element mit einem neuen Dateinamen bezeichnen wirst.
Cache-Einstellungen können ein wenig kompliziert sein. Daher solltest du sie dir am besten wie Lebensmittel vorstellen, die verfallen können. Einige Lebensmittel verfallen schneller als andere. Daher musst du den Browser darüber informieren, welche Dinge schneller alt werden und weggeworfen werden müssen und was sich, ohne Ersatz, sicher für eine Weile aufbewahren lässt. Du kannst ein Tool wie WebPageTest.org verwenden, um herauszufinden, welche Möglichkeiten du hast. Wichtig ist vor allem, zu beachten, dass es kein festgelegtes Ablaufdatum gibt und keine maximale Dauer, die ein Element im Cache zwischengespeichert werden kann. Daher geht der Browser standardmäßig davon aus, dass er das Element jedes Mal erneut abrufen muss – das Browser-Caching funktioniert erst dann, wenn diese Details angegeben wurden.
Da deine Cache-Einstellungen Browsern mitteilen, wann ein Element zu alt ist, um verwendet zu werden, wird diese Zeitspanne manchmal als „Caching-Lebensdauer“ oder „Haltbarkeitsdauer“ bezeichnet. Wenn ein Element seine Haltbarkeits- oder Caching-Lebensdauer überschritten hat, muss der Durchlauf zum Server stattfinden, um eine aktuelle Version zu erhalten. Wenn Elemente als „abgelaufen“ aufgeführt sind, bedeutet das, dass sie ihre Haltbarkeitsdauer überschritten haben, was sowohl in Bezug auf Lebensmittel als auch in der Browseranalogie bedeutet, dass sie ersetzt werden müssen, wenn sie das nächste Mal benötigt werden.
Ebenso, wie es wenig Sinn macht, eine Speisekammer voller abgelaufener Lebensmitteln zu haben, macht es auch keinen Sinn, einen Zwischenspeicher voller abgelaufener Webinhalte zu haben. Umgekehrt ist es ebenso wenig sinnvoll, Lebensmittel (Dateien) zu entsorgen, die noch gut verwendbar sind. Wenn du deinen Dateien Caching-Lebensdauern zuweist, ist es nützlich, diesen Aspekt im Hinterkopf zu behalten, und auch die Konsequenzen einer zu langen Caching-Lebensdauer zu berücksichtigen. Wenn du geringfügige Änderungen an deinem Logo vornimmst, wird es nicht das Ende der Welt bedeuten, wenn das alte Logo noch angezeigt wird. Deshalb kannst du dieses Caching lange verlängern, vor allem wenn du planst, Dateinamen bei Änderungen sorgfältig zu aktualisieren. Wenn du unterschiedliche Dateinamen verwendest, musst du dir keine Sorgen machen, dass du das alte Logo anzeigen wirst.
7. Erstelle Accelerated Mobile Pages (AMPs).
All das kann kompliziert erscheinen und darum hat Google eine einfachere Lösung zur Optimierung der Seitengeschwindigkeit konzipiert. Accelerated Mobile Pages oder AMP ist eine Untergruppe von HTML, für die viel strengere Richtlinien darüber gelten, was enthalten sein kann. Das Ziel ist, die Ladezeit der meisten Seiten auf Mobilgeräten auf eine Sekunde zu reduzieren. Das wird meistens auch erreicht. AMP ermöglichen es Google, den Großteil der Schwierigkeiten durch Caching und die Konfigurierung des Ladeprozesses zu meistern und die Mehrheit der oben beschriebenen Elemente zu kontrollieren. Dies sorgt für eine größtmögliche Optimierung.
In einigen Fällen erstellen Unternehmen neue AMP-Seiten und verlinken sie, ausgehend vom Head-Tag, mit bestehenden Seiten auf der Website. So weiß Google, dass die AMP-Seite angezeigt werden soll, wenn die Person, die die Seite anfordert, ein Mobilgerät oder eine langsame Verbindung verwendet. In anderen Fällen kannst du die bestehenden Seiten (oder ihre bestehenden, mobilen Seiten, wenn separate Websites vorhanden sind) durch AMP-Seiten ersetzen. Dies wird als „kanonische AMP“ bezeichnet. Google bevorzugt diese Methode, da Google AMP-Seiten äußerst problemlos crawlen, rendern, indexieren und ranken kann. Unternehmen mögen die Methode jedoch nicht unbedingt, da die Einschränkungen und Anforderungen von AMP-Seiten sie sehr nüchtern erscheinen lassen. AMP kann außerdem einige der Tracking- und Testmöglichkeiten einschränken oder verkomplizieren, die dir für Desktop-Seiten zur Verfügung stehen; das ist es ein weiterer Grund, warum einige diese Methode vermeiden.
Websites, die AMP-gültig sind, befolgen alle AMP-Regeln und -Richtlinien, und Google zeigt bei mobilen Suchergebnissen einen kleinen, grauen Blitz neben ihnen an. Google fügt sie eher in spezielle Ergebniskarusells ein, die meistens oben auf der Seite angezeigt werden. Das ist von großem Vorteil. Wenn aber die AMP-Gültigkeit zu viele Probleme für deine Website verursacht, ist es in Ordnung, AMP-Code zu verwenden, ohne AMP-gültig zu sein. Du solltest AMP-HTML verwenden, ohne dir darüber Sorgen zu machen, ob du alle Regeln befolgst. Du wirst trotzdem von der Geschwindigkeit von AMP-HTML und AMP-JavaScript profitieren – kein schlechter Deal, wenn man bedenkt, dass es kostenlos ist. Denke daran, dass Geschwindigkeit einen direkten Einfluss auf das Engagement und die Konversion hat, aber wahrscheinlich auch im Hinblick auf Crawl-Tiefe und andere Aspekte der Crawl-Effizienz hilfreich ist.
Mobile Browser funktionieren anders als Desktop-Browser. Zudem haben sie langsamere Prozessoren und weniger zuverlässige Verbindungen. Aufgrund dieser Faktoren ist es wichtig, die Ladezeit der Seiten deiner Website unter den schlechtesten Bedingungen zu prüfen. So findest du heraus, wo echte Verbesserungsmöglichkeiten vorhanden sind.