So beschleunigen Sie ihre Website – Technische Checkliste

Heutzutage würde ein Mann ein Fahrrad dem Gehen zu Fuß vorziehen, ein Auto einem Fahrrad, einen Hochgeschwindigkeitszug einem Auto und ein Flugzeug einem Hochgeschwindigkeitszug. Und ich bin mir ziemlich sicher, dass Menschen, die Elon Musks FALCON 9-Rakete in einen Supermarkt bringen könnten, dies definitiv tun würden. Es gibt nur einen fetten Grund dafür - SPEED.

Die Seitengeschwindigkeit ist seit Jahren ein Ranking-Faktor für die Google-Desktopsuche. Aber erst kürzlich hat Google ein Update zur Geschwindigkeit mobiler Seiten eingeführt, mit dem die Seitengeschwindigkeit offiziell zu einem Ranking-Faktor für mobile Geräte gemacht wurde.

So beschleunigen Sie ihre Website - Technische Checkliste

Darüber hinaus ist die Seitengeschwindigkeit eine zentrale Messgröße für die Benutzerfreundlichkeit. Wenn Sie also nicht an Ihrer Seitengeschwindigkeit arbeiten, können Sie Geld, Rankings und treue Kunden kosten. Tatsächlich erwarten 50% Ihrer Besucher nach neuesten Google-Untersuchungen, dass Ihre Seite innerhalb von weniger als 2 Sekunden vollständig geladen wird. Und Sucher, die eine negative Erfahrung mit der Geschwindigkeit Ihrer mobilen Seite gemacht haben, gehen mit einer um 62% geringeren Wahrscheinlichkeit einen Kauf ein.

Wenn dies nicht geschehen soll, müssen Sie jetzt Maßnahmen ergreifen. Der allererste Schritt zur Verbesserung der Seitengeschwindigkeit ist die Messung. Der beste Weg, dies zu tun, ist natürlich die Hilfe unserer alten vertrauenswürdigen PageSpeed Insights.

Neue Regeln zum Messen der Seitengeschwindigkeit mit PageSpeed Insights
Eine Checkliste zur Geschwindigkeitsoptimierung

Neue PageSpeed Insights: Was ist neu?

Wenn Sie die Geschwindigkeit Ihrer Website regelmäßig überwachen, müssen Sie bemerkt haben, dass Google im Hintergrund ein neues Update für das PageSpeed Insights-Tool veröffentlicht hat. Und ehrlich gesagt hat sich das Tool sehr verändert. Für diejenigen, die es nicht wussten - das Tool liefert Ihnen keine Geschwindigkeits- und Optimierungswerte mehr wie früher.

Folgende Daten finden Sie in der neuen Version des Tools:

Der Geschwindigkeitswert

Jetzt erhalten Sie nur eine Gesamtpunktzahl, die auf Labordaten von Lighthouse (einem Geschwindigkeitstool von Google) basiert. Laut den Messungen des Leuchtturms wird Ihre Seite von PageSpeed Insights als schnell, durchschnittlich oder langsam markiert.

Felddaten

Diese Daten werden von CrUX gesammelt und enthalten Informationen darüber, wie Chrome-Nutzer mit Ihrer Seite interagieren, welche Geräte sie verwenden, wie lange es dauert, bis Ihre Inhalte für sie geladen sind usw. Der Trick ist, dass Google Ihre Website möglicherweise als langsam ansieht, wenn die Mehrheit Ihrer Nutzer eine langsame Internetverbindung oder alte Geräte hat. Auf der positiven Seite ist jedoch zu vermerken, dass Ihre Website für Google aufgrund des schnellen Internets und der besseren Geräte Ihrer Nutzer möglicherweise schnell erscheint.

Der beste Weg, um zu sehen, wie Google Ihre Website wahrnimmt, ist der Zugriff auf Ihre CrUX-Daten. Es steht Ihnen in Google BigQuery (Teil der Google Cloud-Plattform) zur Verfügung. Hier finden Sie eine schöne Anleitung, wie Sie aus erster Hand Einblicke von Ihren realen Besuchern erhalten.

Labordaten

Dies sind die Daten, die das Tool mit Hilfe von Lighthouse sammelt. Grundsätzlich wird simuliert, wie ein Mobilgerät eine bestimmte Seite lädt. Es enthält eine Reihe von Leistungsmetriken wie:

