web bastler logo weiß mit umrandung
web
bastler
Menu
close
Pagespeed Optimierung

Pagespeed-Optimierung in 2024 
Der ultimative Leitfaden, um die Ladezeit der WordPress-Website zu verbessern.

Letztes Update: 11.24 | Autor: Manuel
20, 21, 22 … Diese Zahlen sind vielleicht relevant beim Abstandmessen auf der Autobahn (eigentlich nicht einmal da), jedoch mit Sicherheit nicht beim Laden einer Webseite. Die Performance einer Website ist einer der wichtigsten Aspekte für deine Besucher und Google.

Ich erkläre dir, was es genau mit Pagespeed-Optimierung im Jahr 2024 auf sich hat und worauf es wirklich ankommt, um die Ladezeit der WordPress-Website zu verbessern.

Stell dir vor, du stehst bei der Kassa im Supermarkt und der Kunde vor dir hat vergessen, seine Bananen abzuwiegen … Richtig, deine Adern werden sichtbar.

Genau so geht es den Besuchern deiner Webseite, wenn sie mit Ladezeiten zu kämpfen haben.

Inhaltsverzeichnis

Teste die Geschwindigkeit deiner Website
Google Pagespeed

Gründe

Warum ist die Optimierung der Website wichtig?

Aus folgenden zwei Gründen:

  1. Um das Nutzererlebnis bzw. die Nutzererfahrung deiner Besucher zu steigern (keine Lade- / Wartezeit)

  2. Um ein besseres Google-Ranking zu erreichen.

     

1.

Nutzererlebnis/Nutzererfahrung

Wartezeiten sind einfach nur nervig und sollten maximal bei deinen Mitbewerbern entstehen.

Versetze dich einfach in deine eigene Lage.

Wenn du eine Webseite besuchst, willst du das bestmögliche Nutzererlebnis erleben und zeitgleich die beste Nutzererfahrung genießen, während der Inhalt der Webseite sich so schnell wie möglich aufbaut, um nicht gleich wieder aufzugeben und vielleicht weiter nach Alternativen suchen zu müssen.

Genau so geht es auch deinen Besuchern/Kunden.

Es gäbe nichts Schlimmeres, als wenn deine Besucher genervt aufgrund zu langer Ladezeit/Wartezeit auf die Webseite deiner Mitbewerber wechseln würden, weil nur der Ladebalken statt des Inhalts ersichtlich ist.
nutzererlebnis
google ranking
Auszug aus der Google Search Console (Search Console Insights)
2.

Besseres Google-Ranking

Indirekt war die Seitenladezeit, neben den klassischen SEO-Maßnahmen, schon immer ein wichtiger Rankingfaktor für Google, da die Ladezeit einer Website wichtige Nutzersignale beeinflusst.

Mit der Einführung des Mobil First Index ist es nun seitens Google offiziell, dass die Seitenladezeit ausschlaggebend für das Ranking der Website ist.

Gerade beim responsiven Webdesign trennt sich die Spreu vom Weizen zwischen einer optimierten und nicht optimierten Website.
google pagespeed insights
Google Pagespeed Insight
gtmetrix
GTMetrix
pingdom
Pingdom

Allgemeine Messmethoden

Wie kann ich die Ladezeit meiner Website messen?

Der einfachste Weg, um die Ladezeit bzw. Pagespeed deiner Website messen zu können, ist ein kostenloses Tool zu verwenden. Die bekanntesten unter ihnen sind Google Pagespeed Insights, GTMetrix sowie Pingdom. Weiterhin gibt es auch die Möglichkeit, direkt im Browser die Ladezeit zu messen.
Der größte Vorteil beim Benutzen von kostenlosen Tools ist, dass Verbesserungen/Empfehlungen direkt angezeigt werden. Wenn man jedoch ein Laie ist und keine Ahnung hat, werden einem die Vorschläge relativ wenig sagen.

Google Pagespeed oder GTmetrix? Welches Tool soll ich verwenden?

Man kann das pauschal, wie im realen Leben, nicht sagen. Meine Empfehlung wäre für eine übersichtlichere Darstellung GTMetrix. Mit dem Wasserfalldiagramm sieht man schön, was genau wann geladen wird.

