Beschleunigung von WordPress zur Optimierung der List25-Leistung um 256%

Möchten Sie Ihre WordPress-Site beschleunigen? Möchten Sie die WordPress-Optimierungstricks kennen, mit denen Sie die Ladezeit Ihrer Website reduzieren können? In diesem Artikel zeigen wir Ihnen, wie Sie WordPress beschleunigen können, indem Sie uns mitteilen, 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 bietet eine bessere Einbindung der Benutzer, mehr Seitenzugriffe und bessere Umsätze. In einer Strangeloop-Fallstudie fanden sie heraus, dass eine Verzögerung von einer Sekunde 7% des Umsatzes, 11% weniger Seitenzugriffe und 16% weniger Kundenzufriedenheit bedeuten kann.

Wie beschleunigen Sie eigentlich WordPress??

Anstatt nur eine Liste mit Geschwindigkeitstipps zu teilen, haben wir uns dazu entschieden, eine vollständige Fallstudie durchzuführen, um Ihnen die Ergebnisse unserer List25-Website sowie die Ergebnisse zu zeigen.

Überblick

List25 ist ein Unterhaltungsblog, das von unserem Gründer Syed Balkhi ins Leben gerufen wurde. Die Website hat über 1,5 Millionen Abonnenten und der YouTube-Kanal hat über ein Viertel MILLIARDE Ansichten.

Der Inhalt der Website besteht hauptsächlich aus Bildern und Videos, die Terabytes Bandbreite beanspruchen. Daher war die Optimierung der Gesamtgeschwindigkeit für uns entscheidend, um die Kosten niedrig zu halten, das Aufgeben von Seiten zu reduzieren und die Zeit vor Ort zu verkürzen.

Bevor wir mit der Optimierung begonnen haben, hat unsere Homepage laut Pingdom 2,21 Sekunden geladen. Nachdem wir fertig waren, sank unsere Ladezeit auf 1,21 Sekunden (~ 45% schneller).

Während dieser Optimierung konnten wir die Antwortzeit des Servers beschleunigen, den Performance-Score für die Seitengeschwindigkeit verbessern, die Gesamtzahl der Anforderungen reduzieren und die Gesamtladezeit insgesamt verbessern.

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

WordPress-Hosting

Ein guter Webhost ist entscheidend für die Geschwindigkeit Ihrer Website. Als unsere Website immer beliebter wurde, haben wir unser vorheriges Hosting-Unternehmen (HostGator) einfach übertroffen..

Ihre Server konnten eine Site dieser Größe einfach nicht handhaben, da List25 mehrere Millionen Seitenaufrufe erhält. HostGator eignet sich hervorragend für kleinere Websites, jedoch nicht für etwas in dieser Größenordnung.

Wir haben uns verschiedene verwaltete WordPress-Hosting-Optionen angesehen und letztendlich SiteGround für das Hosting von List25 verwendet, da sie den besten Gesamtwert für diese Site bieten.

Sie sehen sofort die Verbesserung in unserer Serverantwortzeit. Wir sind von max 442ms auf 172ms Reaktionszeit gegangen. Das ist eine Verbesserung von 256%.

Siteground hat Leistungsverstärker für bestimmte Plattformen wie WordPress, Joomla und Magento entwickelt. Basierend auf der Plattform Ihres Standorts 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 die 7 wichtigsten Indikatoren behandelt werden.

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

Caching-Plugin

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

Normalerweise, wenn ein Besucher auf Ihre WordPress-Site kommt, leitet Ihr Server die PHP-Anfrage an die MySQL-Datenbank weiter, die die angeforderte Seite findet, sie im laufenden Betrieb generiert und dem Besucher zeigt. Dies erfordert viele Ressourcen. Beim Zwischenspeichern sparen Sie Zeit und Ressourcen.

Das Diagramm unten zeigt den Prozess. Unter dem Gesichtspunkt der Laien können Sie unter Zwischenspeicherung eine Desktop-Verknüpfung erstellen, mit der Sie schneller zur Datei gelangen.

Für die List25-Site verwenden wir den SiteGround SuperCacher, ein Plugin, das speziell für ihre Kunden erstellt wurde. Darüber hinaus wurden erweiterte dynamische Caching-Optionen mit Varnish (Teil ihres Leistungsverstärkers) hinzugefügt..

Wenn Sie sich nicht in Siteground befinden, 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 WPBeginner verwenden wir W3 Total Cache, der eine Reihe von Optionen für das Seiten-Caching, das Datenbank-Caching und das Objekt-Caching bietet.

Je mehr Hosting-Unternehmen sich auf WordPress spezialisieren, desto mehr benutzerdefinierte Caching-Lösungen werden erstellt. Pagely und WPEngine bieten auch ein eigenes integriertes Caching-System an.

CDN

Mit Content Delivery Networks (CDN) können Sie die Geschwindigkeit Ihrer Website steigern. Wir haben MaxCDN seit Beginn von List25 verwendet, 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 Sie den Standort des Websitebesuchers bestimmen und Inhalte von einem Server aus bereitstellen, der dem Besucher am nächsten liegt.

Wenn Sie nicht auf dem Markt für eine Premium-CDN-Lösung sind, können Sie Cloudflare verwenden.

Dateien kombinieren, um HTTP-Anforderungen zu reduzieren

Wenn Sie weitere Plugins hinzufügen, fügen sie häufig ihre eigenen JavaScript- und CSS-Dateien hinzu. Jede zusätzliche Datei ist eine neue HTTP-Anforderung.

