Möchten Sie Ihre WordPress-Site beschleunigen? Möchten Sie die WordPress-Optimierungstricks kennenlernen, mit denen Sie die Ladezeit Ihrer Website verkürzen können? In diesem Artikel zeigen wir Ihnen, wie Sie WordPress beschleunigen können, indem Sie teilen, wie wir unsere List25-Site optimiert haben, um die Leistung zu steigern.
Sie haben wahrscheinlich gehört, dass WordPress-Geschwindigkeit für SEO wichtig ist. Eine schnellere Website hat eine bessere Benutzerinteraktion, mehr Seitenaufrufe und bessere Verkäufe. In einer Strangeloop-Fallstudie fanden sie heraus, dass eine Verzögerung von einer Sekunde 7 % des Umsatzes, 11 % weniger Seitenaufrufe und 16 % weniger Kundenzufriedenheit kosten kann.
Wie beschleunigt man eigentlich WordPress?
Nun, anstatt nur eine Liste mit Geschwindigkeitstipps zu teilen, haben wir uns entschlossen, eine vollständige Fallstudie durchzuführen, um Ihnen die Ergebnisse unserer List25-Site und die Art und Weise zu zeigen, wie wir alles erreicht haben.
Überblick
Liste25 ist ein Unterhaltungsblog, der von unserem Gründer gestartet wurde Syed Balkhi. Die Seite hat über 1,5 Millionen Abonnenten und die Youtube Kanal hat über viertel MILLIARDE Ansichten.
Der Inhalt der Website besteht hauptsächlich aus Bildern und Videos, die Terabyte an Bandbreite beanspruchen. Daher war die Optimierung der Gesamtgeschwindigkeit für uns entscheidend, um die Kosten niedrig zu halten, das Abbrechen von Seiten zu reduzieren und die Zeit auf der Website zu verbessern.
Bevor wir mit der Optimierung begannen, brauchte unsere Homepage laut Pingdom 2,21 Sekunden zum Laden. Nachdem wir fertig waren, sank unsere Seitenladezeit auf 1,21 Sekunden (~45% schneller).
Während dieser Optimierung konnten wir unsere Server-Antwortzeit beschleunigen, unseren Seitengeschwindigkeits-Performance-Score verbessern, die Anzahl der Gesamtanfragen reduzieren und die Gesamtladezeit verbessern.
Werfen wir einen Blick auf die Optimierungstechniken, die uns geholfen haben, unsere WordPress-Site zu beschleunigen.
WordPress-Hosting
Ein guter Webhost ist entscheidend für die Geschwindigkeit Ihrer Website. Als unsere Site immer beliebter wurde, sind wir einfach über unser vorheriges Hosting-Unternehmen (HostGator) hinausgewachsen.
Ihre Server konnten mit einer Site dieser Größe einfach nicht umgehen, da List25 zig Millionen Seitenaufrufe erhält. HostGator ist ideal für kleinere Websites, aber nicht für etwas in dieser Größenordnung.
Wir haben uns verschiedene Managed WordPress-Hosting-Optionen angesehen und schließlich SiteGround zum Hosten von List25 verwendet, da sie den besten Gesamtwert für diese Site boten.
Sie können die Verbesserung unserer Server-Reaktionszeit sofort sehen. Wir gingen von maximal 442 ms auf 172 ms Reaktionszeit. Das ist eine Verbesserung von 256%.
Siteground hat Leistungsverstärker für bestimmte Plattformen wie WordPress, Joomla und Magento entwickelt. Basierend auf der Plattform Ihrer Site optimieren sie Ihre Server speziell, was zu einer besseren Gesamtleistung führt.
Wir haben einen Artikel darüber geschrieben, wann Sie Ihr Webhosting wechseln sollten, in dem es um die 7 wichtigsten Indikatoren geht.
Wenn Sie den Host wechseln möchten, probieren Sie SiteGround auf jeden Fall aus. Themelocal-Benutzer erhalten einen exklusiven Rabatt von 60% auf Hosting + kostenlose Domain.
Caching-Plugin
Wenn es um die Beschleunigung von WordPress geht, ist Caching nach Ihrem Webhosting der zweitwichtigste Faktor.
Wenn ein Besucher Ihre WordPress-Site besucht, leitet Ihr Server normalerweise die PHP-Anfrage an die MySQL-Datenbank weiter, die die angeforderte Seite findet, im Handumdrehen generiert und dem Besucher zeigt. Dies beansprucht viele Ressourcen. Das Caching spart Zeit und Ressourcen.
Das folgende Diagramm verdeutlicht den Vorgang. Stellen Sie sich das Caching für Laien als das Erstellen einer Desktop-Verknüpfung vor, mit der Sie schneller auf die Datei zugreifen können.
Für die List25-Site verwenden wir den SiteGround SuperCacher, ein Plugin, das sie speziell für ihre Kunden entwickelt haben. Darüber hinaus fügten sie mithilfe von Varnish (Teil ihres Leistungsboosters) erweiterte dynamische Caching-Optionen hinzu.
Wenn Sie nicht auf Siteground sind, machen Sie sich keine Sorgen. Sie können den Cache auf Ihrer WordPress-Site einrichten, indem Sie eine der vielen verfügbaren Lösungen wie W3 Total Cache oder WP Super Cache verwenden.
Bei Themelocal verwenden wir W3 Total Cache, das eine Reihe von Seiten-Caching-Optionen, Datenbank-Caching und Objekt-Caching bietet.
Je mehr Hosting-Unternehmen sich auf WordPress spezialisieren, desto mehr benutzerdefinierte Caching-Lösungen werden entwickelt. Pagely und WPEngine bieten auch ihr eigenes integriertes Caching-System.
CDN
Content Delivery Networks (CDN) können Ihnen helfen, die Geschwindigkeit Ihrer Website zu steigern. Wir verwenden MaxCDN seit Beginn von List25, daher hat sich dieser Teil nicht geändert.
Wir haben einen vollständigen Artikel darüber geschrieben, was ein CDN ist und warum Sie es zusammen mit einer Infografik benötigen.
Mit CDN können wir alle CSS, Javascript und Bilder aus einem Content Delivery Network bereitstellen. Dies funktioniert, indem der Standort des Site-Besuchers bestimmt wird und Inhalte von einem Server bereitgestellt werden, der dem Besucher am nächsten ist.
Wenn Sie keine Premium-CDN-Lösung suchen, können Sie Cloudflare verwenden.
Kombinieren von Dateien zur Reduzierung von HTTP-Anfragen
Wenn Sie weitere Plugins hinzufügen, fügen diese oft ihre eigenen JavaScript- und CSS-Dateien hinzu. Jede zusätzliche Datei ist eine neue HTTP-Anfrage.
Wir haben diese JavaScript- und CSS-Dateien jeweils in einer einzigen Datei zusammengefasst, um Anfragen zu reduzieren und die Ladezeit zu verkürzen. Sie können mehr darüber erfahren, wie sich WordPress-Plugins auf die Ladezeit auswirken.
Während wir jetzt einige kleine Funktionen laden, die wir in einem bestimmten Abschnitt der Site möglicherweise nicht benötigen, wird dieser Code im CDN zwischengespeichert, und die Ergebnisse zeigen, dass weniger Anfragen nach Dateien eine bessere Leistung bieten als das Laden mehrerer kleinerer JS-Dateien.
Dies müssen Sie regelmäßig tun, da sich die von Ihnen verwendeten Plugins im Laufe der Zeit ändern.
Bild-Sprites
Wir haben ein Bild-Sprite verwendet, das mehrere Social- und Site-Symbole in einem einzigen Bild kombiniert:
Wann immer wir ein bestimmtes Symbol anzeigen mussten, verwendeten wir CSS, um:
- Laden Sie das Bild als Hintergrundbild
- Definieren Sie die Breite und Höhe des Elements, für das wir das Symbol benötigen
- Legen Sie die Hintergrundposition für unser Bild fest, um das erforderliche Symbol zu laden
Um beispielsweise die Social-Media-Symbole der Seitenleiste zu laden, verwenden wir:
li.widget_social_icons ul li { float: left; width: 36px; height: 36px; margin: 0 10px 10px 0; padding: 0; background: url(../images/sprite.png) no-repeat; } li.widget_social_icons ul li.twitter { background-position: 0 -50px; } li.widget_social_icons ul li.facebook { background-position: -36px -50px; } li.widget_social_icons ul li.pinterest { background-position: -72px -50px; } li.widget_social_icons ul li.google { background-position: -108px -50px; } li.widget_social_icons ul li.rss { background-position: -144px -50px; } li.widget_social_icons ul li.youtube { background-position: -180px -50px; }
Der background-position
, width
und height
CSS-Eigenschaften helfen uns dabei, auf den spezifischen Abschnitt des Bildes abzuzielen, den wir ausgeben möchten:
Daher verbraucht nur die erste Anforderung dieser Bilddatei Bandbreite. Nachfolgende Anfragen an das CDN für das Bild führen dazu, dass die zwischengespeicherte (normalerweise lokale) Version geladen wird und nur ein einzelnes Bild im Vergleich zu 6 verschiedenen sozialen Symbolen angefordert werden muss.
Durch die Kombination von JavaScript, CSS und Bildern haben wir die Anzahl der Anfragen deutlich reduziert.
Code-Minifizierung
Bei der Codeverkleinerung werden Leerzeichen und Zeilenumbrüche entfernt, um die Dateigröße zu reduzieren und das Laden auf Anforderung zu beschleunigen.
Für List25 verwenden wir SCSS, ein Syntax-basiertes Stylesheet (Intro to Sass). Dies ermöglicht es uns, unsere CSS-Dateien über mehrere Entwicklungsbereiche hinweg in einem leicht lesbaren Layout zu strukturieren:
Wir verwenden CodeKit, um die SCSS-Dateien dann in eine einzige CSS-Datei zu kompilieren. CodeKit entfernt auch Leerzeichen und Zeilenumbrüche, um sicherzustellen, dass die Datei so klein wie möglich ist:
Dadurch konnten wir unsere CSS-Dateigröße um 28% reduzieren.
Bildoptimierung
Wir haben unsere Bilder in zwei Bereichen optimiert: unserem WordPress-Theme und hochgeladenen Inhalten.
Für unser WordPress-Theme haben wir CodeKit verwendet, um sicherzustellen, dass alle Bilder verlustfrei komprimiert wurden. Dadurch wird sichergestellt, dass die Dateigrößen möglichst klein sind, ohne dass die Qualität verloren geht.
Wir haben auch alle unsere Autoren darüber aufgeklärt, wie wichtig es ist, für das Web optimierte Bilder zu speichern. Lesen Sie unsere Anleitung zum Speichern von Bildern, die für das Web optimiert sind.
Javascript-freies Social Sharing
Social Sharing für List25 ist wie jede andere Website wirklich wichtig. Social-Sharing-Plugins können Ihre Website jedoch erheblich verlangsamen.
Die Integration der Skripte dieser vier sozialen Netzwerke hat sich in unseren Tests zwar nicht auf die Ladezeit der Seite ausgewirkt, die Website jedoch beim Anzeigen auf einem mobilen Gerät sichtlich verlangsamt. Es dauerte einige Sekunden, bis die Schaltflächen zum Teilen sozialer Netzwerke angezeigt wurden, obwohl die Skripte asynchron geladen wurden, was dazu führte, dass sich der Postinhalt bewegte, wenn die Schaltflächen angezeigt wurden.
Um dieses Problem anzugehen, sind wir auf eine (fast) Javascript-freie Lösung umgestiegen. Jeder der Sharing-Buttons des sozialen Netzwerks wird von unserem benutzerdefinierten WordPress-Plugin gerendert, und das Javascript des Themes wird nur verwendet, um das Webbrowser-Fenster zu öffnen, wenn der Benutzer auf einen Button klickt.
Trotzdem wollten wir die Gesamtzahl der Shares eines Beitrags in allen sozialen Netzwerken anzeigen. Zu diesem Zweck haben wir ein kleines benutzerdefiniertes WordPress-Plugin erstellt, um die Social Share-Zählungen von jedem sozialen Netzwerk abzurufen und in der Post-Metatabelle zwischenzuspeichern. Diese Zählungen werden alle 24 Stunden aktualisiert, um sicherzustellen, dass zeitraubende Abfragen nicht ständig ausgeführt werden.
Sie können entweder eine API wie verwenden Sharre oder sezieren Sie die Schwimmende soziale Bar zur Anpassung.
Mit Pingdoms RUM (Real User Monitoring) verkürzte dieses neue Share-Plugin die „echte“ Seitenladezeit von 6 Sekunden auf etwas mehr als 2 Sekunden. Es stellte auch sicher, dass wir die Anzahl der Anfragen für Skripte von Drittanbietern reduziert haben.
Ergebnis
Wir haben die Geschwindigkeit unserer Website erheblich verbessert. Die Ladezeit wurde von 2,2 Sekunden auf 1,22 Sekunden erhöht.
Wir konnten unsere Server-Antwortzeit deutlich verkürzen.
Dadurch konnte die Zeit, die für das Herunterladen einer Seite durch den Google-Bot aufgewendet wurde, reduziert werden, was unsere Crawling-Rate unterstützte.
Unsere Gesamtabsprungrate sank um 7 %, da die Site schneller geladen wurde und wir durch den Hostwechsel Serverfehler reduzieren konnten.
Wie Sie sich bei der geringeren Absprungrate vorstellen können, stieg auch die auf der Website verbrachte Zeit um über 30 Sekunden.
Fazit
Wie Sie sehen, kann eine schneller ladende Website die Besucherbindung verbessern. Die von uns besprochenen Techniken haben eine Reihe grundlegender und mittlerer Verbesserungen abgedeckt, die Sie implementieren können, um Ihre WordPress-Site zu optimieren.
Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihre WordPress-Site zu beschleunigen. Sie können auch unseren Artikel über 20 WordPress-Plugins lesen, die für 2015 erforderlich sind.