First Contentful Paint - Misst die Zeit, die ein Benutzer benötigt, um das erste visuelle Element anzuzeigen.
Geschwindigkeitsindex - Misst, wie schnell der Inhalt einer Seite sichtbar gefüllt wird.
Zeit bis zur Interaktion - Misst, wie schnell eine Seite vollständig interaktiv wird.
Erstes aussagekräftiges Malen - Misst, wann der primäre Inhalt einer Seite sichtbar ist (die größte Änderung des Layouts über dem Falz ist aufgetreten, und Web-Schriftarten wurden geladen).
Erster CPU-Leerlauf - Misst, wann eine Seite minimal interaktiv ist (die meisten, aber nicht alle Benutzeroberflächenelemente auf dem Bildschirm sind interaktiv).
Geschätzte Eingabelatenz - Schätzt, wie lange Ihre App benötigt, um auf Benutzereingaben in Millisekunden während des 5-Sekunden-Fensters mit dem höchsten Seitenaufkommen zu reagieren.

Das Tool liefert Ihnen sogar Screenshots, wie Ihre Seite während des Ladevorgangs geladen und angezeigt wird.

Chancen

Im Bereich "Opportunities" finden Sie eine Liste mit Optimierungstipps für Ihre Seite. Es zeigt Ihnen auch die geschätzten Einsparungen, nachdem Sie diesen oder jenen Parameter korrigiert oder verbessert haben. Diese technischen Kriterien beeinflussen die Labordatenparameter, die sich direkt auf Ihre Gesamtgeschwindigkeit auswirken. Daher ist es von entscheidender Bedeutung, an ihnen zu arbeiten.

Diagnose

Im Abschnitt Diagnose finden Sie einige zusätzliche Informationen zu Themen wie Caching, DOM-Größe, Nutzdaten, JavaScript usw.

Bestandene Audits

Last but not least zeigt der Abschnitt „Bestandene Audits“ die gut optimierten technischen Parameter, mit denen Ihre Seite keine Probleme hat.

Was beeinflusst Ihre Seitengeschwindigkeit am meisten?

Vor nicht allzu langer Zeit hat unser Team ein Experiment durchgeführt, um die Korrelation zwischen der Seitengeschwindigkeit und den Seitenpositionen in mobilen SERPs nach dem Update herauszufinden. Die wichtigste Erkenntnis aus dem Experiment war, dass der Optimierungsfaktor (jetzt Opportunities) den größten Einfluss auf das mobile Ranking hat.

Bisher hat sich daran nichts geändert, und die technische Optimierung regelt weiterhin das organische Google-Ranking. Das einzige "aber" ist, dass es jetzt 22 Faktoren gibt, die optimiert werden müssen, anstatt nur 9, die wir vor ein paar Monaten hatten. Die gute Nachricht ist, dass Ihre Seitengeschwindigkeit erheblich gesteigert werden kann, da alle diese Parameter vollständig korrigiert und optimiert werden können.

Es gibt also eine beeindruckende Liste von Möglichkeiten, um das Laden von Seiten zu beschleunigen.

Vermeiden Sie mehrfache Seitenumleitungen
Ordnungsgemäße Größe der Bilder
Verschieben Sie nicht verwendetes CSS
Minimieren Sie CSS
Minimieren Sie JavaScript
Bilder effizient codieren
Aktivieren Sie die Textkomprimierung
Laden Sie die Schlüsselanforderungen vor
Vermeiden Sie enorme Netzwerknutzlasten
Verschieben Sie Offscreen-Bilder
Reduzieren der Serverantwortzeiten (TTFB)
Beseitigen Sie Ressourcen, die das Rendern blockieren
Verwenden Sie Videoformate für animierte Inhalte
Stellen Sie die Verbindung zu den erforderlichen Ursprüngen her
Stellen Sie Bilder in Formaten der nächsten Generation bereit
Stellen Sie sicher, dass der Text während des Ladens von Webfont sichtbar bleibt
Minimieren Sie die Arbeit mit dem Haupt-Thread
Reduzieren Sie die Ausführungszeit von JavaScript
Statische Assets mit einer effizienten Cache-Richtlinie bereitstellen
Vermeiden Sie eine übermäßige DOM-Größe
Minimieren Sie die Tiefe kritischer Anforderungen
Leistung messen

Bitte lassen Sie sich von der Anzahl der Optimierungsmöglichkeiten nicht erschrecken. Höchstwahrscheinlich sind die meisten von ihnen nicht relevant und es gibt 5-6, an denen Sie arbeiten können. Bei unserem nächsten Stopp werde ich daher detaillierter erläutern, wie jeder der oben genannten Parameter optimiert wird.

Optimierungsratschläge

Nachdem wir nun Verbesserungsmöglichkeiten skizziert haben, wollen wir uns ansehen, wie wir diese Schritt für Schritt optimieren können.

1) Zielseiten-Weiterleitungen

Es versteht sich von selbst, dass das Entfernen aller unnötigen Weiterleitungen eine der offensichtlichsten Aufgaben ist, die Sie möglicherweise in Bezug auf die Geschwindigkeit Ihrer Website ausführen können. Die Sache ist, dass jede zusätzliche Umleitung die Renderzeit der Seite verlangsamt, da jede Umleitung eine (wenn Sie Glück haben) oder viele (was häufiger vorkommt) HTTP-Request-Response-Roundtrips hinzufügt.
Wie optimieren?

