Der ultimative Leitfaden zur Optimierung der Seitengeschwindigkeit für WordPress

Wenn Sie dieser Anleitung folgen, lernen Sie alle Techniken kennen, um eine WordPress-Site drastisch zu beschleunigen. Hier sind die wichtigsten Gründe, warum eine hohe Ladezeit der Seite in WordPress Ihrem Unternehmen zugute kommt: Benutzer werden Ihre Website nicht verlassen, sie werden dort mehr Zeit und Geld verbringen und Suchmaschinen werden Ihre Website in den Suchergebnissen besser platzieren. Bereit?

Einleitung

Internetnutzer haben nicht viel Geduld, wenn es um Seitenladezeiten geht. Wir klicken auf einen Link oder geben die URL ein und warten eine Sekunde, zwei, drei und das war's. Laut Google-Statistiken erwarten 50 % der Nutzer, dass eine mobile Website in 2 Sekunden geladen wird, und 53 % der Nutzer verlassen die Seite wahrscheinlich, wenn sie länger als 3 Sekunden lädt. Das ist eine sehr kurze Zeit, wenn man bedenkt, dass die durchschnittliche Ladezeit einer Homepage auf einem mobilen Gerät 19 Sekunden (in einem 3G-Netz) beträgt. Die Ladezeiten auf Computern sind schneller und eine durchschnittliche Ladezeit beträgt 5 Sekunden, aber das ist immer noch zu lang.

Desktop-Website-Benchmarks als Referenz zu nehmen, ist keine Entschuldigung mehr. Bei den meisten Websites kommt heute der Großteil des Datenverkehrs von mobilen Geräten. In diesem Artikel werfen wir einen vollständigen Blick auf die aktuellsten Techniken zur Optimierung der Seitengeschwindigkeit für WordPress-Sites. Wenn Sie dieser Anleitung folgen, können Sie die WordPress-Site beschleunigen, die Ladezeiten für Mobilgeräte und Desktops drastisch verkürzen und sie daher viel benutzerfreundlicher machen.

Wenn Sie keine WordPress-Site haben, schließen Sie die Anleitung noch nicht. Die meisten der in dieser Schritt-für-Schritt-Anleitung erläuterten Techniken zur Geschwindigkeitsoptimierung können auf jede Art von Website angewendet werden.

Wenn Ihre Website mit Blick auf die Monetarisierung erstellt wurde, egal ob es sich um einen Online-E-Commerce-Shop handelt oder Sie Online-/Offline-Dienste verkaufen, ist es nie gut, potenzielle Kunden zu verpassen. Sie lassen im Grunde Geld auf dem Tisch. Die Verbesserung Ihrer Seitengeschwindigkeit sollte sich positiv auf Ihre Einnahmen auswirken. Unterhaltsame Tatsache: Die Spendenkampagne von Obama steigerte die Spendenkonversion um 14 %, indem die Website optimiert und die Seitenladezeit von 5 Sekunden auf 2 Sekunden verringert wurde.

Als Eigentümer oder Entwickler von Websites möchten wir, dass unsere Besucher die beste Erfahrung machen. Wir erstellen großartig aussehende Websites mit großartigen Funktionen, aber wir vergessen normalerweise die Bedeutung einer schnellen Website. Eine schnelle Website baut Vertrauen bei unseren Besuchern auf, sie erhöht die Wahrscheinlichkeit, dass ein Besucher länger auf unserer Seite bleibt und daher möglicherweise mehr ausgibt. Wenn unsere Website andererseits langsam ist, geben die Besucher möglicherweise einfach auf und sehen unsere großartige Website mit unserem ebenso großartigen Angebot nicht einmal.

Wenn die oben genannten Gründe nicht überzeugend genug waren, habe ich noch einen. Google und andere Suchmaschinen (SE) haben gezeigt, dass eine langsame Website Ihr Suchmaschinenranking nach unten drückt und Ihre Website mit noch weniger Besuchern zurücklässt. Eine schnelle Website bedeutet also, dass Google Sie mehr mögen wird, und dies kann Ihre SE-Rankings drastisch zu Ihren Gunsten verändern.

Natürlich variieren die Ladezeiten aus einer Reihe von Gründen, zum Beispiel der Internetgeschwindigkeit des Besuchers, dem Standort des Besuchers und wie „schwer“ oder aufgebläht unsere Website ist. Wir können nichts gegen die Internetgeschwindigkeit des Besuchers tun, aber wir können uns um andere Aspekte kümmern und das Erlebnis für alle verbessern. In diesem Leitfaden werden wir uns ansehen, wie wir unsere WordPress-Website auf Geschwindigkeit optimieren, um sie schnell und schlank zu machen, also los geht's!

Inhaltsverzeichnis

• Stiftungen
  • WordPress-Hosting
    • Shared Hosting
    • Verwaltetes Hosting
    • VPS oder dedizierte Server
  • WordPress-Thema
  • WordPress-Plugins
• Schritte zur Optimierung der WordPress-Seitengeschwindigkeit
  • Seitengeschwindigkeits-Tools
    • Google PageSpeed ​​Insights
    • GTMetrix
    • Pingdom Website-Geschwindigkeitstest
    • Webseiten-Test
  • Bildoptimierung
    • Kurzanleitung zur Bildoptimierung
    • Für Google PageSpeed ​​optimierte Bilder
    • Andere Bildverbesserungen
    • Verbesserungen der Fallstudie
  • Browser-Caching
  • Ressourcenkomprimierung (Gzip oder Deflate)
  • Entfernen Sie nicht benötigte JS- oder CSS-Dateien
  • Renderblockierendes JavaScript und CSS in Inhalten "above the fold".
  • Serverseitiges Caching
    • WP Rocket (serverseitiges Caching-Plugin)
  • Content-Delivery-Netzwerk
    • Wolkenflare
• Endgültige Ergebnisse
• Fazit

Stiftungen

Um Ihre Website so schnell wie möglich zu machen, müssen wir sie auf einem guten Fundament aufbauen. Genau wie beim Hausbau will man nicht auf Treibsand bauen und gleich am Anfang Probleme haben. Sie möchten es auf einem soliden Fundament aufbauen, damit es lange ohne Probleme hält. Die drei wichtigsten zu überprüfenden Dinge sind:

• Bewirtung
• das WordPress-Theme
• die WordPress-Plugins

WordPress-Hosting

Hosting ist die eigentliche Grundlage Ihrer WordPress-Website und daher ein entscheidender Bestandteil, der nicht außer Acht gelassen werden sollte, auch wenn Sie bereits über ein Hosting verfügen. Der Wechsel zu einem besseren Hosting-Anbieter beschleunigt die Ladezeit von WordPress um bis zu mehrere Sekunden.

Die Auswahl des richtigen Webhosters ist wichtig und Sie sollten Ihre Entscheidung nicht auf den Preis des Hostings stützen. Normalerweise erhalten Sie bei niedrigen Preisen eine geringe Leistung, und das möchten wir vermeiden. Schauen wir uns die verfügbaren Hosting-Optionen an und erklären, was die Unterschiede sind.

Shared Hosting

Dies ist die am weitesten verbreitete Hosting-Lösung, weil sie billig ist. Aber wie gesagt, bei niedrigen Preisen bekommt man wenig Leistung. Bei einem Shared Hosting gibt es Tausende von Konten auf einem physischen Server, was bedeutet, dass die Serverressourcen zwischen allen Websites geteilt werden, die von diesen Hosting-Konten erstellt wurden.