Wir haben diese JavaScript- und CSS-Dateien in jeweils einer einzigen Datei zusammengefasst, um die Anforderungen zu reduzieren und die Ladezeit zu beschleunigen. Sie können weitere Details dazu sehen, wie WordPress-Plugins die Ladezeit beeinflussen.

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

Dies ist etwas, was Sie regelmäßig tun müssen, da sich die von Ihnen verwendeten Plugins über die Zeit ändern.

Bild Sprites

Wir haben ein Image-Sprite verwendet, das mehrere Symbole für soziale und Websites in einem einzigen Bild kombiniert:

Wann immer 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 Sie das Symbol benötigen
3. 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; Breite: 36px; Höhe: 36px; Marge: 0 10px 10px 0; Polsterung: 0; Hintergrund: URL (… /images/sprite.png) keine Wiederholung;  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 Hintergrundposition: -72px -50px;  li.widget_social_icons ul li.google background-position: -108px -50px;  li.widget_social_icons ul li.rss Hintergrundposition: -144px -50px;  li.widget_social_icons ul li.youtube background-position: -180px -50px;  

Das Hintergrundposition, Breite und Höhe CSS-Eigenschaften helfen uns dabei, auf den bestimmten Abschnitt des Bildes zu zielen, den wir ausgeben möchten:

Daher verwendet nur die erste Anforderung für diese Bilddatei die Bandbreite. Nachfolgende Anforderungen an das CDN für das Image führen dazu, dass die zwischengespeicherte (in der Regel lokale) Version geladen wird und nur ein einzelnes Image gegenüber 6 verschiedenen sozialen Symbolen angefordert werden muss.

Durch die Kombination von JavaScript, CSS und Bildern konnten wir die Anzahl der Anfragen erheblich reduzieren.

Code Minification

Bei der Codeminifizierung werden Leerzeichen und Zeilenumbrüche entfernt, um die Dateigröße zu reduzieren, sodass sie bei Bedarf schneller geladen werden können.

Für List25 verwenden wir SCSS, ein auf Syntax basierendes Stylesheet (Intro to Sass). Dadurch können wir unsere CSS-Dateien in mehreren übersichtlichen Bereichen in einem übersichtlichen Layout strukturieren:

Wir verwenden CodeKit, um die SCSS-Dateien 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:

Daher konnten wir die Größe unserer CSS-Datei 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 so klein wie möglich sind und kein Qualitätsverlust auftritt.

Wir haben alle unsere Autoren darüber informiert, wie wichtig es ist, für das Web optimierte Bilder zu speichern. In unserem Handbuch erfahren Sie, wie Sie für das Web optimierte Bilder speichern.

Javascriptfreies Social Sharing

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

Die Integration dieser vier Skripte des sozialen Netzwerks hatte zwar keinen Einfluss auf die Seitenladezeit in unseren Tests, jedoch wurde die Website beim Anzeigen auf einem mobilen Gerät sichtbar langsamer. Es dauert einige Sekunden, bis die Schaltflächen für das Teilen von sozialen Netzwerken angezeigt werden, obwohl die Skripts asynchron geladen werden. Dies hat zur Folge, dass der Post-Inhalt verschoben wird, während die Schaltflächen geladen werden.

Um dieses Problem zu lösen, sind wir zu einer (fast) Javascript-freien Lösung übergegangen. Alle Freigabeknöpfe des sozialen Netzwerks werden von unserem benutzerdefinierten WordPress-Plugin dargestellt. Das Javascript des Themas wird nur zum Öffnen des Webbrowser-Fensters verwendet, wenn der Benutzer auf eine Schaltfläche klickt.

Wir wollten jedoch immer noch die Gesamtzahl der Aktien, die ein Beitrag in allen sozialen Netzwerken hatte, anzeigen. Zu diesem Zweck haben wir ein kleines benutzerdefiniertes WordPress-Plugin erstellt, um die Social-Share-Zählungen aus jedem sozialen Netzwerk abzurufen und in der Post-Metatabelle abzulegen. Diese Zählungen werden alle 24 Stunden aktualisiert, um sicherzustellen, dass zeitaufwendige Abfragen nicht ständig ausgeführt werden.

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

Mit dem RUM (Real User Monitoring) von Pingdom wurde die Ladezeit der echten Seite von 6 Sekunden auf etwas mehr als 2 Sekunden gesenkt. Es hat auch sichergestellt, dass wir die Anzahl der Anfragen für Skripte von Drittanbietern reduzieren.

Ergebnis

Wir haben die Geschwindigkeit unserer Website erheblich verbessert. Die Ladezeit stieg von 2,2 Sekunden auf 1,22 Sekunden.

Wir konnten die Antwortzeit unserer Server erheblich reduzieren.

Dadurch konnte der Zeitaufwand für das Herunterladen einer Seite durch den Google-Bot reduziert werden, was unsere Durchforstungsrate unterstützte.

Unsere Absprungrate ist insgesamt um 7% gesunken, weil die Website schneller geladen wurde. Durch den Hostwechsel konnten wir Serverfehler reduzieren.

Wie Sie sich bei der niedrigeren Absprungrate vorstellen können, hat sich die Zeit vor Ort um über 30 Sekunden erhöht.

Fazit

Wie Sie sehen, kann eine schneller ladende Website die Interaktion der Besucher verbessern. Die Techniken, die wir besprochen haben, haben eine Reihe grundlegender und Zwischenverbesserungen behandelt, die Sie zur Optimierung Ihrer WordPress-Site implementieren können. 

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

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