WordPress Einsteiger: Page Speed

WordPress: Page Speed Tipps für Einsteiger

Ein Gastbeitrag zu WordPress – Page Speed Tipps für Einsteiger von Markus List, Technischer Projektleiter bei 3m5.

Was geschieht, wenn der Page Speed Ihrer Webseite zu gering ist? Da die Seite sehr langsam lädt, verläuft das Surfen im Netz für die Nutzer nicht mehr reibungslos. Die Verzögerungen werden als störend empfunden. Auch Google bewertet lange Ladezeiten als negativ und wer einen Onlineshop führt, büßt letztendlich an Umsatz ein.

Dieser Beitrag zeigt unter anderem, warum Page Speed so wichtig ist, was bei der Datenpflege beachtet werden sollte und warum Caching eine entscheidende Rolle spielt. Zudem liefert er nützliche HTML-Codes zur Umsetzung der Hinweise.

Warum ist Page Speed wichtig?

1. Positive User Experience
   Laut einer Studie von Portent aus dem Jahr 2019 beträgt die ideale Ladezeit einer Webseite 0 bis 2 Sekunden. Danach sinkt die Conversion Rate im E-Commerce auf 2,93%. Die Absprungrate erhöht sich demnach mit jeder Sekunde.

2. SEO-Rankingfaktor
   Je zufriedener Nutzer mit Ihrer Webseite sind, desto weiter oben wird diese im Ranking von Google und Co. erscheinen. Suchmaschinen bestimmen aus der User Experience heraus die Qualität einer Seite, weswegen der Pagespeed ein Rankingfaktor ist.

3. Conversion-Rate-Optimierung & Umsatz
   Verzögert sich das Laden einer URL um 4 Sekunden, können die Conversions laut Portent erheblich sinken. Bei 100 Kunden, die sich einen Artikel für $50 ansehen bedeutet dies folgende Umsatzsummen:

   In Sekunde 0 beträgt die CR 8,11% und es ergibt sich ein Umsatz von $405,5.
   In Sekunde 1 beträgt die CR 6,32% und es ergibt sich ein Umsatz von $316.
   In Sekunde 2 beträgt die CR 4,64% und es ergibt sich ein Umsatz von $232.
   In Sekunde 3 beträgt die CR 2,93% und es ergibt sich ein Umsatz von $146,5.

   Nach Sekunde 0 beträgt der Verlust $89,5, nach Sekunde 1 $84 und nach Sekunde 2 $85,5. Insgesamt ist innerhalb von 4 Sekunden also ein Verlust von $259 zu verzeichnen. Je mehr Besucher eine solche Seite verzeichnet und je preisintensiver die zu verkaufenden Produkte sind, desto höher auch die Umsatzeinbußen.

4. Crawling
   Eine schnell ladende Seite kann von einem Googlebot intensiver gecrawlt werden, denn er verbraucht nur geringes Crawling-Budget. Dies bewirkt, dass im Google-Index aktuellere Inhalte zu finden sind.

Welche Faktoren beeinflussen die Ladezeit?

Wie die Studie zeigt, sollte die Ladezeit Ihrer Webseite weniger als 2 Sekunden betragen. Diese wird von verschiedenen beeinflussbaren und nicht-beeinflussbaren Faktoren hervorgerufen. Bandbreite, Browsercache und die Rechenleistung des Clients können Sie nicht beeinflussen, aber folgende Faktoren schon:

1. Dateigrößen
   Weisen HTML-Code, Stylesheet- und Skript-Dateien sowie Bilder eine geringe Größe auf, kann Ihre Seite schneller laden.

2. Rechenleistung des Servers
   Bei Aufruf Ihrer Webseite wird diese Anfrage vom Webserver bearbeitet. Werden nur wenige Daten angefordert, passiert dies recht schnell. Lassen Sie Kapazitäten von Ihrem Webhosting-Anbieter anpassen bzw. upgraden Sie auf ein höheres Webspace-Paket, wenn Sie feststellen, dass Arbeitsspeicher und Prozessor bei der Bearbeitung vieler gleichzeitiger Anfragen zu stark ausgelastet sind.

Was muss ich bei der Wahl meines Template beachten?

Das Download-Volumen Ihrer Webseite wird durch den zugrundeliegenden HTML-Code nicht unwesentlich beeinflusst. Eine sehr komplexe Seite bringt meist einen sehr verschachtelten Code mit sich. Um den Page Speed auf einem guten Level zu halten, lohnt es sich ein paar Dinge bei der Erstellung des Template zu berücksichtigen:

• Gibt es einfache Alternativen zu verschachtelten Strukturen?
• Entfernen Sie unnötige Leerzeilen, minimiert dies CSS (Cascading Style Sheets) und JavaScript.
• Gibt es inhaltslose HTML-Elemente, die entfernt werden können?
• Haben Sie alle unnötigen Kommentare gelöscht?
• Überprüfen Sie bei Änderung stets, ob alles so aussieht und funktioniert wie gewünscht.

Wie wirkt sich ein PageBuilder auf den Page Speed aus?

