So beschleunigen Sie eine Website im Jahr 2019: Technische Checkliste

Seit vielen Jahren ist die Seitengeschwindigkeit ein Rankingfaktor für die Desktopsuche von Google. Erst vor kurzem hat Google ein Update für die mobile Seitengeschwindigkeit eingeführt , das die Seitengeschwindigkeit offiziell zu einem Rankingfaktor für mobile Geräte gemacht hat.

Darüber hinaus ist die Seitengeschwindigkeit auch eine zentrale Kennzahl für die Benutzererfahrung. Wenn Sie also nicht mit Ihrer Seitengeschwindigkeit arbeiten, können Sie Geld, Ranglisten und treue Kunden kosten. Laut der neuesten Google-Studie erwarten 50% Ihrer Besucher, dass Ihre Seite innerhalb von weniger als 2 Sekunden vollständig geladen ist. Und Nutzer, die mit Ihrer mobilen Seite eine schlechte Erfahrung gemacht haben, sind 62% weniger wahrscheinlich, um einen Kauf zu tätigen.

Wenn Sie nicht möchten, dass dies geschieht, müssen Sie jetzt Maßnahmen ergreifen. Der erste Schritt zur Verbesserung der Seitengeschwindigkeit besteht darin, sie zu messen. Die beste Möglichkeit dazu ist natürlich die Hilfe unserer alten, vertrauenswürdigen PageSpeed Insights.

Neue PageSpeed Insights: Was ist neu?

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

Welche Daten finden Sie in der neuen Version des Tools:

Der Geschwindigkeitsstand

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

Felddaten

Diese Daten werden von CrUX erfasst und enthalten Informationen dazu, wie Chrome-Benutzer mit Ihrer Seite interagieren, welche Geräte sie verwenden, wie lange es dauert, bis der Inhalt geladen ist, 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 anderen Seite mag Ihre Website Google aufgrund des schnellen Internets und der besseren Geräte Ihrer Nutzer schnell erscheinen.

Um zu sehen, wie Google Ihre Website wahrnimmt, können Sie auf Ihre CrUX-Daten zugreifen. Es steht Ihnen bei Google BigQuery (Teil der Google Cloud-Plattform) zur Verfügung. Hier ist ein schöner Leitfaden für Sie, wie Sie Einblicke aus Ihrer Praxis aus erster Hand erhalten.

Labdaten

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

  • First Contentful Paint – misst die Zeit, die das erste visuelle Element für einen Benutzer erscheint.
  • Geschwindigkeitsindex – misst, wie schnell der Inhalt einer Seite sichtbar gefüllt wird.
  • Time to Interactive – misst, wie schnell eine Seite vollständig interaktiv wird.
  • Erste aussagekräftige Farbe – misst, wenn der primäre Inhalt einer Seite sichtbar ist (die größte Layoutänderung, die über den Falz liegt, und Web-Schriftarten geladen wurden).
  • Erster CPU-Leerlauf – misst, wann eine Seite minimal interaktiv ist (die meisten, aber nicht alle UI-Elemente auf dem Bildschirm sind interaktiv).
  • Geschätzte Eingabelatenz – Schätzt, wie lange Ihre App in Millisekunden während des geschäftigsten 5s-Fensters für das Laden der Seite auf Eingaben des Benutzers reagiert.

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

labdaten_pagespeed_performance

Empfehlungen

Im Bereich Empfehlungen finden Sie eine Liste mit Optimierungstipps für Ihre Seite. Außerdem werden die geschätzten Einsparungen angezeigt, nachdem dieser oder jener Parameter korrigiert oder verbessert wurde.

Das Problem ist, dass diese technischen Kriterien Einfluss auf Labordatenparameter haben, die einen direkten Einfluss auf die Gesamtgeschwindigkeit haben. Deshalb ist es wichtig, zuerst daran zu arbeiten.

empfehlungen_google_pagespeed_insights_empfehlungen

Diagnose

