Wie Sie Ihre WordPress-Website mit Plugins schneller laden können

Eine schöne Website mit vielen großartigen Inhalten zu haben ist wichtig, wenn Sie die Aufmerksamkeit der Leser auf sich ziehen möchten. Wenn Ihre Seite zu langsam geladen wird, sehen die Leser Ihren Inhalt leider möglicherweise nie. Warum? Sie haben nur wenige Sekunden, um ihre Aufmerksamkeit zu erregen und sie davon abzuhalten, zur nächsten Website zu wechseln. Leser möchten nicht warten, bis Ihre Inhalte geladen sind. Je länger Sie warten, desto wahrscheinlicher werden Sie sie verlieren.

Aus diesem Grund ist es äußerst wichtig, die Ladegeschwindigkeit Ihrer Seite zu optimieren. Es gibt mehrere gute Online-Tools, mit denen Sie Ihre Geschwindigkeit messen und Probleme beheben können. Eines der beliebtesten Tools ist Google PageSpeed ​​Insights.

PageSpeed-Einblicke

Google PageSpeed ​​Insights ist ein kostenloses Online-Tool, das die Ladegeschwindigkeit jeder Website testet, Probleme identifiziert, priorisiert und Vorschläge zur Behebung dieser Probleme macht.

Für diesen Artikel verwende ich meine eigene Website, die Divi von Elegant Themes als Basis-Blog verwendet. Ich zeige, was behoben werden muss, welche Vorschläge das Tool macht und wie ich sie behoben habe. Die Punktzahl gibt Ergebnisse sowohl für Mobilgeräte als auch für Desktops an. Ich konzentriere mich auf den Desktop. Einige der mobilen Probleme werden unterwegs gelöst.

Die meisten dieser Probleme werden durch die Verwendung von Plugins gelöst. Wenn Sie sich für ein Plugin entscheiden, bleiben Sie bei den Plugins, die kürzlich aktualisiert wurden und einen guten Ruf haben. Viele Plugins lösen mehr als ein Problem.

Ein Wort der Vorsicht – einige Plugins spielen nicht gut mit anderen zusammen, weil sie beide versuchen, die gleiche Arbeit zu erledigen. Dies könnte eine andere Wirkung haben als das, was Sie wollen. Ich empfehle, sie auf einer Testseite auszuprobieren, bevor Sie sie auf Ihrer primären Seite verwenden. Nicht nur die Plugins selbst, sondern auch die Plugin-Kombinationen. Bevor Sie Plugins auf Ihrer Live-Site ausprobieren, vergewissern Sie sich, dass Sie über ein aktuelles Backup verfügen.

Meine Punktzahl

Meine Punktzahl ist eine schreckliche 46 . Als Erstes fällt auf, dass die Ergebnisse drei verschiedene Abschnitte enthalten:

• Sollte behoben werden (2 Artikel)
• Erwägen Sie eine Reparatur (6 Artikel)
• Bestanden (2 Artikel)

Jeder Abschnitt wird erweitert, um zu zeigen, was die Probleme sind, und sie geben Ratschläge, wie sie behoben werden können. Ich habe festgestellt, dass es am besten ist, mit dem ersten Element zu beginnen und der Reihe nach vorzugehen. Wenn Sie sie der Reihe nach lösen, werden auch andere Probleme auf der Liste gelöst.

Hinweis – Ich hatte sogar ein paar Fehler auf dem Weg. Ich habe sie eingefügt, damit Sie sich möglicher Probleme bewusst sind.

Sollte beheben

Ich habe zwei Dinge, die sofort bearbeitet werden müssen:

• Komprimierung aktivieren
• Beseitigen Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold".

Komprimierung aktivieren

Mein wichtigstes Problem ist, dass ich keine Komprimierung verwende. Es zeigt, dass ich meine Dateiübertragungsgröße um 79 % reduzieren kann. Dies kann mit gzip oder deflate erfolgen.

WP Performance Score Booster