Ein PageBuilder bringt Ihnen die Möglichkeit Ihre Webseite zu gestalten, ohne dass Vorkenntnisse in HTML, CSS oder JavaScript nötig sind. So verleihen Sie Ihrem Online-Auftritt ein frisches Aussehen und setzen kreative Ansprüche mühelos um. Bei Varianten mit Frontend-Funktionalität können Sie alle Seitenelemente in Echtzeit kontrollieren. Vertreter sind zum Beispiel Gutenberg, Elementor und Brizy.

Der Einsatz eines PageBuilders ist sehr gut für die Optik Ihrer Seite, aber auf den Page Speed kann er sich negativ auswirken. Der entstehende Quellcode ist verhältnismäßig komplex, was die Ladezeit einer Seite erhöht. Je umfangreicher der Code, desto höher auch das Risiko für Bugs, durch die Elemente neu erstellt werden müssten.

Was muss ich bei der Datenpflege beachten?

Bilder komprimieren

Vergrößern Sie den Page Speed indem Sie die Dateigröße der Bilder verringern, zum Beispiel durch Bildbearbeitungsprogramme.

Bilder optimieren

Um die Ladezeit nicht negativ zu beeinflussen, verwenden Sie Bilder, die für die Webnutzung optimiert sind. Für Fotos und hochwertige Grafiken eignet sich JPEG am besten, für kleine Grafiken und solche mit wenig Farbe oder Transparenz nutzen Sie PNG.

Weitere Möglichkeiten zur Bildoptimierung:

• Zusatzinformationen mithilfe spezieller Tools wie PNGGauntlet oder tinypng entfernen.
• Originale Bildgröße im Quellcode eintragen: Der Browser muss die Maße von Grafiken nicht berechnen, was Ladezeit spart. Die Ausgabe der Bildgröße kann auch über CSS definiert werden.

WebP-Format nutzen

WebP ist ein Bildformat von Google, das Bilder verlustfrei (ähnlich PNG) oder verlustbehaftet (ähnlich JPEG) komprimiert. Obwohl es effizienter als altbekannte Formate ist, wird es nicht von allen Browsern unterstützt. Alternativen können aber in den Quellcode eingebaut werden:

<picture>
<source srcset="img/testbild.webp" type="image/webp">
<source srcset="img/testbild2.jpg" type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</picture>

Bilder auf Desktop und Mobil anpassen

Da Webseiten vermehrt über mobile Endgeräte anstelle von Desktop-Computern abgerufen werden, sollten Sie Bilder auch auf beide Formate anpassen. In der Regel erwarten Nutzer eine hohe Bildauflösung auf dem Desktop und nehmen kleine Abstriche auf Mobilgeräten in Kauf. Die Auflösungen unterscheiden sich auch wegen des Bildschirmformates, legen Sie daher zwei Bild-Varianten an. Im Quellcode können dafür Weichen gestellt werden.

Lazy Loading einrichten

Wenn Sie auf Ihrer Webseite viele Bilder gleichzeitig darstellen wollen, kann das den Page Speed minimieren. Denken Sie daran, dass viele Bildelemente erst sichtbar werden, wenn der Nutzer scrollt. Für alle Bilder unterhalb des sogenannten Folds, können Sie "Lazy Loading" verwenden. So werden die Elemente erst bei Erscheinen auf dem Viewport geladen und die Ladezeit Ihrer Seite verringert sich.

Quellcode reduzieren

Jedes Bild, das Sie auf Ihrer Seite verwenden, bedeutet mehrere Zeilen Code, die alle beim Seitenaufruf ausgelesen werden. Um die daraus resultierende lange Ladezeit zu vermeiden, sollten Sie alle grafischen Elemente (Buttons, Hintergründe etc.) außer Fotos per CSS3 erzeugen. So gibt es weniger Quellcode und auf allen Endgeräten wird eine Darstellung in gleicher Qualität ermöglicht.

Was hat Caching mit meinem Page Speed zu tun?

Bei jedem Seitenaufruf muss der Webserver eine Anfrage bearbeiten. Das funktioniert schneller, wenn nur wenige Daten angefordert werden. Laufen viele Anfragen gleichzeitig zusammen, müssen Arbeitsspeicher und Prozessorleistung so angelegt sein, dass sie dem standhalten. Andernfalls würde sich die Seitenladezeit erhöhen. Durch Caching müssen nicht immer alle Daten neu abgefragt werden.

Serverseitiges Caching

Damit der Server häufig gestellte Anfragen nicht immer von Neuem bearbeiten muss, können die entsprechenden Daten auf ihm zwischengespeichert werden. Davon profitieren Nutzer, die während einer Sitzung mehrere Seiten aufrufen, denn der Pagespeed nach dem ersten Seitenaufruf wird somit beschleunigt.

Serverseitiges Caching kann in den Einstellungen der Webserver-Software eingerichtet werden. Sollten die Kenntnisse dafür nicht vorhanden sein, bitten Sie Ihren Hosting-Anbieter oder einen automatisierten Cloud-Service um Hilfe.

