Elite-Page-Speed-Insights-Werte mit WordPress erstellen

Eine Sache, die immer wieder in Gesprächen auftaucht, wenn ich online bin, sei es auf Facebook, Discord, Discourse oder einer anderen Plattform.

Da immer mehr Menschen mit WordPress arbeiten, kannst du dir einen Vorsprung verschaffen, wenn du lernst, wie du die Seitengeschwindigkeit richtig einschätzt und wie sie von Google bewertet wird.

WordPress ist eine fantastische Plattform, die fast alles kann, was du brauchst. Um die beste Geschwindigkeit zu erreichen, MUSST du ein gutes Hosting, ein schnelles und minimales Theme, ein hochwertiges Caching-Plugin und ein Lazy-Loading-Schema für Videos und Bilder haben. Das letzte, was du kontrollieren musst, ist die Bildgrösse und die Verwendung der perfekten Bildgrösse.

Das sind zwar die wichtigsten Voraussetzungen für eine unglaublich schnell ladende Website, aber es gibt noch eine ganze Reihe weiterer Optimierungen, z. B. an deiner Datenbank.

Beginnen wir damit, ein besseres Verständnis dafür zu bekommen, was Page Speed Insights ist und wie es für Bloggerinnen und Blogger langsam immer wichtiger wird, die von Google festgelegten Anforderungen zu erfüllen.

Grundlagen der Seitengeschwindigkeit

Viele sind völlig verblüfft über die Geschwindigkeitsprobleme, mit denen sie konfrontiert sind. Die Online-Ratgeber sind meist zu technisch, da es sich fast ausschliesslich um Server- und Konfigurationsfragen handelt.

Mein Ziel ist es, dieses Thema zu entmystifizieren, damit du zumindest die notwendigen Änderungen vornehmen kannst, um einen schnelleren WordPress-Blog zu erstellen und deine Inhalte so schnell wie möglich zu deinen Besuchern zu bringen.

Eine Einführung in Page Speed Insights von Google

Page Speed Insights von Google ist ein Online-Tool, mit dem du die Geschwindigkeit deiner Website mit der von Google gemessenen Geschwindigkeit vergleichen kannst.

Wenn du Chrome benutzt, kannst du einen umfassenderen Test namens Lighthouse durchführen, der dir viel hilfreichere Daten und mehr umsetzbare Details liefert.

PageSpeed Insights – Begriffe, die du kennen solltest

Es gibt einige Werte, die du zunächst verstehen musst, bevor du versuchst, Änderungen vorzunehmen. Manchmal ist eine Änderung nicht notwendig oder hilfreich, manchmal kann sie sich sogar auf andere Werte auswirken.

TBT – Total Blocking Time

Laut Google ist dies die Summe aller Zeiträume zwischen FCP und Time to Interactive, in denen die Aufgabenlänge 50 ms überschritten hat, ausgedrückt in Millisekunden.

Im Grunde beginnt eine Uhr, sobald der First Contentful Paint abgeschlossen ist. Diese Uhr läuft, bis die Website für Besucher interaktiv ist und gibt die Zeit dazwischen als blockierte Zeit an, in der nichts passieren kann.

TTI – Zeit bis zur Interaktivität

Laut Google ist die Zeit bis zur Interaktivität die Zeit, die benötigt wird, um die Seite vollständig interaktiv zu machen. Damit wird die Zeit vom Beginn des Ladevorgangs bis zu dem Zeitpunkt gemessen, an dem ein Nutzer tatsächlich auf deiner Website scrollen oder sich bewegen kann.

CLS – Kumulative Layout-Verschiebung

Wie Google es beschreibt, misst die kumulative Layoutverschiebung die Bewegung der sichtbaren Elemente innerhalb des Viewports. Dies ist vor allem dann der Fall, wenn Elemente keine feste Grösse haben, z. B. Werbung.

Die Werbung auf den meisten Online-Seiten führt dazu, dass der Inhalt, den du zu lesen versuchst, sich ständig verschiebt.

FCP – First Contentful Paint

Wie Google es beschreibt, markiert das First Contentful Paint den Zeitpunkt, an dem der erste Text oder das erste Bild für den Besucher auf seinem Gerät angezeigt wird. Dies hängt stark davon ab, dass deine Website nicht zuerst ein grosses Bild lädt, vor allem auf mobilen Geräten.

LCP – Largest Contentful Paint

Wie Google es beschreibt, markiert das Largest Contentful Paint den Zeitpunkt, an dem der grösste Text oder das grösste Bild eingeblendet wird. Für viele Website-Betreiber ist dies in der Regel ein Heldenbild oder ein Beitragsbild, das oberhalb der Falz eingefügt wird.

Andere wichtige Metriken, die du für die Geschwindigkeit verstehen musst

Diese Werte werden auf der Google-Website nicht in den PageSpeed Insights Score aufgenommen, haben aber einen grossen Einfluss auf die PSI-Bewertung. Sie sind Indikatoren dafür, dass du auf der Seite deines Hosts und/oder deines Themes zusätzliche Arbeit leisten oder die Seite mit einem Page Builder erstellen musst.

TTFB – Zeit bis zum ersten Byte

