Der vollständige Leitfaden zur Beschleunigung Ihrer WordPress-Website
Eine langsame Website zu haben ist eine frustrierende Erfahrung. Es wird nicht nur schlecht in den Suchmaschinen rangieren (Ladegeschwindigkeit ist einer der Ranking-Faktoren in Google), es gibt Ihrem Besucher auch eine schlechte Nutzererfahrung. Während die meisten Webmaster gerne ihre Websites beschleunigen würden, verfügen die meisten von ihnen jedoch nicht über das technische Wissen, um dies zu tun. Wenn Sie in dieses Camp fallen und WordPress verwenden, haben wir eine komplette Anleitung zur Geschwindigkeitsoptimierung für Sie. Die folgenden Schritte sind, was wir für diese Seite getan haben und sie haben gut für uns gearbeitet.
Nehmen Sie die Website herunter
Wenn ein Besucher Ihre Website besucht, muss der Browser die Seite von Ihrem Server anfordern und die Seite vollständig laden, bevor der Leser sie sehen kann. Dies bedeutet, dass es bei einer aufgeblähten Website sehr lange dauern wird, bis der Browser sie herunterlädt und rendert. Hier sind einige Möglichkeiten, um Ihre WordPress-Website zu verkleinern:
1. Verfolgen Sie das Design Ihrer Website
Überarbeiten Sie das Design Ihrer Website und prüfen Sie, ob Sie unnötige Elemente von der Website entfernen können. Es macht keinen Sinn, zu viele Informationen in der Seitenleiste zu stopfen, wenn der Besucher nur an den tatsächlichen Inhalten interessiert ist. Hier sind einige Dinge, die Sie entfernen können:
- Fantastischer Slider, Animation und Effekte.
- Verschiedene Widgets in der Seitenleiste
- Anzeigen - Nur wenn Sie zu viele Anzeigen hinzugefügt haben. In einigen Fällen können Sie mit weniger Anzeigen mehr verdienen
2. Entfernen Sie unnötige Plugins
Es gibt zwei Haupttypen von WordPress-Plugins: eines, das nur den Admin-Bereich betrifft, und eines, das der Site zusätzlichen Inhalt hinzufügt. Für letzteres wird es immer von zusätzlichen Javascript- und CSS-Dateien begleitet, die der Seite zusätzliches Gewicht verleihen.
Sehen Sie sich Ihre Plugins-Liste an und deaktivieren Sie die alten Plugins, die ineffizient sind und nicht mehr verwendet werden. Wenn ein Plugin für längere Zeit nicht aktualisiert wurde, können Sie auch alternative Plugins ausprobieren, die leichter sind und dennoch effizienter arbeiten können.
3. Reduzieren Sie die Dateigröße von HTML, CSS und Javascript
Es gibt zwei Möglichkeiten, die Gesamtgröße Ihrer Site zu reduzieren. Die erste besteht darin, mehrere Stylesheets und Javascript-Dateien zu einem zu kombinieren, und die zweite besteht darin, die Dateien zu minimieren. Minimieren bedeutet das Entfernen unnötiger Leerzeichen und Kommentare und das Kombinieren mehrerer wiederholter Codes zu einem. Ein gutes Plugin, das Sie verwenden können, ist das W3 Total Cache Plugin.
Aktivieren Sie auf der Seite W3 Total Cache settings unter den "General Settings" den Modus "Minify".
Als nächstes gehen Sie zu "Minify -> HTML & XML" Abschnitt, markieren Sie die Kästchen neben "Aktivieren", "Inline CSS Minification", "Inline JS Minification" und "Zeilenumbrüche entfernen".
Weiter ist der Abschnitt "JS-Minification". Dies ist ein schwieriger Teil, da es für einige Themen funktioniert, nicht aber für andere. Persönlich habe ich mit dieser Einstellung kein Glück, aber vielleicht möchten Sie es ausprobieren und sehen, ob es für Ihre Website funktioniert.
Eine Sache, die ich für diese Einstellung empfehle, ist "Minify" anstelle von "Nur kombinieren" zu verwenden. Die Kombination mehrerer Javascripts kann unerwünschte Effekte verursachen und die Site beschädigen.
Der letzte Teil, den Sie hier konfigurieren müssen, ist der Abschnitt "CSS-Minification". Auf diese Weise können Sie das gesamte im Theme verwendete CSS minimieren und kombinieren.
Um das Beste daraus zu machen, sollten Sie Ihre Website öffnen, den Quellcode anzeigen und alle CSS-Links in das Feld "Datei-URI" im Abschnitt "CSS-Dateiverwaltung" kopieren. Alle CSS-Dateien, die Sie zu diesem Feld hinzugefügt haben, werden minimiert und in einer einzigen CSS-Datei zusammengefasst.
4. Optimieren der Bilder
Bilddateien sind normalerweise diejenigen, die den Großteil der Dateigröße der Website ausmachen. Daher ist es wichtig, dass Sie die Bilder optimieren und so klein wie möglich halten. Wp Smush.it ist ein großartiges Plugin, das Ihre Bilder beim Hochladen optimiert. Es kommt auch mit einer Bulk-Smush-Funktion, die alle zuvor hochgeladenen Bilder optimieren kann.
Beschleunigen Sie die Ladegeschwindigkeit der Website
Einige der Möglichkeiten, mit denen Sie die Ladegeschwindigkeit der Website beschleunigen können, sind:
- Cache die Seite
- Legen Sie den Browser-Cache fest
- Wechseln Sie zu google's jquery
- verzögertes Laden von Javascript
- Verwenden Sie das verzögerte Laden von Bildern
- Verwenden Sie asynchrones Javascript
- Verwenden Sie CDN
Hier sind einige Plugins, die die obige Arbeit für Sie erledigen können.
1. W3 Gesamtcache
Wir haben die Verkleinerung im obigen Abschnitt behandelt, aber was das W3-Gesamtcache mächtig macht, ist sein Caching-Modul. Aktivieren Sie zunächst das Modul "Seiten-Cache" im Abschnitt "Allgemeine Einstellungen". Wählen Sie bei einem Shared Hosting "Disk: Basic" für den Seiten-Cache-Modus. Wählen Sie für VPS oder dedizierten Server "Festplatte: Erweitert".
Scrollen Sie weiter auf der Seite, bis Sie den Abschnitt "Browser-Cache" sehen. Aktivieren Sie das Kontrollkästchen, um es ebenfalls zu aktivieren.
Dadurch werden sowohl der Seitencache als auch der Broswer-Cache für Ihre Site aktiviert. Der Seitencache ist einfach eine statische HTML-Seite, die anstelle der dynamischen PHP-Seite geliefert wird. Der Browser-Cache informiert den Browser darüber, dass die Seite zwischengespeichert und aus dem Cache bereitgestellt wird, wenn der Leser die gleiche Seite erneut besucht.
2. WP verzögerte Skript
Die meisten JavaScript-Dateien blockieren in der Natur, was bedeutet, dass die Site warten muss, bis alle Javascript-Dateien vollständig geladen sind, bevor der Inhalt geladen werden kann. Dies wird auch als synchrones Laden bezeichnet. Eine Möglichkeit, dies zu verhindern, besteht darin, Javascripts an den unteren Rand der Seite zu verschieben, damit sie erst geladen werden, nachdem der Inhalt vollständig geladen wurde.
WP Deferred Script ist ein nützliches Plugin, das alle Skripte in die Warteschlange am Ende der Seite verschiebt. Es verwendet lab.js im Backend und funktioniert mit den meisten Plugins. Es gibt keine Einstellungen zum Konfigurieren. Einmal aktiviert, verschiebt es automatisch alle JavaScript-Ladevorgänge bis zum Ende der Seite. Eine andere gute Sache ist, dass es Javascripts asynchron lädt, was bedeutet, dass es Javascript parallel zum Inhalt lädt.
3. Jetpack Photon
Eine weitere gute Möglichkeit, die Ladegeschwindigkeit zu reduzieren, besteht darin, alle Bilder von einer CDN-Quelle zu laden. Wenn Sie das Jetpack-Plugin installiert haben, wird durch das Aktivieren des Photon-Moduls automatisch ein Image-CDN zu Ihrer Site hinzugefügt.
Wenn Sie externe CDN verwenden, wie MaxCDN oder Amazon CloudFront, können Sie das CDN-Modul auch im W3 Total Cache-Plugin konfigurieren, um die CDN-Dienste zu nutzen.
4. Lazy Last
Ist Ihnen aufgefallen, wie die Bilder bei Bedarf geladen werden, wenn Sie die Seite nach unten scrollen? Dies wird Lazy Loading genannt, und es ist auch ein guter Weg, um die Seite zu beschleunigen. Das Plugin, das wir hier verwenden, ist Lazy Load, aber wenn Sie nach Lazy Loading suchen, gibt es viele Lazy Loading Plugins, die Sie verwenden können; Einige sind sogar für Videos und Iframes optimiert.
5. DFP
Wenn Sie Anzeigen auf Ihrer Website schalten, wissen Sie, dass Anzeigen am längsten geladen werden und die Website langsamer wird. Am schlimmsten ist es, dass die meisten Anzeigen synchron sind und den Inhalt blockieren, bis sie vollständig geladen sind. Eine Möglichkeit, dieses Problem zu beheben, besteht darin, die Anzeigen mithilfe von Google DFP zu schalten. Für Nutzer, die dies nicht wissen, ist Google DFP ein Anzeigenverwaltungsprogramm, mit dem Sie Ihre Anzeigen verwalten können.
Auf dieser Website verwenden wir das Skript jquery.dfp.js, um alle DFP-Tags bei Bedarf zu laden, damit das Laden der Website nicht verlangsamt wird. Die Implementierung kann ziemlich kompliziert sein und wir werden es hier nicht behandeln. Wenn es genug Interesse gibt (Sie können Ihr Interesse an den Kommentaren äußern), werde ich ein weiteres Tutorial machen, das den Schritt-für-Schritt-Prozess beschreibt, um es in Ihre Site zu implementieren.
Fazit
Wenn Sie die obigen Schritte befolgt haben, kann ich Ihnen versichern, dass Ihre Website jetzt schneller als zuvor ausgeführt wird, auch wenn Sie ein Shared Hosting verwenden. Eine gute Möglichkeit, die Ladegeschwindigkeit Ihrer Website zu testen, ist das Google PageSpeed Insights-Tool. Geben Sie einfach Ihre URL ein und es wird Ihre Website für Sie analysieren. Machen Sie es vor und nach der Optimierung und sehen Sie die großen Unterschiede.
Bildnachweis: Schnell nirgendwohin gehen