Wechseln Sie zu reaktionsschnellem Design
Das allererste, was Google im Umgang mit nicht benötigten Weiterleitungen empfiehlt, ist die Umstellung auf Responsive Design. Auf diese Weise können Sie unnötige Weiterleitungen zwischen Desktop-, Tablet- und Mobilversionen Ihrer Website vermeiden und Ihren Benutzern eine hervorragende Erfahrung mit mehreren Geräten bieten.
Wählen Sie einen geeigneten Weiterleitungstyp
Die beste Vorgehensweise besteht natürlich nicht darin, Weiterleitungen insgesamt zu verwenden. Wenn Sie jedoch dringend eine verwenden müssen, ist es wichtig, den richtigen Umleitungstyp auszuwählen. Sicherlich ist es besser, eine 301-Umleitung für die permanente Umleitung zu verwenden. Angenommen, Sie sind bereit, Benutzer auf einige kurzfristige Werbeseiten oder gerätespezifische URLs umzuleiten, sind temporäre Weiterleitungen die beste Option.

Erwähnenswert ist auch, dass Googlebot jetzt sowohl HTTP- als auch JavaScript-Umleitungsimplementierungen verarbeiten kann. Wenn es um HTTP-Weiterleitungen geht, können sie eine gewisse Latenz auf der Serverseite verursachen. Wenn Sie jedoch von JavaScript-Weiterleitungen sprechen, beachten Sie, dass auf der Client-Seite der Weiterleitung möglicherweise einige Wartezeiten auftreten. Dies geschieht, weil zuerst eine bestimmte Seite heruntergeladen werden muss, dann JavaScript analysiert und ausgeführt werden sollte und erst danach eine Umleitung ausgelöst wird. Eine der Möglichkeiten, eine JavaScript-Umleitung zu implementieren, besteht darin, die bereits von Ihrer Site in den Linkanmerkungen auf der Seite verwendeten Medienabfragen mithilfe der JavaScript-Funktion matchMedia () auszuführen.

Ich möchte darauf hinweisen, dass Google hierzu keine besonderen Empfehlungen gibt. Wenn Sie sich also für eine Umleitungsrichtlinie entscheiden, müssen Ihre Benutzer zuerst berücksichtigt werden. Sie können Ihre brillanten Inhalte nur dann nicht sehen, wenn Ihre Weiterleitungen inkonsistent sind oder auf den falschen Inhalt auf dem Desktop oder der mobilen Site verweisen. Und natürlich können Sie durch Minimieren der Anzahl von Weiterleitungen die Geschwindigkeit Ihrer Website erheblich steigern.

2) Bildgröße

Gefällt mir oder nicht, aber im Durchschnitt machen Bilder ungefähr 80% der Bytes aus, die zum Laden einer Webseite benötigt werden. Und da sie für eine so hohe Auslastung einer durchschnittlichen Website verantwortlich sind, ist es wichtig, dass Sie Ihren Benutzern keine riesigen, übergroßen Bilder senden. Dies passiert tatsächlich sehr oft, da verschiedene Geräte Bilder in verschiedenen Größen benötigen, um sie richtig anzuzeigen (normalerweise ist das Bild umso kleiner, je kleiner der Bildschirm ist). Einer der weit verbreiteten "Fehler" besteht darin, große Bilder an kleinere Geräte zu senden. Wenn Ihre Seite also Bilder enthält, die größer sind als die auf dem Bildschirm Ihrer Benutzer wiedergegebene Version, wird die Ladezeit der Seite erheblich verlangsamt. Wie optimieren?

Gemäß der offiziellen Empfehlung von Google besteht die beste Vorgehensweise darin, sogenannte "responsive images" zu implementieren. Grundsätzlich bedeutet dies, dass Sie von jedem Bild verschiedene Versionen erstellen können, sodass es für alle Bildschirmgrößen geeignet ist. Sicherlich können Sie mithilfe von Medienabfragen, Ansichtsfensterabmessungen usw. festlegen, welche Version in Ihrem HTML- oder CSS-Code verwendet werden soll. Übrigens, hier finden Sie ein gutes Tool, das Sie beim Generieren von Bildern in verschiedenen Größen unterstützt.
Kurz gesagt, wenn ein Bild angefordert wird, kündigt der Browser seine Ansichtsfensterabmessungen und das Pixelverhältnis des Geräts an, während der Server dafür sorgt, dass im Gegenzug Bilder mit der richtigen Größe erstellt werden. Lesen Sie diese Schritt-für-Schritt-Anleitung für die Implementierung von Client-Hinweisen, um zu sehen, wie dies durchgeführt werden kann.