Im Abschnitt Diagnose finden Sie weitere Informationen zu Zwischenspeicherung, DOM-Größe, Nutzdaten, JavaScript usw.

Audits bestanden

Zu guter Letzt werden im Abschnitt Bestandenes Audits die optimierten technischen Parameter angezeigt, 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, mit dem der Zusammenhang zwischen Seitengeschwindigkeit und Seitenpositionen in mobilen SERPs nach dem Update ermittelt werden sollte. Der Hauptvorteil des Experiments war, dass der Optimierungsfaktor (jetzt Opportunities) den Rang der mobilen Rankings am stärksten beeinflusst.

Daran hat sich bis heute nichts geändert, und die technische Optimierung regelt immer noch 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 der Seitengeschwindigkeits-Score erheblich gesteigert werden kann, da alle diese Parameter absolut fixierbar und optimierbar sind.

Es gibt also eine beeindruckende Liste von Möglichkeiten, wie Sie das Laden Ihrer Seite beschleunigen können.

  1. Vermeiden Sie Mehrseiten-Weiterleitungen
  2. Richtige Größe der Bilder
  3. Verschieben Sie nicht verwendetes CSS
  4. CSS reduzieren
  5. Reduzieren Sie JavaScript
  6. Kodieren Sie Bilder effizient
  7. Aktivieren Sie die Textkomprimierung
  8. Schlüsselanfragen vorab laden
  9. Vermeiden Sie enorme Netzwerklasten
  10. Verschieben Sie Offscreen-Bilder
  11. Serverantwortzeiten reduzieren (TTFB)
  12. Beseitigen Sie Render-Blocking-Ressourcen
  13. Verwenden Sie Videoformate für animierte Inhalte
  14. Verbinden Sie sich mit den erforderlichen Ursprüngen
  15. Liefern Sie Bilder in Next-Gen-Formaten
  16. Stellen Sie sicher, dass der Text während des Ladens von Webfont sichtbar bleibt
  17. Minimieren Sie die Hauptarbeit
  18. Reduzieren Sie die JavaScript-Ausführungszeit
  19. Statische Assets können mit einer effizienten Cache-Richtlinie bereitgestellt werden
  20. Vermeiden Sie eine übermäßige DOM-Größe
  21. Minimieren Sie die Tiefe kritischer Anfragen
  22. Leistung messen

1) Zielseiten-Weiterleitungen

Ich nehme an, es ist selbstverständlich, dass das Entfernen aller unnötigen Weiterleitungen eines der offensichtlichsten Dinge ist, die Sie auf Ihrer Website schnellstmöglich tun können. Die Sache ist, jede zusätzliche Umleitung verlangsamt die Seitenwiedergabezeit, da jede Umleitung eine (wenn Sie Glück haben) oder viele (häufiger) HTTP-Anfrage-Antwort-Roundtrips hinzufügt.

Wie optimieren?

  • Wechseln Sie zu Responsive Design

Das erste, was Google beim Umgang mit nicht benötigten Weiterleitungen empfiehlt, ist das Umschalten auf Responsive Design . Auf diese Weise können Sie unnötige Weiterleitungen zwischen Desktop-, Tablet- und mobilen Versionen Ihrer Website vermeiden und Ihren Benutzern eine hervorragende Benutzererfahrung auf mehreren Geräten bieten.

  • Wählen Sie einen geeigneten Weiterleitungstyp aus

Natürlich ist es die beste Methode, keine Umleitungen zu verwenden. Wenn Sie jedoch dringend einen verwenden müssen, müssen Sie den richtigen Weiterleitungstyp auswählen.Sicherlich ist es besser, eine 301-Weiterleitung für die permanente Weiterleitung zu verwenden. Wenn Sie jedoch Benutzer auf einige kurzfristige Werbeseiten oder gerätespezifische URLs umleiten möchten, sind temporäre 302-Weiterleitungen die beste Option.