Stellen Sie sich eine große Pizza vor (hmmm?…), jede Website auf einem Shared Hosting bekommt ein sehr kleines Stück. Aber weil Ihre Website viele Besucher hat, braucht sie mehr Pizza! Es ist immer noch hungrig, aber es gibt keine Pizza mehr :(, weil andere Websites auch hungrig sind…

Wenn es nicht schlimm genug ist, nur ein winziges Stück Pizza zu bekommen, dann werden potenzielle Sicherheitsrisiken den Shared-Hosting-Fall wahrscheinlich noch schlimmer machen. Eine infizierte Website auf einem Shared Hosting kann Geschwindigkeits- und Leistungsprobleme für den gesamten Server verursachen und auch Ihre WordPress-Site gefährden.

Die Serverkonfiguration auf Shared Hostings ist sehr begrenzt und Sie haben nicht viel Spielraum, um sie nach Ihren Wünschen zu konfigurieren. Der Server ist mit bestimmten, normalerweise sehr allgemeinen Einstellungen vorkonfiguriert und sollte WordPress problemlos ausführen. Später treten Probleme in Form von Speichermangel oder in Form einer eingeschränkten PHP-Einstellung auf, die ein Plugin benötigen würde, um ordnungsgemäß zu funktionieren.

Ich kann Shared Hosting nicht wirklich für geschäftliche Websites empfehlen, aber wenn ich müsste, würde ich sagen, dass es am besten für Websites mit sehr geringem Datenverkehr geeignet ist.

Verwaltetes Hosting

Dies ist ein großes Upgrade von Shared Hosting, da Ihre Website ein größeres Stück Pizza bekommt (ein ganzes Pizzastück, ja!), Aber es kostet mehr.

Die Server auf dem verwalteten Hosting sind weniger bevölkert und das bedeutet mehr Serverressourcen für Ihre Site. Diese Server sind normalerweise so optimiert, dass WordPress so reibungslos wie möglich läuft, sie haben mehr Speicher, Rechenleistung und ein Caching-System.

Die Hardware- und Softwareinstallation und -konfiguration dieser verwalteten Hosting-Server erfolgt durch das Hosting-Unternehmen (daher das Wort „verwaltet“). Weitere Services wie Backups, Load Balancer, Disaster Recovery und Security Checks/Präventionen können je nach Angebot des Hosting-Unternehmens ebenfalls Teil des Managed Hostings sein.

Verwaltetes WordPress-Hosting wird für Websites mit geringem bis mittlerem Datenverkehr empfohlen.

VPS oder dedizierte Server

Wenn wir bei der Pizza-Analogie bleiben, bekommt man mit VPS (Virtual Private Server) ein paar Pizzastücke, aber nicht die ganze Pizza und mit dedizierten Servern bekommt man die ganze Pizza.

Das bedeutet, dass Sie bei dedizierten Servern die Kontrolle über den gesamten Server mit all seinen Ressourcen haben und beim VPS einen Teil des Servers erhalten, da Sie die physische Servermaschine immer noch mit anderen teilen. Wenn es um die Optimierung der Seitengeschwindigkeit für WordPress geht, gibt es keine serverseitigen Einschränkungen, wenn Sie Ihr WordPress entweder auf einem VPS oder einem dedizierten Server einrichten. Sie wissen genau, wie viel Ressourcen Ihnen für Ihre Website zur Verfügung stehen und können sie nach Ihren Wünschen konfigurieren. Sie können modernste Funktionen implementieren, bevor die Standard-Hosting-Anbieter sie unterstützen (was Jahre hinter der Server-Softwaretechnologie zurückbleiben kann).

Beide Optionen bieten mehr Kontrolle und Ressourcen, sind aber auch teurer und erfordern mehr Fähigkeiten, um sie langfristig einzurichten und zu warten. VPS/dedizierte Server können auch verwaltet werden, sodass Sie kein Server-Guru sein müssen, um einen zu verwenden. Sie eignen sich für Websites mit hohem Verkehrsaufkommen.

Wenn Sie sich nicht sicher sind, für welches Hosting Sie sich entscheiden sollen, würde ich die verwaltete WordPress-Hosting-Option vorschlagen, die bei Bedarf auch skalieren (mehr Ressourcen vom Server zuweisen) können sollte.

Eine kostenlose Website-Optimierung, die mittlerweile jedes anständige Hosting anbietet, ist das Upgrade der PHP-Version auf 7.x. Wenn Ihre WordPress-Site auf PHP unter 7, wie 5.6 oder sogar älter, läuft, wenden Sie sich bitte an Ihren Hosting-Support und bitten Sie ihn, sie auf die neueste stabile Version zu aktualisieren. Wenn Sie nach einem neuen Hosting suchen, können Sie deren Support fragen, ob sie die PHP-Version 7.x haben. Sie sollten alle mit einem klaren „Ja“ antworten, aber wenn sie keine Möglichkeit haben, PHP 7.x zu verwenden, dann würde ich empfehlen, sich von ihnen fernzuhalten. PHP 7 ist im Vergleich zu älteren Versionen eine große Verbesserung in Bezug auf Geschwindigkeit und Leistung und es ist sehr einfach, darauf umzusteigen, also nutzen Sie es.

Eine gute Hosting-Wahl wird Ihnen viel Ärger ersparen, und wenn Sie auf ein Problem stoßen, sollte Ihnen ein guter Kundensupport helfen können, daher würde ich auch daran denken, einen Host zu wählen, der guten Support bietet . Ein schneller Trick, den Sie anwenden können: Stellen Sie ihnen vor dem Kauf eine Frage und überwachen Sie ihre Reaktionszeit, Einstellung und Professionalität.

WordPress-Thema

Wenn wir ein WordPress-Theme für unsere Website auswählen, beginnen wir immer mit dem Design des Themas und das ist in Ordnung. Wir sollten zuerst ein paar Themen auswählen, die uns gefallen, weil wir möchten, dass unsere Website großartig ist und ein großartiges Design das erste ist, was ein Besucher sieht. Die zweite Sache ist wahrscheinlich die Funktionalität des Themas. Bietet das Theme oder die für das Theme empfohlenen Plugins die gewünschte Funktionalität? Wenn ja, großartig! Wir sind im Geschäft! Was wir fast immer vergessen, ist zu überprüfen, wie schnell das Thema geladen wird.

Wir können die Ladezeit der Theme-Demoseite testen und sehen schnell, ob das Theme auf Geschwindigkeit optimiert ist. Wir werden in einem Abschnitt unten prüfen, welche Seitengeschwindigkeits-Tools zu verwenden sind und wie sie verwendet werden, aber im Moment möchte ich Sie nur über diesen zusätzlichen Schritt der Themenüberprüfung vor dem Kauf informieren. Natürlich kann die Ladezeit der Demoseite wahrscheinlich verbessert werden, also wenn Sie keine perfekte Punktzahl bekommen, keine Sorge, kein WordPress-Theme wird eine perfekte 100%-Punktzahl bekommen, außer wenn es sehr wenig Inhalt hat auf seiner Demo-Seite. Als Faustregel gilt, dass Sie nach Themen suchen sollten, die nicht in den roten Zahlen stehen (Punktzahl 50 oder niedriger bei den Seitengeschwindigkeits-Tools).

Es kommt auf eine gute Balance zwischen Theme-Design und Funktionalität vs. Theme-Geschwindigkeit an. Beispielsweise wird ein leeres WordPress-Theme mit ein wenig Text sehr schnell geladen, aber ein aufgeblähtes Theme mit vielen Funktionen (von denen Sie die meisten möglicherweise nicht benötigen) mit vielen Multimedia-Inhalten wird viel langsamer geladen. Diesen Sweet Spot zu treffen, ist das Ziel bei der Auswahl eines guten und performanten WordPress-Themes.

WordPress-Plugins

Eine Frage, die ich oft sehe, ist: „Wie viele Plugins sind zu viele?“. Es ist kein Problem in der Anzahl der WordPress-Plugins, sondern in der Codequalität und den Auswirkungen, die das Plugin auf das System hat. Sie können mehr als 50 aktive Plugins haben, wobei jedes der Plugins sich um eine kleine spezifische Funktionalität kümmert (mit gutem Code) und die Seite gut läuft. Andererseits können Sie 5 aktive Plugins haben und eines davon könnte Ihr System verstopfen und Ihr WordPress langsam machen.

Den Code jedes Plugins durchzugehen ist eine gute Idee, aber „dafür hat niemand Zeit“ , außerdem bräuchte man dafür gute Programmierkenntnisse. Wenn Sie diesen Weg einschlagen, sollten Sie auf Plugins achten, die viele externe Ressourcen in die Warteschlange stellen, viele HTTP-Anfragen stellen, unnötige (nicht optimierte) Datenbankabfragen machen und so weiter (im Grunde alles, was die WordPress-Website verlangsamen würde, ohne triftigen Grund dahinter).

Was ich empfehlen würde, ist, nicht jedes Plugin zu installieren und zu aktivieren, von dem Sie glauben, dass Sie es benötigen.

Denken Sie zuerst darüber nach, benötigt Ihre Website diese zusätzliche Funktionalität wirklich? Wenn Sie beispielsweise einen Button-Shortcode benötigen, überprüfen Sie Ihre Themendokumentation, vielleicht hat das Thema einen Shortcode dafür und Sie müssen kein ganzes Shortcode-Bundle-Plugin installieren und aktivieren, nur um einen einzelnen Tasten-Shortcode zu verwenden. Dies ist ein triviales Beispiel, aber ich möchte, dass Sie nachdenken, bevor Sie neue Plugins installieren und aktivieren. Jedes nicht verifizierte Plug-in kann Ihre Website schwerer und damit langsamer machen und zu Sicherheitsverletzungen führen, wenn das Plug-in schlecht codiert oder nicht gewartet wird.

Schließlich ist eine großartige Sache, die Sie bei der Auswahl des Plugins nutzen können, ein großer globaler Anteil von WordPress und folglich eine riesige Community. Bei mangelnden Programmierkenntnissen ist es eine gute Faustregel, bei den beliebten Plugins mit vielen aktiven Installationen, einer guten durchschnittlichen Bewertung und positiven Bewertungen zu bleiben. Andere WordPresser werden Ihre Auswahl viel einfacher machen!

Schritte zur Optimierung der WordPress-Seitengeschwindigkeit

Bevor wir mit der Optimierung beginnen, möchte ich ein paar Dinge erwähnen.

Zunächst sollten Sie ein Backup Ihrer WordPress-Seite erstellen, hier ist eine Anleitung, wie Sie dies mit einem WordPress-Plugin tun können. Sicher ist sicher!

Zweitens möchte ich Sie davor warnen, die 100/100-Punktzahl in den Seitengeschwindigkeits-Tools zu erwarten, die wir in unserem Leitfaden verwenden werden. Nach dem 100/100-Score zu streben, ist keine gute Idee oder auf einigen Websites überhaupt nicht möglich. Es hängt alles davon ab, welche Art von Inhalten Ihre Website anzeigt. Wenn eine Seite nur ein bisschen Text und ein Bild hat, dann ist eine perfekte Punktzahl durchaus möglich. Aber wenn Sie eine lange Seite mit vielen Multimedia-Inhalten und anderen App-Integrationen von Drittanbietern wie Google Maps usw. haben, dann haben Sie die 100-Punktezahl nicht im Visier und sollten sie auch nicht verfolgen.

Warum ist es keine gute Idee, 100/100 zu wählen? Wenn Sie den Anweisungen der Seitengeschwindigkeitstools folgen und alles wie angegeben optimieren, funktioniert Ihre Website möglicherweise nicht richtig. Wenn Sie alle blockierenden JS- oder CSS-Dateien in die Fußzeile verschieben, würde das CSS-Blinken erscheinen (ungestylter Inhalt würde zuerst erscheinen und wenn das CSS geladen würde, würde die Website an Ort und Stelle „flashen“). Dasselbe würde mit JS-Code passieren , das alle DOM-Elemente ändern würde, nachdem der JS-Code geladen wurde.

Sie könnten Ihre Website beschädigen, wenn Sie blind den Anweisungen folgen und Ihre WordPress-Website für eine bessere Ladezeit optimieren, nur um die perfekte Punktzahl zu erzielen. Der perfekte Seitengeschwindigkeitswert ist nur eine Zahl, die eigentlich keine Rolle spielt, wenn Ihre Besucher auf einer kaputten Website landen. Wir müssen nach dem Gleichgewicht zwischen Seitengeschwindigkeit und Benutzererfahrung suchen.

Für die Demonstration der Optimierung der WordPress-Seitengeschwindigkeit verwenden wir mein Shared-Hosting-Konto und unser medizinisches WordPress-Thema (mit den für das Thema empfohlenen Plugins). Ja, ja, ich weiß, dass ich im Grunde gesagt habe, kein Shared Hosting zu verwenden, aber wir werden sehen, was es kann und was die Einschränkungen sind, außerdem ist dies nur ein Test zur Optimierung der Seitengeschwindigkeit, keine tatsächliche WordPress-Website für Unternehmen

Ich habe die neueste Version von WordPress, das MedicPress-Thema, alle für das Thema empfohlenen Plugins installiert und die Demo-Inhalte importiert. Dies ist unser Ausgangspunkt für das Testgelände.

Seitengeschwindigkeits-Tools

Die Optimierung der Seitengeschwindigkeit kann schwierig sein, aber zum Glück gibt es Online-Tools, die uns das Leben erleichtern und uns Ratschläge geben, was zu tun ist, um die Geschwindigkeit unserer Website zu verbessern.

Die erste Regel zur Optimierung deines WordPress auf Geschwindigkeit lautet: Immer messen!

Führen Sie die Tools (oder zumindest eines davon), die wir uns im folgenden Abschnitt ansehen werden, nach jedem Optimierungsschritt aus und verfolgen Sie die Verbesserungen. So wissen Sie, welche Aufgaben die größten Verbesserungen bringen. Sie sollten auch mehrmals Tests durchführen, um die tatsächliche durchschnittliche Ladezeit zu sehen.

Seiten werden unterschiedlich geladen, je nachdem, wo sich der Hosting-Server befindet. Wenn sich Ihr Server beispielsweise in Nordamerika befindet und der Besucher aus Europa kommt, wird die Seite für ihn langsamer geladen als für einen kanadischen Besucher. Dieses Problem kann mit einem CDN (Content Delivery Network) behoben werden, aber wir werden uns etwas später in diesem Artikel damit befassen. Im Moment wollte ich nur darauf hinweisen, dass dieses Problem für Besucher auf der ganzen Welt und auch für Tools zur Optimierung der Seitengeschwindigkeit präsent ist. Einige Tools ermöglichen es Ihnen auch, den Test von verschiedenen Orten aus durchzuführen, damit Sie sehen können, wie sich dies auf die Ladezeit auswirkt.

Die Seitengeschwindigkeits-Tools, die wir uns ansehen werden, sind:

• Google PageSpeed ​​Insights
• GTmetrix
• Pingdom Website-Geschwindigkeitstest
• WebseitenTest

Es gibt andere Tools, aber dies sind die beliebtesten und wir bleiben bei ihnen.

Google PageSpeed ​​Insights

Wie Sie dem Titel dieses Tools entnehmen können, handelt es sich um ein Produkt von Google. Neben dem Score (aufgeteilt in Desktop und Mobile) und den nützlichen Anleitungen, was Sie tun können, um die Ladezeit Ihrer Seite zu verbessern, können wir auch einen Rückschluss darauf ziehen, was Google gerne auf einer Website sieht. Welche Dinge auf einer Website optimiert werden sollen, um in den Suchmaschinenergebnissen gut zu ranken.

Wenn Sie nicht optimierte Bilder oder Ressourcendateien (JS oder CSS) haben, wird eine ZIP-Datei mit ihren optimierten Gegenstücken generiert, die Sie auf Ihrem Server ersetzen können. Ziemlich ordentlich, oder? Wir werden uns später mit der Bild- und Codeoptimierung befassen, aber wissen Sie, dass Google PageSpeed ​​Ihnen dabei helfen kann.

Google PageSpeed ​​Insights hat nicht viele Detailinformationen, wie andere Tools, aber es ist ein guter Ausgangspunkt, der alle wichtigen Aspekte der Seitengeschwindigkeitsoptimierung abdeckt. Es listet die Schritte auf, die Ihre Website am meisten verbessern werden.

Ich habe dieses Tool mit der URL unserer Testseite ausgeführt und eine Punktzahl von 71 für Desktop und 67 für Mobilgeräte erhalten, also gibt es Raum für Verbesserungen. Die Liste möglicher Optimierungsvorschläge umfasst:

• Komprimierung aktivieren (Ressourcen mit gzip oder deflate komprimieren),
• Bilder optimieren,
• Reaktionszeit des Servers verkürzen,
• Eliminieren Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold",
• JavaScript minimieren.

GTmetrix

Dieses Tool gibt Ihnen detailliertere Informationen darüber, welche Dinge optimiert sind und welche nicht. Jedes Optimierungsdetail wird aufgelistet und auf einer Skala von 0-100 bewertet. Die Liste ist nach Wichtigkeit geordnet. Wenn Sie also die Aufgaben von oben nach unten verfolgen und diejenigen optimieren, die keine 100%-Punktzahl haben, sind Sie auf einem guten Weg, die WordPress-Site so schnell wie möglich zu beschleunigen.

Mithilfe von PageSpeed- und YSlow-Testtools generiert GTmetrix Bewertungen für Ihre Seite und zeigt die Aufgaben an, die verbessert werden müssen. Ein nettes Feature dieses Tools ist auch der Wasserfallbericht, der grafisch darstellt, wie Ihre Website geladen wird, und Sie können die Engpässe schneller erkennen. Im Bild unten sehen Sie, dass mein langsames Shared Hosting 1,13 Sekunden brauchte, um mit den ersten Informationen zu antworten. Das ist viel zu lang, aber wir werden in der Lage sein, das zu verbessern.

Sie können Ihre Seite auch von 7 verschiedenen Standorten auf der ganzen Welt aus testen, was schön und auch wichtig zu testen ist, was wir später in diesem Artikel sehen werden.

Ich habe das GTmetrix-Tool (Standort: Vancouver, Kanada) auf unserer Testseite ausgeführt und einen PageSpeed-Score von 77 und einen YSlow-Score von 71 erhalten. Mit diesem Tool erhalten wir auch diese nützlichen Informationen:

• Vollgeladene Zeit: 3,1 s,
• Gesamtseitengröße: 803 KB
• Anfragen: 54

Am besten gefällt mir das GTmetrix-Tool, da man viele relevante Informationen an einem Ort erhält. Wir werden in diesem Leitfaden hauptsächlich das Tool GTmetrix verwenden, um unseren Optimierungsfortschritt zu messen.

Pingdom Website-Geschwindigkeitstest

Pingdom ist ein weiteres Tool, das die Optimierungsinformationen etwas anders anzeigt. Sie erhalten die gleichen grundlegenden zusammenfassenden Daten wie beim GTmetrix-Tool (ohne den YSlow-Score). Mit Pingdom haben Sie die Möglichkeit, die Seitengeschwindigkeit an 4 verschiedenen Orten zu testen. Die Ergebnisse sind für jeden Standort unterschiedlich, was zeigt, dass der Serverstandort wichtig ist, aber wir werden auch das verbessern können (mit CDN später in diesem Artikel). Wir werden das Pingdom-Tool verwenden, um die Seitenladezeiten an den 4 verfügbaren Standorten zu testen, da Pingdom-Tests schneller abgeschlossen werden.

Pingdom zeigt auch einige interessante Tabellen an, wie Inhaltsgröße oder Anzahl der Anfragen, gefiltert nach Inhaltstyp oder Domain, und es hat auch einen Wasserfallbericht.

WebseitenTest

Das WebPageTest-Tool bietet noch mehr Konfigurationsoptionen als die vorherigen Tools. Es stehen mehr Standorte zur Auswahl, eine Internetgeschwindigkeit kann ausgewählt werden, Sie können einige Browseroptionen aktivieren/deaktivieren und Sie können bestimmte Geräte testen.

Es ist ein gutes Tool, das einen detaillierten Wasserfallbericht für jeden Lauf anzeigt (standardmäßig macht es 3 Läufe, aber Sie können das in den Einstellungen ändern) und es zeigt eine Note von A bis F für jeden dieser Geschwindigkeitsoptimierungsfaktoren an:

• First-Byte-Zeit (Antwortzeit),
• Keep-Alive aktiviert,
• Übertragung komprimieren (gzip),
• Bilder komprimieren,
• statischen Inhalt zwischenspeichern,
• effektive Nutzung von CDN.

Sie können ins Detail gehen, indem Sie alle Ergebnisregisterkarten überprüfen, wo Sie viele nützliche Informationen finden. Ich würde dieses Tool verwenden, wenn ich einen detaillierten Bericht benötige oder wenn ich einen auf ihrer Website verfügbaren Standort testen müsste, ansonsten denke ich, dass die GTmetrix präzisere Informationen hat.

Ich habe dieses Tool für unsere Testseite ausgeführt. Sie können die Ergebnisse im folgenden Screenshot sehen:

Wir haben uns die populäreren Seitengeschwindigkeits-Tools angesehen und die ersten Seitengeschwindigkeitstests durchgeführt, sodass wir jetzt endlich bereit sind, mit der Optimierung unserer WordPress-Seite zu beginnen. Als Referenz sind dies die Ausgangspunktergebnisse der Seitengeschwindigkeits-Tools, die wir zur Messung unseres Fortschritts bei der Geschwindigkeitsoptimierung verwenden werden:

• Google PageSpeed ​​Insights
  • Handy: 67
  • Arbeitsplatz: 71
• GTmetrix
  • Seitengeschwindigkeit: 77
  • Ylangsam: 71

Bildoptimierung

Dies ist wahrscheinlich der am meisten ignorierte Aspekt der Website-Leistung und kann gleichzeitig die größte Verbesserung Ihrer Website-Geschwindigkeit bringen. Wenn Sie nie daran denken, das Bild zu optimieren, bevor Sie es auf Ihre WordPress-Seite hochladen, dann ist dies ein großartiger erster Schritt für Ihre WordPress-Ladezeitoptimierung.

Das Hochladen großer, nicht optimierter Bilder, die an einer kleinen Stelle auf Ihrer Website verwendet werden, ist ein großes „Nein, nein“. Beispiel: Sie haben einen Bildplatz auf Ihrer Website, der nicht größer als 600 x 400 px sein wird, und Sie laden ein Bild mit 1920 x 1080 px (oder noch größer!) hoch. Wenn Sie diesen Fehler jetzt ein paar Mal wiederholen, wird Ihre Website sehr langsam sein.

Als erstes müssen Sie das Bild auf die richtige Größe skalieren. In unserem Beispiel wird der Bildplatz nie größer als 600 x 400 Pixel sein, also sollten wir das Bild auf diese Größe skalieren.

"Das war's, Job erledigt, oder?" NÖ. Wir können das Image noch weiter verbessern. Es gibt viele Tools, die das Bild optimieren (komprimieren), ohne an Qualität zu verlieren (unsere Augen können den Qualitätsverlust mit diesen Tools nicht erkennen). Dadurch wird auch die Größe der Bilddatei drastisch reduziert, wodurch das Laden beschleunigt wird.

Die Bildkomprimierung kann manuell oder mit WordPress-Plugins erfolgen. Mein Kollege Marko hat einen phänomenalen Leitfaden zur Bildoptimierung geschrieben, daher werden wir das aus seinem Artikel gewonnene Wissen nutzen und schnell die Techniken durchgehen, mit denen Sie Ihre Bilder optimieren können.

Kurzanleitung zur Bildoptimierung

Wählen Sie das richtige Bildformat – die beliebtesten Bildformate für die Online-Nutzung sind JPEG und PNG. Sie können viel Bilddateigröße sparen, indem Sie das richtige Bildformat auswählen (Marko hat in seinem Artikel 45 % gespart). Du solltest benutzen:

• Das .jpg -Format für Fotos, Bilder mit Farbverläufen und Bilder mit Millionen von Farben.
• Das .png -Format für Bilder mit begrenzten Farben (Logos) und Bilder mit Transparenz.

Ändern Sie die Größe Ihrer Bilder – Wie ich oben erwähnt habe, sollten Sie die Größe von Bildern immer ändern, bevor Sie sie auf Ihre WordPress-Site hochladen. Überprüfen Sie zunächst, wie groß der Platz ist, an dem Sie das Bild verwenden werden, und ändern Sie die Größe entsprechend. Sie können die Größe der Bilder mit einem Bildbearbeitungsprogramm wie GIMP oder Photoshop ändern.

Komprimieren Sie Ihre Bilder – Dies kann mit einem Online-Bildkomprimierungstool oder mit einem WordPress-Plugin erfolgen:

Online-Komprimierungstool : Marko empfiehlt das Online-Tool Optimizilla. Laden Sie einfach Ihre Bilder in die Optimizilla-App hoch und laden Sie nach Abschluss des Vorgangs die optimierten Bilder herunter, die Sie dann auf Ihre WordPress-Site hochladen sollten. Das klingt etwas mühsam, daher gibt es natürlich ein WordPress-Plugin, das diesen Vorgang vereinfachen kann.

WP-Bildkomprimierungs-Plugin : Auch hier hat Marko die beliebtesten Bildkomprimierungs-Plugins getestet und zum Sieger erklärt: ShortPixel Image Optimizer. Nachdem Sie das Plugin installiert haben, müssen Sie einen API-Schlüssel anfordern, um das Plugin verwenden zu können (ein sehr einfacher Vorgang). Die Standardeinstellungen des Plugins sind großartig, Sie müssen also nichts einrichten, gehen Sie einfach zu Medien -> Bulk ShortPixel und klicken Sie auf die Schaltfläche „Optimierung starten“. Jedes neu hochgeladene Bild wird ebenfalls optimiert. Hinweis: Die kostenlose Version dieses Plugins erlaubt nur 100 Bildoptimierungen/Monat, wenn Sie mehr benötigen, müssten Sie zu ihrem kostenpflichtigen Plan wechseln. Wir möchten, dass unsere Kunden Zugang zu den besten Tools auf dem Markt haben, deshalb sind wir eine Partnerschaft mit ShortPixel eingegangen und jetzt erhalten unsere ProteusClub-Mitglieder auch 1.000 Credits kostenlos zur Verwendung mit dem ShortPixel WordPress-Plugin.

Abschließend kann ich Ihnen nicht genug empfehlen, den ganzen Artikel über die Bildoptimierung in WordPress zu lesen.

Für Google PageSpeed ​​optimierte Bilder

Dies ist eine alternative Möglichkeit, wie Sie Ihre vorhandenen Bilder auf Ihrer WordPress-Site optimieren können. Wenn Sie die obigen Schritte im Abschnitt Mini-Anleitung zur Bildoptimierung befolgt haben, haben Sie wahrscheinlich bereits Bilder optimiert und Google PageSpeed ​​wird daher keine Bilder für Sie haben. Gut gemacht! Sie können diesen Abschnitt weiterhin zu Informationszwecken lesen

Ich habe in der Einführung zum Google PageSpeed-Tool erwähnt, dass Google eine ZIP-Datei mit optimierten Dateien generiert, die Sie auf Ihrer Website verwenden können. Sie können die ZIP-Datei herunterladen, indem Sie auf diesen Link klicken:

In dieser ZIP-Datei befindet sich ein Ordner mit dem Namen image , der die optimierten Bilder enthält. Sie können sie über FTP oder Ihren Hosting-Datei-Uploader hochladen. Ersetzen/überschreiben Sie die Bilder in den richtigen Upload-Ordnern (…/wp-content/uploads/…). Danach sollten Sie auch die kleineren Versionen (Thumbnails) dieser Bilder auf Ihrer WordPress-Seite generieren. Sie können dies mit dem Plugin Regenerate Thumbnails tun.

Andere Bildverbesserungen

In diesem Abschnitt werden wir uns einige weitere Verbesserungen in Bezug auf Bilder ansehen, die wir nutzen können, um etwas mehr Leistung zu erzielen.

Faules Laden von Bildern

Lazy Loading ist eine Technik zum Laden von Bildern, bei der Bilder asynchron geladen werden. Bilder, die nicht "above the fold" sind, werden beim Laden der Seite nicht geladen (sie werden nach oder sogar nur dann geladen, wenn sie benötigt werden). Das bedeutet, dass Bilder, die oben auf der Seite zu sehen sind, geladen werden, während andere (nicht sichtbare) Bilder geladen werden, nachdem die Seite geladen wurde oder wenn der Benutzer die Seite herunterscrollt (bei Bedarf). Wenn Sie eine lange Seite mit vielen Bildern haben, können Sie mit dieser Technik viel Zeit beim anfänglichen Laden der Seite sparen.

Lazy Loading kann mit benutzerdefiniertem Code oder mit einem WP-Plugin implementiert werden. Wir werden später das WP Rocket Caching-Plugin verwenden und es hat auch eine Lazy-Load-Funktion.

Bild-Hotlinking

Was ist Hotlinking? Es zeigt ein Bild an, das auf einem anderen Server gehostet wird. Wenn Sie beispielsweise einen sehr beliebten Beitrag haben und in diesem Beitrag ein schönes Bild haben. Ein Besucher (Dieb) könnte die URL der Bildquelle kopieren und auf seiner eigenen Website verwenden. Das bedeutet, dass das Bild von Ihrem Server angefordert und bereitgestellt wird. Multiplizieren Sie den Dieb mit 100 und Sie haben Tausende von externen Anfragen, auf die Ihr Server antworten muss, was Ihren Server verlangsamen kann.

Dabei handelt es sich nicht um eine direkte Seitengeschwindigkeitsoptimierung, sondern um eine Serveroptimierung. Sie können das Hotlinking-Problem mit etwas Code in der .htaccess-Datei lösen. Sie können noch einen Schritt weiter gehen (ein bisschen böse sein) und das gestohlene Bild durch ein anderes, vielleicht nicht so schönes Bild ersetzen :). Das geht auch in der .htaccess-Datei. Öffnen Sie Ihre .htaccess-Datei auf Ihrem Server und fügen Sie diesen Code hinzu. Ersetzen Sie your-website.com durch Ihre Domain, google.com durch eine beliebige andere Domain, der Sie Zugriff auf Ihre Bilder gewähren möchten, und ersetzen Sie http://replacing-stolen-image-url-goes-here.jpg mit der Bild-URL, die Sie für gestohlene Bilder anzeigen möchten.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Wenn Sie das gestohlene Bild nicht durch Ihr benutzerdefiniertes Bild ersetzen möchten, verwenden Sie diesen Code. Dadurch wird das Bild auf ihrer Website deaktiviert:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Verbesserungen der Fallstudie