Dies ist die Gesamtzeit, die benötigt wird, um das erste Byte der Antwort zu erhalten, nachdem es angefordert wurde. Diese Geschwindigkeit ist im Grunde ein Mass dafür, wie schnell dein Server selbst Daten bereitstellen kann.

DOM – Zeit bis zum ersten Byte

Das Document Object Model (DOM) ist ein Standard dafür, wie HTML-Elemente abgerufen, geändert, hinzugefügt oder gelöscht werden können. Es wächst mit der Anzahl der Elemente, die einer Seite oder einem Beitrag hinzugefügt werden, und diese Zunahme der DOM-Grösse führt direkt zu einer längeren Ladezeit.

Fehler, die die Geschwindigkeit einer Website beeinträchtigen

Es gibt einige Fehler, die Bloggerinnen und Blogger häufig machen, wenn sie an Websites arbeiten, ohne sich mit dem Thema Geschwindigkeit auszukennen. Diese können trotz scheinbar einfacher Fehler zu grossen Auswirkungen auf die Gesamtgeschwindigkeit führen.

Billige Hosting-Plattformen

Das liegt meist an Shared-Hosting-Angeboten oder sehr günstigen Hosts, bei denen mehrere Account-Inhaber auf einem gemeinsamen Server untergebracht sind, was die Kosten, aber auch die Leistung senkt.

Bei Shared Hosting können deine Werte ständig schwanken, da du nicht weisst, wie viele andere Websites auf dem Server liegen und wie hoch die Belastung für ihre Besucher ist.

Ich persönlich verwende und empfehle WPX ( CHF5 pro Monat für 5 Websites) oder Cloudways für dein Hosting.

Im ersten Jahr des Bestehens deiner Website solltest du die Kosten niedrig halten, indem du ein Shared-Hosting-Angebot nutzt, wie es Siteground und Bluehost anbieten, da du noch nicht viele Besucher haben wirst.

Grosse Bilder

Wenn du keine Fotoseite betreibst, solltest du die Grösse deiner Bilder kontrollieren, um die Gesamtleistung zu erhöhen. Die meisten Bilder sollten nicht mehr als 100kb-150kb gross sein.

In der Regel ist dies recht einfach zu bewerkstelligen, wenn du das Bild durch einen Optimierungsdienst wie squoosh.app online oder durch ein Plugin für WordPress wie ShortPixel laufen lässt.

Vorzugsweise solltest du die Bildauflösung verkleinern, aber ich würde empfehlen, nicht unter 1200×800 Pixel zu gehen, da diese Grösse hilfreich ist, um bei Google Discover zu landen und das kann zu erstaunlichem Traffic führen.

Selbst gehostete Videos

Viele werden denken, dass sie einfach ein kleines Video in den Medienordner ihrer Website hochladen wollen, anstatt einen Online-Hoster wie YouTube, Vimeo oder eine andere Alternative zu nutzen.

Diese Videos sind riesige Dateien und wenn du sie deinen Besuchern zur Verfügung stellst, wird die Bandbreite, die der Hoster zur Verfügung stellt, sehr schnell verbraucht, sobald du anfängst, regelmässig Besucher auf deine Website zu schicken.

Stelle stattdessen sicher, dass die Videos auf YouTube gehostet werden und setze sie einfach auf „nicht aufgelistet“.

Fehlendes CDN

Wenn deine Website von Leuten besucht wird, die sich nicht in der Nähe deines Servers befinden, musst du ein CDN oder Content Delivery Network einrichten.

Damit können statische oder unveränderliche Inhalte von einem Server in der Nähe des Besuchers bereitgestellt werden. Dies hilft deinem Server, die Gesamtlast und die Auswirkungen des Versuchs, alle Inhalte zu liefern, zu verringern, da dies zu langen Verzögerungen führt.

Nur weil deine Seite für dich schnell lädt, heisst das noch lange nicht, dass sie auch für deine Besucher/innen schnell lädt. Im Zweifelsfall solltest du die Geschwindigkeit erhöhen, denn das hilft dir und deinen Besucher/innen, deine Seite zu sehen und mit ihr zu interagieren.

Lazy Load für Bilder und Videos nicht konfigurieren

Lazy Load wurde entwickelt, um das Laden von Websites zu erleichtern. Anstatt alle Downloads im Voraus zu laden, um deine Website zu rendern, lädt der Besucher nur das herunter, was für den Viewport (Bildschirm) benötigt wird.

Beim Lazy Loading werden die Bilder in einem bestimmten Abstand vom Bildschirmrand geladen, so dass der Besucher nicht sieht, wie sie geladen werden, aber die gesamte Seite wird gestaffelt geladen, damit sie schneller geladen wird.

Bei Videos bedeutet dies in der Regel, dass ein Bild mit einem Abspiellogo angezeigt wird und das Video selbst erst geladen wird, wenn der Nutzer darauf klickt.

Aufgeblähte, missbräuchlich genutzte und schlecht programmierte Plugins

Das wohl häufigste Problem, mit dem WordPress-Blogger konfrontiert sind, ist, dass es für praktisch jede Aufgabe, die du auf deiner Website erledigen willst, ein Plugin gibt.

Das führt dazu, dass manche Leute mehr als 50 Plugins auf ihrer Website installiert haben, von denen viele nur für einen oder zwei Blogposts da sind, um ein bestimmtes Bedürfnis zu erfüllen.