Info: Hierbei sollte erwähnt werden, dass man sich registrieren/anmelden sollte, da sonst der Server von Kanada gewählt wird. Nach der Anmeldung kann man den Standort London auswählen, welcher eher einen realistischen Wert ausgibt.

Auch werden Verbesserungsvorschläge bekannt gegeben, jedoch nicht spezifisch auf den Core Web Vitals Test bezogen.

Google Pagespeed hingegen gibt kein Wasserfalldiagramm an, jedoch eine genaue Erklärung, an welchen Schrauben gedreht werden muss, um den Core Web Vitals Test zu bestehen.
google page speed mobil web bastler
Google Pagespeed Insights Wert von web-bastler
gtmetrix web bastler
GTMetrix Wert von web-bastler
google pagespeed insights
Google Pagespeed Insight Score

Brauche ich einen 100/100 Score in Google Pagespeed?

Nein, dieser ist natürlich nicht vonnöten. Vor allem gilt folgende Regel: “Nutzererfahrung über Score”.

Was damit gemeint ist, ist, dass es keinen Sinn macht, zwar einen 100/100 Score zu erreichen, jedoch die Webseite wie hingeschmiert aussieht. (CSS-Formatierung für den Fisch, Qualität der Bilder nicht ausreichend, …)

Dennoch gilt, wie bereits erwähnt, dass ein besserer Score in der Regel zu einer besseren Nutzererfahrung führt und somit (sollte der Content SEO-technisch auf gleichem Niveau mit Mitbewerbern sein) mit einem besseren Ranking belohnt wird.

Ladezeit in Chrome, Firefox, Safari & Edge messen

Das Vorgehen ist für alle Browser gleich. Nach dem Aufrufen der Website kannst du mittels rechter Maustaste / “Untersuchen” bzw. in Chrome mittels F12-Taste (Windows) im Entwicklertool den Reiter “Netzwerk”/“Netzwerkanalyse” aufrufen. Nach erneutem Aufrufen der Seite bzw. Drücken der F5-Taste (Windows) bzw. Command+R (Mac) siehst du in einem Wasserfalldiagramm die genauen Daten über den Ladevorgang.

Unterschieden werden die Dateien in HTML, CSS, JS, Bilder sowie Schriften.
untersuchen der website in chrome mit netzwerkansicht (1)
Untersuchen der Website in Chrome mit Netzwerkansicht
hosting

Domains, Webspace & mehr

Hosting, der Grundbaustein einer schnellen WordPress-Website

Ähnlich wie ein stabiles Fundament beim Hausbau, ist ein guter Hoster das A und O einer Website.

Ohne einen starken Hosting-Partner wird die Performance einer Website nicht optimal sein und nur Unmut bei deinen Besuchern sowie beim Ranking deiner Website von Google hervorrufen.

Wie findet man einen guten Hoster?

Auf der Suche nach einem guten Hoster sind folgende Punkte relevant:

  • Geringe Reaktionszeit des Servers (TTFB)
  • Verfügbarkeit
  • Inkludierter SSL-Schutz
  • Speichergröße
  • Inklusivleistungen (Domains, Easy Install, …)
  • Support

Gutes Hosting muss nicht teuer sein

Da, wie bereits bekannt, Preis/Leistung für mich enorm wichtig ist, möchte ich meine Erfahrungen mit diversen Hostern nicht vorenthalten. Vorweg, in der Regel habe ich den Ansatz, primär lokale Unternehmen zu unterstützen, da es dank dem X-ten Lockdown ansässige Firmen bereits genug schwer haben.

Jedoch bringt einem der falsche Patriotismus relativ wenig, wenn die Leistung mit anderen Mitbewerbern nicht ansatzweise mithalten kann.

Zu Beginn war ich noch bei einem großen österreichischen Hoster, habe aber schnell festgestellt, dass das Gebotene leider nicht ansatzweise mit den “Wir schaffen das” Nachbarn mithalten kann.

Teurere Preise, weniger Leistung und schlechterer Support.

Mit diesen Argumenten war es nicht schwer, den nationalen Stolz hinter sich zu lassen.