Dieses kostenlose Plugin verfügt über eine gzip-Komprimierung und löst mehrere andere Probleme wie CSS- und JavaScript-Probleme, indem es Abfragezeichenfolgen entfernt, den Header "variable: Accept-Encoding" hinzufügt und das Caching "Expires" festlegt. Ich habe es gewählt, weil es 4,7/5 mit über 10.000 aktiven Installationen hat. Es wurde entwickelt, um das Laden von Seiten zu beschleunigen und die Seitenbewertungstests zu verbessern.

Dies gab mir eine Punktzahl von 78 mit einer Nachricht, um die Antwortzeit des Servers zu reduzieren. Das hat viel mit meinem Hosting-Plan zu tun. Ich behebe dies, indem ich meine Website auf einen neuen Hosting-Plan verschiebe. Das würde den Rahmen dieses Artikels sprengen.

Eine coole Sache dabei ist, dass einige der Hauptprobleme mit der nächsten Ausgabe gelöst wurden: Eliminieren Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten, die ohne Scrollen sichtbar sind. Dieses Problem wurde jetzt in Behebung in Erwägung ziehen verschoben. Es hat auch Leverage Browser Caching vollständig behoben. Die Website besteht jetzt 4 Regeln, wo zuvor nur 2 bestanden wurden.

Reduzieren Sie die Antwortzeit des Servers

Das Seltsame daran ist, dass die Antwortzeit des Servers von 0,96 auf 1,4 gestiegen ist. Server-Antwortzeit reduzieren war jetzt in Sollte behoben werden. Dies erforderte ein Caching-Plugin.

W3 Gesamtcache

W3 Total Cache ist bei weitem das beliebteste Plugin zur Beschleunigung der Serverleistung Ihrer Website. Es hat fast eine Million aktive Installationen und eine Bewertung von 4,4/5. Es optimiert Ihre Website durch Caching. Sie können die verschiedenen Caching-Optionen individuell auswählen. Dazu gehören Seite, Datenbank, Objekt und Browser. Es speichert zukünftige abgelaufene Header und Entitäts-Tags, Feeds und Suchergebnisse. Es hat auch Funktionen zum Minimieren von JS, CSS und HTML. Es wird Ihren Google PageSpeed ​​Score mindestens 10 Mal beschleunigen, wenn es vollständig konfiguriert ist.

Ich habe es mit allen aktivierten Caching-Funktionen versucht. Dies brachte meine Punktzahl auf 86 . Zum ersten Mal ist meine Website jetzt im grünen Bereich und alle Probleme, die ich hatte, wurden unter Behebung berücksichtigt. Es passiert jetzt 5 Regeln, einschließlich der Antwortzeit des Servers, die jetzt sagt: „Server hat schnell geantwortet“.

Ziehen Sie eine Reparatur in Betracht

Als ich den Test zum ersten Mal durchführte, hatte dieser Abschnitt mehr Probleme als als ich schließlich dazu kam. Viele dieser Probleme wurden behoben, als ich Probleme im Bereich „Sollte behoben werden“ behoben habe.

Ursprünglich enthaltene Probleme:

• Nutzen Sie das Browser-Caching
• Antwortzeit des Servers
• JavaScript minimieren
• Bilder optimieren
• CSS minimieren
• HTML minimieren

Hier ist ein Blick auf die aktuellen Probleme.

Eliminieren Sie Javascript und CSS, die das Rendering blockieren, in Inhalten „above the fold“.

JavaScript und CSS können das Laden von Seiten verlangsamen, indem sie den Browser zu stark belasten. Sie müssen geladen werden, bevor irgendetwas anderes über der Falte geladen werden kann.

Es gibt mehrere Möglichkeiten, das Problem zu beheben:

• Laden verschieben
• Asynchron laden
• Inline sie direkt in den HTML-Code

Hier sind die Plugins, die ich verwendet habe, um dieses Problem zu beheben.

Automatisch optimieren

Dieses Plugin minimiert (entfernt alle unnötigen Formatierungen und reduziert die Größe der Datei und lädt sie in den Browser) und komprimiert Ihr JavaScript, CSS und HTML. Es fügt abgelaufene Header hinzu und speichert sie zwischen. Es verschiebt Ihre Stile in den Seitenkopf und Skripte in die Fußzeile. Mit erweiterten Einstellungen können Sie es an Ihre spezifischen Bedürfnisse anpassen.