Das Problem dabei ist, dass viele dieser Plugins, unabhängig von ihrer Verwendung, auf jeder Seite deiner Website geladen werden. Diese kleine Datenmenge summiert sich also über immer mehr Plugins, die langsam deine Ladegeschwindigkeit zerstören.

Keine Datenbank-Optimierung durchführen

Wenn du wächst, Plugins installierst und löschst, können sich in deinen Tabellen viele Junk-Dateien ansammeln, die die Ladegeschwindigkeit verringern, wenn die Datenbank für irgendetwas abgefragt werden muss.

Manche Hosts erlauben eine unbegrenzte Anzahl von Entwürfen, was zu schnellen Ladeproblemen im Backend führen kann, wenn du an diesen Beiträgen weiterschreibst.

Mit einem Plugin, das diese Probleme behebt, kannst du die Gesamtleistung für die Nutzer und für dich selbst im Backend-Editor verbessern.

Wie du die Seitengeschwindigkeit testest

Es gibt mehrere Möglichkeiten, die Geschwindigkeit deiner Seite zu messen, und jede hat ihre Vorteile, die du nutzen kannst, um herauszufinden, wo deine Seite verbessert werden kann.

Viele vergraben sich jedoch zu sehr in diesem Prozess und verbringen zu viele Stunden, Tage und Wochen damit. Um ehrlich zu sein, solltest du dich damit erst beschäftigen, wenn du kein Shared Hosting mehr hast und eine bessere Basis.

Nutzung der Page Speed Insights Website

Für die meisten technisch nicht versierten Website-Besitzer/innen ist Googles Pagespeed Insights-Website die bekannteste Möglichkeit, ihre eigenen Websites zu testen, um zu sehen, wo sie in Bezug auf Geschwindigkeit und Funktionalität stehen.

Lighthouse in Chrome verwenden

Eine weitere, voll funktionsfähige Version des Tools, das auf Pagespeed Insights zur Verfügung steht, ist in Chrome mit einem Plugin verfügbar, das dir helfen kann, qualifiziertere Ergebnisse zu erhalten.

Klicke einfach mit der rechten Maustaste auf die Seite oder den Beitrag, den du messen möchtest, und wähle dann [ Inspect ].

Verwendung der GTmetrix-Website

Wenn du ein anderes Tool wie GTmetrix oder Pingdom verwendest, kannst du dir Details ansehen, die Pagespeed Insights dir nicht liefert, wenn es um den TTFB geht, der für eine gute Ladegeschwindigkeit entscheidend ist.

Ich bevorzuge GTmetrix, da der unten stehende Bericht und der Wasserfall es mir ermöglichen, eine Website genau zu untersuchen und die Ursachen für die Verlangsamung zu finden. Der Wasserfall-Tab kann dir übermässige Verzögerungen aufzeigen, die du normalerweise nicht bemerken würdest.

Wie du oben sehen kannst, entspricht die Bewertung der Seite ziemlich genau dem Standard von PageSpeed Insights, da sie kürzlich aktualisiert wurde, um mit den Google-Metriken übereinzustimmen.

Mir gefällt jedoch der untere Abschnitt, da er einige Details über das Laden des DOM und die tatsächlichen Zeiten für die Website und die vollständige Ladezeit erklärt.

Wie du sehen kannst, ist die Ladezeit für diese auf Carbonate basierende Website sehr lang, obwohl sie Ezoic für Anzeigen nutzt. Während sich das vollständige Laden also verzögert, ist der eigentliche Inhalt in weniger als 4 Sekunden lesbar.

Um mehr über deine Geschwindigkeit zu erfahren, solltest du die Registerkarte „Wasserfall“ aufrufen. In diesem einzigartigen Bereich wird alles in der Reihenfolge angezeigt, in der es geladen wird, sowie die zeitlichen Auswirkungen der einzelnen Elemente.

Anhand dieser Details kannst du aktiv versuchen, notwendige Ladevorgänge zu entschärfen oder Elemente zu entfernen, die für dich und deine Website erhebliche Ladeprobleme verursachen.

Aufbau der Kerngeschwindigkeit mit der Website-Einrichtung

Der erste Schritt zum Aufbau einer qualitativ hochwertigen Website-Geschwindigkeit liegt in der vollständigen Einrichtung deiner WordPress-Website. Die Basis ist ein Hoster, der einen schnellen TTFB bereitstellen kann und sich auf die Bereitstellung deiner Inhalte und deiner Website konzentriert.

Danach brauchst du das richtige Theme, bei dem die Geschwindigkeit im Vordergrund steht und nicht der Schnickschnack, von dem viele Leute fälschlicherweise annehmen, dass er für ihre Website wichtig ist: Die Leute wollen in fast allen Fällen den Inhalt.

Dann musst du deine Inhalte so nah wie möglich an den Besucher heranbringen, um sicherzustellen, dass er die gesamte Seite in weniger als 2-3 Sekunden sieht. Am besten ist es, wenn deine Seite 0,5-1,5 Sekunden braucht, damit sie für den Besucher fast sofort erscheint.

Die Wahl eines schnellen WordPress-Hostings

