Search
Close this search box.

Wie man mit Elementor die Performance verbssert – Google Pagespeed Rank von 100

Google Pagespeed Score of 100

Da ich vor kurzem meine neue Webseite mit WordPress und Elementor Pro aufgebaut hatte, war der Google Pagespeed Rank vorerst schlechter als bei meiner alten statischen Webseite (dort hatte ich um die 85 mobil und 90 auf desktop).

Warum war die neue Webseite nun langsamer?

Eine statische Webseite wird so wie sie ist vermutlich immer etwas schneller sein als eine mit WordPress ident aufgebaute Seite. Das liegt daran, dass die statische Webseite fast immer weniger Code benötigt. Je nachdem wie das Theme aufgebaut ist oder welche Plugins man bei WordPress verwendet, bläht das alles den Code auf und somit verschlechtert sich die Ladezeit der Seite. Ebenso habe ich auch den PageBuilder Elementor verwendet, der zwar super easy in der Handhabung ist – jedoch aber seine Schwächen in der Performance hat. Viele simple Elemente werden in mehrere container-Elemente verschachtelt, so dass der Code mehr und mehr wird.

Bilder optimieren

Die erste Pagespeed Messung nach Fertigstellung der Webseite war eher ernüchternd. Was sehr offensichtlich für die langsame Webseite war, waren die viel zu großen Bilder.
Das erste, was man daher machen sollte, ist seine Bilder zu verkleinern. Ich nutze hierfür den Service von tinyjpg.com . Hier kann man kostenlos eine bestimmte Anzahl an Fotos (jpg und png) minifizieren. Das heißt es werden nahezu verlustfrei (zumindest kaum am Foto sichtbar) Daten entfernt – genauso auch sämtliche EXIF Daten, die im Normalfall – außer vielleicht auf einer Webseite für Fotografen – benötigt werden.

Die Fotos habe ich ausgetauscht und siehe da – die Laderzeit der Webseite hat sich schon um einiges verbessert – noch nicht optimal, aber zumindest schon ein Stück besser.

Die Messung nach der Bilderoptimierung ergab nun folgendes Ergebnis:

Aber optimal sieht das Ergebnis noch nicht aus. Vor allem mobil ist der Wert von 44 und einer Ladezeit von 4,4 Sekunden nicht akzeptabel. Was tut man nun, um die Performance zu verbessern?

Datei-Komprimierung und Caching

Hier kommt nun das meiner Meinung nach beste Plugin für Performance Optimierung zum Einsatz: WP-Rocket

WP Rocket

Mit diesem Plugin können gleich mehrere Optimierungen vorgenommen werden. Mit ein paar Klicks können unterschiedliche Optimierungsmöglichkeiten wie Seiten-Caching und Komprimierung von JavaScript und CSS Dateien vorgenommen werden.

Aber Achtung: Nicht jede der Optimierungen bewirkt auf jeder Seite gute Ergebnisse. Die Webseite sollte immer wieder durchgetestet werden – manchmal kommt es vor, dass das Plugin etwas zu viel optimiert und dadurch manche Funktionen auf der Webseite nicht mehr funktionieren oder die Darstellung dadurch fehlerhaft ist. In dem Fall lassen sich aber bei WP-Rocket Ausnahmen eintragen, damit bestimmte Teile nicht komprimiert werden.

WP-Rocket Minify

Ich ließ also nun JS und CSS komprimieren und mehrere Dateien kombinieren.
Nach der ersten Optimierung hatte ich folgenden Google PageSpeed Score:

Das sah zumindest mal ganz Okay aus. Schon mal raus aus dem roten Bereich. Aber wie schafft man es nun noch in den grünen Bereich?

Was zwar nochmal einen Schub gebracht hatte war die Funktion „remove unused css„. Diese befindet sich aber noch in der Beta-Phase und ja, leider haben dadurch ein paar css files nicht geladen – in meinem Fall waren es popups, die sich nicht geöffnet haben. Auch das Ausschließen der Dateien hat leider das Problem nicht behoben – ist eben noch in der Beta-Phase. Daher habe ich diese Optimierung wieder deaktiviert.

Unterhalb des Pagespeed Ergebnisses sieht man Verbesserungsvorschläge von Google. Hier war vor allem auch noch die Größe des DOM Element – also die Verschachtelung der einzelnen Elemente ein Problem. Dabei ist mir ein svg file aufgefallen, welches 20 Verschachtelungen hatte. Dieses habe ich dann mit Adobe Illustrator geöffnet, Ebenen zusammengeführt und siehe da – im Hintergrund waren auch noch weitere ausgeblendete Ebenen – die sich aber im Code ausgewirkt haben. Also das svg neu ohne die ausgeblendeten Ebenen rausgespielt und hochgeladen und siehe da – der Optimierungsvorschlag war verschwunden und der Pagespeed minimal besser.

Was dann endgültig ein optimales Ergebnis gebracht hatte war die Einstellung „Delay JavaScript Execution“. Dabei werden verschiedene Scripte erst bei Interaktion des Users nachgeladen statt schon von Beginn an. Das dürfte vor allem bei Elementor oft der Fall sein, dass sehr viele anfangs noch nicht benötigte Scripte geladen werden.

Uns siehe da! Der PageRang kann sich sehen lassen!
Daher kann ich das Plugin WP-Rocket sehr empfehlen.

Solltest du dennoch einen schlechten Pagespeed haben, dann könnte das auch am Webserver liegen. Sieh nach, ob die aktuellste PHP-Version und Datenbankversion am Server läuft. Diese wird auch stets verbessert. Ebenso gibt es bei vielen Hosting-Anbietern auch die Option auf serverseitiges Caching und GZIP-Komprimierung. Frag da am besten mal bei deinem Anbieter nach.

Generell muss man aber dazusagen, dass der PageSpeed Score von Google sehr schwankt. Schon von einer zur nächsten Messung wird man unterschiedliche Werte erhalten.

Tipps zur Performance-Optimierung für deine Webseite findest du auch hier in diesem Video:

YouTube

Mit dem Laden des Videos akzeptieren Sie die Datenschutzerklärung von YouTube.
Mehr erfahren

Video laden

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Weitere Artikel

Icons verleihen deiner Webseite nicht nur einen ästhetischen Touch, sondern sind auch ein wichtiges Element für die Benutzerfreundlichkeit. Viele Tools bieten bereits eine Vielzahl von …

In diesem Artikel zeige ich dir, wie du die Lesezeit eines Artikels in deinem Blog anzeigen lassen kannst.