Die Bedeutung der Website-Geschwindigkeit und Render-Blocking-Ressourcen
In der heutigen, stark umkämpften digitalen Welt ist die Geschwindigkeit einer Website entscheidend für den Erfolg eines Online-Unternehmens. Suchmaschinen wie Google legen großen Wert auf schnell ladende Webseiten, da sie wissen, dass eine reibungslose Benutzererfahrung unerlässlich ist.
Studien zeigen, dass schnellere Ladezeiten zu einer höheren Nutzerinteraktion und besseren Konversionsraten führen. Tatsächlich kann eine Verzögerung von nur einer Sekunde beim Laden einer Seite die Konversionsrate um bis zu 7 % senken. Daher ist es für Webseitenbetreiber unerlässlich, der Performance ihrer Website höchste Priorität einzuräumen.
Google berücksichtigt die Website-Performance bei der Bestimmung der Suchergebnisse. Webseiten, die schnell laden, werden in den Suchergebnissen weiter oben platziert, ziehen mehr Besucher an und generieren somit mehr Umsatz. Doch wie können Sie die Anforderungen von Google erfüllen und sicherstellen, dass Ihre Website schnell lädt?
Eine wichtige Maßnahme ist das Entfernen von Ressourcen, die die Ladezeit einer Website möglicherweise verzögern, wie z. B. CSS- und JavaScript-Dateien.
Das Entfernen solcher Ressourcen kann jedoch schwierig sein und viel Zeit in Anspruch nehmen, insbesondere für Personen ohne umfassende technische Kenntnisse.
Dieser Artikel erläutert, was Render-Blocking-Ressourcen sind und wie sie die Leistung Ihrer Website beeinträchtigen. Außerdem geben wir Ihnen eine Schritt-für-Schritt-Anleitung, wie Sie diese von Ihrer WordPress-Website entfernen können. Lassen Sie uns Ihre Website gemeinsam für mehr Geschwindigkeit und Erfolg optimieren!
Was sind Render-Blocking-Ressourcen?
Eine Render-Blocking-Ressource ist jede Ressource, die geladen werden muss, bevor eine Webseite angezeigt werden kann. Diese Ressourcen beeinflussen die Effizienz und Geschwindigkeit einer Website und verlängern die Zeit, die zum Laden einer Seite benötigt wird.
Eine CSS- oder JavaScript-Datei kann als Render-Blocking-Ressource betrachtet werden, wenn sie das Rendern der Webseite verzögert. Die Bedeutung des Ladens einer bestimmten Ressource kann jedoch je nach ihrer unmittelbaren Notwendigkeit variieren.
Wenn ein Benutzer eine Seite aufruft, analysiert der Browser zunächst den HTML-Code, um den Inhalt oberhalb der Falte („above the fold“) anzuzeigen. Wenn der Browser auf CSS- und JavaScript-Dateien stößt, werden diese ebenfalls heruntergeladen und verarbeitet. Wenn diese Dateien unnötigen Code oder ungenutzte Teile enthalten, dauert das Laden der Webseite länger.
Arten von Render-Blocking-Ressourcen
In der Regel gelten CSS- und JavaScript-Dateien in WordPress als Render-Blocking-Ressourcen. Der Browser betrachtet sie als kritisch und muss sie laden, bevor die Seite angezeigt werden kann. Es gibt jedoch auch andere Arten von Ressourcen, die das Rendern einer Webseite blockieren können.
Hier ist eine Liste von häufigen Render-Blocking-Ressourcen:
- CSS-Stylesheets: CSS-Stylesheets bestimmen das Design und die Darstellung einer Webseite. Eine CSS-Datei gilt als Render-Blocking-Ressource, wenn sie im <head>-Bereich einer HTML-Seite platziert ist.
- JavaScript-Dateien im <head>-Bereich: JavaScript ist eine Skriptsprache, die verwendet wird, um Webseiten mit dynamischem Verhalten und Interaktionen zu versehen. Eine JavaScript-Datei gilt als Render-Blocking-Ressource, wenn sie im <head>-Bereich einer HTML-Seite platziert ist.
- Schriftarten: Text auf einer Webseite wird mit unterschiedlichen Schriftarten dargestellt. Schriftarten können auch als Render-Blocking-Ressource betrachtet werden, wenn sie im <head>-Bereich einer HTML-Seite eingebunden sind und von einem lokalen Server oder einem CDN geladen werden.
- HTML-Importe: Dies sind ältere HTML-Funktionen, die es Webseiten ermöglichen, Elemente aus anderen HTML-Dokumenten einzubinden. Obwohl HTML-Importe heutzutage weniger gebräuchlich sind, können sie immer noch auf älteren Websites vorkommen. Auch HTML-Importe gelten als Render-Blocking-Ressourcen.
Warum Render-Blocking-Ressourcen ein Problem für Webseiten sind
Wenn Ihre WordPress-Website Render-Blocking-Ressourcen enthält, kann dies zu einer schlechteren Platzierung in den Suchergebnissen führen. Selbst wenn Sie aktuell gut positioniert sind, werden Websites mit besserer Performance Sie auf Dauer überholen.
Websites mit Render-Blocking-Ressourcen laden zusätzliche Dateien, während die Seite aufgebaut wird. Benutzer müssen warten, während die Dateien verarbeitet werden, bevor die Website sichtbar ist. Dies wirkt sich negativ auf die folgenden wichtigen Leistungsindikatoren einer Website aus:
- Largest Contentful Paint (LCP): Die Zeit, die benötigt wird, um den Hauptinhalt der Seite zu laden.
- First Contentful Paint (FCP): Die Zeit, die ein Browser benötigt, um das erste Element (DOM-Inhalt) auf Ihrer Website anzuzeigen.
- Gesamtblockierungszeit (TBT): Die Zeit, die von der FCP bis zur vollständigen Interaktivität der Seite vergeht.
Obwohl Render-Blocking-Ressourcen zum eigentlichen Laden einer Seite nicht notwendig sind, können sie das Rendern der Website oder einer Webseite behindern. Es ist daher wichtig, diese Ressourcen zu beseitigen, um sicherzustellen, dass Benutzer problemlos auf Ihrer Website navigieren können.
Sehen wir uns die konkreten Probleme an, die Render-Blocking verursachen können:
Langsame Seitenladezeiten
Render-Blocking-Ressourcen führen zu langsameren Ladezeiten, was einer der größten Nachteile ist. Eine Webseite lädt langsam, wenn sie unnötige Elemente in ihren Ressourcendateien enthält. Dies beeinträchtigt die Sichtbarkeit in den Suchergebnissen, die Benutzerinteraktion und erhöht die Absprungrate.
Blockiertes Rendering
Häufig stoppt ein Browser das Rendern einer Webseite, wenn er auf Render-Blocking-Ressourcen trifft, da er diese erst herunterladen und verarbeiten möchte. Benutzer werden frustriert und verlassen die Website, wenn die Seite langsam reagiert oder verzögert angezeigt wird.
Wenn eine Ressource langsam lädt, kann der Browser zudem den Versuch abbrechen. Dies kann zu fehlerhaften Darstellungen oder fehlenden Informationen führen.
Verringertes Benutzerengagement
Wenn Rendering-Verzögerungen auftreten, verschlechtert sich die Benutzererfahrung erheblich. Benutzer erwarten schnelle Ladezeiten und verlassen langsam ladende Websites schnell. Dies führt zu geringerer Kundenzufriedenheit und einem schlechteren Markenimage. In der Folge sinken auch der Website-Traffic und die Konversionsraten.
Es gibt verschiedene Ansätze, um Render-Blocking-Ressourcen aus WordPress zu entfernen. Im Folgenden werden wir Ihnen zunächst manuelle Methoden zur Beseitigung dieser Ressourcen vorstellen. Danach zeigen wir Ihnen, wie Sie dies mithilfe einiger gängiger Plugins in WordPress bewerkstelligen können.
Manuelles Entfernen von Render-Blocking-Ressourcen
Auch wenn es kompliziert erscheinen mag, sollten Sie nicht verzweifeln. Das Durchgehen dieses Abschnitts wird Ihnen helfen, wertvolle WordPress-Leistungsoptimierungstechniken zu erlernen. Schauen Sie sich jedoch zunächst dieses Video an, um sich mit den besprochenen Konzepten vertraut zu machen.
#1. Identifizieren von Render-Blocking-Ressourcen
Bevor Sie Ressourcen entfernen können, müssen Sie diese erst identifizieren. Gehen Sie dazu wie folgt vor:
- Öffnen Sie Google PageSpeed Insights.
- Geben Sie die URL Ihrer Website in die Suchleiste ein.
- Klicken Sie auf die Schaltfläche „Analysieren“, um einen Einblick in die Performance Ihrer Website zu erhalten.
- Scrollen Sie nach unten zum Abschnitt „Möglichkeiten“.
- Falls Ihre Seite Render-Blocking-Ressourcen enthält, werden diese hier aufgelistet.
#2. Verwenden der Attribute „defer“ und „async“ für JS
Nachdem Sie die Render-Blocking-Ressourcen identifiziert haben, können Sie diese mit verschiedenen Methoden eliminieren. Eine Möglichkeit ist die Verwendung der Attribute „defer“ oder „async“ für JavaScript-Dateien.
Das Attribut „defer“ veranlasst den Browser, die JS-Datei herunterzuladen und erst auszuführen, wenn die Seite vollständig geladen ist und bereit zur Anzeige des Inhalts ist.
Die restlichen Elemente der Seite können somit parallel zur JavaScript-Datei geladen werden, was die Ladezeit der Seite verkürzt.
Das Attribut „async“ veranlasst den Browser, die JS-Datei herunterzuladen, sobald sie verfügbar ist, ohne andere Elemente der Seite zu blockieren. Auch hier werden die JS-Dateien parallel zu den anderen Elementen geladen, was den Ladevorgang beschleunigt.
Durch die Verwendung des „defer“- oder „async“-Attributs können Sie Render-Blocking-Ressourcen reduzieren und die Geschwindigkeit Ihrer Website erhöhen.
#3. Verwenden des „media“-Attributs für bedingtes CSS
Eine weitere Möglichkeit ist die Verwendung des „media“-Attributs für bedingtes CSS. Mit diesem Attribut können Sie unterschiedliche CSS-Dateien für Desktop- und mobile Browser definieren.
Beispielsweise können Sie eine CSS-Datei für Desktop-Geräte und eine weitere für Mobilgeräte einbinden. Sie können dem Browser mitteilen, dass die Desktop-CSS-Datei geladen wird, wenn die Seite von einem Desktop-Gerät aufgerufen wird. Entsprechend wird das mobile CSS nur dann geladen, wenn die Seite von einem mobilen Gerät aufgerufen wird. Durch das gerätespezifische Laden von CSS können Sie die Anzahl der Render-Blocking-Ressourcen reduzieren und die Ladezeit Ihrer Website erhöhen.
#4. Aufschieben von nicht-kritischem CSS
Neben der Verwendung des „media“-Attributs sollten Sie auch nicht-kritisches CSS aufschieben. Laden Sie in diesem Fall zunächst nur das für den ersten sichtbaren Bereich der Seite notwendige CSS. Den Rest des CSS können Sie laden, während die Seite weiter aufgebaut wird.
Beispielsweise könnte eine umfangreiche CSS-Datei alle Stile für Ihre Website enthalten. Jedoch ist nur ein Teil dieser CSS-Datei erforderlich, um den Inhalt im Bereich „above the fold“ anzuzeigen. Wenn Sie nicht-kritisches CSS verzögern, wird der sichtbare Inhalt schneller geladen, während der Rest der Seite im Hintergrund weiter aufgebaut wird.
#5. Entfernen von nicht verwendetem CSS und JS
Das Entfernen unnötiger CSS- und JavaScript-Dateien ist eine weitere effektive Methode zur Beseitigung von Render-Blocking-Ressourcen. Diese Dateien können die Seite unnötig belasten und ihre Ladezeit verlängern.
Durch das Entfernen nicht verwendeter CSS- und JS-Dateien können Sie die Anzahl der Render-Blocking-Ressourcen reduzieren. Es gibt Tools wie PurifyCSS oder UnusedCSS, die Ihnen helfen, ungenutzte CSS-Dateien zu identifizieren und zu entfernen.
#6. Lokales Laden von benutzerdefinierten Schriftarten
Auch benutzerdefinierte Schriftarten können Render-Blocking-Ressourcen darstellen. Anstatt externe Quellen wie Google Fonts zu verwenden, sollten Sie Ihre benutzerdefinierten Schriftarten lokal laden. Dadurch vermeiden Sie zusätzliche externe Ressourcen.
Wenn Sie Ihre Schriftarten lokal laden, können Sie sicherstellen, dass diese schnell und effizient geladen werden, ohne die Leistung Ihrer Website zu beeinträchtigen. Dies trägt zu einer schnelleren, reaktionsschnelleren Website und einer besseren Benutzererfahrung bei.
#7. Minimierung von JS & CSS
Schließlich können Sie die Performance Ihrer Website verbessern, indem Sie Ihre CSS- und JavaScript-Dateien minimieren. Bei der Minimierung werden unnötige Zeichen wie Leerzeichen und Kommentare aus dem Code entfernt. Dies reduziert die Dateigröße und beschleunigt den Ladevorgang.
Für die Minimierung können Sie Tools wie MinifyJS oder CSSNano verwenden. Achten Sie darauf, eine Kopie Ihrer Originaldateien aufzubewahren, falls Sie Änderungen vornehmen müssen.
Automatisches Entfernen von Render-Blocking-Ressourcen mit Plugins
Im Folgenden zeigen wir Ihnen, wie Sie Render-Blocking-Ressourcen mithilfe von WordPress-Plugins automatisch entfernen können. Diese Plugins sind in WordPress weit verbreitet und können Render-Blocking-Ressourcen schnell und effizient beseitigen. Der Vorteil ist, dass Sie die Performance Ihrer Website auch ohne besondere Fachkenntnisse verbessern können.
#1. W3 Total Cache
W3 Total Cache (W3TC) verbessert die gesamte Benutzererfahrung einer WordPress-Website, indem es Render-Blocking-Ressourcen beseitigt und die SEO, die Core Web Vitals und vieles mehr optimiert. Das Plugin nutzt Funktionen wie die Integration von Content Delivery Networks, um bewährte Methoden umzusetzen.
Installieren und aktivieren Sie das W3 Total Cache-Plugin und gehen Sie wie folgt vor, um Render-Blocking-Ressourcen zu entfernen:
- Gehen Sie im WordPress-Dashboard zum Abschnitt „Performance“ und klicken Sie auf „Allgemeine Einstellungen“.
- Aktivieren Sie im Bereich „Minify“ die Option „Minify“ und wählen Sie als „Minify-Modus“ die Option „Manuell“.
- Klicken Sie auf „Alle Einstellungen speichern“.
- Ermitteln Sie über Google PageSpeed Insights alle Render-Blocking-JavaScript- und CSS-Dateien.
- Gehen Sie anschließend zu „Performance“ > „Minify“.
- Klicken Sie nun im Abschnitt „JS“ zunächst auf „Aktivieren“ für die JS-Minify-Einstellungen. Wählen Sie dann unter „Operationen im Bereich“ die Option „Nicht blockierend“ aus, indem Sie für das Tag „Vor <head>“ den Typ „Verzögern“ verwenden.
- Gehen Sie nun zur JS-Dateiverwaltung, wählen Sie das von Ihnen aktivierte Theme aus und klicken Sie auf die Schaltfläche „Skript hinzufügen“. Sammeln Sie die JavaScript-URLs, die von Google PageSpeed Insights als problematisch identifiziert wurden und fügen Sie sie in das entsprechende Feld ein, wie im Bild gezeigt.
- Scrollen Sie nun etwas nach unten zum Abschnitt „CSS“. Wählen Sie im Dropdown-Menü unter „CSS-Dateiverwaltung“ Ihr Theme aus und klicken Sie auf „Stylesheet hinzufügen“. Gehen Sie dann wie im vorherigen Schritt vor und kopieren Sie die URLs aus PageSpeed Insights, die Probleme verursachen und fügen Sie sie ein.
- Nachdem alle Einstellungen konfiguriert sind, klicken Sie auf die Schaltfläche „Einstellungen speichern & Cache leeren“, um die Änderungen zu übernehmen.
#2. JCH Optimize
JCH Optimize verbessert die Leistung von WordPress-Websites, was sich in einem besseren Google PageSpeed Insight-Score widerspiegelt. Das Plugin optimiert die wichtigsten Performance-Kennzahlen wie First Contentful Paint (FCP), Largest Contentful Paint (LCP), Speed Index (SI), Cumulative Layout Shift (CLS) und Time to Interactive (TTI). Dadurch werden die allgemeine Benutzererfahrung und die Performance der Website deutlich verbessert.
Nach der Installation und Aktivierung von JCH Optimize, folgen Sie diesen Schritten, um Render-Blocking-Ressourcen zu entfernen:
- Gehen Sie zu „Einstellungen“ > „JCH Optimize“, scrollen Sie etwas nach unten und gehen Sie zu den „Einstellungen für die Grundfunktionen“.
- Aktivieren Sie „CSS-Auslieferung optimieren“, um die CSS-bedingte Rendering-Blockierung zu beseitigen. Diese Funktion bestimmt automatisch das erforderliche CSS, um den Inhalt „above the fold“ auf jeder Webseite anzuzeigen. Es fügt dieses CSS auch dem <head>-Bereich des HTML-Inhalts jeder Seite hinzu.
- Der Preload-Link wird dann verwendet, um verkettete CSS-Dateien asynchron zu laden.
- Um Javascript-bedingte Rendering-Blockierung zu entfernen, müssen Sie die Attribute „async“ oder „defer“ in das <script>-Tag einfügen. Dies kann die Reihenfolge des Ladens verändern und zu Fehlern führen, wenn JavaScript Abhängigkeiten hat.
- Gehen Sie im JCH Optimize-Dashboard zum Abschnitt „Automatische Einstellungen zum Zusammenführen von Dateien“.
- Klicken Sie nun auf „Optimum“, wodurch das Defer/Async-JavaScript automatisch aktiviert wird.
- Durch Aktivierung der optimalen Einstellung wird JavaScript verzögert oder asynchron geladen.
- Wenn die JavaScript-Dateien dynamisch geladen werden, können sie nicht verzögert werden.
#3. Speed Booster Pack
Speed Booster Pack ist ein weiteres ausgezeichnetes WordPress-Plugin zur Verbesserung der Leistung Ihrer Website und der allgemeinen Benutzerfreundlichkeit. Ihre Website wird dadurch in wichtigen Suchmaschinen wie Google höher eingestuft, was zu mehr Traffic und besserer Geschwindigkeit führt.
Nach der Installation und Aktivierung von Speed Booster Pack, folgen Sie einfach diesen Schritten:
- Gehen Sie in Ihrem WordPress-Dashboard zu „Speed Booster Pack“.
- Um JavaScript-bedingte Rendering-Blockierung zu entfernen, klicken Sie auf „Assets“ und scrollen Sie nach unten zum Bereich „JavaScript optimieren“. Sie können durch Klicken auf „Alles“ alle JS-Dateien und Inline-JS verschieben, oder Sie können „Anpassen“ wählen, um Ihre ausgewählten JS-Skripte einzubinden.
- Aktivieren Sie dann „JavaScript in die Fußzeile verschieben“. Dadurch werden alle JS-Dateien und Inline-JS am Ende Ihrer Seitenquellen platziert.
- Klicken Sie nun auf die Option „CSS optimieren“, um CSS-bedingte Rendering-Blockierung zu entfernen.
- Sie haben hier die Option, „Critical CSS aktivieren“ zu wählen, was die CSS-Auslieferung gemäß den Empfehlungen von Google optimiert. Dadurch werden alle CSS-Dateien verschoben und die Stile des Inhalts „above the fold“ eingefügt.
Sie können „CSS inline einfügen“ aktivieren, um alle CSS-Dateien in die HTML-Ausgabe einzufügen. Es gibt auch eine Option, das gesamte eingebettete CSS zu minimieren, um bereits inline eingefügtes CSS zu reduzieren.
- Nach der Konfiguration des Plugins, speichern Sie alle Einstellungen, um Render-Blocking-Ressourcen zu entfernen.
#4. Autoptimize
Autoptimize ist ein weiteres Plugin, um Render-Blocking-Ressourcen einfach zu optimieren und zu entfernen. Das Plugin optimiert JS-Skripte und CSS-Stile, indem es sie in die Fußzeile verschiebt, aggregiert, minimiert und zwischenspeichert.
Es optimiert CSS, indem es es in den Seitenkopf einfügt, kritisches CSS einbindet und auf das vollständige, aggregierte CSS verweist. Darüber hinaus minimiert es automatisch HTML-Code, um die Optimierung zu verbessern.
Installieren und aktivieren Sie das Autoptimize-Plugin und folgen Sie diesen Schritten, um Render-Blocking-Ressourcen zu entfernen:
- Gehen Sie zunächst in Ihrem WordPress-Dashboard zu „Einstellungen“ > „Autoptimize“.
- Aktivieren Sie im Abschnitt „JavaScript-Optionen“ das Kontrollkästchen „JavaScript-Code optimieren?“.
- Aktivieren Sie im Abschnitt „CSS-Optionen“ das Kontrollkästchen „CSS-Code optimieren?“.
- Klicken Sie auf „Änderungen speichern“ und „Cache leeren“.
Dies reicht in der Regel aus, um Render-Blocking-Ressourcen zu reduzieren. Das Ergebnis kann jedoch je nach verwendetem Theme und den installierten Plugins variieren. Um zu überprüfen, ob die Probleme behoben wurden, testen Sie Ihre Website erneut mit PageSpeed Insights. Für eine weitere Optimierung gehen Sie wie folgt vor:
- Nach dem vorherigen Schritt stehen viele Optionen unter „JavaScript- und CSS-Optionen“ zur Verfügung.
- Aktivieren Sie die Optionen zum „Aggregieren“ für CSS- und JS-Dateien.
- Klicken Sie abschließend auf „Änderungen speichern“.
#5. WP Rocket
WP Rocket ist ein renommiertes und erstklassiges WordPress-Plugin für die Caching-Leistungsoptimierung. Es ist jedoch mehr als nur ein Caching-Plugin, da es auch Render-Blocking-Ressourcen von Ihrer Website entfernen kann. Dadurch werden die Core Web Vitals und der PageSpeed Insight Score erheblich verbessert.
Nach der Installation und Aktivierung des WP Rocket-Plugins können Sie Render-Blocking-Ressourcen wie folgt beseitigen:
- Klicken Sie auf „WP Rocket“, gehen Sie zum Tab „Dateioptimierung“ und zum Abschnitt „CSS-Datei“.
- Aktivieren Sie „Optimierte CSS-Auslieferung“.
- Gehen Sie nun zum Abschnitt „JavaScript-Datei“ und wählen Sie „JavaScript verzögert laden“. Sie können auch die Option „Sicherer Modus für Jaquery“ ausprobieren. Wenn das Frontend Ihrer Website jedoch beschädigt wird, machen Sie die Änderung rückgängig.
- Speichern Sie alle Änderungen mit der Schaltfläche „Änderungen speichern“.
Vorteile der Beseitigung von Render-Blocking-Ressourcen
Schnellere Ladezeiten können die SEO einer Website erheblich verbessern, da Google Webseiten, die schneller laden und reibungslos funktionieren, bevorzugt. Seiten, die einen Wert von über 90 Punkten erreichen, werden in den Suchergebnissen in der Regel priorisiert. Mit den oben genannten Plugins können Sie einen guten PageSpeed-Score erreichen:
Schnellere Ladezeiten können zu mehr Benutzerinteraktion führen, da Benutzer eher auf einer schnell ladenden Website bleiben. Benutzer können so bequem auf der Website navigieren oder schnell einen Kauf tätigen.
Darüber hinaus kann das Entfernen von Render-Blocking-Ressourcen die mobile Benutzererfahrung erheblich verbessern, da mobile Benutzer häufig langsamere Netzwerke mit begrenztem Datenvolumen nutzen.
Fazit
Wir haben Ihnen sowohl die manuellen als auch die automatisierten Prozesse (durch Plugins) zur Beseitigung von Render-Blocking-Ressourcen aufgezeigt. Wenn Sie jeden Aspekt der Performance Ihrer Website optimieren möchten, können Sie dies manuell tun. Wenn Sie jedoch Ihren Aufwand minimieren und sofort einen besseren PageSpeed-Score erreichen möchten, probieren Sie die erwähnten Plugins aus.
Wir haben bereits auf mehreren Websites beeindruckende Performance-Ergebnisse erzielt. Nun liegt es an Ihnen, Ihre WordPress-Website weiter zu optimieren und ein außergewöhnliches Website-Erlebnis zu schaffen – mit minimalem technischen Wissen.
Sie können auch andere Tipps und Tricks ausprobieren, um Ihre Website blitzschnell laden zu lassen.