Dein Hosting ist die Grundlage für die Geschwindigkeit deiner Website. Wenn du nicht in eine superstabile und schnelle Grundlage investierst, wird alles andere, was du einrichtest, schwach und instabil sein.

Das bedeutet nicht, dass du auf Shared-Hosting-Plattformen wie Siteground oder Bluehost keinen Service bekommst, sondern nur, dass du keine qualitativ hochwertige Reaktionsfähigkeit erwarten kannst, ohne deine Website auf ein besseres Hosting zu verlagern.

Meine Websites werden in der Regel bei zwei bestimmten Hostern gehostet, die einen hochwertigen Service und eine erstaunliche Leistung zu einem guten Preis bieten: WPX und Cloudways, die ich in diesem Beitrag verglichen habe.

Wenn du deine Seite weiter aufbaust und sie wächst, etwa ab 250.000 Seitenaufrufen, solltest du vielleicht auf noch bessere Hosting-Plattformen wie Kinsta, WP Engine oder BigScoots wechseln.

WPX

Ich empfehle WPX für alle, die sich nicht für die Feinheiten des Website-Betriebs interessieren. Wenn du aber möchtest, dass jemand das gesamte Fundament verwaltet, dann wird dich der Service überraschen.

WPX wurde speziell dafür entwickelt, die Leistung von WordPress zu maximieren und bietet dir eine erstaunlich starke Serverleistung. Ausserdem ist der Preis mit 25 CHF pro Monat für 5 Websites sehr günstig.

Cloudways

Cloudways bietet dir die Möglichkeit, deinen Server auf vielen Hosts zu hosten, von DigitalOcean über VULTR (ich liebe HF-Server für schnelle Reaktionen) bis hin zu Google und sogar Amazon Web Services.

Der Nachteil ist, dass du deinen Server nicht so direkt verwalten kannst. Ein Grossteil der Arbeit wird von dir selbst erledigt, und auch wenn sie die Möglichkeit bieten, bei Bedarf Unterstützung zu bekommen, ist das nichts für Zartbesaitete.

Die Möglichkeit, einen Hoster zu wählen, bedeutet auch, dass die Serverkosten zwischen 10 und 100 CHF liegen. Der Vorteil ist jedoch, dass du den Server leicht skalieren kannst, wenn der Traffic deiner Website schnell ansteigt, ohne dass du an ein Hosting-Limit stösst.

Schnelle WordPress-Themes auswählen

Wie bei deinem Hosting solltest du auch bei der Wahl deines Themes auf Schnelligkeit achten, damit deine Seite schnell und effektiv dargestellt wird. Je länger es dauert, bis eine Website geladen und dargestellt wird, desto höher ist die Absprungrate der Besucher/innen.

Ein wichtiges Ziel für jeden Website-Betreiber ist es, sicherzustellen, dass die Besucher nicht direkt zu einem anderen Eintrag in der SERP springen, da dies Google signalisiert, dass du nicht die richtige Antwort für sie hast.

GeneratePress

Eines der solidesten Themes, die es derzeit auf dem Markt gibt. Es ist für jeden leicht zu ändern und anzupassen und verfügt über zahlreiche integrierte Konfigurationsoptionen – das perfekte Theme für alle, die nach ultimativer Geschwindigkeit und einfacher Einrichtung suchen.

GeneratePress ist ein grossartiges Theme, wenn du wächst und deine Seite mit zusätzlichen Funktionen ausstatten möchtest, da es nahtlos mit Elementor Pro und vielen anderen Plugins zusammenarbeitet, die beim Aufbau von Communities helfen.

Acabado

Ähnlich wie GeneratePress hat das Team von Income School ein Theme mit dem Namen Acabado entwickelt, das einen sehr eigenen Look and Feel hat, aber dennoch gute Ergebnisse für Blogbesitzer/innen erzielen kann.

Das Theme richtet sich an Menschen, die sich auf die Erstellung von Inhalten konzentrieren und weniger an Menschen, die umfangreiche Anpassungen vornehmen wollen.

Es ist ein nahezu perfektes Theme für das erste Jahr einer Website, wenn du dich mehr auf den Inhalt als auf das Aussehen konzentrieren musst.

Carbonate

Carbonate nimmt einen interessanten Platz in dieser Liste ein, denn es zielt darauf ab, die ultimativ schnelle WordPress-Website zu erstellen. Es basiert auf Bootstrap, sodass es leicht zu ändern ist, wenn du dich mit HTML und CSS auskennst.

Wenn du dich nicht mit Webdesign auskennst, wirst du wahrscheinlich jemanden beauftragen müssen, denn es gibt keinen aktiven Support.

Warum ich für Themes bezahle

Ein Theme trägt viel dazu bei, dass deine Website funktioniert und ist eine Investition wert, sobald du es dir leisten kannst. Ich würde nicht empfehlen, gleich im ersten Jahr ein Theme zu kaufen, aber jedes der oben genannten ist eine gute Investition für einen Blog, bei dem es auf Geschwindigkeit ankommt.

Wenn du für ein Theme bezahlst, tendierst du zu einer sichereren und aktuelleren Plattform, auf der du dein Geschäft betreiben kannst. Das ist wichtig, denn viele Websites werden durch alte Themes oder ungepatchte Sicherheitslücken in einem kostenlosen Theme gehackt.

