100% Pagespeed und Performance – wie schnell ist meine Seite wirklich?

Kategorien

Themenübersicht

Zu diesen Themen habe ich schon was gesagt.

Beitrag artimo Webdesign - Pagespeed Performance
Wir testen den PageSpeed und die Performance der eigenen Website nachdem wir diese von einer statischen, in HTML / CSS umgesetzten Seite, in Wordpress neu erstellt haben.

Beitrag teilen

Als ich im Februar 2020 als freiberuflicher Webdesigner angefangen habe zu arbeiten musste natürlich auch eine eigene Website her. Damals sollte diese schnell und sauber programmiert sein und den Pagespeed mit 100% bestehen. Weiterhin sollte Sie schlicht im Design und Übersichtlich gestaltet sein.

Was also tun?

In vielen Systemen muss man sich an den vorgegebenen Dingen orientieren und kann nur sehr schwer in dessen Code oder deren Funktionen eingreifen. Damals stand auch nur TYPO3 und WordPress oder eine statische Website zur Auswahl. Also war die Entscheidung nach 2 Wochen gefallen, ich erstellen die Website statisch mit HTML und CSS.

Die erstellte Internetseite musste auch mit dem Google PageSpeed getestet werden und ich war positiv überrascht, die Ergebnisse konnten sich sehen lassen. In der Desktop Variante erreichte meine Seite 96% und in der Mobilen Ansicht leider nur 80%. Das war damals aber auch völlig in Ordnung für mich.

Nun ist die eigene Website schon einige Zeit online und ich habe vielen meiner eigenen Kunden, das kann man unter Referenzen sehen, eine sehr einfache und sehr flexible Website in WordPress erstellt.

Mein 30. Projekt sollte also die eigene Website in WordPress werden. Erfahrung war ja nun vorhanden. Die Seite sollte natürlich weiterhin schnell, responsive und sicher sein.

Also, was nehmen wir als Grundlage für die neue Website?

Schlicht, einfach und schnell, wie bekommen wir das also hin?

Zuerst wird das CMS WordPress installiert, dazu benötigen wir eine Datenbank, PHP 7.4 und ein wenig Webspace. Bei einigen Provider, ich habe einen Agenturserver bei Mittwald, kann man einen Installationsassistenten benutzen, um WordPress zu installieren. Und dann geht es los. Nach der Installation kann man sich direkt im Backend von WordPress anmelden.

Dann müssen Plugins und ein Theme installiert werden. Danach macht man die Einstellungen für die Plugins und die Grundeinstellungen für WordPress. Für das Layout verwende ich den PageBuilder Elementor. Für das Theme benutze ich das Elementor eigene Theme „Hello Elementor“. Mit diesen Werkzeugen kann die Seite so gestaltet werden, wie ich es möchte, ich muss mich an keine Vorgaben hinsichtlich des Themes halten und die einzelnen Elemente zur Gestaltung jeder einzelnen Seite bringt Elementor schon mit.

Welche Plugins benutze ich?

Das sind jetzt einige Plugins, aber das sind dann auch schon alle nötigen, mehr benötige ich, auch für meine Kunden, im Regelfall nicht. Welches Plugin macht was?

Disable Comments, Embeds und Emojis schaltet Kommentare und Emojis ab, bzw. verhindert das Einbinden auf anderen Seiten. Da ich meistens normale Firmenseiten erstelle kann ich die Kommentare und Emojis einfach abschalten. Elementor und Elementor Pro, sowie Essential Addons und Essential Addons Pro steuern das Aussehen, den Header und Footer und stellen viele Inhaltselemente für die Seitengstaltung zur Verfügung. Außerdem können bei Elementor Templates für verschiedene Seiten, Archive und so weiter angelegt und übergreifend verwendet werden.

eRecht24 und Usercentrics stellen das Impressum, den Datenschutz und den Cookie-Banner. Rank Math SEO und Rank Math SEO Pro steuern die Keywords und SEO-Maßnahmen auf den einzelnen Seiten und geben Hinweise für Verbesserungen. Imagify und Simple Image Sizes steuern die Bilder und dessen Komprimierung.

HTTP Headers ist für die Sicherheit und Server-Abfragen verantwortlich. Updraft Plus sichert die Website, erstellt also ein Backup. WP Rocket komprimiert und minifiziert die CSS- und Javascript-Dateien, macht also die Seite schnell. Zusammen mit den Bildern, die wir hier auch als Webp-Dateien speichern, sollte die Seite also extrem perfomant sein.

Super Progressive Web Apps macht aus der Website eine Appfähige, auch offline lauffähige Website. Unterstützt wird diese durch Favicon by RealFaviconGenerator, der die nötigen Bildformate für Apps und Mobile Ansichten erstellt.

Mit diesen Plugins, die wir verwenden müssen, wird es natürlich schwierig alles unter einen Hut zu bekommen. Ladezeiten müssen beachtet werden, die Anzahl der geladenen Dateien muss minimiert werden und so weiter.

Aber nach einigen Konfigurationen, Optimierungen und Änderungen ist das Ergebnis gar nicht so schlecht ausgefallen.

Pagespeed und Performance

Mein Ergebnis

Beim laden der Seite auf dem Desktop hat meine Seite 98% von 100% erreicht.

Pagespeed und Performance auf dem Desktop 98% von 100%

Beim Mobilen Aufruf erreichte meine Seite 88% von 100%.

Pagespeed und Performance auf dem Smartphone (Mobile) 88% von 100%

Ihr könnt eure eigene Website selbst testen unter:
https://developers.google.com/speed/pagespeed/insights/