Andererseits ist die Implementierung von vektorbasierten Bildformaten wie SVG eine gute Option. Wie Sie vielleicht wissen, können SVG-Bilder auf jede Größe skaliert werden, was das Format äußerst praktisch macht. Die Größe der Bilder wird in Echtzeit direkt in einem Browser geändert.

3) Verschieben Sie nicht verwendetes CSS

Nicht verwendetes CSS kann auch die Erstellung des Render-Baums durch einen Browser verlangsamen. Ein Browser muss den gesamten DOM-Baum durchsuchen und prüfen, welche CSS-Regeln für jeden Knoten gelten. Je mehr unbenutztes CSS vorhanden ist, desto mehr Zeit muss ein Browser für die Berechnung der Stile für jeden Knoten aufwenden. Wie optimieren?

Bevor Sie CSS-Dateien minimieren können, müssen Sie nach einigen suchen, die Sie nicht mehr benötigen, und sie ohne Reue entfernen. Denken Sie daran, dass die am besten optimierte Ressource diejenige ist, die nicht gesendet wird. Nachdem Sie Ihr CSS gelöscht haben, ist es wichtig, die restlichen CSS-Regeln zu optimieren (unnötigen Code reduzieren, CSS-Dateien teilen, Leerzeichen reduzieren usw.).
Es ist auch eine sehr gute Idee, kritische, kleine CSS-Ressourcen direkt in das HTML-Dokument einzufügen. Auf diese Weise können Sie zusätzliche HTTP-Anforderungen eliminieren. Stellen Sie jedoch sicher, dass Sie dies nur mit kleinen CSS-Dateien tun, da das Einfügen großer CSS-Dateien das HTML-Rendering verlangsamen kann. Und um unnötige Duplikationen zu vermeiden, sollten Sie CSS-Attribute nicht in HTML-Tags einbetten. Das Zurückstellen von unkritischem CSS kann natürlich manuell erfolgen. Ich würde jedoch dringend empfehlen, diesen Prozess zu automatisieren. Hier finden Sie eine ganze Auswahl an Tools, die Ihnen dabei helfen.

4) CSS-Verkleinerung

Das Reduzieren von CSS-Dateien ist eine weitere Aktivität, die Ihnen wertvolle Millisekunden einbringen kann. Die Praxis zeigt, dass CSS oft viel größer als nötig ist. Daher können Sie Ihr CSS schmerzlos minimieren, ohne Angst zu haben, etwas zu verlieren. Wie optimieren?

Wenn Sie eine kleine Website betreiben, die nicht häufig aktualisiert wird, sollten Sie ein Online-Tool wie CSSNano zur CSS-Minimierung verwenden. Fügen Sie einfach den Code in das Tool ein und warten Sie, bis Sie die verkleinerte Version Ihres CSS erhalten - so einfach ist das. Solche Minifier minimieren die Anzahl der Bytes sehr gut. Zum Beispiel können sie den Farbwert # 000000 auf nur # 000 reduzieren, was eine ziemlich gute Einsparung ist, wenn es so viele Farbwerte gibt.

5) JavaScript-Verkleinerung

Genau wie CSS sollten auch JavaScript-Ressourcen minimiert werden. Schauen Sie sich einfach Ihr JavaScript an und entfernen Sie alle überflüssigen Daten wie Codekommentare, nicht verwendeten Code, Zeilenumbrüche und Leerzeichen. Wie optimieren?

Und genau wie bei der CSS-Minimierung können Sie nicht benötigte Daten in Ihrem Code am schnellsten und schmerzlosesten mithilfe eines Online-Minimierers entfernen. UglifyJS wird dringend empfohlen. Darüber hinaus können Sie einen Prozess einrichten, der Entwicklungsdateien minimiert und sie bei jeder Bereitstellung einer neuen Version in einem Produktionsverzeichnis speichert.

6) Kodieren von Bildern

Ich denke, es ist glasklar, dass je kleiner Ihre Inhaltsgröße ist, desto weniger Zeit wird zum Herunterladen der Ressource benötigt. Die Bildoptimierung ist eine weitere wichtige Aktivität, mit der Sie die Gesamtgröße Ihrer Seiten um bis zu 80% reduzieren können. Darüber hinaus wird durch das Aktivieren der Komprimierung die Datennutzung für den Client reduziert und die Renderzeit Ihrer Seiten minimiert. Wie optimieren?