Schauen wir uns die Fortschritte an, die wir bisher mit unserer Testseite gemacht haben, nachdem wir die Bilder optimiert haben. Wie Sie wissen, habe ich Demodaten für unser medizinisches Thema importiert, das wir als unsere Testseite verwenden. Diese Demobilder verwendeten die richtigen Dateiformate und hatten bereits die richtige Größe, sodass ich diese beiden Schritte überspringen konnte. Wenn ich ein neues Bild hochladen müsste, würde ich sie nicht überspringen!

Also habe ich das ShortPixel-Plugin installiert und den Massenoptimierer ausgeführt. Das Plugin meldete eine durchschnittliche Bildoptimierung von 38 %. Das ist großartig!

Ich habe das Tool PageSpeed ​​Insights ausgeführt und Google hat darauf hingewiesen, dass einige der Bilder noch weiter komprimiert werden können, also habe ich meinen eigenen Rat befolgt, die Bilder verwendet, die Google für mich vorbereitet hat, und sie per FTP auf meinen Server hochgeladen.

Nachdem die Bilder sortiert wurden, waren die Ergebnisse der Page Speed ​​Tools:

• Google PageSpeed ​​Insights
  • Mobil: 72
  • Arbeitsplatz: 77
• GTmetrix
  • Seitengeschwindigkeit: 81
  • Ylangsam: 71