Erwähnenswert ist auch, dass Googlebot jetzt sowohl HTTP- als auch JavaScript-Implementierungen verarbeiten kann. Bei HTTP-Weiterleitungen können sie auf der Serverseite zu Latenzen führen. Wenn Sie jedoch von JavaScript-Weiterleitungen sprechen, beachten Sie, dass auf der Clientseite der Weiterleitung eine gewisse Latenz auftreten kann. Dies geschieht, weil zuerst eine bestimmte Seite heruntergeladen werden muss. Anschließend sollte JavaScript analysiert und ausgeführt werden. Erst danach wird eine Weiterleitung ausgelöst. Eine Möglichkeit, eine JavaScript-Umleitung zu implementieren, besteht darin, die von Ihrer Site bereits verwendeten Medienabfragen in den Linkanmerkungen auf der Seite mit Hilfe der JavaScript-Funktion matchMedia () auszuführen.

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

2) Bildgröße

Es gefällt oder nicht, aber im Durchschnitt machen Bilder etwa 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, müssen Sie sicherstellen, dass Sie keine riesigen, übergroßen Bilder an Ihre Benutzer senden. Dies geschieht sehr häufig, da verschiedene Geräte Bilder unterschiedlicher Größe benötigen, um sie richtig anzuzeigen (normalerweise ist der Bildschirm umso kleiner, je kleiner das Bild ist). Einer der weit verbreiteten „Fehler“ ist das Senden großer Bilder an kleinere Geräte. Wenn also Ihre Seite Bilder enthält, die größer sind als die auf dem Bildschirm Ihres Benutzers gerenderte Version, wird die Ladezeit der Seite erheblich langsamer.

Wie optimieren?

Gemäß der offiziellen Empfehlung von Google empfiehlt es sich, sogenannte „responsive images“ zu implementieren. Im Grunde bedeutet dies, dass Sie verschiedene Versionen jedes Bildes erstellen können, sodass es für alle Bildschirmgrößen geeignet ist. Sicherlich können Sie mithilfe von Medienabfragen, Viewport-Dimensionen usw. festlegen, welche Version in HTML oder CSS verwendet werden soll. Im Folgenden finden Sie ein gutes Werkzeug, das Ihnen beim Erstellen von Bildern in verschiedenen Größen hilft .

Kurz gesagt: Wenn ein Bild angefordert wird, kündigt der Browser seine Darstellungsbereichsdimensionen und das Pixelverhältnis des Geräts an, während der Server dafür sorgt, dass im Gegenzug Bilder in der richtigen Größe erzeugt werden. Sehen Sie sich diese Schritt-für-Schritt-Anweisungen zur Implementierung von Kundenhinweisen an, um zu erfahren, wie dies möglich ist.

Andererseits ist die Implementierung von vektorbasierten Bildformaten wie SVG eine gute Option. Wie Sie vielleicht wissen, können SVG-Bilder auf jede beliebige Größe skaliert werden, was das Format sehr bequem 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 Konstruktion des Render-Baums eines Browsers verlangsamen . Das Problem ist, dass ein Browser den gesamten DOM-Baum durchlaufen und prüfen muss, welche CSS-Regeln für jeden Knoten gelten. Je mehr ungenutztes CSS vorhanden ist, desto mehr Zeit muss ein Browser damit verbringen, die Stile für jeden Knoten zu berechnen.

Wie optimieren?

Kurz bevor Sie sich mit dem Minimieren von CSS-Dateien befassen, müssen Sie nach Dateien suchen, die Sie nicht mehr benötigen, und diese ohne Bedenken entfernen. Denken Sie daran, dass die am besten optimierte Ressource nicht gesendet wird.

Nachdem Sie Ihr CSS gelöscht haben, müssen Sie die restlichen CSS-Regeln optimieren (unnötigen Code reduzieren, CSS-Dateien aufteilen, Leerzeichen reduzieren usw.).

