WordPress beschleunigen: Wie wir die Leistung von List25 um 256 % optimiert haben

Möchten Sie Ihre WordPress-Website beschleunigen? Möchten Sie die WordPress-Optimierungstricks kennenlernen, die Ihnen helfen können, Ihre Ladezeit zu verkürzen? In diesem Artikel zeigen wir Ihnen, wie Sie WordPress beschleunigen können, indem wir Ihnen zeigen, wie wir unsere List25-Website optimiert haben, um die Leistung zu steigern.

Sie haben wahrscheinlich gehört, dass die Geschwindigkeit von WordPress für SEO wichtig ist. Eine schnellere Website hat eine bessere Benutzerbindung, mehr Seitenaufrufe und mehr Verkäufe. In einer Fallstudie von Strangeloop wurde festgestellt, dass eine Verzögerung von einer Sekunde Sie 7 % der Verkäufe, 11 % weniger Seitenaufrufe und eine Abnahme der Kundenzufriedenheit um 16 % kosten kann.

Wie beschleunigt man also WordPress?

Anstatt nur eine Liste von Geschwindigkeitstipps zu teilen, haben wir uns entschieden, eine vollständige Fallstudie durchzuführen, um Ihnen die Ergebnisse unserer List25-Website zu zeigen und wie wir alles erreicht haben.

Übersicht

List25 ist ein Unterhaltungsblog, der von unserem Gründer Syed Balkhi gestartet wurde. Die Seite hat über 1,5 Millionen Abonnenten, und der YouTube-Kanal hat über eine Viertel Milliarde Aufrufe.

Die Inhalte auf der Website bestehen hauptsächlich aus Bildern und Videos, die Terabytes an Bandbreite verbrauchen. Daher war die allgemeine Geschwindigkeitsoptimierung für uns entscheidend, um die Kosten niedrig zu halten, Seitenabbrüche zu reduzieren und die Verweildauer auf der Website zu verbessern.

Bevor wir mit der Optimierung begannen, dauerte das Laden unserer Homepage laut Pingdom 2,21 Sekunden. Nachdem wir fertig waren, sank unsere Seitenladezeit auf 1,21 Sekunden (~45% schneller).

Während dieser Optimierung konnten wir unsere Server-Antwortzeit beschleunigen, unseren Page-Speed-Performance-Score verbessern, die Anzahl der Gesamtanfragen reduzieren und die allgemeine Ladezeit verbessern.

Werfen wir einen Blick auf die Optimierungstechniken, die uns geholfen haben, unsere WordPress-Website zu beschleunigen.

WordPress Hosting

Ein guter Webhost ist entscheidend für die Geschwindigkeit Ihrer Website. Als unsere Website beliebter wurde, sind wir einfach über unser bisheriges Hosting-Unternehmen hinausgewachsen (HostGator).

Ihre Server konnten eine Website dieser Größe einfach nicht bewältigen, da List25 zehn Millionen Seitenaufrufe verzeichnet. HostGator ist großartig für kleinere Websites, aber nicht für etwas dieser Größenordnung.

Wir haben uns verschiedene Managed WordPress Hosting-Optionen angesehen und schließlich SiteGround für das Hosting von List25 genutzt, da sie den besten Gesamtwert für diese Website boten.

Sie können die Verbesserung unserer Server-Antwortzeit sofort sehen. Wir sind von maximal 442 ms auf 172 ms Antwortzeit gegangen. Das ist eine Verbesserung von 256 %.

Siteground hat Leistungs-Booster für spezifische Plattformen wie WordPress, Joomla und Magento entwickelt. Basierend auf der Plattform Ihrer Website 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, der die 7 Schlüsselindikatoren behandelt.

Wenn Sie Ihren Hoster wechseln möchten, probieren Sie SiteGround auf jeden Fall aus. WPBeginner-Benutzer erhalten einen exklusiven 60% Rabatt auf Hosting + kostenlose Domain.

Caching-Plugin

Wenn es darum geht, WordPress zu beschleunigen, ist Caching der zweitwichtigste Faktor nach Ihrem Webhosting.