Keine große Verbesserung, da die in den Demodaten verwendeten Bilder bereits recht optimiert waren, aber wir sind unserem Ziel einen Schritt näher gekommen. Wenn Sie nicht optimierte Bilder auf Ihrer Website haben, bringt Ihnen dieser Bildoptimierungsschritt eine enorme Steigerung der Punktzahl und verkürzt die Ladezeit der Seite.

Browser-Caching

Wenn ein Benutzer Ihre Website über einen Browser besucht, muss er alle Ressourcen (HTML, Bilder, JS, CSS, …) von Ihrem Server herunterladen, um die Website für den Besucher anzuzeigen. Wenn derselbe Benutzer eine andere Seite Ihrer Website besucht, bleiben die CSS- und JS-Dateien normalerweise gleich, aber der Browser lädt sie möglicherweise immer noch erneut von Ihrem Server herunter, wenn Sie keine ordnungsgemäße Serverkonfiguration haben.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Gut gemacht!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Schauen wir uns die Einstellungen an, die das WP Rocket-Plugin zu bieten hat. WP Rocket hat ein nettes Kontextmenü in deiner oberen WP-Admin-Menüleiste. Von dort aus können Sie auf die Einstellungsseite zugreifen, den Cache leeren und auf andere nützliche Informationen zu diesem Plugin zugreifen.