Es ist auch eine sehr gute Idee, kritische, kleine CSS-Ressourcen direkt in das HTML-Dokument zu integrieren. Auf diese Weise können Sie zusätzliche HTTP-Anforderungen entfernen. Bitte stellen Sie jedoch sicher, dass Sie dies nur mit kleinen CSS-Dateien tun, da das Inlining von großen CSS zu einer Verlangsamung des HTML-Renderings führen kann. Um unnötige Duplizierungen zu vermeiden, sollten Sie CSS-Attribute besser nicht in HTML-Tags integrieren.

Das Verschieben von unkritischem CSS kann natürlich auch manuell erfolgen. Ich würde jedoch dringend empfehlen, diesen Prozess zu automatisieren. Hier finden Sie eine ganze Reihe von Tools, die Ihnen dabei helfen.

4) CSS-Minifizierung

Das Reduzieren von CSS-Dateien ist eine weitere Aktivität, mit der Sie wertvolle Millisekunden gewinnen können. Die Praxis zeigt, dass CSS oftmals viel größer als nötig ist. Daher können Sie Ihr CSS schmerzlos verkleinern, ohne befürchten zu müssen, etwas zu verlieren.

Wie optimieren?

Wenn Sie eine kleine Website betreiben, die nicht regelmäßig aktualisiert wird, sollten Sie ein Online-Tool wie CSSNano für die CSS-Minifizierung verwenden. Fügen Sie einfach den Code in das Tool ein und warten Sie, bis Sie die reduzierte Version Ihres CSS erhalten – so einfach ist das. Solche Minifier sind sehr gut geeignet, um die Anzahl der Bytes zu minimieren. Zum Beispiel können sie den Farbwert # 000000 auf nur # 000 reduzieren, was eine gute Ersparnis darstellt, wenn viele Farbwerte wie diese vorliegen.

5) JavaScript-Minifizierung

Genau wie CSS sollten auch JavaScript-Ressourcen minimiert werden. Sie müssen sich Ihr JavaScript ansehen und alle redundanten Daten wie Codekommentare, nicht verwendeten Code, Zeilenumbrüche und Leerzeichen entfernen.

Wie optimieren?

Genau wie bei der CSS-Minifizierung besteht der schnellste und am wenigsten schmerzhafte Weg, nicht benötigte Daten in Ihrem Code zu entfernen, in dem Sie einen Online-Minifier verwenden. UglifyJS wird dringend empfohlen. Darüber hinaus können Sie einen Prozess einrichten, der die Entwicklungsdateien minimiert und sie bei jeder Bereitstellung einer neuen Version in einem Produktionsverzeichnis speichert.

6) Bilder kodieren

Ich denke, es ist klar, dass je kleiner der Inhalt ist, desto weniger Zeit wird benötigt, um die Ressource herunterzuladen. Die Bildoptimierung ist eine weitere äußerst wichtige Aktivität, durch die die Gesamtgröße für die Seitenladung um bis zu 80% reduziert werden kann . Darüber hinaus reduziert die Aktivierung der Komprimierung die Datennutzung für den Client sowie die Renderzeit Ihrer Seiten.

Wie optimieren?

Das Komprimieren jedes einzelnen Bildes, das Sie auf Ihre Website hochladen, kann sehr mühsam sein. Aber noch wichtiger ist, es ist sehr leicht, es zu vergessen. Daher ist es immer besser, die Bildkomprimierung zu automatisieren und für immer zu vergessen. Tun Sie sich also einen großen Gefallen und verwenden Sie für Ihren Build-Prozess Imagemin oder Libvips. Denken Sie daran, dass Ihre Bilder mit einer geringeren Dateigröße eine reibungslosere Netzwerkerfahrung bieten, die Sie Ihren Benutzern bieten – insbesondere auf mobilen Geräten.

7) Textkomprimierung