Meine Empfehlung: All Inkl

Nach langer Recherche und Vergleichen bin ich seit vielen Jahren glücklicher Kunde bei All Inkl*. Und da ich nicht zu neidisch bin, um mein Glück zu teilen, möchte ich all unsere Kunden an unserer Freude teilhaben lassen. All Inkl bietet im Tarif Privat Plus das beste Preis-Leistungs-Paket an.

  • 100GB
  • 5 Domains inklusive
  • SSL Schutz (Website wird als Sicher dargestellt)
  • 1000 Emails Postfächer
  • 50 Kunden pro Server
  • PHP 8.2/8.3 Support (bringt ordentlich Performance-Schub)
  • HTTP/3 (QUIC) Unterstützung
  • und und und…

Ein wichtiger Punkt, welcher mich eigentlich hauptsächlich dazu getrieben hat den Österreichischen Hoster zu verlassen, war der Support. Es gibt nichts schlimmeres, als wenn man ad hoc eine Lösung für sein Problem benötigt, eine Anfrage Freitagnachmittag gestellt wird und !Dienstag! Mittag erst die Antwort kommt.

Das wäre vielleicht noch in den 90ern durchgegangen, jedoch nicht im Zeitalter, wo Regierungen schneller wechseln, als die Österreichische Nationalmannschaft ihr erstes Tor bekommt.

Und all das für lächerliche ~8€ pro Monat. Du hast richtig gelesen ...Zwei Krügerln kosten das Gleiche beim Wirten … Und diese kannst du auch nur konsumieren, wenn nicht wieder Lockdown ist.

Warum den Tarif Privat Plus und nicht Privat?

Ganz einfach, weil erst ab dem Tarif 'Privat Plus' kostenfreie SSL-Zertifikate, DNS-Verwaltung sowie Cronjobs enthalten sind. Das SSL-Zertifikat wäre noch zu vernachlässigen, da es nur etwa 1 Euro Aufpreis kostet. Jedoch ist die DNS-Verwaltung, beispielsweise für die Google Search Console, von Vorteil, ebenso wie Cronjobs für die Automatisierung von Aufgaben.

all inkl
Hoster All Inkl
google pagespeed insights
Gecachte Website
gtmetrix
Nicht gecachte Website

Optimale Ladezeiten durch Caching

Benötige ich Caching?

Eine gecachte Website ist neben einem guten Hoster die effizienteste Maßnahme, um eine schnelle Website zu bekommen. Ohne das Zwischenspeichern verschenkst du massives Potenzial für die Ladezeit.

Was genau ist Caching?

Cache wird dir vielleicht ein Begriff vom Internetsurfen mit deinem Browser sein. Sobald du einmal eine Internetseite besuchst, wird diese in deinem Browser-Cache gespeichert, um beim erneuten Aufrufen die Seite schneller anzeigen zu können.

Genau wie im Browser wird diese Methode auch bei Websites eingesetzt. Durch das Zwischenspeichern der Website auf dem Server können Besucher die Website schneller angezeigt bekommen, da sich nicht jedes Mal beim Aufrufen der Website die Seitenstruktur erneut aufbauen muss.

Was passiert, wenn sich meine Inhalte ändern?

Das ist eine berechtigte Frage. Hier kommt es auf die richtige Einstellung an. In der Regel sollte man das Caching-Plugin so einstellen, dass sich bei einer Änderung der Cache erneut aufbaut. So vermeidet man, dass dem Besucher eine alte Version der Website angezeigt wird.

Weiterhin ist zu beachten, dass, wenn ein CDN verwendet wird, diese Daten auch im Caching-Plugin hinterlegt sind, damit auch dieser gelöscht und erneut aufgebaut wird.

Ist Caching wirklich effektiv und lohnt es sich für die Pagespeed-Optimierung?

Ja, ja und nochmals ja. Wenn ich dir nun sage, dass eine Website mit aktiviertem Caching um bis zu 300% schneller dargestellt werden kann, kannst du es mir glauben oder auch nicht. Es wäre jedoch besser, sich selbst davon zu überzeugen.
Google Pagespeed
optimierung
Cloudflare Überblick
Cloudflare Überblick