Bevor wir fortfahren und verschiedene WP Rocket-Einstellungen ausprobieren, möchte ich erwähnen, dass Sie nach jeder Änderung, die Sie vornehmen, Ihre Website in einem Inkognito-/privaten Browser-Tab überprüfen sollten. Wenn Sie bei Ihrer WordPress-Site angemeldet sind, sehen Sie die zwischengespeicherte Version der Site nicht. Im Inkognito-Browser-Tab werden Sie nicht eingeloggt und erhalten eine zwischengespeicherte Version der Website, damit Sie überprüfen können, ob sie funktioniert.

Beachten Sie auch, dass das Aktivieren jeder WP Rocket-Einstellung unterschiedliche Ergebnisse oder sogar negative Auswirkungen auf Ihre WordPress-Geschwindigkeit haben kann, je nachdem, welches Thema oder welche Plugins Sie verwenden. Daher ist es nicht der richtige Weg, nur alle WP Rocket-Einstellungen zu aktivieren. Sie sollten jede Einstellung ausprobieren und mit Seitengeschwindigkeits-Tools messen, um den Unterschied zu sehen. Wie Sie sehen werden, werden einige Techniken unsere Seitengeschwindigkeit nicht verbessern, daher werden wir sie nicht verwenden.

Cache leeren

Das serverseitige Caching beginnt zu funktionieren, sobald Sie das WP Rocket-Plugin aktivieren, also schauen wir uns an, wie wir es löschen können. Sie können den Cache manuell leeren, wenn Sie im Kontextmenü von WP Rocket auf den Menüpunkt „Cache leeren“ klicken. Das Plugin kümmert sich auch automatisch um das Leeren des Cache, wenn Sie Customizer-Einstellungen aktualisieren, Widgets, Kategorien ändern/aktualisieren, … und es löscht den Cache teilweise, wenn Sie eine Seite aktualisieren. Weitere Informationen darüber, wann das automatische Löschen des Caches erfolgt, finden Sie in dieser WP Rocket-Frage.

