Wenn du deine WordPress-Seite schon einmal mit einem Analyse-Tool analysiert hast, dann hast du diese oder eine ähnliche Meldung vermutlich schon einmal gesehen: “Ressourcen beseitigen, die das Rendering blockieren”.

Falls du wissen möchtest wie du dieses Problem in WordPress lösen kannst, dann bist du hier richtig!

Von vielen Seiten bekommt man immer wieder bestätigt, dass die Geschwindigkeit der eigenen Webseite ein wichtiger Faktor für deren Platzierung in den Suchergebnissen ist. Glücklicherweise muss du aber nicht 100/100 Punkten in den Google PageSpeed Insights bekommen bekommen, damit deine Webseite gut ranken kann. Es genügt auch erstmal über 50/100 Punkten zu kommen. Und das wirst du mit diesem Guide schaffen.

Übrigens: Für das Ranking selbst spielt die Ladegeschwindigkeit deiner Seite zwar auch eine Rolle, allerdings nur bis zu einem gewissen Grad. Wenn du eine ordentlich ladende Seite hast, dann solltest du diese aus Ranking-Sicht nicht überperfektionieren. Vermutlich kostet dich das nur Zeit und Geld und bringt so gut wie nichts. ABER!

Beim Thema Bounce-Rate sieht das schon etwas anders aus. Je schneller deine Webseite, desto geringer die Chance auf einen Bounce. Das erhöht womöglich bzw. sehr wahrscheinlich deine Conversion-Rate und damit deinen Umsatz. Das macht die Ladegeschwindigkeit doch wieder zu einem wichtigen Punkt.

Wenn du mehr darüber erfahren möchtest, wie sich der Page Speed deiner Webseite auf deinen Umsatz auswirkt, dann haben wir den passenden Beitrag für dich. Aber nun zum eigentlichen Thema: “Ressourcen beseitigen, die das Rendering blockieren.” Los geht’s!

Was bedeutet dieser Hinweis?

Bei der Analyse deiner Webseite spuckt Google i.d.R. mehrere Hinweise und Empfehlungen aus, die helfen deine Webseite schneller zu machen. Dabei gibt es effektive und weniger effektive Lösungsansätze.

Ein meist sehr effektiver Lösungsansatz ist das Beseitigen der Ressourcen, die das Rendering blockieren. In vielen Fällen wird bei der Behebung dieses Problems am meisten Ladezeit eingespart. Das macht diesen Punkt so wichtig.

Rendering-blockierende Ressourcen sind Dateien, welche der Browser laden und verarbeiten muss, bevor deine Webseite dem Nutzer angezeigt werden kann. In einem Artikel zur optimalen Ladezeit von Webseiten auf Mobilgeräten verdeutlicht Google, dass die Ladezeit einer Webseite 3s nicht überschreiten sollte. Zudem bestätigt Google selbst die Ladegeschwindigkeit einer Webseite als wichtigen Ranking-Faktor. Daher ist es umso wichtiger die Geschwindigkeit der eigenen Seite zu optimieren.

Wie oben schon erwähnt ist es aber nicht notwendig 100/100 Punkten zu sammeln. Solange du im gelben Bereich bist (ab 50 Punkten aufwärts), sollte bei dir alles passen. Im Web gilt nach wie vor die Faustregel “Content is king”. Versuche also die Ladegeschwindigkeit deiner Webseite zu optimieren, versteife dich aber nicht allzu sehr auf den Page Speed. Konzentriere dich vor allem auf den richtigen Content.

Wie beseitige ich Ressourcen, die das Rendering blockieren?

Zunächst verschaffen wir uns einen Überblick über den aktuellen Zustand unserer Webseite. Das machen wir in den Google PageSpeed Insights, indem wir einfach die zu untersuchende URL in das Suchfeld kopieren und auf “Analysieren” klicken.

Ein mögliches Ergebnis der Analyse könnte so aussehen:

Google PageSpeed Insights Ergebnisse Vorher - Ressourcen beseitigen die das Rendering blockieren

Ganz oben mit großem Abstand und einer geschätzten Einsparung von knapp 4s liegt die Empfehlung: “Ressourcen beseitigen, die das Rendering blockieren”. Es gibt also wirklich viel Zeit zu holen. Und darum kümmern wir uns jetzt!