Infos über CDNs

Was genau ist ein CDN und ist Cloudflare die beste Wahl?

Stell dir vor, du bist im Ausland und willst deine Liebsten via Smartphone anrufen. Um eine Verbindung dafür aufzubauen, muss das Smartphone sich in ein Netz einwählen. Gott sei Dank hat es so viel Hirnschmalz, dass es das unmittelbar nächste Netz nutzt und nicht das heimische Netz.

Genau so funktioniert ein CDN (Content Delivery Network). Um die Website darzustellen, verbindet es sich nicht mit dem Server des Hosters (meistens in der Nähe von deinem “Zuhause”), sondern nutzt den am nächsten liegenden Server.

Nicht nur, dass die Anzeige der Website schneller vollbracht ist, bietet ein CDN in der Regel auch noch Schutz gegen DDOS-Attacken.

Warum sollte ich Cloudflare als CDN wählen?

Kurz und knapp: Weil das Preis-Leistungs-Verhältnis stimmt. Cloudflare bietet diverse Pakete an, jedoch reicht in der Regel der kostenlose Plan. Dieser beinhaltet drei Gratisregeln. Du hast richtig gehört, es kostet dich keinen Cent. Mehr zu den Regeln weiter unten.

Update: Es sei erwähnt, dass Cloudflare nach dem Urteil von Schrems II (Privacy Policy Shield) mit Stand vom 04.22 nicht DSGVO-konform ist. Cloudflare selbst arbeitet bereits an einer europäischen Lösung. Hier sollte jeder für sich selbst abschätzen, ob der erweiterte Schutz gegen DDOS-Attacken sowie der Mehrwert in Bezug auf die Performance überwiegt.

Quasi nach dem Motto: Wo kein Kläger, da kein Richter oder nach dem Lied “Tango Korrupti” von Reinhard Fendrich.

Wie installiere ich Cloudflare?

Hierfür sollte bereits ein wenig technisches Know-how vorhanden sein. Du musst die Nameserver deiner Domain anpassen und diese mit den Nameservern von Cloudflare ersetzen. Bei All Inkl ist dies genau eine Aufgabe für eine Nachricht an den Support. Bei anderen Hostern kannst du gegebenenfalls die Nameserver selbst editieren.

Des Weiteren müssen noch die DNS-Einstellungen angepasst werden. Diese solltest du von deinem Hoster erfahren.

Achtung: Bitte beachte, dass durch das Herumpfuschen mit falschen Einstellungen deine Website gegebenenfalls nicht mehr erreichbar sein kann.
cloudflare cns einstellungen
Cloudflare DNS Einstellungen

Welche sind die besten Einstellungen bei Cloudflare?

Es gibt unzählige Einstellungen bei Cloudflare, jedoch haben sich für mich folgende Punkte nach einigen Projekten immer als gut erwiesen:

SSL/TLS - Edge Zertifikate

Verwende immer HTTPS
Sollte dein Hoster keine automatische Funktion dafür haben oder dies nicht in der .htaccess hinterlegt sein, dann aktiviere es immer.

Speed - Optimierung

Auto Minify
S, CSS & HTML aktivieren, um die Dateigröße des Quellcodes zu reduzieren. 
Brotli
Aktiviere diese Einstellung, um den HTTPS-Datenverkehr zu beschleunigen.

Caching - Konfiguration

Browser-Cache-TTL
Setze den Zeitraum auf ein Jahr fest. Dies stellt sicher, dass der Cache für ein Jahr gespeichert bleibt.
(Optional) Always Online
Falls du oft mit Ausfällen zu kämpfen hast, könnte diese Option für dich interessant sein. Selbst wenn deine Website aufgrund eines technischen Fehlers nicht mehr erreichbar ist, wird die zuletzt funktionierende Version angezeigt.

Netzwerk

HTTP/3
Beschleunigt die HTTP Anfrage … Alles was mehr Power bewirkt, kann nur gut sein.

Welche Regeln soll ich bei Cloudflare verwenden?