Das Komprimieren jedes einzelnen Bildes, das Sie auf Ihre Site hochladen, kann ein sehr mühsamer Prozess sein. Aber was noch wichtiger ist, es ist sehr leicht, es zu vergessen. Daher ist es immer besser, die Bildkomprimierung zu automatisieren und sie endgültig zu vergessen. Tun Sie sich selbst einen großen Gefallen und verwenden Sie imagemin oder libvips für Ihren Build-Prozess. Denken Sie daran, je kleiner die Dateigröße Ihrer Bilder ist, desto flüssiger wird das Netzwerk, das Sie Ihren Benutzern bieten - insbesondere auf Mobilgeräten.

7) Textkomprimierung

Textinhalte auf Ihrer Website können die Bytegröße von Netzwerkantworten ebenfalls erhöhen. Und wie Sie bereits wissen, wird Ihre Seite umso schneller geladen, je weniger Bytes heruntergeladen werden müssen. Wie optimieren?

Google empfiehlt dringend, alle komprimierbaren Daten zu gzippen, und alle modernen Browser empfehlen die gzip-Komprimierung für alle HTTP-Anforderungen. Tatsache ist, dass durch die Komprimierung von Ressourcen die Größe der übertragenen Antwort um bis zu 90% reduziert werden kann. In diesem Sinne wird auch die Zeit für das erste Rendern Ihrer Seiten minimiert und die Datennutzung für den Client reduziert. Sehen Sie sich diese Beispielkonfigurationsdateien für die gängigsten Server an. Suchen Sie danach Ihren Server in der Liste, gehen Sie zum Abschnitt gzip und bestätigen Sie, dass Ihr Server mit den empfohlenen Einstellungen konfiguriert ist. Alternativ zu gzip können Sie auch Brotli verwenden, eines der aktuellsten verlustfreien Datenformate. Im Gegensatz zum gzip-Format weist Brotli viel bessere Komprimierungseigenschaften auf. Aber es gibt einen Haken: Je höher die Komprimierungsstufe, desto mehr Ressourcen benötigt ein Browser, um dies zu erreichen. Aus diesem Grund werden alle Größenvorteile von Brotli durch die langsame Antwortzeit des Servers vollständig zunichte gemacht. Daher würde ich nicht empfehlen, die 4. Komprimierungsstufe (Brotli hat 10 Komprimierungsstufen) für dynamische Assets zu überschreiten. Mit statischen Assets, die Sie im Voraus komprimieren, können Sie jedoch die höchste Komprimierungsstufe implementieren.

8) Schlüsselanforderungen vorab laden

Wie Sie wissen, müssen die Browser entscheiden, welche Ressourcen zuerst geladen werden sollen. Daher versuchen sie häufig, die wichtigsten Ressourcen wie beispielsweise CSS vor Skripten und Bildern zu laden. Leider ist dies nicht immer der beste Weg. Indem Sie Ressourcen vorab laden, können Sie die Priorität des Ladens von Inhalten in modernen Browsern ändern, indem Sie diese über den späteren Bedarf informieren. Wie optimieren?

Mit Hilfe des Tags <link rel = "preload"> können Sie den Browser darüber informieren, dass eine Ressource als Teil des Codes benötigt wird, der für das Rendern des Inhalts über dem Falz verantwortlich ist, und den Abruf der Ressource veranlassen möglich.
Hier ist ein Beispiel, wie das Tag verwendet werden kann:
<link rel = "preload" as = "script" href = "super-important.js">
<link rel = "preload" as = "style" href = "critical.css">

Bitte beachten Sie, dass die Ressource mit der gleichen Priorität geladen wird. Der Unterschied besteht darin, dass der Download früher beginnt, da der Browser über die Vorabladung informiert ist. Ausführlichere Anweisungen finden Sie in diesem Handbuch zur Priorisierung von Ressourcen.

9) Enorme Netzwerknutzlasten

Das Reduzieren der Gesamtgröße von Netzwerkanforderungen kann nicht nur Ihre Seite beschleunigen, sondern auch das Geld Ihrer Benutzer sparen, das sie für Mobilfunkdaten ausgeben würden.Wie optimieren?

Es gibt eine Reihe von Möglichkeiten, die Nutzlast zu reduzieren. Zunächst müssen Sie nicht benötigte Serveranforderungen entfernen.
Nachdem Sie alle unnötigen Anforderungen beseitigt haben, ist es nur richtig, die verbleibenden Anforderungen so klein wie möglich zu halten. Im Folgenden sind nur einige der Minimierungstechniken für Ressourcen aufgeführt, die Sie berücksichtigen sollten. Denken Sie daran, die Text- und Bildkomprimierung zu aktivieren und das WebP-Format anstelle von JPEG oder PNG zu verwenden. Es ist auch eine gute Idee, Anforderungen zwischenzuspeichern, damit Ressourcen bei wiederholten Besuchen nicht von Grund auf heruntergeladen werden. Weitere Informationen zum HTTP-Caching finden Sie in diesem Handbuch.

