So beseitigen Sie Render-Blocking-Ressourcen | WP-Buffs

Wenn Sie Beschwerden über die Ladegeschwindigkeit Ihrer Website hören oder Ihre Webseiten schneller laden und Ihre Benutzererfahrung verbessern möchten, sollten Sie überlegen, wie Sie Render-Blocking-Ressourcen eliminieren können.

Unabhängig vom Grund kann die Geschwindigkeit, mit der eine Website vor dem Gesicht des Besuchers erscheint, die Benutzererfahrung beeinträchtigen und dazu führen, dass Ihrem Unternehmen Kundenverbindungen entgehen. Die Website-Erfahrung des Benutzers hängt hauptsächlich vom kritischen Rendering-Pfad und der Verwaltung der Skripts ab, die Ihre Website während des Rendering-Prozesses lädt.

Was ist Rendern?

Alle Websites folgen einem Pfad, auf dem der Benutzer den Inhalt sehen und mit ihm interagieren kann. Der Pfad zum Laden der Website wird als kritischer Rendering-Pfad bezeichnet. Dieser Pfad beschreibt die Schritte jeder Website zum Sammeln und Erstellen von Daten für den Besucher und seinen Browser.

Was Browser vor dem Rendern tun

Die Eingabe einer Website-URL löst den folgenden Prozess aus:

1. Die Navigation ist abgeschlossen, wenn ein Benutzer eine bestimmte URL anfordert.
   1. Es findet ein DNS-Lookup statt, bei dem ein Server eine IP-Adresse bereitstellt
   2. Der Browser und der Website-Server führen einen TCP-Handshake durch, um eine Verbindung herzustellen
   3. Sichere Verbindungsanforderungen erhalten eine TLS-Aushandlung oder einen zweiten Handshake-Austausch
2. Der Browser erhält eine Antwort und erhält den Code der Website
   1. Das erste Datenpaket wird in einem TCP Slow Start empfangen, um den Netzwerkverkehr zu regulieren
   2. Der Benutzer sendet Bestätigungen (ACKs) an den Server, um die Verbindungsbeschränkungen und Senderaten festzulegen.
3. Der Browser analysiert die Informationen und wandelt die Daten in ein CSS-Objektmodell (CSSOM) und ein Dokumentobjektmodell (DOM) um.
   1. Der DOM-Baum wird erstellt (Site- und Seitenstruktur)
   2. Ein Preload-Scanner sammelt externe Ressourcen wie Skripte und Bilder.
   3. Das CSSOM wird erstellt (Stilbaum)
   4. JavaScript wird kompiliert, während das CSSOM erstellt wird
   5. Das Accessibility Object Model (AOM) wurde für Hilfsgeräte zum Interpretieren von Inhalten entwickelt.
4. Das Rendern erfolgt unter Verwendung der zuvor erstellten CSSOM- und DOM-Bäume.

Was passiert, wenn Sie eine Seite rendern?

Websites werden durch Codedesign gerendert, um das Layout, den Stil, die Malerei und manchmal das Compositing auf einer Website zu vervollständigen. Das CSS-Objektmodell (CSSOM) und das Dokumentobjektmodell (DOM)

Stil

DOM und CSSOM werden zu einem Renderbaum kombiniert, und die Konstruktion beginnt. Die Renderstruktur organisiert die sichtbaren Knoten, Inhalte und berechneten Stile für die Site und jeden eindeutigen Knoten.

Layout

Das Layout ist der Schritt, in dem Architektur auf Konstruktion trifft und eine Struktur für die Seite erstellt wird, um die Breite, Höhe und Position aller Knoten in der Renderstruktur anzuzeigen. Jedes Objekt wird in Größe und Position bestimmt.

Websites werden in einer Kastenstruktur angelegt. Diese Boxen können an eine unbegrenzte Anzahl verschiedener Darstellungsfenstergrößen angepasst werden. Wenn sich die Boxstruktur für die Größenanpassung ändert, wird dies als Reflow bezeichnet.

Lackierung: First Paint und First Contentful Paint (FCP)

Der Moment, in dem ein Website-Browser eine Seite rendert, wird als „First Paint“ bezeichnet. First Paint kann nur in Abhängigkeit vom Code der Seite eine einfarbige Hintergrundfarbe sein.

First Contentful Paint (FCP) bezeichnet den messbaren Moment, in dem ein Website-Besucher Inhalte auf Ihrer Seite (Texte, Bilder, Videos etc.) sehen kann. Der FCP misst vom Beginn des Ladens Ihrer Seite bis zu dem Punkt, an dem Inhalte gerendert werden.

First Paint und FCP sind nicht dasselbe wie eine schnell ladende Seite oder eine schnelle Leistung, aber die Benutzererfahrung wird messbar positiver, wenn Website-Besucher eine schnell ladende Seite wahrnehmen. Durch die Feinabstimmung Ihrer First Paints, der Ladezeit und der Websiteleistung wird die Wahrnehmung der Ladezeit durch den Benutzer verbessert.