Textinhalte Ihrer Website sind eine weitere Sache, die die Bytegröße der Netzwerkantworten erhöhen kann. 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 kopieren, und alle modernen Browser empfehlen die Gzip-Komprimierung für alle HTTP-Anforderungen. Tatsache ist, wenn Ressourcen komprimiert werden, kann die Größe der übertragenen Antwort um bis zu 90% reduziert werden. Auf diese Weise wird auch die Zeit für das erste Rendern Ihrer Seiten minimiert und die Datennutzung für den Client reduziert.

Schauen Sie sich also diese Beispielkonfigurationsdateien für die gängigsten Server an. Suchen Sie danach Ihren Server in der Liste, wechseln Sie zum Abschnitt gzip und vergewissern Sie sich, dass der Server mit den empfohlenen Einstellungen konfiguriert ist.

Als Alternative zu gzip können Sie auch Brotli verwenden, eines der aktuellsten verlustfreien Datenformate. Im Gegensatz zum gzip-Format hat Brotli wesentlich bessere Kompressionseigenschaften. Aber es gibt einen Haken: Je höher der Komprimierungsgrad, desto mehr Ressourcen benötigt ein Browser, um dies zu erreichen. Daher werden alle Größenvorteile von Brotli durch die langsame Antwortzeit des Servers vollständig aufgehoben. Daher würde ich nicht empfehlen, über die 4. Komprimierungsstufe (Brotli hat 10 Komprimierungsstufen) für dynamische Assets hinauszugehen. Mit statischen Elementen, die Sie vorab komprimieren, können Sie jedoch die höchste Komprimierungsstufe implementieren.

8) Schlüsselanfragen vorladen

Wie Sie wissen, müssen die Browser entscheiden, welche Ressourcen zuerst geladen werden sollen. Daher versuchen sie häufig, die wichtigsten Ressourcen wie CSS vor Skripten und Bildern zu laden. Leider ist dies nicht immer der beste Weg. Durch das Vorladen von Ressourcen können Sie die Priorität des Inhaltsladens in modernen Browsern ändern, indem Sie ihnen mitteilen, was Sie später benötigen.

Wie optimieren?

Mit Hilfe des Tags <link rel = „preload“> können Sie den Browser darüber informieren, dass eine Ressource als Teil des Codes erforderlich ist, der für das Rendern des über dem Falz genannten Inhalts verantwortlich ist, und die Ressource abrufen, sobald 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 startet, da der Browser das Preload vorab kennt. Detaillierte Anweisungen finden Sie in diesem Handbuch zur Ressourcenpriorisierung.

9) Enorme Netzwerknutzlasten

Wenn Sie die Gesamtgröße der Netzwerkanforderungen reduzieren, kann dies nicht nur Ihre Seite beschleunigen, sondern auch das Geld Ihrer Benutzer einsparen, das sie für Mobilfunkdaten ausgeben würden.

Wie optimieren?

Es gibt mehrere Möglichkeiten, die Größe der Nutzlasten zu reduzieren. Zunächst müssen Sie nicht mehr benötigte Serveranforderungen löschen.

Nachdem Sie alle unnötigen Anfragen entfernt haben, ist es nur richtig, die verbleibenden so klein wie möglich zu machen. Hier sind nur einige wenige Minifikationstechniken der Ressourcen, die Sie berücksichtigen sollten. Denken Sie daran, die Komprimierung von Text und Bildern zu aktivieren und das WebP-Format anstelle von JPEG oder PNG zu verwenden. Es ist auch eine gute Idee, Anfragen im Cache zu speichern, damit Ressourcen bei wiederholten Besuchen nicht von Grund auf heruntergeladen werden. Informationen dazu finden Sie in diesem Handbuch zum HTTP-Caching .

0) Umgang mit Offscreen-Bildern

Offscreen-Bilder sind diejenigen, die unter der Falte erscheinen. Aus diesem Grund müssen sie beim ersten Laden der Seite nicht heruntergeladen werden. Daher ist es nur richtig, die Last zu verschieben, um die Seitengeschwindigkeit und die Zeit für die Interaktion zu verbessern.

Wie optimieren?