Normalerweise, wenn ein Besucher Ihre WordPress-Site besucht, übergibt Ihr Server die PHP-Anfrage an die MySQL-Datenbank, die die angeforderte Seite findet, sie im laufenden Betrieb generiert und dem Besucher anzeigt. Dies verbraucht viele Ressourcen. Wenn Sie Caching haben, spart dies Zeit und Ressourcen.

Das folgende Diagramm hebt den Prozess hervor. Vereinfacht ausgedrückt, können Sie sich Caching als Erstellung einer Desktop-Verknüpfung vorstellen, die Ihnen hilft, schneller auf die Datei zuzugreifen.

Für die List25-Website verwenden wir den SiteGround SuperCacher, ein Plugin, das sie speziell für ihre Kunden entwickelt haben. Darüber hinaus haben sie erweiterte dynamische Caching-Optionen mit Varnish (Teil ihres Performance Boosters) hinzugefügt.

Wenn Sie nicht bei Siteground sind, dann machen Sie sich keine Sorgen. Sie können den Cache auf Ihrer WordPress-Website mit einer der vielen verfügbaren Lösungen wie W3 Total Cache oder WP Super Cache einrichten.

Bei WPBeginner verwenden wir W3 Total Cache, das eine Reihe von Seiten-Caching-Optionen, Datenbank-Caching und Objekt-Caching bietet.

Da sich immer mehr Hosting-Unternehmen auf WordPress spezialisieren, werden wir mehr benutzerdefinierte Caching-Lösungen sehen. Pagely und WPEngine bieten ebenfalls ihr eigenes integriertes Caching-System an.

CDN

Content Delivery Networks (CDN) können Ihnen helfen, die Geschwindigkeit Ihrer Website zu erhöhen. 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 brauchen, zusammen mit einer Infografik.

CDN ermöglicht es uns, alle CSS-, Javascript- und Bilddateien von einem Content Delivery Network auszuliefern. Dies funktioniert, indem der Standort des Website-Besuchers ermittelt und Inhalte von einem Server geliefert werden, der dem Besucher am nächsten ist.

Wenn Sie nicht auf der Suche nach einer Premium-CDN-Lösung sind, können Sie Cloudflare verwenden.

Kombinieren von Dateien zur Reduzierung von HTTP-Anfragen

Wenn Sie mehr 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 zu einer einzigen Datei zusammengefasst, um Anfragen zu reduzieren und die Ladezeit zu verkürzen. Weitere Details dazu finden Sie unter wie sich WordPress-Plugins auf die Ladezeit auswirken.

Während wir jetzt einige kleine Funktionalitäten laden, die wir möglicherweise in einem bestimmten Bereich der Website nicht benötigen, wird dieser Code im CDN zwischengespeichert, und die Ergebnisse zeigen, dass weniger Dateianfragen eine bessere Leistung bieten als das Laden mehrerer kleinerer JS-Dateien. 

Dies ist etwas, das Sie regelmäßig tun müssen, da sich die von Ihnen verwendeten Plugins im Laufe der Zeit ändern.

Image Sprites

Wir haben einen Image Sprite verwendet, der mehrere Social- und Website-Icons in einem einzigen Bild kombiniert hat:

Immer wenn wir ein bestimmtes Symbol anzeigen mussten, würden wir CSS verwenden, um:

1. Laden Sie das Bild als Hintergrundbild
2. Definieren Sie die Breite und Höhe des Elements, für das wir das Symbol benötigen
3. Setzen Sie die Hintergrundposition unseres Bildes, um das notwendige Symbol zu laden

Zum Beispiel, um die Social-Media-Icons 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; }

Die CSS-Eigenschaften background-position, width und height helfen uns, den spezifischen Bereich des Bildes zu adressieren, den wir ausgeben möchten:

Infolgedessen nutzt nur die erste Anfrage für diese Bilddatei Bandbreite. Nachfolgende Anfragen an das CDN für das Bild führen dazu, dass die gecachte (typischerweise lokale) Version geladen wird, und es muss nur ein Bild im Vergleich zu 6 verschiedenen Social-Icons angefordert werden.

Durch die Kombination von JavaScript, CSS und Bildern haben wir die Anzahl der Anfragen erheblich reduziert.

Code-Minimierung