Der Cache hat eine Lebensdauer, die im Tab „Basic“ der WP Rocket-Einstellungen eingestellt werden kann. Ich schlage vor, dies auf 1 Tag einzustellen.

Cache vorladen

Ein nettes Feature von WP Rocket ist „Preload Cache“, das den Cache Ihrer Homepage und der Seiten, auf die sie verlinkt, vorlädt, sodass Ihre Benutzer immer eine zwischengespeicherte Version der Seite erhalten. Ich könnte diese Funktion verwenden, bevor ich die Seitengeschwindigkeitstools ausführte, und ich müsste die Tools nicht mehrmals ausführen, um die Ergebnisse der zwischengespeicherten Version zu erhalten.

Auf die Preload-Cache-Einstellungen kann auf der Einstellungsseite unter der Registerkarte „Preload“ zugegriffen werden. Suchen Sie nach der Option „Preload Bot“, dort finden Sie eine manuelle und eine automatische Option. Wenn Sie die automatische Bot-Option aktivieren, wird der Preload-Cache jedes Mal ausgeführt, wenn Sie eine Seite aktualisieren oder erstellen oder wenn der Cache abläuft. Diese Option kann die Leistung Ihres Servers beeinflussen, also behalten Sie die Leistungsprotokolle im Auge, wenn Sie sie aktivieren. Wenn Sie viele Beiträge/Seiten aktualisieren und erstellen und ein Shared Hosting haben, würde ich Ihnen raten, diese Option nicht zu aktivieren. Sie sollten stattdessen nur die manuelle Bot-Option aktivieren, die ein weiteres WP Rocket-Kontextmenüelement mit dem Titel „Preload Cache“ erstellt und den Cache nur dann vorlädt, wenn Sie darauf klicken (nachdem Sie mit der Bearbeitung von Beiträgen und Seiten fertig sind).

Auf der Registerkarte „Preload“-Einstellungen finden Sie auch Einstellungen zum Vorladen des Caches aus einer Sitemap, sodass Sie eine Sitemap definieren können und diese die URLs in der Sitemap verwendet, um den Cache für diese Seiten vorab zu laden.

LazyLoad

Ich habe das verzögerte Laden von Bildern bereits im Abschnitt Bildoptimierung dieses Artikels erklärt, aber jetzt, da wir WP Rocket installiert haben, können wir diese Funktion tatsächlich aktivieren. Gehen Sie zur Registerkarte „Basic“ der WP Rocket-Einstellungen und aktivieren Sie LazyLoad für Bilder. Wenn Sie Videos oder Iframes verwenden, können Sie dies ebenfalls aktivieren.

Nachdem Sie diese Funktion aktiviert haben, sollten Sie immer Ihre Website überprüfen und sehen, wie die Bilder geladen werden. LazyLoad kann Ihr Website-Layout beschädigen oder Ihnen gefällt möglicherweise nicht, wie die Bilder geladen werden (Inhaltssprünge), also überprüfen Sie immer Ihre Seiten. Diese Funktion ist wirklich praktisch, wenn Sie viele Bilder unterhalb der Falte haben, und sie hilft Ihnen, die Anzahl der Bildanfragen beim Laden der ursprünglichen Seite zu reduzieren. Auf unserer Testseite haben wir nur 5 Bilder unterhalb der Falte, also haben wir 5 Bildanfragen eingespart und unsere Seitenladezeit ist jetzt auf 1,7 Sekunden gesunken, während die Ergebnisse der Seitengeschwindigkeitstools gleich geblieben sind. Dies ist ein guter Indikator dafür, dass Sie Ihre Seitengeschwindigkeit mit bestimmten Aufgaben verbessern können, die die Tools nicht vorschlagen.

Dateien minimieren

Einige der GTMetrix-Vorschläge, die wir noch verbessern können, sind das Minimieren von HTML-, CSS- und JS-Dateien. Da unser WordPress-Theme und die meisten empfohlenen Plugins bereits minimierte Versionen für die JS/CSS-Dateien verwenden und wir Gzip auf unserem Server aktiviert haben, wird diese WP Rocket-Optimierung keine wesentlichen Verbesserungen für unsere Testseite bringen, aber Ihr Fall könnte es sein unterschiedlich. Gehen Sie in den WP Rocket-Einstellungen auf die Registerkarte „Statische Dateien“ und aktivieren Sie alle 3 Optionen unter der Option Dateien minimieren . Speichern Sie die Einstellungen und überprüfen Sie Ihre Website in einem Inkognito-/Privat-Tab, damit Sie nach Problemen suchen können, die diese Optionen für Ihre Website mit sich bringen könnten. Auf meiner Test-WordPress-Site hat die CSS-Minifizierung die Seitenerstellungs-Flexbox-CSS-Datei-Enqueue beschädigt, sodass ich die Option „CSS-Minifizierungsdatei“ deaktivieren musste. Die HTML- und JS-Optionen funktionierten OK.

Ich habe den WP Rocket-Support gefragt, was das Problem sein könnte, und sie waren so nett, dieses Problem auf meiner Website zu debuggen. Das Problem wurde durch den Varnish-Cache verursacht, der auf meinem Shared Hosting verwendet wird. Sie schlugen vor, die Varnish-Konfiguration auf meinem Hosting-Server zu ändern. Ich habe meinen Hosting-Support kontaktiert und wie ich vermutet habe, kann ich die Varnish-Konfiguration auf meinem Shared Hosting nicht ändern, aber ich könnte es, wenn ich auf ein VPS-Hosting-Paket upgraden würde. Wie Sie sehen können, ist die Verwendung eines Shared Hostings keine gute Idee

Wenn Sie Probleme mit der CSS- oder JS-Minifizierung hatten, können Sie die Datei-URL, die die Probleme verursacht hat, zum Feld der ausgeschlossenen JS- oder CSS-Dateien hinzufügen. Es kann schwierig sein, die für die Probleme verantwortliche Datei zu finden, aber normalerweise wissen Sie, welche Funktionalität defekt ist und welches Plugin für diese Funktionalität verantwortlich ist, also überprüfen Sie den Quellcode Ihrer Seite und untersuchen die von diesem Plugin eingeschlossenen Dateien. Wenn das Plugin mehrere JS- oder CSS-Dateien enthält, können Sie einfach versuchen, sie zur Ausschlussliste hinzuzufügen und sehen, ob das Problem behoben ist.

Kombinieren Sie JS- und CSS-Dateien

Die Registerkarte YSlow im GTmetrix-Tool sagt uns, dass wir weniger HTTP-Anfragen machen sollen. Es besagt, dass unser WordPress 9 externe JS-Skripte verwendet und dass wir versuchen sollten, sie zu 1 zu kombinieren, und dass die Seite 4 externe CSS-Dateien verwendet, und wir sollten versuchen, sie auch zu 1 Datei zu kombinieren. Wenn Sie sich erinnern, haben wir die nicht benötigten JS- und CSS-Dateien bereits im Abschnitt Nicht benötigte JS- oder CSS-Dateien entfernen dieses Artikels entfernt.

Das Kombinieren aller JS- und CSS-Dateien in einer Datei ist keine gute Idee, da Browser 6 kleinere Dateien parallel herunterladen können, schneller als 1-2 große Dateien. Der andere Grund ist, dass einige der Dateien im Kopf von HTML-Dokumenten und andere am Ende des Dokuments enthalten sind, sodass Sie sie in mindestens 2 Dateien aufteilen müssen.

Um Dateien mit WP Rocket zu kombinieren, gehen Sie in den Plugin-Einstellungen auf die Registerkarte „Statische Dateien“ und aktivieren Sie die Optionen unter Dateien kombinieren . Überprüfen Sie Ihre Website wie immer in einem Inkognito-/privaten Browser-Tab, um nach Problemen zu suchen.

In unserem Beispiel hatte WP Rocket aufgrund des oben erwähnten Problems mit der Konfiguration von Shared Hosting Varnish erneut Probleme, sodass ich die JS-Option zum Kombinieren von Dateien deaktivieren musste.

Auch hier können Sie, wenn Sie Probleme mit der CSS- oder JS-Verkettung hatten, die Datei-URL, die die Probleme verursacht hat, zur Box der ausgeschlossenen JS- oder CSS-Dateien hinzufügen, genau wie im obigen Minifizierungsschritt.

Entfernen Sie Abfragezeichenfolgen aus statischen Ressourcen

GTMetrix empfiehlt uns, Abfragezeichenfolgen aus statischen Ressourcen zu entfernen, da einige Proxy-Server keine Ressourcen mit Abfragezeichenfolgen zwischenspeichern.