Grundsätzlich besteht die beste Strategie darin, Bilder vor dem Off-Fold-Modus vor dem Offscreen-Download herunterzuladen und Bilder unterhalb des Faltblocks nur dann herunterzuladen, wenn ein Benutzer sie erreicht. Diese Technik wird als Lazy Loading bezeichnet . 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 einem bestimmten URL navigiert, um auf bestimmte Inhalte zuzugreifen, stellt der Browser eine Netzwerkanfrage, um diesen Inhalt 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. Dieser Vorgang kann manchmal zu lange dauern. Daher ist die Optimierung der Antwortzeit des Servers eine der Möglichkeiten, um die Zeit zu reduzieren, die Benutzer mit dem Laden von Seiten verbringen.

Wie optimieren?

Das Unangenehmste an diesen Antwortverzögerungen ist, dass es eine große Auswahl an Gründen gibt, die sie verursachen können. Dies können beispielsweise langsames Routing, langsame Anwendungslogik, CPU-Ressourcenstau, langsame Datenbankabfragen, Speicherstillstand, langsame Frameworks usw. sein.

Halten Sie Ihre Finger mit diesen Parametern am Puls der Zeit und versuchen Sie, die Reaktionszeit unter 200 ms zu halten.

12) Beseitigen Sie Render-Blocking-Ressourcen

Es wird dringend empfohlen, nur die wichtigsten externen Skripts zu belassen, da sonst zusätzliche Roundtrips hinzugefügt werden, um die Seite vollständig zu rendern.

Wie optimieren?

Wenn die externen Skripts klein sind, können Sie sie direkt in das HTML-Dokument einbetten, um zusätzliche Netzwerkanforderungen zu vermeiden. Beachten Sie, dass das Inlining die Größe Ihres HTML-Dokuments vergrößert. Deshalb sollten Sie es nur mit kleinen Skripten machen. Wenn es um nicht kritische HTML-Importe geht, empfiehlt Google, sie mit dem Attribut async zu kennzeichnen. Dadurch werden Ihre Skripts asynchron mit dem Rest der Seite geladen (das Skript wird ausgeführt, während die Seite die Analyse fortsetzt) und hat keinen großen Einfluss auf die Gesamtgeschwindigkeit. Beachten Sie jedoch, dass dies nur für die Skripts erfolgen sollte, die nicht für das erstmalige Laden der Seite erforderlich sind.

Apropos Stylesheets: Es ist schön, Ihre Styles in verschiedene Dateien aufzuteilen und jedem Stylesheet-Link ein Medienattribut hinzuzufügen. Wenn Sie dies tun, blockiert der Browser nur die erste Farbe, um die Stylesheets abzurufen, die dem Gerät eines Benutzers entsprechen.

13) Verwenden von Videoformaten für animierte Inhalte

Glauben Sie es 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-intensive Animationen in Videos konvertieren.

Wie optimieren?

Der schnellste Weg, GIFs in Video zu konvertieren, ist das Werkzeug 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 breiteste Unterstützung für Browser bietet .

Sie können auch ein relativ neues WebM-Format ausprobieren, das von Google entwickelt wurde (genau wie WebP für Bilder). Die Browser-Unterstützung für WebM ist zwar nicht so breit wie für MPEG-4, ist jedoch hinsichtlich der Komprimierungseigenschaften immer noch sehr gut.

Da Sie mit dem <video> -Element mehrere <source> -Elemente angeben können, können Sie den Trick ausführen, indem Sie eine Präferenz für eine WebM-Quelle festlegen, die viele Browser verwenden können, während Sie auf eine MPEG-4-Quelle zurückgreifen, die von allen anderen Browsern verstanden wird.

14) Vorverbindung zu den erforderlichen Ursprüngen

Das Herstellen von Verbindungen, besonders sicheren, ist in der Regel sehr zeitaufwändig. Die Sache ist, es erfordert DNS-Lookups, SSL-Handshakes, den Austausch geheimer Schlüssel und einige Roundtrips zu dem letzten Server, der für die Anfrage des Benutzers verantwortlich ist. Um diese kostbare Zeit zu sparen, können Sie sich also vorab mit den erforderlichen Ursprungsverbindungen verbinden.