Für das erste Jahr, in dem du vielleicht noch nicht das Investitionskapital für ein gutes, schnelles Theme hast, solltest du dich zunächst für GeneratePress (kostenlos) entscheiden, dicht gefolgt von Astra und OceanWP.

Ein CDN mit Cloudflare konfigurieren

Wer die bestmögliche Geschwindigkeit für seine Website erreichen will, muss ein CDN finden und einrichten, um Inhalte schneller auszuliefern. Ein CDN bietet auch einen Puffer gegen Angriffe auf eine Website und kann dafür sorgen, dass du keinen grossen DDoS-Angriff (Distributed Denial of Service) bekommst.

Einige Hoster wie Cloudways und WPX bieten in ihren Diensten Optionen für ein CDN an, weil sie wissen, dass es dir hilft, schneller zu sein.

Es gibt noch weitere Optionen ausserhalb des Hostings, die ich genutzt habe und mit denen ich gute Erfahrungen gemacht habe, die ich im Folgenden auflisten werde, um dir einige Alternativen für deine Websites zu zeigen.

Cloudflare

Cloudflare ist ein wichtiger Akteur im Bereich der globalen Inhaltsbereitstellung und -verteidigung. Das Unternehmen bietet ein kostenloses Konto an und hat vor kurzem einen neuen Beschleuniger eingeführt, mit dem WordPress fast sofort geladen werden kann.

Das neue APO-System kann jedoch Probleme mit Plugins und anderen Elementen auf deiner Website verursachen. Wenn du dich also für diese Option entscheidest und dafür bezahlst, solltest du sicherstellen, dass sie keine Auswirkungen hat.

BunnyCDN

BunnyCDN ist im Vergleich zu anderen Anbietern relativ neu auf dem Markt und verfügt über eine schöne Benutzeroberfläche und hilfreiche, einfache Konfigurationsschritte. Die Leistung ist erstaunlich und die Nutzung kostet normalerweise weniger als 10 CHF pro Jahr.

Die perfekte Website-Struktur für mehr Geschwindigkeit

Während sich viele auf den Server und die Ladegeschwindigkeiten konzentrieren, kann die Art und Weise, wie ein Theme die Website als Ganzes präsentiert, einen grossen Einfluss auf die Pagespeed Insights Werte haben.

Das gilt vor allem angesichts der neuen Messwerte, die ab 2021 mindestens Teil des Rankingfaktors sein werden.

Die neuen 2021 Core Web Vitals als Performance-Ranking-Faktoren

Mit dem Wachstum des Internets sind auch die Metriken gewachsen, die Unternehmen wie Google verwenden, um zu sehen, wie sich die Leistung auf das Nutzererlebnis auswirkt. 2021 hat Google angekündigt, dass das nächste Update die Core Web Vitals als Ranking-Faktor hinzufügen wird.

Es bleibt abzuwarten, ob dies ein grosser oder kleiner Ranking-Faktor sein wird, aber die soliden Grundlagen sind keine schlechten Richtlinien, um Besuchern ein besseres Erlebnis zu bieten und sie länger zu halten.

Core Web Vitals:

• Grösstes inhaltsreiches Bild (LCP)
• Erste Eingabeverzögerung (FID)
• Kumulative Layout-Verschiebung (CLS)

Verbessere Web Vitals:

• Optimieren des grössten inhaltsreichen Bildes
• Optimieren der ersten Eingabeverzögerung
• Optimiere die kumulative Layout-Verschiebung

LCP verwalten

Diese wird je nach Inhalt immer kleiner oder grösser, da immer etwas geladen wird, es sei denn, du hast eine weisse Website ohne wirklichen Inhalt.

Was du jedoch verwalten willst, ist die Gesamtgrösse des grössten Elements, egal ob es sich dabei um minimale Bilder oberhalb des Falzes oder ähnliche Inhalte handelt, die eine grosse Nutzlast haben.

Wenn nötig, kannst du dafür sorgen, dass dieses einzelne Bild wie ein Hintergrund geladen wird, indem du einen Preload für die Ressource einstellst, der sicherstellt, dass sie vor dem Inhalt weiter unten auf der Seite geladen wird, wodurch die Seite schneller geladen wird.

FID verwalten

Das bedeutet, dass du dich auf die Elemente oberhalb des Falzes konzentrierst, die geladen werden MÜSSEN, und alles unterhalb des Falzes nach Möglichkeit zurückstellst, um die anfängliche Nutzungsgeschwindigkeit zu maximieren.

Der FID-Wert ist eine einfache Messung der Zeit zwischen der ersten Interaktion eines Nutzers mit deinem Beitrag oder deiner Seite (Klick auf einen Link, Tippen auf eine Schaltfläche oder ein benutzerdefiniertes, JavaScript-gesteuertes Steuerelement) und dem Zeitpunkt, an dem der Browser die Verarbeitung durchführen kann.

CLS verwalten

Das ist eine Bewegung in den Grafiken und der Umgebung, während sie geladen werden, ähnlich wie bei einer Nachrichtenseite, bei der die Anzeigen den Text ständig aus dem Blickfeld verdrängen und du wieder scrollen musst, um sie einzuholen.