Dies wird auch einige Probleme lösen, wie z. B. das Minimieren von JS und CSS weiter unten in der Liste.

Zuerst habe ich nur die Grundeinstellungen für HTML, JS und CSS eingeschaltet. Dies brachte meine Punktzahl auf 88 und reduzierte die Probleme auf 3 CSS-Ressourcen. Eine wurde vom Plugin selbst erstellt und die anderen beiden sind Google-Schriftarten. Es besteht jetzt 7 Regeln. Es löste Minify CSS und Minify HTML.

Besser WordPress Minify

Der Hauptzweck dieses Plugins besteht darin, Ihr CSS und JS zu minimieren, aber es hat auch eine coole Funktion, mit der Sie Ihre Dateien in die Fußzeile oder an andere Orte verschieben können (weshalb ich es gewählt habe). Es verwendet ein Warteschlangensystem, um die Kompatibilität mit Browsern, Plugins und Designs zu verbessern.

Als ich es installierte, wurden alle Layouteinstellungen für mein Thema entfernt und alle meine Menüs, Bilder, Links usw. erschienen ganz links auf dem Bildschirm. Glücklicherweise kehrte die Formatierung zurück, als ich sie deinstallierte. Vielleicht war es etwas in den Einstellungen, das angepasst werden musste. Ich bin mir sicher, dass dies ein gutes Plugin ist, da es über 60.000 aktive Installationen und eine Bewertung von 4,4/5 hat. Ich habe dies nur als Warnung eingefügt, dass es ohne einige Einstellungen möglicherweise nicht so funktioniert, wie Sie es benötigen.

Da meine Punktzahl 88 betrug und ich die 3 Probleme kannte, beschloss ich, mit dem nächsten Problem fortzufahren.

Bilder optimieren

Die Bildgröße spielt eine große Rolle bei der Ladegeschwindigkeit der Seite. Manchmal können Sie eine viel kleinere Bildgröße und eine geringere Qualität ohne großen visuellen Unterschied bei der Anzeige im Internet verwenden. Dies beschleunigt nicht nur die Ladezeit und verbraucht weniger Bandbreite, sondern verkürzt auch die Sicherungszeit und reduziert den Speicherplatz auf Ihrem Server.

EWWW Bildoptimierer

Dieses Plugin optimiert Ihre Bilder automatisch, während Sie sie hochladen, und konvertiert Ihre Bilder in das Format, das die kleinste Größe erzeugt. Es optimiert auch Bilder, die Sie bereits hochgeladen haben. Sie können damit auch verlustbehaftete Reduzierungen für PNG- und JPG-Bilder anwenden.

Als ich es installierte, gab es mehrere Dateien, die ich suchen und installieren sollte. Ich denke, dieses Plugin würde mit allen installierten Dateien großartig funktionieren, aber ich habe mich entschieden, eines zu finden, das sofort einsatzbereit ist.

WP Schmus

Dieses Plugin reduziert die Dateigröße von Bildern, ohne die Qualität zu beeinträchtigen. Dies geschieht, indem versteckte Informationen entfernt werden. Es analysiert Ihre Dateien und sagt Ihnen, wie viele Bilder gelöscht werden müssen. Sie können sie in großen Mengen zerschlagen.

Die kostenlose Version zerschmettert nichts über 1 MB und zerschmettert nur 50 auf einmal. Für mehr als das benötigen Sie WP Smush Pro, das Bilder mit einer Größe von bis zu 32 MB ohne Begrenzung der Anzahl gleichzeitig smusht. Es erstellt eine Sicherungskopie der Originale, wenn Sie sie benötigen. Die Preise beginnen bei $19 pro Monat.

Ich hatte 114 Bilder, die gesmusht werden mussten. 8 dieser Bilder waren größer als 1 MB. Ich beschloss, diese von Hand zu reparieren. Es hat 98 Bilder gelöscht und die Dateigröße um 4,79 MB (8,82 %) reduziert.

Dies brachte meine Punktzahl auf 90 . Google Insights identifizierte 5 Bilder, die ihm nicht gefielen, aber keines war größer als 1 MB. Sie reichten von 0,7 KB bis 17 KB.

