Veröffentlicht am 16. 12. 2021 von mir
Gute Frage - viele mögliche Antworten! Bei Wordpress Websites stellt sich die Frage durchaus am öftesten. Das hat mehrere Gründe.
Grundsätzlich sollte die Architektur einer Website möglichst nachvollziehbar aus einer Hand entworfen werden und gewissen Standards und sogenannten Best Practices (beste Vorgehensweise) folgen.
Wordpress ist in seiner Popularität zum meistgenutzten CMS der Welt gewachsen, da die Masse an Themes und Plugins eine Website unglaublich erweiterbar machen und auch Laien damit einfach und schnell Websites bauen können. Und genau da entstehen auch schon die ersten Probleme. Für einfache Onepager und günstige, vorübergehende Webauftritte vielleicht eine gute Variante, entstehen dann doch langlebige "Plugin-Monster" mit oftmals über 10 Sekunden Ladezeit. Das Problem ist, dass niemand mehr weiß, wieviel Code die Unzahl an Plugins im Hintergrund ausführt, wieviele Requests dadurch an den eigenen oder andere Server entstehen. In vielen Fällen stehen sich die Plugins (von unterschiedlichen Entwicklern) auch gegenseitig "im Weg" und kämpfen um Ressourcen im CMS. Man merkt das oftmals wenn die Wordpress Bedienoberfläche schon mehrere Sekunden laden muss wenn man einfache Änderungen durchführen will.
In meiner Laufbahn als Webentwickler habe ich Websites inspizieren dürfen die für einen einfachen Firmenauftritt 150 bis 200 Requests an den Server benötigen. Man kann sich das so vorstellen: Würde man 10 Kuchen backen, und für jede einzelne Zutat erneut in den Supermarkt fahren, wäre das ca genauso effizient. Das liegt unter anderem daran, dass jedes Plugin sein eigenes Javascript und CSS-File mitliefert.
Diese Websites, vernünftig konzipiert aus technischer Sicht, kämen im Schnitt mit 15-20 Serveranfragen aus.
Ja, es ist praktisch für jedes Problem eine Click-to-Install-Lösung parat zu haben, jedoch nicht sehr nachhaltig und vor allem nicht performant. Zusätzliche Probleme ergeben sich auf lange Sicht auch meist durch Gratis-Plugins, die nicht weiterentwickelt werden und somit auch noch Sicherheitslücken darstellen.
Auch das Phänomen ist mir über die Jahre immer wieder aufgefallen. Viele der Pagebuilder in Wordpress weisen nicht auf optimale Bildgrößen hin. Somit passiert es immer wieder dass für einen Bereich von zB 300x300 Pixeln, ein Bild mit über tausend Pixeln Breite verwendet wird. Das große Bild muss dann trotzdem geladen werden, nur um auf 300x300 Pixel runterskaliert zu werden. Bilder haben viel größere Dateigrößen als zB purer Text und sollten daher besonders beachtet werden.
Leider auch ein sehr Wordpress lastiges Thema. Durch vieles herumprobieren, herumbasteln, durch Plugins die dann doch nicht verwendet werden aber "sicherheitshalber doch installiert bleiben" kann es passieren, dass Schriftsätze geladen werden die gar keine Verwendung finden. Schriftsätze (umgangssprachlich Schriftarten) kosten sehr viel Ladezeit und in den meisten Fällen kommen Websites mit maximal 2 Schriftarten aus. Unbedingt mit Testtools darauf achten wieviele Fonts im Endeffekt durch Wordpress geladen werden.
Themes werden heutzutage mit Web Buildern/Visual Buildern ausgeliefert. Diese ermöglichen einfach visuelle Layoutanordnungen, ohne dabei programmieren können zu müssen. Aus technischer Sicht leider auch kein Vorteil, da hierbei sehr viel unnötiger HTML Code entsteht der ausgeliefert werden muss und zusätzlich Zeit braucht im Browser um ausgeführt zu werden (siehe "Div Soup").
Webhosting gibt es am Markt für Wordpress Seiten ab 3€ pro Monat. Geht doch eh nur um den Preis so lang die Website läuft oder? Falsch. Auch hier kann manchmal einiges falsch laufen. Richtiges und gutes Hosting muss konfiguriert werden und kann auch schon mal etwas mehr kosten, wenn einem die Performance wichtig ist. Ein zusätzlicher Faktor der oft nicht ausgenutzt wird sind sogenannte CDNs (Content Delivery Network), mehr dazu weiter unten.
Wenn man zu sehr in den Prozess des Entwickelns verwickelt ist kann es schon mal passieren, dass man nicht merkt wie langsam das eigene Konstrukt geworden ist. Grundsätzlich gilt: jede Millisekunde die eingespart werden kann, bringt klare, messbare Vorteile. Absprungrate, Konversionsraten is hin zum Kauf, aber auch bei reinen Contentseiten, die Verweildauer auf der Website werden alle direkt beeinflusst vor allem negativ, durch zu lange Ladezeiten.
Sollte das subjektive Empfinden beim Laden schon negativ sein, weiß man, dass Performanceverbesserungen unumgänglich sind. Das lässt sich vor allem gut testen durch möglichst uneinbezogene Testpersonen.
In den meisten Situationen ist es aber am praktikabelsten automatisierte Tests durchzuführen. Es gibt mehrere Onlinetools um zu messen ob wertvolle Ladezeit verloren geht. Mein persönlicher Favorit ist webpagetest.org.
Die Testsite schafft es das immer gleiche Environment für die Tests herzustellen und schlüsselt die einzelnen Testbereiche gut auf. Dabei sieht man wo Zeit verloren geht. Zusätzlich werden ein paar Sicherheitsstandards geprüft, die man jedenfalls beachten sollte.
Auf webpagetest.org lässt sich vor allem eine sehr aussagekräftige Metrik messen: die Time to first Byte. Die sollte idealerweise nicht mehr als um die 500ms betragen, und sagt aus, wie lange es dauert bis überhaupt etwas vom Webserver beim Endbenutzer ankommt.
Sollte diese Zahl bei dir extrem hoch ausfallen (>1000ms) dann musst du dich ernsthaft mit der Architektur und Art der Auslieferung deiner Website beschäftigen. Das kann in erster Linie wie oben besprochen, an zu vielen Plugins (ergo PHP Skripten) oder Datenbankanfragen liegen. Oder auch am überforderten Webserver selbst.
Webpagetest bietet weiters ein schönes Wasserfalldiagramm, wo man die einzelnen Dateien sowie die Ladezeit genau inspizieren kann. Zu große Bilder, zu viele JS/CSS Dateien, sieht man hier sofort heraus.
Eine weitere gute Hilfe kann Google Pagespeed sein, welches in einfachen Sätzen und weiterführender Dokumentation die bestehenden Probleme aufschlüsselt. Wobei diese Tipps oftmals mit Vorsicht zu genießen sind. Der Score wird überbewertet, und oftmals zeigt Google Verbesserungen auf die technisch nicht machbar sind. Ein guter Richtwert, aber nicht überbewerten.
Google Pagespeed zeigt in übersichtlicher Schriftform Verbesserungsvorschläge an. Sehr nützlich sind dabei Tipps, wenn Dateien geladen werden die zB gar nicht benötigt werden.
FCP gibt an wann der erste Text oder das erste Bild sichtbar ist. Quasi wie lange es dauert bis der Websitenutzer etwas mit der Website anfangen kann. Das ist somit die Zeit die der Nutzer wirklich nur wartet, und sollte natürlich möglichst gering gehalten werden.
CLS als relativ neu eingeführte Metrik beschreibt wie sehr/oft die Seite während dem Ladevorgang umbricht. Warum das so wichtig ist? Der Websitenutzer wird durch strukturelle Umbrüche daran gehindert sich in der Website zu orientieren und zu navigieren, deshalb wertet es Google als positives Signal wenn Websites in den ersten Millisekunden bereits das fertige Grundegerüst anzeigt. Eine hohe Abstrafung gibt es bei dem Wert vor allem durch Werbenetzwerke. Man kennt es von Websites die nach und nach noch Werbeanzeigen nachladen, die den Content der Website umrückt. Ironischerweise gibt sich hier Google manchmal selbst Strafpunkte, auch wenn das hauseigene GoogleAdsense Werbenetzwerk eingesetzt wird.
Das sollte einem einen Überblick geben wo man nachbessern kann, und falls die Seite wirklich sehr langsam lädt, den Übeltäter ausfindig machen. Als nächstes zeig ich euch wie man die einzelnen Bereiche aufbessern kann.
Wordpress ist also was Bedienbarkeit und Erweiterbarkeit betrifft recht weit vorne im Ranking, das auffälligste Einbußen ist dafür die Performance. Was soll man also tun?
Wenn man auf Wordpress nicht verzichten kann oder will, gibt es einige Möglichkeiten, die Website schneller zu machen und damit wichtige Kennziffern wie Besucherzeit, Absprungrate etc. zu verbessern.
Wordpress lässt bei jeder Anfrage auf zB einen Blogpost mehrere PHP-Skripte und Datenbankanfragen laufen. Bevor also überhaupt etwas im Browser ankommt kann schon viel kostbare zeit vergehen.
Caching Plugins lösen gleich zwei der größten Probleme. Einerseits werden statische Versionen der einzelnen Unterseiten angelegt, die direkt ohne obgenannten Anfragen ausgeliefert werden können.
Zweitens können viele (u.a. durch Plugins) entstandene einzelne Files zusammengefasst und mit wesentlich weniger Anfragen ausgeliefert werden.
Über die letzten Jahre habe ich immer wieder Caching-Plugins durchprobiert, der für mich ungeschlagene Gewinner ist und bleibt WP-Rocket.
Kostenpflichtig, dafür aber zuverlässig und einfach bedienbar, auch komplexere Fälle werden hier durchdacht und auch der Support lässt einen nicht auf der Strecke.
Durch WP-Rocket erzielt man oftmals den einfachsten und schnellsten Erfolg, der Unterschied ist meist gleich subjektiv bemerkbar und auch technisch messbar.
Sogenanntes Minifying bedeutet, die vom Server auszuliefernden Files aufs absolute Minimum zu komprimieren. Leerzeichen, Absätze, Kommentare im Code werden dabei entfernt ohne die Funktionalität der Website zu beeinflussen, lediglich die Dateigrößen zu verkleinern. Die meisten Caching-Plugins bieten Minifying standardmäßig an.
Der nächste Anhaltspunkt sind schlechtes Webhosting und CDN. Webhosting is niemals gleich Webhosting. Es gibt hier Auswahl wie am Automarkt. Solls ein Ford Fiesta 1996 sein oder die neueste C-Klasse? Ein klares No Go ist wenn der Hoster nicht die aktuellsten PHP Versionen zur Verfügung stellt und keine externen Nameserver zulässt. Sowas schreit nach Vorsicht. Ohne technische Kenntnisse kann es hier schon mal schwierig werden sich im Dschungel der Server zurechtzufinden.
CDNs bieten eine zweite Schicht an weltweit verfügbaren Servern, die die Website also näher an den Kunden bringen und meist noch Caching Optionen anbieten. Die Standard Angebote von Cloudflare zB sind kostenlos und bieten schon einen ordentlichen Performance-Booster. Minifying kann an dieser Stelle auch noch mal durchgeführt werden.
CDNs bieten außerdem noch eine Stufe Sicherheit gegen DDos und ähnliche Cyberattacken und lassen nochmal ein paar andere Sicherheitsfeatures zu. Also ein großes Plus für wenig (oder gar kein) Geld!
In den meisten Fällen werden für Wordpress Installationen Google Fonts geladen. Das liegt in erster Linie daran, dass es für Themes einfacher ist auf diese Art und Weise Schriftarten zu wechseln.
Eigene Webfonts zu verwenden erfordert ein bisschen mehr technische Kenntnisse, sollte aber wenn möglich vorgezogen werden.
Google Fonts lassen nicht alle möglichen Optionen beim Laden der Fonts zu, deswegen kann man nur empfehlen sie selbst zu hosten. In manchen Fällen kann man aber die sogenannten font-display Optionen zu Nutze machen.
font-display:swap; ist ein CSS Operator mit dem sichergestellt wird, dass Text auch schon vor dem Laden der eigentlichen Font Files angezeigt wird. Das subjektive Ladeempfinden wird damit verschnellert.
Am besten ist es jedoch Webfonts in allen verfügbaren Formaten selbst zu hosten. Das bringt Vorteile wenn es um die Konfiguration von Webfonts geht (auch aus Performancegründen) bis hin zu Erleichterungen wenn es um Datenschutz geht, da nicht noch ein zusätzlicher Server aufgerufen werden muss.
Gerade für Fonts macht es Sinn prefetch, preconnect, bzw preload zu verwenden, dabei wird dem Browser mitgeteilt, dass eine Ressource bis zu einem gewissen Grad vorgeladen werden soll.
Am sinnvollsten ist meiner Meinung nach preconnect, ein Link mit dem richtigen rel-Attribut sieht dann so aus:
<link rel="preconnect" ..... >
Manche Themes haben Einstellungen um das zu konfigurieren, was aber immer möglich ist, ist diese letzten Millisekunden über eine Konfiguration des Child-Themes herauszuholen. Das geht am einfachsten über die functions.php.
Je nach Projekt und Größe des Budgets, macht es natürlich unterschiedliche viel Sinn sich auf Verbesserung von Ladezeiten zu fokussieren. Gundsätzlich gibt es aber Obergrenzen, bis hin zur Unbedienbarkeit.
Auch sind nur manche Verbesserungen von Content Managern oder Website-Eigentümern selbst machbar.
Gerne biete ich dir als Webentwickler einen kurzen Gratis-Audit an, und mach dir ein unverbindliches Angebot, welche Arbeit ich für welchen Preis in deine Wordpress Seite stecken würde, damit sie wieder flott läuft :)
Schreib mir einfach eine Mail!
Ein grobes Modell für eine digitale Marketing-Strategie zur Vermarktung von Schmuck/Edelsteinen über den Onlinehandel.
Windows and Mac users alike, there is a problem that has accompanied computer users since the early ages - messy desktops.
For power users, there is a tendency on computers to find what you are looking for via text search.
There is one thing Apple has done right for the Mac for over a decade now: the Time Machine backup system.
Many people still write their passwords on sticky notes or use the same password over and over again for many different sites and logins. Both are pretty bad ways of managing your passwords.
One of the most requested features macOS users have been wanting for years now is proper window management.
Die Tools und Frameworks die ich benutze in kurzer Übersicht: git, gulp, browsersync, ngrok und co.
Studien bestätigen: ab einer gewissen Temperatur arbeitet das Hirn nicht mehr effizient. Für Selbständige wie mich, die kein klimatisiertes Eigenheim oder Büro haben ist der heurige Sommer damit eine Katastrophe. Mit dieser Liste will ich allen Wienern die am Laptop zu Hause schwitzen Abhilfe schaffen.
Wenn dir das alles zu kompliziert ist und du Hilfe benötigst, schreib mir eine Mail! Ich mach dir einen kleinen Gratis Audit und lass dich wissen wo Verbesserungen möglich sind.
Schreib mir!