Das geht ganz einfach, indem du ein gutes Design verwendest und Bilder und Artikel mit einem Attribut für die Breite und Höhe versiehst, so dass der Platz „reserviert“ ist und erst nach dem Laden als leer angezeigt wird.

So bleibt der Inhalt im gleichen Bereich, bevor etwas geladen wird. Das bedeutet, dass du und deine Besucher den Inhalt lesen können, ohne dass er sich verschiebt und du nach dem Laden erst wieder den Lesepunkt finden musst.

Plugins hinzufügen, die die Geschwindigkeit tatsächlich erhöhen

Es gibt einige Kern-Plugins, die ich auf fast allen meinen Websites verwende, wenn sie nicht über Systeme wie Ezoic verfügen, die ihre Funktionen ersetzen.

WP Rocket

Ich mag WP Rocket für das Caching mehr als die kostenlosen Optionen, da es unglaublich effektiv ist und nur wenig Zeit für die Konfiguration benötigt. Im Gegensatz zu anderen Plugins, deren Konfiguration ein gewisses Mass an Erfahrung erfordert, ist WP Rocket für die meisten Websites in weniger als 5 Minuten fertig.

Es gibt nur ein paar kurze Abschnitte, die dir dabei helfen, kritisches CSS (above the fold) und Javascript zur Unterstützung einzurichten. WP Rocket ist kein kostenloses Plugin, daher fallen jährliche Kosten an, die du hier abrufen kannst.

Asset Cleanup

Asset Cleanup ist ein fantastisches Tool, das dir in vielerlei Hinsicht helfen kann. Ich selbst brauche es vor allem, um die Plugins zu kontrollieren, die ich auf einer bestimmten Seite ausführe.

Viele Plugins laden sich selbst auf jede Seite und jeden Beitrag, unabhängig davon, ob sie tatsächlich geladen und benötigt werden. Das kann zu künstlichen Ladeverzögerungen führen, da ungenutztes CSS und Javascript unnötigerweise geladen wird.

In diesem Plugin gibt es viel mehr Kontrollmöglichkeiten, um einige standardmässig ladende Skripte und viele ungenutzte Teile von WordPress, wie Emojis und mehr, zu entfernen, was helfen kann.

Sie bieten auch eine „Pro“-Version an, die noch mehr Funktionen und mehr Kontrolle bietet. Ich habe sie nie gebraucht, aber ich kenne viele Webentwickler, die darauf schwören.

Flying Analytics

Jeder sollte Analysen auf seiner Website haben, um einen Überblick über die Besucher zu bekommen. Für viele Websites, die verkauft werden sollen, ist es wichtig, einen Überblick über den jahrelangen Verlauf zu haben, was mit Google Analytics problemlos möglich ist.

Das Problem mit Google Analytics ist, dass es zu langsamen Ladezeiten auf deiner Website führen kann, über die sich PageSpeed Insights beschwert.

Flying Analytics von Gijo und WP Speed Matters kann dir dabei helfen, entweder einen GA3- oder GA4-Code einzubinden, der die Auswirkungen auf die Gesamtladezeit im Vergleich zum Standard-Scripting erheblich verringert.

Flying Scripts

Flying Scripts ist ein nützliches Plugin, das es dir ermöglicht, das Laden von Skripten zu verzögern, wenn keine Nutzerinteraktion stattfindet.

Das bedeutet, dass die aufgelisteten Skripte erst dann geladen werden, wenn jemand mit deiner Website interagiert. Dadurch kannst du das Laden von Dingen wie Google AdSense um Sekunden verzögern und so die Ladegeschwindigkeit deiner Website deutlich erhöhen.

Fliegende Seiten

Das letzte der von mir verwendeten Flying Plugins, Flying Pages, ermöglicht es dir, Assets von einer anderen Seite vorzuladen, wenn du mit dem Mauszeiger über einen Link fährst.

Das verringert zwar nicht die Gesamtgrösse der Dateien, die heruntergeladen werden müssen, aber da du damit beginnst, bevor der Besucher klickt, kann ein grosser Teil bereits heruntergeladen werden, sodass die Seite fast sofort geladen wird.

Das trägt dazu bei, dass deine Besucher viel länger auf der Seite bleiben, da das sofortige Laden deiner Seite einen noch professionelleren Eindruck vermittelt.

Code Snippets oder erweiterte Skripte

Sowohl Code Snippets als auch Advanced Scripts ermöglichen es dir, Hooks zu verwenden und echten Code in deine Website einzufügen. Code Snippets ist kostenlos und Advanced Scripts ist ein kostenpflichtiges Plugin. Code Snippets ist eher nackt und Advanced Scripts hilft dir, Hooks leichter zu finden.

Ich glaube nicht, dass ich jemals eine Website ohne ein installiertes Code Snippet-Plugin betreiben werde, denn damit kann ich jedes Theme optimieren oder verbessern, wenn ich eine andere Funktion als die Standardfunktion benötige.

Oxygen Builder (Agentur)

Oxygen Builder ist ein mächtiges Plugin, ähnlich wie Elementor und DIVI, aber mit nahezu unbegrenzten Möglichkeiten kann Oxygen ALLES bauen, was du dir ausdenken kannst.