Bilder von Hand optimieren

Sie können Bilder manuell optimieren, indem Sie die Größe ändern, die Qualität reduzieren und das Format ändern. Eines meiner liebsten und am häufigsten verwendeten Tools zum Umgang mit Bildern ist Paint.NET. Es ist eine kostenlose Bild- und Fotobearbeitungs-App für Windows mit vielen Funktionen zum Reduzieren der Dateigröße. Was ist dein Favorit?

Minimieren Sie JavaScript, CSS und HTML

Ich dachte, ich hätte das behoben…

Als ich die anderen Probleme durchgearbeitet habe, habe ich gesehen, dass die einzige zu minimierende Nachricht für JavaScript war. Nachdem ich meine Bilder optimiert hatte, kehrten alle drei Probleme zurück. Ich ging meine Schritte zurück, um herauszufinden, was passiert war.

Indem ich Better WordPress Minify ausprobierte und es dann wieder ausschaltete, kamen meine Nachrichten zum Minimieren von CSS und HTML zurück. Meine Punktzahl fiel auf 88 und ich hatte jetzt wieder 5 bestandene Regeln. Ich habe die Minimierungsfunktionen von W3 Total Cache aktiviert und es hat jetzt alle Minimierungsprobleme bestanden. Ich hatte jetzt eine Punktzahl von 88 und es hat 8 Regeln bestanden. Außerdem hatte es sechs Ordner über der Falte. Ich wusste, dass ich einige davon gelöst hatte, also muss ich etwas geändert haben.

Ich habe einige Fehlerbehebungen durchgeführt und festgestellt, dass ich Autoptimize deaktiviert hatte, als ich früher das Problem mit Better WordPress Minify hatte. Ich habe Autoptimize wieder aktiviert, Minify von W3 Total Cache deaktiviert und den Cache geleert (sehr wichtiger Schritt!). Ich hatte jetzt meine Punktzahl von 90 zurück und die Seite hat 8 Regeln bestanden. Es waren wieder drei CSS-Dateien „above the fold“ und eine Meldung zur Bildoptimierung.

Aufgrund meiner bisherigen Erfahrungen habe ich beschlossen, keine Zeit mit diesen Dateien zu verschwenden. Ich denke, Google hasst Bilder jeder Größe (egal wie klein ich sie bekomme, ich bekomme immer noch eine Nachricht, die Größe zu reduzieren) und von einem PageScore von 46 auf 90 zu gehen, ist ein Gewinn in meinem Buch. Ich habe auf die harte Tour gelernt, aufzuhören, während du vorne bist.

Endstand

Meine Endnote war 90/100. Die Plugins, die ich verwendet habe, um diese Punktzahl zu erhalten, sind:

• Automatische Optimierung (alle Funktionen aktiviert)
• W3 Gesamt-Cache (nur Seiten-Caching-Funktionen aktiviert)
• WP Performance Score Booster (alle Funktionen aktiviert)
• WP Smush (kostenlose Ausgabe)

Fürs Protokoll: Der mobile Score stieg von 36 auf 78. Um das Problem zu beheben, müsste ich meine Bilder und Dateien für Mobilgeräte optimieren.

Abschließende Gedanken

Ihre Besucher, Google und andere Suchmaschinen hassen Websites, die langsam geladen werden. Mit Google PageSpeed ​​Insights können Sie genau wissen, wo die Probleme liegen, und erhalten Tipps, wie Sie sie lösen können. Eine Handvoll kostenloser Plugins ist alles, was Sie brauchen, um von einer langsamen Seite, die Google hasst, zu einer schnellen Seite zu werden, die Google liebt. Seien Sie vorsichtig beim Experimentieren – einige Plugins funktionieren nicht gut mit anderen.

Ich würde gerne von Ihnen hören. Haben Sie Ihre WordPress-Website mit Google PageSpeed ​​Insights optimiert? War Ihre Erfahrung so ähnlich wie meine? Haben Sie verschiedene Plugins verwendet, um die Probleme zu lösen? Ich würde gerne von Ihren Erfahrungen in den Kommentaren hören.