10) Umgang mit Offscreen-Bildern

Offscreen-Bilder werden unterhalb der Falz angezeigt. Aus diesem Grund müssen sie beim ersten Laden der Seite einfach nicht heruntergeladen werden. Daher ist es nur richtig, das Laden zu verschieben, um die Seitengeschwindigkeit und die Zeit für die Interaktion zu verbessern. Wie optimieren?

Grundsätzlich ist es die beste Strategie, Bilder über dem Bildschirm vor Bildern außerhalb des Bildschirms herunterzuladen und Bilder unter dem Bildschirm erst dann herunterzuladen, wenn ein Benutzer auf sie zugreift. Diese Technik nennt man Lazy Loading. Mit einem Tool wie IntersectionObserver können Sie Bilder nur laden, wenn ein Benutzer zu ihnen gescrollt hat.

11) Verbesserung der Serverantwortzeit

Wenn ein Benutzer zu einer bestimmten URL navigiert, um auf bestimmte Inhalte zuzugreifen, sendet der Browser eine Netzwerkanforderung, um diese Inhalte abzurufen. Wenn Benutzer beispielsweise bereit sind, auf ihren Bestellverlauf zuzugreifen, muss der Server den Verlauf jedes Benutzers aus einer Datenbank abrufen und diesen Inhalt dann in die Seite einfügen. Manchmal kann dieser Vorgang zu lange dauern. Die Optimierung der Serverantwortzeit ist daher eine der Möglichkeiten, die Wartezeit der Benutzer auf das Laden von Seiten zu verkürzen. Wie optimieren?

Das Unangenehmste an diesen Antwortverzögerungen ist, dass es eine große Auswahl von Gründen gibt, die sie verursachen können. Dies können beispielsweise langsames Routing, langsame Anwendungslogik, Ressourcen-CPU-Mangel, langsame Datenbankabfragen, Speichermangel, langsame Frameworks usw. sein.
Bleiben Sie mit diesen Parametern also stets am Puls der Zeit und versuchen Sie, die Reaktionszeit unter 200 ms zu halten.

12) Beseitigen Sie Ressourcen, die das Rendern blockieren

Es ist sehr ratsam, nur die wichtigsten externen Skripte zu belassen, da sonst zusätzliche Roundtrips hinzugefügt werden, um die Seite vollständig zu rendern. Wie optimieren?

Wenn die externen Skripte klein sind, können Sie sie direkt in das HTML-Dokument einbinden, um zusätzliche Netzwerkanforderungen zu vermeiden. Denken Sie daran, dass Inlining die Größe Ihres HTML-Dokuments vergrößert. Deshalb sollten Sie es nur mit kleinen Skripten tun. Bei nicht kritischen HTML-Importen empfiehlt Google, diese mit dem Attribut async zu kennzeichnen. Dadurch werden Ihre Skripte asynchron mit dem Rest der Seite geladen (das Skript wird ausgeführt, während die Seite das Parsen fortsetzt), und die Gesamtgeschwindigkeit wird nicht wesentlich beeinflusst. Beachten Sie jedoch, dass dies nur für die Skripte durchgeführt werden sollte, die für das Laden der ersten Seite nicht erforderlich sind.

Apropos Stylesheets, es ist schön, Ihre Styles in verschiedene Dateien aufzuteilen und jedem Stylesheet-Link ein Medienattribut hinzuzufügen. In diesem Fall blockiert der Browser nur die erste Farbe, um die Stylesheets abzurufen, die mit dem Gerät eines Benutzers übereinstimmen.

13) Verwenden von Videoformaten für animierte Inhalte

Ob Sie es glauben oder nicht, aber animierte GIFs können zu viel Platz beanspruchen. Um unser ultimatives Ziel zu erreichen, dass Ihre Webseiten blitzschnell geladen werden, müssen Sie GIF-schwere Animationen in Videos konvertieren. Wie optimieren?

Die schnellste Möglichkeit, GIFs in Videos umzuwandeln, bietet das Tool ffmpeg. Sobald Sie das Tool installiert haben, laden Sie einfach Ihre GIFs hoch und wählen Sie das Videoformat, in das Sie sie konvertieren möchten. Es ist ratsam, sich für MPEG-4 zu entscheiden, da es die umfassendste Unterstützung für alle Browser bietet.

Sie können auch ein relativ neues WebM-Format ausprobieren, das von Google entwickelt wurde (genau wie WebP für Bilder). Die Browserunterstützung für WebM ist zwar nicht so umfangreich wie für MPEG-4, die Komprimierungseigenschaften sind jedoch sehr gut.
Und da Sie mit dem <video> -Element mehrere <source> -Elemente angeben können, können Sie den Trick ausführen, indem Sie eine Voreinstellung für eine WebM-Quelle angeben, die viele Browser verwenden können, während Sie auf eine MPEG-4-Quelle zurückgreifen, die alle anderen Browser verstehen können.