Es gibt keine kostenlose Option für Oxygen Builder, aber du kannst es auf Lebenszeit kaufen, d. h., wenn du es einmal gekauft hast, kannst du es installieren und auf so vielen Websites verwenden, wie du willst.

Diese Website und fast alle meine Websites sind mit Oxygen erstellt, da es unendliche Anpassungsmöglichkeiten und eine unglaubliche Geschwindigkeit bietet, wenn du es speziell für diesen Zweck entwickelst.

Bitte beachte, dass Oxygen nichts für Zartbesaitete ist. Du musst entweder Code-Kenntnisse haben oder bereit sein, es zu lernen, da es im Gegensatz zu Elementor und seinem „Designer“-Fokus eindeutig auf Entwickler ausgerichtet ist.

Geschwindigkeitsoptimierungen und -verbesserungen

Du kannst viele Dinge tun, um deine Geschwindigkeit zu verbessern und die maximale Leistung deines Hostings zu erreichen.

Wie bereits erwähnt, solltest du ein Shard-Hosting nutzen, da dies nicht immer zuverlässig gute Geschwindigkeiten liefert.

Wenn du ein Shard-Hosting nutzt, kannst du diese Schritte durchführen, um jede Menge Geschwindigkeit zu erhalten, aber es wird nicht immer das gleiche Niveau wie bei einem dedizierten oder Cloud-Hosting erreicht.

Optimale WordPress-Einstellungen für Geschwindigkeit wählen

Es gibt ein paar einfache Dinge, die du in WordPress tun solltest, um eine bessere Leistung zu erzielen:

• Halte deine WordPress-Website auf dem neuesten Stand – Dies sollte ohne weitere Erklärungen auskommen, denn Updates schützen deine Website und sorgen dafür, dass sie optimal läuft.
• Verwende Auszüge auf der Homepage und in den Archiven – Kürzere Texte helfen der Seite, weniger Inhalte zu laden, wodurch sie insgesamt schneller geladen werden kann.
• Teile die Kommentare in Seiten auf – Kommentare müssen gezogen und geladen werden, die Beschränkung auf Seiten bedeutet viel weniger Datenbankinteraktion.
• Lade keine Audio-/Videodateien direkt in WordPress hoch – Der Medienbereich sollte nur optimierte Bilder und keine Videodateien enthalten.

Die meisten der oben genannten Dinge sind Standardeinstellungen und müssen nicht manuell konfiguriert werden, aber du solltest sie bei der Geschwindigkeitsoptimierung im Hinterkopf behalten.

Solltest du die Minifizierung für deine Website aktivieren?

Mit der Einführung von HTTP/2 werden deine Dateien gleichzeitig geladen, so dass das Mining oder das Zusammenfassen von Skripten in eine einzige Datei keine optimale Methode ist.

Du kannst überprüfen, ob dein Server HTTP/2 unterstützt, indem du hier vorbeischaust. So kannst du schnell feststellen, ob du für diese Geschwindigkeitsverbesserung gerüstet bist.

Schau dir denUnterschied zwischen HTTP/1 und HTTP/2 an, um zu sehen, wie sich die Leistung deiner Website verändert.

So aktivierst du die Minifizierung von HTML, CSS und JS

Jedes Caching-Plugin bietet Optionen, mit denen du die Minifizierung konfigurieren kannst. Ich bevorzuge immer noch WP Rocket, aber du kannst auch Plugins wie W3 Total Cache oder Autoptimize für zusätzliche Minifizierungsoptionen verwenden.

Aktualisierung des Servers auf das neueste PHP

Die aktuelle Version ist 7.4 und hat im Vergleich zu 7.3 deutliche Leistungssteigerungen gebracht. Einige Hoster und Websites laufen noch mit der alten Version 5 oder 6.

In der Regel kannst du das in deinen Hosting-Einstellungen ändern. Wenn du dir nicht sicher bist, wo das der Fall ist, kannst du ein Ticket bei deinem Hoster eröffnen, damit er dir hilft, auf den neuesten Stand zu kommen.

Wie du eine blitzschnelle Bildoptimierung implementierst

Um sicherzustellen, dass deine Bilder so schnell wie möglich geladen werden, solltest du sie entweder mit einem Programm wie squoosh.app voroptimieren oder ein Plugin wie ShortPixel installieren.

Das Plugin ShortPixel hilft dir dabei, die Dateien zu komprimieren, indem es farblich eng beieinander liegende Pixel bereinigt. Durch das Entfernen dieser zusätzlichen Pixel kann die Dateigrösse in manchen Fällen um 70-90% der ursprünglichen Grösse sinken.

Bei Bildern solltest du die Gesamtgrösse auf 100 KB oder weniger begrenzen, um eine schnelle Ladezeit zu gewährleisten.

Langsames Laden von Bildern und Videos

Damit deine Bilder so optimal wie möglich geladen werden, solltest du sie nur dann laden, wenn sie für den Besucher benötigt werden.

Diese Funktion ist in WP Rocket bereits integriert, aber wenn du dir kein kostenpflichtiges Plugin leisten kannst, kannst du auch ein Plugin wie Flying Images verwenden, mit dem du Bilder langsam laden und bei Bedarf über ein CDN bereitstellen kannst.