Zusammensetzen

Webseiten verwenden Ebenen, in denen sich Objekte überlappen, um die Struktur zu organisieren. Beim Compositing berechnet die Seite die Reihenfolge der Dinge, um sie korrekt wiederzugeben.

Reflows lösen eine Neuzusammenstellung aus, da sich die Objektpositionierung bei einem Reflow häufig ändert.

Was sind Render-Blocking-Ressourcen?

Skripte, Stylesheets und HTML-Importe, die den Browser verlangsamen, verzögern oder daran hindern, Inhalte auf einer Website wiederzugeben, sind Ressourcen, die das Rendern blockieren. Wenn Leute auf Render-Blocking-Ressourcen verweisen, beziehen sie sich normalerweise auf:

• CSS
• JavaScript im Abschnitt <head>
• Schriftarten, die von einem Server oder Content-Delivery-Netzwerk geladen werden
• HTML-Importe (alte Seiten)

Es gibt viele CSS- und JavaScript-Elemente, die nicht renderblockierend sind und unbedingt ganz oben geladen werden müssen. Priorisieren Sie Stylesheets, um sicherzustellen, dass jeder Site-Besucher den beabsichtigten Inhalt sieht, anstatt nicht formatierten Inhalt oder gar nichts.

Was ist Renderblocking von JavaScript und CSS?

Während des Rendering-Prozesses lädt Ihr Browser die Website-Informationen, indem er zuerst die Informationen im <head> durchläuft, einschließlich aller Skripte. Die Skripte müssen alle der Reihe nach ausgeführt und vollständig verarbeitet werden, bevor die Seite in Ihrem Browser sichtbar ist.

Skripte werden in eine Warteschlange eingebaut, daher ist die Skriptreihenfolge im <head> während der Entwicklung von entscheidender Bedeutung. Je nach Code kann es das vollständige Laden Ihrer Website verlangsamen oder verhindern, und dies bezeichnen wir als renderblockierendes CSS und JavaScript.

Skripte auf Ihrer WordPress-Website können aus Themen, benutzerdefinierten Arbeiten oder Plugins stammen, die für verschiedene Funktionalitäten hinzugefügt wurden.

Sind Bilder Render-Block-Ressourcen?

Wenn Sie sich fragen, ob Bilder Render-Blocking-Ressourcen sind, sind sie es nicht. Die Größe eines Bildes kann immer noch Ladeprobleme auf Ihrer Seite verursachen, aber es sollte das Rendering nicht blockieren.

Warum Render-Blocking-Ressourcen eliminieren?

Render-blockierende Skripte können die Ladezeiten von Seiten verlangsamen und eine Website-Erfahrung für Ihre Besucher ruinieren. Die Wahrnehmung einer langsamen Website kann zu Besucherverlusten führen, wenn Ihre Website-Erfahrung schlecht ist. Eine geringe Besucherbindung kann sich auf Ihre Suchmaschinenergebnisse auswirken und Ihre Ergebnisliste senken.

Niedrigere Platzierungen bei der Suchmaschinenoptimierung (SEO) bedeuten eine Verringerung der Besucherzahlen und den Verlust potenzieller Geschäfte. Der Verlust von Rankings verringert Ihre Besucherzahl und eine schlechte Website verringert Ihre Besucherbindung. Render-Blocking-Ressourcen können ein großes Problem sein.

Wenn Ihre Website einen hohen Google PageSpeed ​​Score zum Ziel hat, ist das Verständnis Ihrer Render-Blocking-Ressourcen der Schlüssel zum Erreichen dieses Ziels.

So beseitigen Sie Render-blockierende Ressourcen

Um die SEO-Rankings und die Benutzererfahrung Ihrer Website ernst zu nehmen, müssen Ressourcen, die das Rendering blockieren, auf Ihrer Website behandelt oder entfernt werden. Wenn Sie Ihre Website nicht von Grund auf neu erstellen, beginnen Sie damit, Ihre Website auf Ressourcen zu testen, die das Rendern blockieren.

Sobald Sie diese Render-Blocking-Ressourcen identifiziert haben, wählen Sie Ihre Methode, um das Problem zu beheben und die Funktionalität Ihrer Website zu verbessern.

Testen Sie, ob Ihre Website Render-Blocking-Ressourcen hat

Es schadet nie, eine Bewertung auf Ihrer Website durchzuführen, um Ressourcen zu entdecken, die das Rendering blockieren (versuchen Sie es mit Google PageSpeed ​​Insights). Wenn Sie nach besten Kräften optimiert haben, Best Practices befolgen und immer noch Probleme haben oder nicht wissen, wo Sie anfangen sollen, können Seitenbewerter hilfreich sein.

Methoden zum Eliminieren von Render-blockierendem JavaScript und CSS

Mit WordPress können Sie alle Ressourcen, die der Darstellung Ihrer Website im Wege stehen, auf verschiedene Arten verwalten. Mit WordPress können Sie Ihre Rendering-blockierenden Skripte und Links mit Code, Tags, Dateiorganisation und -optimierung sowie Plugins organisieren.