Abfragezeichenfolgen in einer statischen Ressource (normalerweise JS- oder CSS-Datei) sind ein URL-Attribut, das die Version dieser Datei kennzeichnet. Es sieht so aus: ?ver=2.5.8 und wird am Ende der URL angehängt: http://domain.com/css/front-flex.css?ver=2.5.8

Wir können diese Abfragezeichenfolgen mit WP Rocket einfach entfernen. Gehen Sie in den Plugin-Einstellungen auf die Registerkarte „Statische Dateien“ und aktivieren Sie die Option Abfragezeichenfolgen entfernen .

Nach dem Aktivieren dieser Option änderte sich unser GTmetrix PageSpeed-Score auf 98, aber die Ladezeit der Seite änderte sich nicht.

Renderblockierendes CSS/JS

Der einzige verbleibende Vorschlag des Google PageSpeed ​​Insights-Tools lautet: „Render-Blocking-JavaScript und -CSS in „above the fold“-Inhalten eliminieren“. Das bedeutet, dass einige JS- oder CSS-Dateien das Laden der Seite im Above-the-Fold-Inhalt blockieren. Das Tool möchte, dass wir diese blockierenden Ressourcen verzögern oder asynchron laden.

Wieder einmal kommt das WP Rocket-Plugin zur Rettung. Gehen Sie zur Registerkarte „Statische Dateien“ und suchen Sie nach den Render-Blocking-CSS/JS- Optionen. Dort können Sie die JS- und CSS-Optionen aktivieren, die dieses Problem lösen können. Sobald Sie die JS-Option aktivieren, wird eine Option für den abgesicherten Modus (empfohlen) angezeigt. Dieser abgesicherte Modus lädt die jQuery-Bibliothek (WP-standardmäßig in die Warteschlange eingereihte Bibliothek) in den Kopf der Seite und belässt sie als blockierende Datei, aber es werden keine Seiten beschädigt, die Inline-jQuery-Code auf der Seite haben. Da jQuery immer noch im Kopf geladen ist, beschwert sich das PageSpeed-Tool immer noch, dass wir eine renderblockierende JS-Datei haben.

Wenn ich also den abgesicherten Modus für unsere Testseite deaktiviere, gibt uns das Google PageSpeed-Tool eine perfekte Punktzahl, 100 auf dem Handy und 100 auf dem Desktop. Großartig, oder? Nicht wirklich! Unsere Website funktioniert immer noch einwandfrei, aber schauen wir uns an, wie die Website geladen wird:

Flash of Unstyled Content (FOUC) kann behoben werden, indem die CSS-Option Critical Path in den WP Rocket-Einstellungen verwendet wird (direkt unter der Render-Blocking-CSS/JS-Option). Die Theorie besagt, dass Sie den CSS-Code hinzufügen könnten, der für den Teil "above the fold" der Seite benötigt wird, damit dieser Flash-Effekt von unformatiertem Text beim Laden der Seite nicht erscheint. Das ist schwieriger, als es sich anhört. Es gibt Tools, die dieses kritische CSS für Sie generieren sollen, aber ich hatte damit nicht viel Erfolg.

So generieren Sie den CSS-Code für den kritischen Pfad:

1. Deaktivieren Sie das WP Rocket-Plugin auf Ihrer Website.
2. Gehen Sie zum Critical Path CSS Generator-Tool.
3. Geben Sie Ihre Website-URL ein und führen Sie sie aus.
4. Kopieren Sie den CSS-Code des kritischen Pfads.
5. Aktivieren Sie das WP Rocket-Plugin.
6. Fügen Sie den CSS-Code in das Feld „Kritischer Pfad CSS“ in den WP Rocket-Einstellungen ein.
7. Überprüfen Sie, ob im kritischen CSS-Code relative URL-Pfade vorhanden sind, und ändern Sie diese in absolute Pfade.

So sieht das Laden unserer WordPress-Testseite jetzt aus:

Es ist besser, aber ich mag es immer noch nicht. Ja, der Google PageSpeed-Score von 100/100 ist großartig, aber die Gesamtladezeit ist langsamer und wir haben auch 2 weitere Anfragen, weil wir diese CSS/JS-Option zum Blockieren des Renderings aktiviert haben. Das Hauptproblem für mich ist immer noch die Benutzererfahrung beim Laden der Seite, also habe ich diese WP Rocket-Option deaktiviert.

WP Rocket ist definitiv ein Plugin, das jeder Besitzer einer WordPress-Website verwenden sollte, da es über alle Funktionen verfügt, um Ihre Website zu beschleunigen. Schon die Aktivierung des Plugins wird Ihnen einen enormen Schub geben. Andere Funktionen müssen für jede Website getestet werden, da jedes Thema und jedes Plugin seine eigenen Probleme mit sich bringen kann.

Wir sind fast am Ende unserer Optimierungsschritte. Das einzige, was übrig bleibt, ist die Verwendung eines CDN für unsere Website-Assets.

Content-Delivery-Netzwerk (CDN)

Ich habe in diesem Artikel schon einige Male erwähnt, dass die Seitenladezeiten je nach Standort des Servers und Standort des Besuchers unterschiedlich sind. Zum Beispiel befindet sich mein gemeinsam genutzter Hosting-Server, den wir zum Testen verwenden, in Austin, Texas (USA), und am Anfang im Abschnitt Pingdom Page Speed ​​Tool dieses Artikels haben wir 4 Standorte getestet. Hier sind die Ergebnisse:

• Dallas, Texas (USA) = 1,65 s
• San Jose, Kalifornien (USA) = 2,53 s
• Stockholm, Schweden (EU) = 3,06 s
• Melbourne (AUS) = 5,38 s

Nachdem wir die Website mit allen in diesem Artikel erwähnten Schritten optimiert haben, betragen unsere Ladezeiten:

• Dallas, Texas (USA) = 0,63 s
• San Jose, Kalifornien (USA) = 0,76 s
• Stockholm, Schweden (EU) = 1,21 s
• Melbourne (AUS) = 2,24 s

Wir werden diese Zeiten verwenden, um unsere WordPress-Ladezeit zu vergleichen, wenn wir unsere Website für die Verwendung eines CDN einrichten.

Wir können sehen, dass diese Zeiten sehr unterschiedlich sind; Das liegt daran, dass die Daten von unserem Serverstandort zum australischen Besucher einen längeren Weg zurücklegen müssen als zu einem Besucher in Dallas. Hier hilft uns ein CDN, diese Ladezeiten zu verkürzen.

Ein CDN ist ein geografisch verteiltes Netzwerk von Server-Proxies und deren Rechenzentren. Ihr Hauptziel ist es, den Inhalt Ihrer Website von einem Server, der dem Besucher am nächsten ist, an Ihre Besucher zu verteilen. Das bedeutet, dass die statischen Inhalte Ihrer Website (Bilder, JS, CSS, …) von ihren Servern bereitgestellt werden, die auf der ganzen Welt verteilt sind, wodurch Ihre Website für alle schneller geladen werden kann.

Die Verwendung eines WordPress-CDN hat eine Vielzahl von Vorteilen, darunter:

• Verringerte Latenz, d. h. die Zeit und/oder Verzögerung, die die Strecke zurücklegen muss.
• Reduziert die Zeit bis zum ersten Byte (TTFB), die ein Maß dafür ist, wie lange der Browser warten muss, bevor er sein erstes Datenbyte vom Server empfängt.
• Stellt Inhalte aus dem Cache für schnellere Seitenladezeiten und weniger Belastung Ihres Hosting-(Ursprungs-)Servers bereit.
• Verwendet HTTP/2 über sichere Verbindungen, um Multiplexing, Parallelität, Server-Push und HPACK-Komprimierung zu nutzen.
• Komprimiert Daten mit GZIP oder Brotli, um kleinere HTML-, Stylesheets- und JavaScript-Dateien zu gewährleisten.

CDNs bieten heutzutage eine Reihe weiterer Funktionen, insbesondere in der Sicherheitsabteilung. Sie bieten normalerweise DDoS-Schutz, Bots-Erkennung/-Prävention und so weiter.

Wir werden uns eines der beliebtesten CDNs namens Cloudflare ansehen. Sie bieten ein kostenloses Paket an, das die Nutzung ihres globalen CDN beinhaltet, und genau das brauchen wir.

Wolkenflare

Gehen Sie zuerst zu cloudflare.com und melden Sie sich für ein neues kostenloses Konto an. Nachdem Sie ein Konto erstellt haben, müssen Sie Ihre Website auf Cloudflare einrichten, damit sie Ihre statischen Inhalte (Assets) bereitstellen kann.