Über Accelerated Mobile Pages (AMP) entsteht beim Laden Ihrer Webseite kaum Verzögerung, sofern bestimmte Voraussetzungen für die Anzeige auf mobilen Endgeräten erfüllt sind. Über Plugins können sie AMP in vielen Content-Management-Systemen, wie zum Beispiel WordPress, nutzen.

Clientseitiges Caching

Sie können beim Caching weitere Schritte vornehmen, um den Page Speed zu optimieren. Eine Möglichkeit ist die Verwendung von Browser-Caching. Häufig angefragte Elemente werden nicht vom Webserver, sondern von einem Webbrowser gespeichert. So müssen nicht alle Elemente neu geladen werden, wenn eine zur Seite gehörige neue URL abgerufen wird.

Diese Art von Caching kann ebenfalls über Plugins oder Erweiterungen realisiert werden. Cache-Buster sorgen dafür, dass nach Aktualisierung des Contents Nutzer nur auf die neueste Seitenversion zugreifen können.

WordPress-Plugins für das Browser-Caching:

• WP Rocket
• W3 Total Cache
• WP Fastest Cache

Um das Browser-Caching manuell zu aktivieren, müssen Sie die Konfiguration des Webservers anpassen, also eines dieser beiden Apache-Server-Module einschalten: mod_headers und mod_expires.

Bei mod_headers wird die .htaccess so ergänzt:

<FilesMatch "\.(css|js|gif|pdf|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

In runden Klammern stehen die Dateiformate, welche in den Cache gelegt werden sollen. "age" steht für die Dauer des Cache in Sekunden. Im Beispiel soll der Cache umgerechnet 30 Tage gespeichert bleiben.

Bei der Verwendung von mod_expires erweitern Sie die Konfiguration wie folgt:

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year" 
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month" 
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"

Für jeden Dateitypen kann eine individuelle Ablaufzeit ermittelt werden.

Auch Gzip-Komprimierung wirkt sich positiv auf die Ladezeit aus. Code lässt sich so verkleinern und wird vom Browser später wieder entpackt.

Um Gzip zu aktivieren fügen Sie folgenden Code in die .htaccess Datei ein:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>

Außerdem können Sie JavaScript und CSS auslagern. Mit JavaScript werden Funktionen im Browser auf dem Rechner des Clients ausgeführt. Über CSS legen Sie Formate und Darstellungen für Ihre Webseite fest. Dabei entsteht ein langer Quellcode, der reduziert werden kann, indem Sie die eben genannten Dateien auslagern. So verbleibt ein Dokument, dass nur einmal abgerufen werden muss. Lädt der Browser die Datei in den Zwischenspeicher (Cache) verringert sich die Ladezeit.

Generell gilt: Fügen Sie CSS-Dateien in den <head>-Bereich der Webseite ein und JavaScript in den Footer. So klappt der Seitenaufbau auch bei einem langsamen Server.

Prefetching und Prerendering anwenden

Eine gute Technik zur Erhöhung von Page Speed ist das Prefetching. Schon bevor Ihre Seite vollständig geladen ist, werden bestimmte Elemente im Zwischenspeicher des Browsers abgelegt. Das Gute daran: Das Rendering beim Laden von Bildern, Grafiken, JavaScript und CSS wird nicht gestört.

Möchten Sie diese Technik anwenden, bauen Sie rel="prefetch" in den Quellcode ein. Hier ein Beispiel:

<link rel="prefetch" href="//meineseite.de/beispielbild.jpg">

Wird beim Prefetching eine weitere Seite im Voraus geladen, so ist es beim Prerendering eine komplette Webseite. Abgespeichert werden alle für das Rendering notwendigen Dateien. Dass die Ladezeit Ihrer Seite mit dieser Technik weniger als 50 Millisekunden beträgt, ist besonders positiv.

Fügen Sie für die Umsetzung einfach diese Zeile in den Quellcode ein:

<link rel="prerender" href="//prerendering-seite.de/verzeichnis">

Den Page Speed Ihrer Seite zu optimieren scheint auf den ersten Blick ein sehr komplexer Prozess zu sein. Wenn Sie die Hinweise und Tipps in diesem Artikel berücksichtigen, steht der optimierten Ladezeit aber Nichts mehr im Weg.

Sollten Sie dennoch fachkundige Unterstützung benötigen, helfen die Experten der Agentur für Webentwicklung von 3m5 gern weiter.

Gastautor: Markus List, Technischer Projektleiter bei 3m5
Markus List ist TYPO3 CMS Certified Consultant (TCCC) und TYPO3 CMS Certified Editor (TCCE). Beim Dresdner IT-Unternehmen 3m5 betreut er mit agilen Teams die Webseiten-Projekte großer Marken und begeistert Kunden mit TYPO3 und WordPress.

Wir hoffen, Sie haben mit diesem Gast-Beitrag einige hilfreiche Tipps und Informationen für Ihre WordPress-Webseite erhalten.

Ihr Team von Rainbow-Web.com