Professionelle Entwickler können auch benutzerdefinierte Plugins oder Designs erstellen, die diese Prozesse in den Code einbauen.

Renderblockierendes Javascript mit Code entfernen

Drei Methoden, um Render-Blocking-Ressourcen über Code zu adressieren, sind:

1. Verschieben Sie Tags für <script> und <link> an das Ende Ihres HTML-Codes
2. Fügen Sie dem Tag für nicht kritische Skripts asynchrone oder zurückgestellte Attribute hinzu.
3. Entfernen Sie nicht verwendeten JavaScript-Code.

WordPress lädt eine jQuery Migrate-Datei, um die Kompatibilität mit alten Versionen von jQuery zu gewährleisten, die von Plugins und Themes verwendet werden. Sie können ein Stück Code oder ein Plugin verwenden, um WordPress daran zu hindern, diese jQuery Migrate-Datei zu laden, wenn nichts auf Ihrer Website sie zum Funktionieren benötigt.

Beseitigen Sie Render-blockierende Stylesheets

Die Natur von Stylesheets macht sie von Natur aus zu renderblockierenden Ressourcen. Sie können dies auf Ihrer Website folgendermaßen angehen:

1. CSS nach Medientyp aufteilen (Mobil, Tablet, Desktop usw.)
2. Optimieren Sie den kritischen Renderpfad
3. Kombinieren Sie CSS-Dateien

Mit WordPress und einem visuellen Builder können Sie möglicherweise nicht direkt steuern, wie eine Seite erstellt wird, aber es gibt Möglichkeiten, jedes Problem zu umgehen.

Adressieren Sie Render-Blocking mit einem WordPress-Plugin oder einer Erweiterung

WordPress-Plugins und -Erweiterungen werden zum Organisieren der Skripte auf einer Seite verwendet. Plugins durchlaufen die <script>- und <link>-Tags Ihrer Seite und wenden die defer- oder async-Attribute basierend auf bestimmten Richtlinien an.

Wir haben eine Reihe von Plugins für WordPress durchgesehen und getestet und teilen weiterhin nützliche Dinge wie unsere Lieblings-Plugins zur Geschwindigkeitsoptimierung im Blog.

Lassen Sie Render-Blocking-Ressourcen von einem WordPress-Profi für Sie eliminieren

Einige Plugins müssen angepasst werden und können, obwohl sie einfach erscheinen, bei falscher Einrichtung nicht funktionieren. Es ist keine Schande, einen WordPress-Profi um Hilfe zu bitten, und WP Buffs hat mehrere Spezialisten, die Ihre Website optimieren können.

Best Practices zur Optimierung des Renderings

1. Bündeln Sie Ihre Render-Blocking-Ressourcen, um deren Auswirkungen auf das Laden der Seite zu verringern.
2. Reduzieren Sie die Größe der Ressource, sodass die Anzahl der zu ladenden Bytes verringert wird.
3. Verzögern Sie den Download von nicht renderblockierenden Ressourcen.
4. Fügen Sie kein CSS mit der @import-Regel hinzu, da es sich um eine externe Last handelt.
5. Verwenden Sie ein WordPress-Plugin, das entwickelt wurde, um Ihre Skripte zwischenzuspeichern und Ihr JavaScript und CSS zu optimieren.
6. Laden Sie benutzerdefinierte Schriftarten lokal.
7. Identifizieren Sie kritisches und unkritisches CSS und JavaScript.
8. Markieren Sie unkritischen Render-Blocking-Code mit async- oder defer-Attributen.
9. Nicht verwendeter Code sollte entfernt werden.

Beseitigen Sie die Kopfschmerzen und lassen Sie sich von einem WordPress-Profi helfen

WP Buffs sind erfahren darin, WordPress-Sites zu optimieren und die Seitenleistung zu verbessern. Wir verstehen, warum Leistung für Ihr Unternehmen wichtig ist und auf welche Bereiche Sie sich konzentrieren müssen, um die größte Wirkung zu erzielen.

Die Verbesserung der Leistung und des Besuchererlebnisses Ihrer Website kann mehr sein als nur Ressourcen zum Blockieren des Renderings. WP Buffs können sich Ihre Website und Adresse ansehen:

• Bildgrößen
• Bildqualität und Lieferformat
• Seitenlänge und Prozentsatz dynamischer Inhalte
• Schlecht gebaute Themen
• Unnötige Skripte, die Verzögerungen verursachen
• Plugins, die schlecht gebaut sind
• Unbenutzte externe Skripte
• Veraltete Software
• Begrenzter Webhosting-Plan, der die Anforderungen der Website nicht ausreichend unterstützen kann

WordPress kann eine recht einfache Plattform zum Erstellen einer Website sein, aber die Maximierung der Benutzererfahrung kann einen geschulten Fachmann oder oft einen großartigen Dienstleister erfordern.

Häufig gestellte Fragen