Wie optimieren?

Um Ihre Website 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 den Verbindungsaufbau mit dem erforderlichen Server aufwenden, sodass Ihre Benutzer nicht auf mehrere zusätzliche Roundtrips warten müssen.

15) Bilder in Next-Gen-Formaten bereitstellen

Nicht alle Bildformate werden gleich erstellt. Die Wahrheit ist, dass unsere alten, vertrauensvollen JPEG- und PNG-Formate im Vergleich zu JPEG 2000, JPEG XR und WebP wesentlich schlechtere Komprimierungs- und Qualitätseigenschaften aufweisen. Ich versuche also zu sagen, dass das Kodieren Ihrer Bilder in diesen Formaten das Laden beschleunigt und weniger Mobilfunkdaten verbraucht.

Wie optimieren?

Genau wie bei den zuvor besprochenen Videoformaten müssen Sie sicherstellen, dass Ihre Bilder für alle Besucher sichtbar sind. Dazu können Sie das Element <picture> verwenden, mit dem Sie mehrere alternative Bildformate nach Priorität auflisten können. Auch wenn der Browser eines Benutzers ein bestimmtes Format nicht unterstützt, kann er zum nächsten angegebenen Format wechseln und ein Bild richtig anzeigen.

16) Sicherstellung der Textsichtbarkeit während des Ladens von Webfont

Alle Websitebesitzer wollen sich mit ihren super coolen benutzerdefinierten Schriftarten hervorheben. Das einzig schlechte daran ist, dass das Laden von Schriftarten zu lange dauern kann. Wenn dies der Fall ist, ersetzt der Browser Ihre Schriftart durch eine Fallback-Schriftart (z. B. Arial oder Times New Roman).

Wie optimieren?

Es handelt sich nicht um einen Optimierungstipp. Wenn Sie jedoch nicht möchten, dass Ihr Inhalt nicht ordnungsgemäß angezeigt wird, müssen Sie sicherstellen, dass er mit einigen einfachen Fallback-Schriftarten wie Arial oder Georgia (insbesondere auf mobilen Geräten) gut aussieht. Danach können Sie sicher sein, dass Benutzer Ihren Inhalt tatsächlich lesen können und Ihre Seite richtig aussieht.

17) Main-Thread-Arbeit minimieren

Wenn Sie eine bestimmte Seite herunterladen, führt Ihr Browser gleichzeitig mehrere Aufgaben aus, z. B. Skriptanalyse und -zusammenstellung, Rendern, HTML- und CSS-Analyse, Speicherbereinigung, Skriptauswertung usw.

Wie optimieren?

Manchmal kann es ziemlich schwierig sein, herauszufinden, wo die CPU-Zeit mit dem Laden einer Seite verbracht wurde. Glücklicherweise können Sie jetzt mit Hilfe der neuen Überwachungsfunktion „Main Thread Work Breakdown“ von Lighthouse deutlich sehen, wie viel und welche Art von Aktivität während des Ladens einer Seite auftritt. Auf diese Weise erhalten Sie ein Verständnis für das Laden von Leistungsproblemen in Bezug auf Layout, Skripteval, Parsen oder andere Aktivitäten.

18) Reduzierung der JavaScript-Ausführungszeit

JavaScript beeinflusst direkt die Ladeleistung Ihrer Seite. Aus diesem Grund ist es wichtig, die Zeit für das Analysieren, 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 Code-Kommentare und nicht verwendeten Code zu entfernen. Minimieren Sie anschließend Ihr JavaScript so weit wie möglich und zwischenspeichern Sie es, um zusätzliche Netzwerkreisen zu vermeiden. Fortgeschrittene Entwickler ziehen es vor, kompliziertere Techniken zu verwenden, wie z. B. langsames Laden, Tree Shaking zum Entfernen von Code oder Funktionen wie V8s Code-Cache .

