In der heutigen wettbewerbsorientierten digitalen Landschaft ist die Website-Geschwindigkeit sehr wichtig, wenn es um den Erfolg eines Online-Geschäfts geht. Suchmaschinengiganten wie Google priorisieren schnell ladende Websites und erkennen die Notwendigkeit einer nahtlosen Benutzererfahrung.
Studien zufolge steigern schnellere Seitenladevorgänge die Benutzerinteraktion und die Konversionsraten. Tatsächlich kann eine Verzögerung von einer Sekunde beim Laden einer Seite zu einem Rückgang der Client-Conversions um 7 % führen. Angesichts dessen ist es offensichtlich, dass Website-Besitzer einen hohen Fokus auf die Website-Performance legen sollten.
Google nimmt die Website-Performance ernst und berücksichtigt sie bei der Bestimmung der Suchergebnisse. Folglich ist es wahrscheinlicher, dass Websites, die schnell geladen werden, zuerst in den Suchergebnissen erscheinen, mehr Besucher anziehen und schließlich mehr Umsatz generieren. Aber wie können Sie die Anforderungen von Google erfüllen und Ihre Website schnell laden?
Sie werden Ressourcen los, die die Ladezeit einer Website möglicherweise blockieren, wie z. B. CSS- und JavaScript-Dateien.
Das Entfernen dieser Ressourcen kann jedoch schwierig und zeitaufwändig sein, insbesondere für Personen, denen es an technischen Fähigkeiten mangelt.
In diesem Artikel erklären wir Render-Blocking-Ressourcen und wie sie sich auf die Leistung der Website auswirken, und bieten eine Schritt-für-Schritt-Anleitung, um sie von Ihrer WordPress-Site zu entfernen. Beginnen wir also mit der Optimierung Ihrer Website für Geschwindigkeit und Erfolg!
Inhaltsverzeichnis
Renderblockierende Ressourcen
Jede Ressource, die geladen werden muss, bevor eine Webseite angezeigt werden kann, wird als Render-Blocking-Ressource betrachtet. Diese Ressourcen beeinflussen die Leistung und Effektivität einer Website und verlängern die Zeit, die zum Laden einer Seite benötigt wird.
Eine CSS- oder JavaScript-Datei kann als Ressource betrachtet werden, die das Rendern blockiert, wenn diese Datei das Rendern einer Webseite blockiert. Die Bedeutung des Ladens der Seite kann jedoch je nach unmittelbarer Notwendigkeit variieren.
Wenn ein Benutzer auf eine Seite zugreift, verarbeitet der Browser zunächst den HTML-Code, um dessen Inhalt „above the fold“ anzuzeigen. Wenn der Browser auf CSS- und JavaScript-Dateien trifft, lädt er sie herunter und verarbeitet sie ebenfalls. Wenn die Ressourcendateien zusätzliche Codes oder ungenutzte Teile enthalten, dauert das Laden der Webseite länger.
Arten von Render-Blocking-Ressourcen
Im Allgemeinen gelten Ressourcendateien wie CSS und JavaScript in WordPress als Ressourcen, die das Rendern blockieren. Der Browser betrachtet diese Ressourcen als kritisch und muss geladen werden, bevor die Seite angezeigt werden kann. Aber das ist es nicht; Es gibt weitere Ressourcendateien, die das Rendern einer Webseite blockieren.
Hier ist eine Liste von Render-Blocking-Ressourcen:
CSS-Stylesheets
Design und Darstellung einer Webseite werden durch CSS-Stylesheets bestimmt. Eine CSS-Datei wird als Render-Blocking-Ressource betrachtet, wenn sie im
-Abschnitt einer HTML-Seite platziert wird.JavaScript-Dateien im Abschnitt
JavaScript ist eine Skriptsprache, die verwendet werden kann, um eine Webseite mit dynamischem Verhalten und Interaktion bereitzustellen. Eine JavaScript-Datei wird als Ressource betrachtet, die das Rendering blockiert, wenn sie im
-Abschnitt einer HTML-Seite platziert wird.Schriftarten
Texte auf einer Webseite werden mit unterschiedlichen Schriftarten dargestellt. Schriftarten werden auch als Render-Blocking-Ressource betrachtet, wenn sie im
-Abschnitt einer HTML-Seite enthalten sind und von einem lokalen Server oder einem CDN geladen werden.HTML-Importe
Dies sind die älteren HTML-Funktionen, mit denen Webseiten Elemente aus anderen HTML-Dokumenten enthalten können. Obwohl HTML-Importe nicht mehr so oft verwendet werden, können sie immer noch auf bestimmten älteren Websites zu sehen sein. HTML-Importe gelten auch als Render-Blocking-Ressourcen.
Warum Render-Blocking-Ressourcen für Webseiten schrecklich sind
Wenn Ihre WordPress-Site Render-Blocking-Ressourcen enthält, geraten Sie in den Suchergebnissen ins Hintertreffen. Selbst wenn Sie derzeit an vorderster Front stehen, werden Websites mit besserer Leistung Sie schließlich überwältigen.
Websites mit Ressourcen, die das Rendern blockieren, laden zusätzliche Dateien, während die Website gerendert wird. Bevor die Website angezeigt wird, müssen Benutzer warten, während die Dateien verarbeitet werden. Die folgenden Leistungsindikatoren für Websites werden von diesen Ressourcen beeinflusst:
- Largest Contentful Paint: Dies bestimmt, wie lange es dauern würde, den Hauptinhalt der Seite zu laden.
- First Contentful Paint: Die Zeit, die ein Browser benötigt, um den ersten Document Object Model (DOM)-Inhalt auf Ihrer Website zu erstellen.
- Gesamtblockierungszeit: Dies bewertet, wie viel Zeit vom Frist Contentful Pianto bis zur vollständigen Interaktivität einer Seite benötigt wird.
Obwohl Render-Blocking-Ressourcen zum Laden nicht erforderlich sind, können sie das Rendern einer Website oder Webseite behindern. Daher ist es wichtig, solche Ressourcen zu entfernen, um zu verhindern, dass Benutzern die Navigation auf Ihrer Website erschwert wird.
Schauen wir uns genauer an, warum Renderblocking ein ernstes Problem für die Webseiten ist:
Langsame Seitenladezeit
Render-Blocking-Ressourcen führen dazu, dass die Website langsamer geladen wird, was einer der Hauptnachteile ist. Eine Webseite wird langsam geladen, wenn sie Ressourcendateien mit unnötigen Elementen enthält. Daher wirkt sich dies auf das Erscheinungsbild der Suchergebnisse aus, verringert die Benutzerinteraktion und erhöht die Absprungrate.
Blockiertes Rendern
Häufig stoppt ein Browser das Rendern einer Webseite, wenn er auf Render-Blocking-Ressourcen stößt, weil er möchte, dass die Render-Blocking-Ressourcen abgerufen und verarbeitet werden.
Letztendlich werden sich die Benutzer ärgern und Ihre Website verlassen, weil die Seite nicht reagiert oder langsam gerendert wird.
Wenn eine Ressource langsam geladen wird, kann der Browser außerdem aufgeben und den Versuch, sie zu laden, stoppen. Dies kann zu fehlerhaften Seiten oder fehlenden Informationen führen.
Verringertes Benutzerengagement
Wenn Rendering-Verzögerungen auftreten, verschlechtert sich damit die Benutzererfahrung. Benutzer erwarten immer schnelle Ladezeiten und verlassen normalerweise eine langsam ladende Website. Sie landen also auf einer Website, die schneller geladen wird.
Langsam ladende Websites wirken sich nachteilig auf die Kundenzufriedenheit und den Ruf der Marke aus. Damit sinken auch der Website-Traffic und die Conversion-Rate drastisch.
Es gibt verschiedene Ansätze, um Render-blockierende Ressourcen aus WordPress zu entfernen. Wir werden Ihnen jedoch manuelle Methoden vorstellen, um Render-Blocking-Ressourcen zu eliminieren. Dann zeigen wir Ihnen, wie Sie dies mit einigen der renommierten Plugins in WordPress tun können.
Beseitigen Sie Render-Blocking-Ressourcen manuell
Sie können es vermeiden, es manuell zu tun, also seien Sie nicht frustriert. Aber das Durchgehen dieses Abschnitts wird Ihnen sicherlich dabei helfen, einige WordPress-Leistungsoptimierungstechniken zu lernen. Aber schauen Sie sich zuerst dieses Video an, um sich mit den besprochenen Begriffen vertraut zu machen.
#1. Identifizieren Sie Render-Blocking-Ressourcen
Sie müssen zuerst die Render-Blocking-Ressourcen herausfinden, bevor Sie diese von Ihrer Website entfernen. Befolgen Sie einfach diese Schritte, um die Render-Blocking-Ressourcen auf Ihrer WordPress-Website herauszufinden:
- Gehen Sie zu Google PageSpeed Insights.
- Geben Sie die URL Ihrer Website in die Suchleiste ein.
- Klicken Sie auf die Schaltfläche „Analysieren“, um Einblicke in Ihre Website zu erhalten.
- Scrollen Sie nach unten und sehen Sie sich den Abschnitt „Möglichkeiten“ an.
- Wenn Ihre Seite Ressourcen enthält, die das Rendering blockieren, werden diese aufgelistet.
#2. Verwenden der Attribute „Defer“ und „Async“ für JS
Nachdem Sie die Render-Blocking-Ressourcen identifiziert haben, ist es an der Zeit, sie für eine bessere Website-Performance zu eliminieren. Von verschiedenen Methoden ist die Verwendung der „defer“- oder „async“-Methode für JavaScript-Dateien ein Ansatz, um dies zu tun.
Wenn es um das Attribut „defer“ geht, ermöglicht es dem Browser, die JS-Datei herunterzuladen und dann auszuführen. Aber es passiert, wenn die Seite fertig geladen ist und bereit ist, ihren Inhalt anzuzeigen.
Die restlichen Elemente auf der Seite können also parallel zur JavaScript-Datei geladen werden. Dadurch verkürzt sich die Ladezeit der Seite.
Ein weiterer Ansatz ist das „async“-Attribut, das es dem Browser ermöglicht, die JS-Datei herunterzuladen, wann immer sie verfügbar ist. Dies geschieht, ohne andere Elemente der Seite zu blockieren. Folglich kann die JS-Datei parallel zu anderen Elementen geladen werden, wodurch der Ladevorgang beschleunigt wird.
Sie können Render-Blocking-Ressourcen loswerden und die Geschwindigkeit Ihrer Website erhöhen, indem Sie entweder das Attribut „defer“ oder „async“ verwenden.
#3. Verwenden des „Media“-Attributs für bedingtes CSS
Die Verwendung der „media“-Attribute für bedingtes CSS ist ein weiterer Ansatz zur Eliminierung von Render-Blocking-Ressourcen. Mit diesem Attribut können Sie eindeutige CSS-Dateien für Desktop- und mobile Browser definieren.
Sie können beispielsweise eine CSS-Datei für Desktop-Geräte und eine andere CSS-Datei für Mobilgeräte einschließen. Sie können dem Browser mitteilen, dass die Desktop-CSS-Datei geladen wird, wenn über ein Desktop-Gerät darauf zugegriffen wird.
Ebenso sollte das mobile CSS nur geladen werden, wenn über mobile Geräte darauf zugegriffen wird. Indem Sie gerätespezifisches CSS für bestimmte Geräte laden, können Sie die Render-Blocking-Ressourcen reduzieren und die Ladezeit Ihrer Website erhöhen.
#4. Zurückstellen von unkritischem CSS
Versuchen Sie, nicht nur das Attribut „media“ für bedingtes CSS zu verwenden, sondern auch unkritisches CSS zurückzustellen. Für diesen Ansatz sollten Sie in erster Linie das wesentliche CSS laden. Als Nächstes laden Sie den Rest des CSS, während die Seite geladen wird.
Beispielsweise haben Sie möglicherweise eine riesige CSS-Datei, die alle Stile für Ihre Website enthält. Aber nur ein kleiner Teil dieser CSS-Datei ist erforderlich, um den Inhalt im Bereich „above the fold“ Ihrer Website anzuzeigen. Der Inhalt „above the fold“ kann schnell angezeigt werden, indem das unkritische CSS verzögert wird, und das verbleibende CSS kann geladen werden, wenn die Seite geladen wird.
#5. Entfernen von nicht verwendetem CSS und JS
Das Entfernen unnötiger CSS- und JavaScript-Dateien ist eine weitere Technik zum Entfernen von Ressourcen, die das Rendern blockieren. Diese Dateien können Ihre Seite schwerer machen und die Ladezeit verlängern.
Indem Sie nicht verwendete CSS- und JS-Dateien entfernen, können Sie die Anzahl der Render-blockierenden Ressourcen reduzieren. Sie können ganz einfach Tools wie PurifyCSS oder UnusedCSS verwenden, um ungenutzte CSS-Dateien von Ihrer Website zu entfernen.
#6. Benutzerdefinierte Schriftarten lokal laden
Benutzerdefinierte Schriftarten können auch Ressourcen enthalten, die das Rendering einschränken. Anstatt auf externe Quellen wie Google Fonts angewiesen zu sein, sollten Sie Ihre eigenen benutzerdefinierten Schriftarten lokal laden, um diese Ressourcen nicht zu benötigen.
Sie können garantieren, dass Ihre benutzerdefinierten Schriftarten schnell und effizient geladen werden, ohne die Leistung Ihrer Website zu verlangsamen, indem Sie sie lokal laden. Dies kann zu einer schnelleren, reaktionsschnelleren Website führen und die Benutzererfahrung verbessern.
#7. Minimierung von JS & CSS
Schließlich kann das Minimieren Ihrer CSS- und JavaScript-Dateien dazu beitragen, dass Ihre Website besser funktioniert. Die Minimierung entfernt unnötige Zeichen wie Leerzeichen und Kommentare aus Ihrem Code. Dadurch wird die Größe Ihrer Dateien verringert, was das Laden beschleunigt.
Um Ihre Dateien zu minimieren, können Sie Tools wie MinifyJS oder CSSNano verwenden. Bewahren Sie eine Kopie Ihrer Originaldateien auf, falls Sie jemals Änderungen daran vornehmen müssen.
Eliminieren Sie Render-Blocking-Ressourcen mit dem Plugin
In diesem Abschnitt zeigen wir Ihnen, wie Sie Render-Blocking-Ressourcen mit WordPress-Plugins eliminieren können. Diese Plugins sind in WordPress bekannt und können Ressourcen, die das Rendern blockieren, schnell entfernen. Das Beste daran ist, dass Sie die Leistung Ihrer Website sogar ohne spezielles Fachwissen verbessern können.
#1. W3 Gesamtcache
W3 Total Cache (W3TC) verbessert die gesamte Benutzererfahrung einer WordPress-Website. Es eliminiert Render-Blocking-Ressourcen und verbessert SEO, Core Web Vitals und mehr. Das Plugin nutzt Funktionen wie die Integration von Content Delivery Networks, um die Best Practices zu implementieren.
Um Render-Blocking-Ressourcen zu eliminieren, installieren und aktivieren Sie das W3 Total Cache-Plug-in und befolgen Sie diese Schritte:
- Gehen Sie im WordPress-Dashboard zum Abschnitt Leistung und klicken Sie auf Allgemeine Einstellungen.
- Aktivieren Sie unter der Überschrift „Minify“ die Option „Minify“ und wählen Sie „Manual“ als Minify-Modus aus.
- Klicken Sie nun auf Alle Einstellungen speichern.
- Sammeln Sie dann alle renderblockierenden Javascript- und CSS-Dateien über Google PageSpeed Insights.
- Anschließend gehen Sie zurück zu Leistung > Minimieren.
- Klicken Sie nun im js-Abschnitt zuerst auf Enable für die JS Minify-Einstellungen. Wählen Sie dann unter dem Abschnitt „Vorgänge in Bereichen“ die Option „Nicht blockierend“ aus, indem Sie den Typ „Verzögern“ für das Tag „Bevor “ verwenden.
- Gehen Sie nun zur JS-Dateiverwaltung, wählen Sie das von Ihnen aktivierte Thema aus und klicken Sie auf die Schaltfläche Skript hinzufügen. Sammeln Sie jetzt die Javascript-URLs, bei denen Probleme von Google PageSpeed Insights gescannt wurden. Fügen Sie die URLs wie im Bild angegeben in das dafür vorgesehene Feld ein.
- Scrollen Sie nun etwas nach unten zum CSS-Bereich. Wählen Sie Ihr Design aus dem Dropdown-Menü im Bereich CSS-Dateiverwaltung aus und klicken Sie auf Stylesheet hinzufügen. Jetzt folgen Sie einfach dem vorherigen Schritt und kopieren und fügen die von PageSpeed Insight gesammelten URLs ein, die Probleme aufweisen.
- Da alle Einstellungen konfiguriert sind, klicken Sie zum Ausführen auf die Schaltfläche Save Settings & Purge.
#2. JCH optimieren
JCH Optimize verbessert die Leistung von WordPress-Websites, gemessen durch Google PageSpeed Insight. Das Plugin verbessert First Contentful Paint (FCP), Largest Contentful Paint (LCP), Speed Index (SI), Cumulative Layout Shift (CLS), Time to Interactive (TTI) und mehr.
Dadurch werden die allgemeine Benutzererfahrung und die Leistung der Website erheblich verbessert.
Befolgen Sie nach der Installation und Aktivierung von JCH Optimize diese Prozesse, um Render-Blocking-Ressourcen zu eliminieren:
- Gehen Sie zu Einstellungen> JCH Optimize, scrollen Sie ein wenig nach unten und gehen Sie zu den Einstellungen für die Grundfunktionen.
- Aktivieren Sie die CSS-Bereitstellung optimieren, um die CSS-Rendering-Blockierung zu beseitigen. Diese Funktion bestimmt automatisch das wesentliche CSS, das zum Anzeigen des Inhalts „above the fold“ auf jeder Webseite erforderlich ist. Außerdem wird es in den -Abschnitt des HTML-Inhalts jeder Seite eingefügt.
- Der Preload-Link wird dann verwendet, um die verketteten CSS-Dateien asynchron zu laden.
- Um Javascript-Rendering-blockierende Ressourcen zu entfernen, müssen Sie die async- oder defer-Attribute in das