14) Vorverbindung zu den erforderlichen Ursprüngen

Das Herstellen von Verbindungen, insbesondere von sicheren, nimmt in der Regel viel Zeit in Anspruch. Die Sache ist, dass DNS-Lookups, SSL-Handshakes, der Austausch geheimer Schlüssel und einige Roundtrips zum endgültigen Server erforderlich sind, der für die Benutzeranforderung verantwortlich ist. Um diese kostbare Zeit zu sparen, können Sie sich vorab mit den erforderlichen Quellen verbinden. Wie optimieren?

Um Ihre Website vorab mit einer Quelle eines Drittanbieters zu verbinden, müssen Sie Ihrer Seite lediglich ein Link-Tag hinzufügen. So sieht es aus:
<link rel = "preconnect" href = "https://example.com">
Nachdem Sie das Tag implementiert haben, muss Ihre Website keine zusätzliche Zeit für das Herstellen einer Verbindung mit dem erforderlichen Server aufwenden, sodass Ihre Benutzer nicht auf mehrere zusätzliche Roundtrips warten müssen.

15) Bereitstellen von Bildern in Formaten der nächsten Generation

Nicht alle Bildformate sind gleich. Die Wahrheit ist, dass unsere alten vertrauenswürdigen JPEG- und PNG-Formate jetzt viel schlechtere Komprimierungs- und Qualitätsmerkmale aufweisen als JPEG 2000, JPEG XR und WebP. Ich versuche also zu sagen, dass das Codieren Ihrer Bilder in diesen Formaten das Laden beschleunigt und weniger Mobilfunkdaten verbraucht. Wie optimieren?

Genau wie bei den zuvor beschriebenen Videoformaten müssen Sie sicherstellen, dass Ihre Bilder für alle Besucher sichtbar sind. Verwenden Sie dazu das Element <picture>, mit dem Sie mehrere alternative Bildformate in der Reihenfolge ihrer Priorität auflisten können. Selbst wenn der Browser eines Benutzers ein bestimmtes Format nicht unterstützt, kann er zum nächsten angegebenen Format übergehen und ein Bild korrekt anzeigen.

16) Sicherstellen der Textsichtbarkeit beim Laden von Webfonts

Alle Websitebesitzer wollen mit ihren super coolen benutzerdefinierten Schriftarten auffallen. Das einzig schlechte daran ist, dass das Laden solcher Schriften zu lange dauern kann. In diesem Fall ersetzt der Browser Ihre Schriftart durch eine Ersatzschrift (z. B. Arial oder Times New Roman). Wie optimieren?

Dies ist kein wirklicher Optimierungstipp, aber wenn Sie nicht möchten, dass Ihre Inhalte falsch angezeigt werden, müssen Sie sicherstellen, dass sie mit einigen grundlegenden Ersatzschriftarten wie Arial oder Georgia (insbesondere auf Mobilgeräten) gut aussehen. Anschließend können Sie sicher sein, dass Benutzer Ihre Inhalte tatsächlich lesen können und Ihre Seite angemessen aussieht.

17) Minimieren Sie die Arbeit mit dem Haupt-Thread

Wenn Sie eine bestimmte Seite herunterladen, führt Ihr Browser gleichzeitig mehrere Aufgaben aus, z. B. das Parsen und Kompilieren von Skripten, das Rendern, das Parsen von HTML und CSS, die Garbage Collection, die Skriptauswertung usw. Wie optimieren?

Manchmal kann es schwierig sein, eine Übersicht darüber zu erhalten, wo die CPU-Zeit für das Laden einer Seite aufgewendet wurde. Glücklicherweise können Sie mit Hilfe der neuen Funktion zur Überprüfung der Hauptthread-Arbeitsunterbrechung von Lighthouse jetzt klar erkennen, wie viel und welche Art von Aktivität während des Ladens von Seiten auftritt. Auf diese Weise erhalten Sie einen Überblick über das Laden von Leistungsproblemen im Zusammenhang mit Layout, Skriptevaluierung, Parsing oder anderen Aktivitäten.

18) Verkürzung der Ausführungszeit von JavaScript

JavaScript beeinflusst direkt die Ladeleistung Ihrer Seite. Aus diesem Grund ist es wichtig, die Zeit für das Parsen, Kompilieren und Ausführen von JavaScript zu verkürzen. Wie optimieren?