Als kleiner Hinweis: Über die Hälfte der Webseiten laden auf Mobilgeräten ca. 7s, um alle Inhalte darzustellen. Das ist viel zu lange! Das erhöht aber deine Chance gegenüber deiner Konkurrenz sehr gut abzuschneiden. Damit kannst du deine Nase mit ein paar wenigen Schritten nach vorne bringen.

Rendering-blockierende Ressourcen beseitigen

Die WordPress-Community bietet auch für dieses Problem mehrere Plugins als Lösung. Wir verwenden für diesen Post das Plugin Autoptimize. Da du dich für die Ladezeit deiner Webseite interessierst und hier gelandet bist, hast du von diesem Plugin voraussichtlich schon einmal gehört. Falls nicht, auch gut. Wir zeigen dir hier ganz genau wie das geht.

Wenn du das Plugin installiert und aktiviert hast, navigiere zu den Einstellungen und öffne den Tab “JS, CSS & HTML”. Im folgenden Screenshot siehst du unsere Einstellungen, die du vermutlich einfach so übernehmen kannst.

ACHTUNG: Wir können nicht gewährleisten, dass bei der Aktivierung der Einstellungen keine Fehler auf deiner Webseite auftreten werden. Obwohl voraussichtlich in den meisten Fällen alles problemfrei ablaufen wird, empfehlen wir dir diese Änderung zuerst in einer Testumgebung auszuprobieren.

Wie dem auch sei, hier der Screenshot.

Autoptimize Einstellungen

Wenn du diese Einstellungen übernimmst, dann solltest du die Warnung/Empfehlung von Google nicht mehr sehen.

Damit gibst du deiner Webseite einen enormen Performance- und Usabilty-Boost. So rankst du nicht nur besser auf Google, sondern auch deine Conversion-Rate sollte sich erhöhen. Was will man mehr?

Was passiert hinter den Kulissen?

Meistens besteht eine Internetseite aus mehreren Dateien, die alle nach und nach geladen und gerendert werden. Dabei geht der Browser die HTML-Datei von oben nach unten durch und lädt alle Ressourcen der Reihe nach.

Autoptimize versucht nun zum einen diese Ressourcen zu wenigen Dateien zu kombinieren und somit die Anzahl der Serveranfragen zu reduzieren. Zum anderen werden Ressourcen, welche normalerweise im Head (also am Anfang der HTML-Datei) eingebunden werden, in den Footer verschoben.

Dadurch kann der Browser eine Webseite sofort rendern, auch wenn möglicherweise noch nicht alle Skripte und Styles geladen wurden. Diese werden dann einfach zu einem späteren Zeitpunkt nachgeladen.

Above the Fold CSS

Es gibt einen sog. “Above the Fold”-Teil oder auch “Critical Path CSS” jeder Webseite. Das ist der Teil, den ein Nutzer als aller erstes und noch vor dem ersten Scrollen sieht.

Um die Performance zu erhöhen, ist es nun möglich genau diejenigen Styles zu laden, die für den obersten Teil (also den “Above the Fold”-Teil) notwendig sind. Dabei werden alle anderen Styles, die erst später gebraucht werden auch erst später geladen, was die Ladezeit weiter erhöht.

Das Plugin Autoptimize bietet eine solche Funktion an. Die Herausforderung besteht darin herauszufinden, welche Styles denn die für den “Above the Fold”-Teil sind. In der Premium-Version des Plugins kannst du diesen Teil automatisch generieren und dann in den Einstellungen unter dem Punkt “CSS-Code inline einfügen und verschieben” hinzufügen lassen. Du kannst diesen Teil aber auch selbst erstellen und einfügen, aber wie geht das?

Autoptimize Einstellungen "Above the Fold"-CSS

Wir haben uns ein kleines Tool gebaut, mit welchem wir den “Above the Fold”-Teil automatisch generieren lassen können. Wenn du möchtest, dann übernehmen wir das sehr gerne für dich. Kostenlos! Melde dich ganz einfach bei uns und wir generieren dein “Above the Fold”-CSS.

Troubleshooting

Bei dir funktioniert etwas nicht? Schreibe uns einfach in den Kommentaren oder kontaktiere uns. Wir freuen uns deine Webseite einmal genau unter die Lupe zu nehmen! Selbstverständlich alles kostenlos.

Nur das Beste und viele Grüße!

Dominik Müller

Hi! Ich bin Dominik und ich mag alles was mit Digitalisierung zu tun hat. Ganz gleich ob es Webseiten, Software, Onlinemarketing, SEO oder etwas völlig anderes ist - ich bin davon begeistert!

Schreibe einen Kommentar