Code-Minimierung beinhaltet das Entfernen von Leerzeichen und Zeilenumbrüchen, um die Dateigröße zu reduzieren und sie beim Anfordern schneller zu laden.

Für List25 verwenden wir SCSS, eine syntaktbasierte Stylesheet-Sprache (Einführung in Sass). Dies ermöglicht es uns, unsere CSS-Dateien in verschiedenen Entwicklungsbereichen in einem gut 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:

Infolgedessen konnten wir die Größe unserer CSS-Datei um 28 % reduzieren.

Bildoptimierung

Wir haben unsere Bilder in zwei Bereichen optimiert: unser WordPress-Theme und hochgeladene Inhalte.

Für unser WordPress-Theme haben wir CodeKit verwendet, um sicherzustellen, dass alle Bilder verlustfrei komprimiert wurden. Dies stellt sicher, dass die Dateigrößen so klein wie möglich sind, ohne Qualitätsverlust.

Wir haben auch alle unsere Autoren über die Wichtigkeit der für das Web optimierten Bildspeicherung aufgeklärt. Sehen Sie sich unseren Leitfaden an wie man Bilder für das Web optimiert speichert.

Javascript-freies Social Sharing

Social Sharing ist für List25 genauso wichtig wie für jede andere Website. Social-Sharing-Plugins können Ihre Website jedoch erheblich verlangsamen.

Während die Integration der Skripte dieser vier sozialen Netzwerke in unseren Tests keine Auswirkungen auf die Ladezeit der Seite hatte, verlangsamte sie die Website bei der Ansicht auf einem Mobilgerät sichtbar. Social-Sharing-Schaltflächen erschienen erst nach einigen Sekunden, obwohl die Skripte asynchron geladen wurden, was dazu führte, dass sich der Beitragsinhalt verschob, während die Schaltflächen angezeigt wurden.

Um dieses Problem zu lösen, sind wir zu einer (fast) Javascript-freien Lösung übergegangen. 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.

Wir wollten jedoch immer noch die Gesamtzahl der Shares anzeigen, die ein Beitrag in allen sozialen Netzwerken hatte. Dazu haben wir ein kleines benutzerdefiniertes WordPress-Plugin erstellt, um die Social-Share-Zählungen von jedem sozialen Netzwerk abzurufen und im Post-Meta-Tabellen-Cache zu speichern. Diese Zählungen werden alle 24 Stunden aktualisiert, um sicherzustellen, dass zeitaufwändige Abfragen nicht ständig laufen.

Sie können entweder eine API wie Sharre verwenden oder das Floating Social Bar zur Anpassung zerlegen.

Mit Pingdoms RUM (Real User Monitoring) hat dieses neue Share-Plugin die 'echte' Seitenladezeit von 6 Sekunden auf etwas mehr als 2 Sekunden reduziert. Es stellte auch sicher, dass wir die Anzahl der Anfragen für Drittanbieter-Skripte reduziert haben.

Ergebnis

Wir haben die Geschwindigkeit unserer Website erheblich verbessert. Die Ladezeit ging von 2,2 Sekunden auf 1,22 Sekunden zurück.

Wir konnten unsere Server-Antwortzeit signifikant reduzieren.

Dies half, die Zeit zu reduzieren, die der Google-Bot für den Download einer Seite benötigte, was unsere Crawl-Rate verbesserte.

Unsere allgemeine Absprungrate sank um 7 %, da die Website schneller lud, und durch den Wechsel des Hosts konnten wir Serverfehler reduzieren.

Wie Sie sich vorstellen können, stieg mit der niedrigeren Absprungrate auch die auf der Website verbrachte Zeit um über 30 Sekunden.

Fazit

Wie Sie sehen können, kann eine schneller ladende Website das Besucherengagement verbessern. Die von uns besprochenen Techniken deckten eine Reihe von grundlegenden und fortgeschrittenen Verbesserungen ab, die Sie implementieren können, um Ihre WordPress-Website zu optimieren. 

Wir hoffen, dieser Artikel hat Ihnen geholfen, Ihre WordPress-Website zu beschleunigen. Möglicherweise möchten Sie auch unseren Artikel über 20 unverzichtbare WordPress-Plugins für 2015 lesen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.