In erster Linie sollten Sie nur den Code senden, den Ihre Benutzer benötigen. Versuchen Sie, alle redundanten Daten wie Codekommentare und nicht verwendeten Code zu entfernen. Reduzieren Sie anschließend Ihr JavaScript so weit wie möglich und speichern Sie es im Cache, um zusätzliche Netzwerkausfälle zu vermeiden. Fortgeschrittene Entwickler bevorzugen möglicherweise kniffligere Techniken wie das langsame Laden, das Schütteln von Bäumen zum Entfernen von Code oder Funktionen wie den Code-Cache von V8.

19) Implementierung einer Caching-Richtlinie

Wenn ein Browser eine Ressource anfordert, kann der Server, der die Ressource bereitstellt, den Browser veranlassen, sie für einen bestimmten Zeitraum zu speichern. Daher verwendet der Browser für alle wiederholten Besuche eine lokale Kopie, anstatt sie von Grund auf neu abzurufen. Wie optimieren?

Um automatisch zu steuern, wie und wie lange die einzelne Antwort vom Browser zwischengespeichert werden kann, verwenden Sie die Cache-Steuerung.
Neben dem HTTP-Caching, der Bestimmung der optimalen Lebensdauer von Skripten (maximales Alter) und der Bereitstellung von Validierungstoken (ETag) sollten Sie auch das Service Worker-Caching berücksichtigen, einschließlich des oben erwähnten V8-Code-Caching.

20) Vermeiden einer übermäßigen DOM-Größe

Ein zu großer DOM-Baum mit komplizierten Stilregeln kann sich negativ auf Geschwindigkeit, Laufzeit und Speicherleistung auswirken. Es wird empfohlen, einen DOM-Baum mit insgesamt weniger als 1500 Knoten zu erstellen, der eine maximale Tiefe von 32 Knoten und keinen übergeordneten Knoten mit mehr als 60 untergeordneten Knoten aufweist. Wie optimieren?

Es empfiehlt sich, die nicht mehr benötigten DOM-Knoten zu entfernen. Entfernen Sie in diesem Fall die Knoten, die derzeit nicht im geladenen Dokument angezeigt werden, und versuchen Sie, sie erst zu erstellen, nachdem ein Benutzer eine Seite gescrollt oder eine Schaltfläche gedrückt hat.

21) Minimierung der Tiefe kritischer Anfragen

Die Kritische Anforderungskette ist Teil der CRP-Strategie (Critical Rendering Path), deren Kernidee darin besteht, das Laden bestimmter Ressourcen zu priorisieren und die Reihenfolge zu ändern, in der sie geladen werden. Obwohl die Kritische Anforderungskette die wichtigsten Ressourcen herunterladen soll, können sie dennoch minimiert werden.

Wie optimieren?

Leider gibt es keine allgemeingültigen Ratschläge, wie Sie die Tiefe kritischer Anfragen genau für Ihre Website minimieren können (genau wie für viele der oben aufgeführten Faktoren). Es ist jedoch immer gut, die Länge Ihrer Ketten zu minimieren, die Größe der heruntergeladenen Ressourcen zu verringern und den Download unnötiger Ressourcen wie immer zu verschieben.

22) User Timing Marken und Maßnahmen

Wie ich bereits erwähnt habe, sind sehr oft JavaScript-Probleme der Grund für das langsame Laden von Seiten. Und sehr oft haben Entwickler Schwierigkeiten, die genaue Schwachstelle in ihren JavaScripts zu finden. Glücklicherweise ist dies mit der User Timing API kein Problem mehr. Grundsätzlich besteht der Hauptzweck dieses Dienstes darin, die JavaScript-Leistung Ihrer App zu messen, damit Sie wissen, welche Teile Ihrer Skripte hinterherhinken und optimiert werden müssen. Wie optimieren?

Alles, was Sie tun müssen, um die Leistung Ihrer App in Bezug auf JavaScript zu messen, ist über die API auf die Ergebnisse von JavaScript zuzugreifen. Nachdem Sie Verbesserungspotentiale identifiziert haben, können Sie diese beheben. Hier finden Sie eine schöne Anleitung für den Einstieg in die Benutzer-Timing-API.

Fazit
Ich weiß, es war ein langer Artikel voller technischer Dinge. Ich würde jedoch dringend empfehlen, die technische Seite der Seitengeschwindigkeitsoptimierung wirklich ernst zu nehmen, da dies den größten Einfluss auf Ihren Geschwindigkeitswert hat. Außerdem sollten Sie die realen Messungen von CrUX im Auge behalten. Denn selbst wenn Sie einen 100-Geschwindigkeitsfaktor haben, kann Ihre Webseite für Benutzer aufgrund einer schlechten Internetverbindung oder alter Geräte langsam erscheinen.
Wie immer freue ich mich auf Ihr Feedback im Kommentarbereich. Bitte teilen Sie Ihre Erfahrungen mit dem neuen PageSpeed Insights-Tool sowie mit der technischen Optimierung. Wir sehen uns dort!