Meiner Meinung nach ist dies einer der wichtigsten Punkte. In der Gratisversion kann man drei Regeln wählen. Bitte beachte die Reihenfolge.
Hier meine Empfehlung:
  1. deine-domain.at/wp-admin*
    Cache-Level: Umgehen, Sicherheitsstufe: Hoch
  2. deine-domain.at/*preview=true*
    Cache- Level: Umgehen
  3. deine-domain.at/*
    Cache-Level: Alles zwischenspeichern, Edge-Cache-TTL: 2419200 Sekunden (längste Möglichkeit)
Was besagen diese Regeln?
Der Admin-Zugang sowie die Vorschau als eingeloggter Benutzer werden nicht gecached und zwischengespeichert. Weiterhin hat der Admin-Zugang eine erhöhte Sicherheitsstufe. Die Domain wird gecached und der Zwischenspeicher ist auf einen Monat gesetzt, bis sich der Cache erneuert.
cloudflare regeln
Empfehlung für Regeln bei Cloudflare
bilder richtig dimensionieren

Bilder optimieren und im modernen Format bereitstellen

Bilder richtig dimensionieren

Ein ziemlich einfacher, jedoch sehr effektiver Schritt, die Ladezeit zu verbessern, ist das Verkleinern/richtige Skalieren der Bilder. Am besten sollte geschaut werden, was die maximale Breite der Website ist, auf der das gewählte Bild dargestellt wird. Wenn z.B. das Bild in einer Section dargestellt wird, welche maximal 1280 Pixel breit ist, sollte das Bild … na, wer weiß es … richtig, 1280 Pixel breit sein.

Was aber, wenn das Bild über die ganze Website geht?

Mein Tipp hier ist, sich daran zu orientieren, welche Hauptzielgruppe die Besucher sind und von welchem Endgerät die Website besucht wird. In der Regel reicht es, die Bilder auf eine Größe von 1920x1080 (Full HD) zu verkleinern.

Das mag bei einem Bild vielleicht nur ein paar Kilobyte sein, jedoch wenn man die Summe aller Bilder betrachtet, können schon einige Megabyte eingespart werden.

Wer richtig am Putz hauen will, komprimiert die verkleinerten Bilder noch zusätzlich. Durch den Komprimierungsvorgang können weitere KB eingespart werden. Durch das Komprimieren wird die Bildqualität zwar verschlechtert, jedoch ist dies mit dem bloßen Auge nicht erkennbar … zumindest wenn du nicht die Augen von Bravestarr hast.

Als Sahnehäubchen oben drauf solltest du die Bilder noch im modernen Format WebP bereitstellen. Die einfachste Methode ist dies via einem Plugin durchführen zu lassen. Meine Empfehlung ist klar. ShortPixel oder über das Caching Plugin Swift Performance AI. Der Vorteil im Vergleich zu kostenlosen Plugins ist, dass dieser Vorgang mit nur einem Klick durchzuführen ist.

Kleines Update zu unseren Bildoptimierungen: WebP ist zwar super, aber AVIF ist der neue heiße Scheiß. Warum? Weil's noch kleiner wird bei gleicher Qualität.

Hier ein kleiner Code-Schnipsel, wie du beide Formate intelligent einbindest:

Bilder richtig dimensionieren - Version 2024

Kleines Update zu unseren Bildoptimierungen: WebP ist zwar super, aber AVIF ist der neue heiße Scheiß. Warum? Weil's noch kleiner wird bei gleicher Qualität.

Hier ein kleiner Code-Schnipsel, wie du beide Formate intelligent einbindest:

<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Beschreibung" loading="lazy" width="800" height="600">
</picture>

Das loading="lazy" ist übrigens der native Lazy-Loading Support - kein Plugin mehr nötig!

Bildern explizite Width und Height geben

Um eine Layoutverschiebung (Content/Bilder, welche beim Nachladen/Rendern einer Seite das Layout verschieben) zu reduzieren und einen schlechteren CLS-Wert zu vermeiden, solltest du Bildern immer eine Breite und Höhe geben. Der Core Web Vitals Test wird es dir danken.

Solltest du Swift Performance AI benutzen, gibt es dafür eine Option, dass Width und Height automatisch gesetzt werden.
width und height setzen
Width und Height setzen
Schmäh am Rande für Profis und die, die es noch werden wollen:
In nur zwei einfachen Schritten kannst du die Bilderskalierung sowie Komprimierung online selbst durchführen.

Bild skalieren

bild skalieren
Lade einfach das gewünschte Bild hoch und skaliere es auf die benötigte Breite in Pixel. Anschließend lädst du es herunter.
Bild skalieren

Bild komprimieren

bild komprimieren
Nun lädst du das skalierte Bild hoch und führst die Komprimierung durch. Je nach ursprünglicher Größe ist das Bild um bis zu 50 % verkleinert.
Bild komprimieren

Text während des Ladevorgangs sichtbar lassen & lokal einbinden

Fonts optimieren

Stört es Google, dass dein Text während der Webfont-Ladevorgänge nicht sichtbar bleibt?

Nichts leichter als das. Es gibt eine schnelle und eine langsame Methode.

Schnelle & kostenpflichtige Methode, welche DSGVO konform ist

Die schnelle Methode ist via einem Plugin (Swift Performance Pro), die Schriftart automatisch vorzuladen. Weiters können die Fonts simpel lokal eingebunden werden. 

Nach aktuellen Vorkommnissen (September 2022)  ist dies auch zu empfehlen, da diverse Abmahnanwälte ihr Unwesen treiben und Webseitenbetreiber aufgrund der nicht DSGVO konformen Variante abmahnen.

Durch zwei Klicks haben sich dieses Probleme in Luft aufgelöst.

Langsame & kostenlose Methode

Die zweite Methode, die jedoch mehr Zeit in Anspruch nimmt, ist nicht weniger effizient.

Je nachdem, ob du eine eigene Schrift oder eine Google Font benutzt, müssen diese zuerst heruntergeladen und anschließend über FTP-Zugang auf deinen Webserver gespeichert werden.

Durch das Hinzufügen des folgenden Codes in den Head (am besten mit einem kostenlosen Plugin, z. B.: Insert Headers and Footers) sollte die Schriftart sichtbar bleiben.

<link rel="preload" href="fonts/name-der-font.woff2" as="font" type="font/woff2" crossorigin>

Wohlgemerkt hat das Vorladen einer Schriftart auch den positiven Effekt, dass kein FOUT (Flash of Unstyled Text - Aufscheinen von nicht gestyltem Text) erzeugt wird.
Webfont-Ladevorgänge nicht sichtbar
Google Pagespeed Insight Webfont-Ladevorgänge nicht sichtbar
Swift Performance Font optimieren
Swift Performance Einstellung zum Font optimieren
font einbinden
Font mit dem Plugin "Insert Headers and Footers" einbinden
shortpixel
Einsparung bei ShortPixel

Auswahl aus der Praxis

Welche Plugins sollte ich zur Optimierung der Website verwenden?

Plugins gibt es mittlerweile wie Sand am Meer. Hier kann man ziemlich schnell den Überblick verlieren, welche Plugins sich wirklich auszahlen und welche nicht.

Hier sind meine Empfehlungen:

Die Besten Plugins zum Optimieren von Bildern

ShortPixel

Seit langem ist ShortPixel schon der Platzhirsch unter den Bildoptimierungs-Plugins. In seiner Gratisversion bietet es bereits 300 Bilder pro Monat an. Zudem werden auch moderne Bildformate zur Verfügung gestellt.

Alternative: EWWW Image Optimizer

Über Appsumo kann zurzeit (Stand 12.21) ein attraktiver Lifetime-Deal ergattert werden. Für gerade mal einmalige $99 können 200 GB Traffic verarbeitet werden. Von Lazyload über automatische Erstellung von WebP ist alles dabei.

Ein richtiges Schnäppchen.

Die Besten Plugins zum Cachen der Website

Swift Performance

Solltest du das Bestmögliche rausholen wollen, ist Swift Performance AI die erste Wahl. Bereits in der Gratis Version bietet es einen enormen Umfang. 

Wer jedoch auf der Überholspur fahren will, sollte sich die Pro Version mal näher ansehen. Für gerade mal $50 pro Jahr bekommt man etwas geboten, was man seinesgleichen vergeblich sucht.

Meine besonderen Highlights von Swift Performance Pro sind wie folgt:

  • Caching
  • GZIP Komprimierung
  • Bilder Optimierung (kein weiteres Plugin notwendig)
  • Fonts lokal einbinden/Preloaden/Font Display
  • Optimierung von CSS/HTML/JS
  • WooCommerce Optimierung
  • CDN einbinden
  • Plugin Organizer

Ich kann mich nur wiederholen, dieses Plugin ist der Ferrari unter den Optimierungs Plugins. Damit werden die besten Pagespeed Werte erreicht.

Einen kleinen Nachteil gibt es dennoch. Man kann nicht einfach mit einem Klick die optimalen Einstellungen herbei zaubern. Grundwissen ist vorausgesetzt.

Update: Dieser Nachteil gehört nun der Vergangenheit an. Die Entwickler dahinter haben etwas Revolutionäres entwickelt. Nach jahrelanger Erfahrung wurde nun Swift Performance AI entwickelt. Vergleichbar mit Chat GPT wird von der AI intelligenterweise die bestmöglichen Einstellungen herangezogen.

Kurz gesagt das beste Plugin für Pagespeedoptimierung ist nun ganz klar Swift Performance AI. 

Alternative: WP Rocket

Wenn es darum gehen soll mit nur wenig Klicks und kaum Ahnung gute Pagespeed Werte zu erreichen, trumpft der Platzhirsch WP Rocket auf, welches es nur in einer Premium Version von $50 pro Jahr gibt.
Langezeit war WP Rocket die Alternative für wenig Klicks. Dies gehört seit der Veröffentlichung von Swift Performance AI der Vergangenheit an, da es meiner Meinung nach keine wirkliche Alternative für das Gebotene gibt.
swift performance pro Übersicht
Übersicht von Swift Performance Pro
Hilfe bei der Optimierung erforderlich?
Verstehst du nach wie vor nur Bahnhof und willst dich damit nicht beschäftigen aber dennoch eine optimierte Website haben?
Unverbindlich anfragen

Sauber Codiert & nicht zugebloated

Welches Theme ist für einen guten Pagespeed geeignet?

Je schlanker, desto besser. Was damit gemeint ist, dass das Theme nicht aufgebläht sein sollte, sauber codiert und nur wirklich benötigte Funktionen/Javascripte besitzen sollte, welche auch wirklich verwendet werden.

Meine Empfehlungen (unabhängig von Bricks Builder):

Generate Press

Dieses Theme beinhaltet alles, wenn es darum geht die bestmögliche Performance rauszuholen. Umfangreiche Layouts, Page Builder tauglich, Vorlagen Bibliothek sowie Kompatibilität mit Woocommerce sind nur einige Auszüge, welche Generate Press bieten. Es gibt eine Gratis sowie eine Premium Version. 

Ob die Gratis Version reicht, musst du selbst für dich entscheiden.

Alternative: Custom Theme

Mir ist durchaus bewusst, dass dies absolut nicht Anfängerfreundlich ist und ohne Programmierkenntnisse kaum umzusetzen ist dennoch gehört es erwähnt, dass diese Lösung mitunter die schnellste Methode wäre, wenn ein Theme verwendet werden will.

Ein selbst, sauber codiertes Theme ist mitunter das schnellste, was du bekommen kannst.
generate press
Website von Generate Press
oxygen builder logo

Verzicht auf Bloat

Page Builder und schnelle Website?

Auf diese Frage gibt es zwei Antworten. Bricks Builder & Oxygen Builder.

Keine anderen Page Builder können Bricks oder Oxygen das Wasser reichen, da kein Bloat mitgeladen wird.

Ich kann nur innigst davon abraten Elementor, Divi, Beaver Builder oder ähnliche  zu benutzen, wenn dir Pagespeed wichtig ist.

Erfahre mehr warum Bricks Builder das beste WordPress Theme oder Oxygen Builder der beste Pagebuilder für WordPress ist.

Pagespeed wegen mobilen Rankingfaktor bei Google

Mobile First & Core Web Vitals 2024

Google hat uns im Jahr 2024 wieder mal was Neues beschert. Der First Input Delay (FID) wird ab März 2024 durch die neue Metrik Interaction to Next Paint (INP) ersetzt. Warum? Weil Google meint, dass INP besser die tatsächliche Interaktivität einer Website widerspiegelt.

Goodbye FID, Welcome INP - Was bedeutet das für dich?

Stell dir vor, du klickst auf einen Button und ... nichts passiert. Oder noch schlimmer, es passiert was, aber erst nach gefühlten 3 Stunden. Das ist genau das, was INP misst - wie schnell deine Website auf Nutzerinteraktionen reagiert. Die Core Web Vitals setzen sich jetzt also aus folgenden Punkten zusammen:

  • Largest Contentful Paint (LCP) - Wie schnell wird der Hauptinhalt geladen
  • Interaction to Next Paint (INP) - Wie schnell reagiert die Seite auf Klicks/Eingaben
  • Cumulative Layout Shift (CLS) - Wie stabil ist das Layout beim Laden
    • core web vitals ergebnis
    Core Web Vitals Ergebnis
    core web vitals
    Core Web Vitals (alt)

    Die magischen Zahlen für 2024

    Als Faustregel gilt:
  • LCP sollte unter 2,5 Sekunden sein
  • INP sollte unter 200 Millisekunden sein
  • CLS sollte unter 0,1 bleiben

    • Was hat Mobile First mit Pagespeed zu tun?

    Eigentlich ziemlich viel. In der Regel ist es um einiges schwerer die mobile Version der Website zu optimieren, da viel mehr auf die sogenannten Core Web Vitals, also den Largest Contentful Paint (LCP), First Input Delay (FID) sowie Cumulative Layout Shift (CLS) geachtet werden muss.

    Wichtigsten Fragen & Antworten

    FAQ

    Folgende Punkte sind essentiell um den Pagespeed der Website zu verbessern:

    • auf unnötige Plugins verzichten
    • aufgeblähte Page Builder meiden
    • schlankes Theme nutzen
    • Medien/Bilder optimieren
    • CDN Netzwerk benutzen
    • Caching Plugin benutzen
    • Font/Schriften lokal einbinden
    • guten Hoster wählen

    Entweder durch das Nutzen von kostenfreien Tools von Google Page Speed, GTMetrix & Pingdom oder das Untersuchen via Browser ( Chrome, Edge & Firefox > rechte Maustaste > Netzwerk)

    Weil höchstwahrscheinlich einer dieser Punkte zutreffen wird:

    • schlecht codiertes Theme
    • Verwendung eines aufgeblähten Page Builders
    • Medien/Bilder nicht optimiert
    • kein Cache Plugin / nicht richtig eingestellt
    • schlechte Wahl des Hosters

    Um dem Besucher das bestmögliche Nutzererlebnis (User Experience kurz UX) zu bieten. In weiterer Folge wird durch zufriedene Besucher Google signalisiert, dass die Website einen Mehrwert besitzt und dementsprechend verbessert sich das Ranking.

    oxygen logo

    Positive Nutzererfahrung & zufriedene Besucher

    Zusammenfassung: Pagespeed Optimierung ist in 2024 wichtiger denn je

    Da sich auch weiterhin alles um eine positive Nutzererfahrung dreht ist es unumgänglich sich nicht mit dem Thema Pagespeed Optimierung zu beschäftigen. Manche Maßnahmen sind geringer, manche sind größer doch am Ende des Tages zählt, wie kann es auch anders sein zufriedene Besucher.

    Abermals sei erwähnt, dass es bei der Website Optimierung im Bezug Seitengeschwindigkeit nicht auf den Score des jeweiligen Testtools ankommt, sondern dem Besucher ein befriedigendes Ergebnis zu geben. Wie im echten Leben kommt es auch hier nicht auf die Länge an. Der Besucher sollte mit einem befriedigendem Gefühl Ihre Website wieder verlassen können.

    Zu groß wäre die Einbuße, wenn sich potentielle Kunden für den Mitbewerber aufgrund zu langer Ladezeiten/Wartezeiten entscheiden würden.
    Kontakt aufnehmen
    *Bei diesem Link handelt es sich um einen Affiliate Link. 
    Back to top
    cross