Lazy Loading Videos helfen dir, die anfängliche Belastung der Serverleistung zu vermeiden, wenn es YouTube- oder andere Videos gibt, und laden stattdessen typischerweise ein Platzhalterbild, um sicherzustellen, dass das Laden schnell und effizient ist.

Lazy Loading Videos gibt es in WP Rocket, aber als kostenlose Option kannst du ein Plugin wie [ Velocity ] verwenden, mit dem du ein Video und ein Bild auswählen kannst, das vor dem Video angezeigt wird.

Wie man Google Analytics beschleunigt

Der einfachste Weg ist, entweder selbst ein kleineres Skript in deinen Header einzubauen oder ein Plugin wie das oben erwähnte „Flying Analytics“ zu installieren, das eine verkleinerte lokale Version ausführt.

Für die meisten Leute ist das Plugin die einfachere Lösung, da es keine Geschwindigkeitsprobleme verursacht, sondern die Ladezeit von GA verkürzt.

Lokales Laden von Schriftarten

Du kannst deine Schriftarten von Google laden, indem du sie in deinen Header lädst, oder du kannst sie als Teil deiner Website hinzufügen und auf diesen lokalen Speicherort verweisen, um die Schriftarten zu laden und bereitzustellen.

Ich empfehle dir, den sehr ausführlichen Leitfaden von Kinsta auf ihrem Blog über die Vor- und Nachteile des lokalen Ladens zu lesen und herauszufinden, ob sich die Vorteile gegenüber der geringen Zeitersparnis für dich lohnen.

Feinabstimmung der WordPress-Datenbank

Am besten verwendest du dazu ein Optimierungs-Plugin, das dir dabei hilft, deine transienten Dateien und die gespeicherten Revisionen zu bereinigen und alle Tabellenreste zu entfernen.

WP Rocket hat ein System eingebaut, das dir hilft, deine Datenbank zu bereinigen, entweder manuell oder automatisch.

Solltest du keine Möglichkeit haben, das kostenpflichtige Plugin zu nutzen, kannst du WP Optimize herunterladen, mit dem du deine Datenbank manuell bereinigen kannst, und bei allen Datenbankänderungen ein Backup erstellen.

Was ist mit Werbeanzeigen?

Der Grund, warum ich keine Zeit damit verbringe, aufzulisten, wie du mit Anzeigen eine gute Seitengeschwindigkeit erreichst, ist, dass eine Website mit Anzeigen immer zusätzliche Anfragen stellen wird, um Gebote abzugeben und die Erträge zu maximieren.

Warum die Geschwindigkeit nicht mit Anzeigen abdecken?

Wenn du Hunderte von Anfragen hast, wirst du immer langsamere Seitengeschwindigkeiten haben. Sich mit Anzeigen darauf zu konzentrieren, ist im Grunde so, als würde man versuchen, 1000 Schnitte zu reparieren.

Jeder Anbieter hat seine eigenen Methoden, um die Geschwindigkeit zu kontrollieren: Ezoic nutzt sein Site Speed Accelerator Tool, Mediavine implementiert einen Lazy Load und ähnliches.

Jeder Anbieter kann dir erstaunliche Geschwindigkeiten bieten, aber das ist eine Frage der Zeit, bis du herausfindest, was dir Werbung wert ist.

Geschwindigkeitsabhängige Code-Snippets

Wenn du deine Leistung maximieren willst, kommt es vor allem auf Kleinigkeiten an, um das letzte Quäntchen Geschwindigkeit herauszukitzeln. Einige der unten aufgeführten Massnahmen können mit den oben genannten Plugins umgesetzt werden, andere lassen sich viel einfacher mit einem Code-Snippet erreichen.

Code Snippet: Asynchrones Google Analytics

Du kannst den Code hier verwenden, um eine schnellere Version des Standard-Google-Analytics-Codes in deine Website einzubauen. Der Google Analytics V3 Code beginnt mit einem UA-xxxxxx Code.

WP Rocket – Erweiterte Optionen Prefetch Domains

Wenn du dich für WP Rocket entscheidest, kannst du externe Domains hinzufügen, die du vorab abrufen möchtest, damit du sie sofort nutzen kannst.

Dadurch kannst du Formulare und Daten von externen Domains abrufen, was deine Punktzahl deutlich erhöht, da die Ladeverzögerung sofort einsetzt und nicht erst, wenn die Ressource endlich erreicht wird.

Abschliessende Überlegungen zur Erhöhung der PSI-Werte in WordPress

Die meisten dieser Tipps sollten dir helfen, deine Gesamtpunktzahl bei PageSpeed Insights deutlich zu verbessern. Dies ist jedoch nur ein einzelner Test, und auf Seiten wie der Google Search Console können die Geschwindigkeiten noch viel langsamer sein.

Ein langsamer Wert in der Google Search Console bedeutet, dass du dir ansehen musst, wie deine Website von Besuchern auf der ganzen Welt gefunden wird. Die Werte stammen aus dem CRuX-Bericht und werden im Internet von allen Nutzern gesammelt.

Wenn du schnellere Geschwindigkeiten willst, empfehle ich dir WPX oder Cloudways sowie WP Rocket für das Caching deiner Website, über das du hier auf meiner Website mehr lesen kannst.