19) Implementieren einer Caching-Richtlinie

Wenn ein Browser eine Ressource anfordert, kann der Server, der die Ressource bereitstellt, den Browser für einen bestimmten Zeitraum speichern. Für alle wiederholten Besuche verwendet der Browser daher eine lokale Kopie, anstatt sie von Grund auf abzurufen.

Wie optimieren?

Um automatisch zu steuern, wie und wie lange die einzelnen Antworten vom Browser zwischengespeichert werden können, verwenden Sie die Cache-Steuerung .

Vergessen Sie nicht nur das HTTP-Caching, das Bestimmen der optimalen Lebensdauer für Skripts (max-age) und die Bereitstellung von Validierungs-Token (ETag), sondern auch das Service Worker- Caching, einschließlich des oben genannten V8-Code-Caching .

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

Ein zu großer DOM-Baum mit komplizierten Stilregeln kann sich negativ auf die Geschwindigkeit, die Laufzeit und die Speicherleistung auswirken. Es empfiehlt sich, eine DOM-Struktur zu verwenden, die insgesamt weniger als 1500 Knoten umfasst, eine maximale Tiefe von 32 Knoten und keinen übergeordneten Knoten mit über 60 untergeordneten Knoten hat.

Wie optimieren?

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

21) Minimierung der Tiefe kritischer Anforderungen

Die Critical Request Chain (Kritische Anforderungskette) ist Teil der Critical Rendering Path (CRP) -Strategie, deren Kernidee das Priorisieren des Ladens bestimmter Ressourcen und das Ändern der Reihenfolge, in der sie geladen werden. Obwohl die Critical Request Chain die wichtigsten Ressourcen herunterladen soll, können sie dennoch minimiert werden.

Wie optimieren?

Leider gibt es keine einheitlichen Ratschläge, wie Sie die Tiefe kritischer Anforderungen genau für Ihre Website minimieren können (genau wie bei vielen der oben genannten Faktoren). Es ist jedoch immer gut, die Länge Ihrer Ketten zu minimieren, die Größe der heruntergeladenen Ressourcen zu verringern und, wie immer, den Download unnötiger Ressourcen zu verzögern.

22) Benutzer Timing Markierungen und Maßnahmen

Wie bereits erwähnt, sind JavaScript-Probleme häufig der Grund für das langsame Laden von Seiten. Und oft haben Entwickler Schwierigkeiten, die genaue Schwachstelle in ihren JavaScripts zu finden. Glücklicherweise ist es mit der User Timing API kein Problem mehr. Der Hauptzweck dieses Services besteht im Wesentlichen darin, die JavaScript-Leistung Ihrer App zu messen, sodass Sie wissen, welche Teile Ihrer Skripts hinterherhinken und optimiert werden müssen.

Wie optimieren?

Um die Leistung Ihrer App in Bezug auf JavaScript zu messen, müssen Sie lediglich über die API auf die Ergebnisse von JavaScript zugreifen. Nachdem Sie Verbesserungsbereiche identifiziert haben, können Sie diese beheben. Hier ist eine nette Anleitung für Sie, um mit der User Timing API zu beginnen .

Fazit – PageSpeed Performance Optimierung

Ich weiß, dass es ein langer Artikel war, der mit Tonnen von technischem Material gefüllt war. Ich würde jedoch nachdrücklich empfehlen, die technische Seite der Seitengeschwindigkeitsoptimierung wirklich ernst zu nehmen, da dies Ihren Geschwindigkeitsergebnis bisher am meisten beeinflusst. Darüber hinaus sollten Sie die realen Messungen von CrUX im Auge behalten. Denn selbst wenn Sie ein Ergebnis von 100 Punkten bei der Messung haben, kann Ihre Webseite aufgrund einer schlechten Internetverbindung oder alter Geräte für Benutzer langsam erscheinen.