Wenn Sie sich bei Ihrem neuen Cloudflare-Konto anmelden, werden Sie aufgefordert, Ihre Website (Domain) hinzuzufügen, um die DNS-Einträge automatisch abzurufen.

Geben Sie Ihre Domain ein und klicken Sie auf „Scan starten“. Obwohl ich eine Subdomain verwende ( speed.gregorcapuder.com ), musste ich nur die Root-Domain eingeben: gregorcapuder.com . Der Scan-Teil dauerte ungefähr eine Minute und in der Zwischenzeit können Sie sich ein kurzes Video ansehen, das erklärt, was vor sich geht. Nachdem der Scanvorgang abgeschlossen ist, können Sie auf die Schaltfläche „Weiter“ klicken.

Im nächsten Schritt sehen Sie alle DNS-Einträge, die Cloudflare für unsere Domain finden konnte. Hier müssen Sie alle Datensätze hinzufügen, die möglicherweise fehlen, also gehen Sie die Liste durch und prüfen Sie, ob etwas fehlt. In unserem Beispiel fehlte die Speed-Subdomain, also habe ich sie der Liste hinzugefügt. Bei der Namenseingabe habe ich „speed“ (Name meiner Subdomain) eingetragen, bei der IPv4-Adresse habe ich die gleiche IP-Adresse wie bei meiner Hauptdomain (gregorcapuder.com) eingetragen und dann auf „Add Record“ geklickt. Wie Sie im Screenshot unten sehen können, habe ich Cloudflare sowohl für meine Hauptdomain als auch für die Speed-Subdomain aktiviert (gekennzeichnet durch eine orangefarbene Wolke mit einem Pfeil, der hinter der Wolke verläuft). Das bedeutet, dass der Datenverkehr auf diesen beiden Websites von Cloudflare verarbeitet und geschützt wird.

Wenn Sie mit den DNS-Einträgen fertig sind, können Sie mit dem nächsten Schritt fortfahren, in dem Sie den Plan „Kostenlose Website“ auswählen und fortfahren.

Der letzte Schritt, um Cloudflare für Ihre Website zu aktivieren, besteht darin, sich beim Dashboard Ihres Domain-Registrars anzumelden (wo Sie Ihre Domain gekauft haben) und die Nameserver für Ihre Domain zu ändern. Es wird angegeben, dass es bis zu 48 Stunden dauern kann, bis die neuen Nameserver wirksam werden, aber in meinem Fall wurde sie in 1 Stunde aktualisiert. In der Zwischenzeit wird es keine Website-Ausfallzeit geben, also keine Sorge.

Sobald die Nameserver für Ihre Website aktualisiert sind, sehen Sie, dass sich der Status Ihrer Cloudflare-Website in „aktiv“ ändert.

Ich habe alle Cloudflare-Einstellungen im Dashboard auf Standard belassen, das einzige, was ich geändert habe, war die Sicherheitsstufe. Gehen Sie zur Registerkarte Firewall und stellen Sie die „Sicherheitsstufe“ auf Niedrig ein. Das liegt daran, dass ich nicht möchte, dass meine Besucher eine „Herausforderungsseite“ mit einer falschen Angreifererkennung erhalten.

Nachdem wir nun die Cloudflare-Seite eingerichtet haben, sollten wir auch die Cloudflare-Einstellungen in unserem WP Rocket-Plugin aktivieren.

Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und gehen Sie zu den WP Rocket-Plugin-Einstellungen. Navigieren Sie zur Registerkarte „CDN“, aktivieren Sie die Registerkarte Show Cloudflare settings und speichern Sie die Einstellungen. Dies zeigt einen neuen „Cloudflare“-Tab in den WP Rocket-Einstellungen und Sie sollten ihn öffnen. Dort sollten Sie die E-Mail-Adresse des Cloudflare-Kontos und die Domain eingeben und auch den globalen API-Schlüssel von Cloudflare kopieren und einfügen. Um den globalen API-Schlüssel abzurufen, gehen Sie zum Cloudflare-Dashboard (Registerkarte „Übersicht“) und klicken Sie auf den Link „Get your API key“. Auf dieser neuen Seite sehen Sie einen Abschnitt „API-Schlüssel“ und Sie sollten auf die Schaltfläche „API-Schlüssel anzeigen“ für die Zeile „Globaler API-Schlüssel“ klicken. Sobald Sie den globalen API-Schlüssel in die WP Rocket-Einstellungen eingefügt haben, würde ich auch vorschlagen, die Option „Optimale Einstellungen“ in WP Rocket zu aktivieren. Speichern Sie die Einstellungen und klicken Sie dann auf die Schaltfläche „Cloudflare-Cache löschen“, um zu überprüfen, ob alles in Ordnung ist.

Nachdem das CDN nun konfiguriert ist, können wir die Ladezeiten von verschiedenen Orten erneut testen und die Verbesserungen sehen (Pingdom-Tests).

• Dallas, Texas (USA) = 0,54 s
• San Jose, Kalifornien (USA) = 0,70 s
• Stockholm, Schweden (EU) = 0,91 s
• Melbourne (AUS) = 1,16 s

Wie erwartet haben sich die europäischen und australischen Ladezeiten am meisten verbessert. Und alle unsere Ladezeiten liegen bei etwa 1 Sekunde oder darunter. Das ist eine tolle Ladezeit!

Wenn Sie Ihre Website testen, testen Sie sie nicht mit nur einem Durchlauf des Pagespeed-Tools für einen Standort. Sie müssen es ein paar Mal testen. Wenn Sie das Tool zum ersten Mal für einen bestimmten Standort ausführen, müssen die zwischengespeicherten Dateien zuerst auf dem nächstgelegenen Cloudflare-Server gespeichert werden. Jeder nachfolgende Test sollte Ihnen die wahre Ladezeit der zwischengespeicherten Version zeigen. Ich würde vorschlagen, dass Sie 3-5 Mal testen, um einen guten Durchschnitt zu erhalten, wie schnell Ihre Seite von einem bestimmten Standort aus geladen wird.

Endgültige Ergebnisse

Unsere endgültigen Seitengeschwindigkeits-Tool-Ergebnisse lauten:

• Google PageSpeed-Einblicke
  • Mobil: 91
  • Arbeitsplatz: 97

• GTmetrix
  • Seitengeschwindigkeit: 98
  • Ylangsam: 91

Hier sind die Screenshots:

Vergleichen wir die GTmetrix-Daten vor und nach unserer Optimierung:

Wir haben die Leistung unserer Website in jeder Hinsicht verbessert. Die Website wird schneller geladen, es sind weniger Anfragen erforderlich, um die Website dem Benutzer anzuzeigen, es wird weniger Bandbreite benötigt und es wird für Besucher auf der ganzen Welt schnell geladen. Gleichzeitig haben wir alle Funktionen und das Design unserer Website so beibehalten, wie sie zu Beginn waren. Genial!

Zum Schluss haben wir eine schöne visuelle Darstellung der Ergebnisse für jeden einzelnen von uns durchgeführten Optimierungsschritt vorbereitet:

Fazit

In diesem ultimativen Leitfaden zur Optimierung der Seitengeschwindigkeit von WordPress haben wir uns die wichtigeren Schritte angesehen, die Sie unternehmen können, um die Leistung Ihrer Website drastisch zu verbessern. Wenn Sie den Ratschlägen in diesem Artikel folgen, wird Ihre Website schlank und schnell, was die Ladezeit Ihrer Seite und damit die Benutzererfahrung verbessert. Diese Verbesserungen könnten auch mehr Geld einbringen und Ihnen helfen, einige Serverkosten zu sparen, also ist es eine Win-Win-Situation für alle!

Ich möchte diesen Artikel abschließen, indem ich sage, dass Geschwindigkeit nicht alles ist, sondern ein weiteres Puzzleteil einer Website. Wir erstellen Websites für Menschen, potenzielle Kunden, also denken Sie immer daran. Finden Sie eine gute Balance zwischen Inhalt, Multimedia, Design, Benutzererfahrung und Seitengeschwindigkeit. Seien Sie nicht besessen von Seitengeschwindigkeit und Seitengeschwindigkeits-Tool-Scores. Solange Sie die Erfahrung Ihrer Besucher verbessern, wird Ihr Ziel erreicht.

Habe ich einen Schritt zur Website-Optimierung verpasst, der Ihrer Meinung nach die Ladezeit der Seite entscheidend verbessern kann? Lass es mich in den Kommentaren unten wissen!

Wenn Sie unseren Artikel nützlich finden und seine Schritte befolgt haben, teilen Sie mir bitte in den Kommentaren unten mit, welche Art von Verbesserungen Sie erzielt haben.