Zum 10-jährigen Jubiläum von WPBeginner teilte ich mit, dass die WPBeginner-Hosting-Infrastruktur dank unseres Webhosting-Partners HostGator ein großes Update erhalten hat.
Bald darauf erhielt ich E-Mails von Lesern, in denen ich gebeten wurde, die Details darüber zu teilen, wie wir WPBeginner unglaublich schnell geladen haben.
Ja, WPBeginner wird schneller geladen als die meisten statischen Site-Builder und in einigen Fällen auch schneller als Google AMP-Sites.
In diesem Artikel werde ich Ihnen einen Blick hinter die Kulissen geben, wie wir WordPress schneller gemacht haben als statische Site Builder und kopflose CMS-Plattformen.
Hinweis: Dieser Artikel ist etwas technischer als das, was wir normalerweise auf WPBeginner veröffentlichen. Für nicht-technische Benutzer empfehle ich, unsere endgültige Anleitung zur Beschleunigung von WordPress zu befolgen.
Update: Wir verwenden die freigegebenen Einstellungen in diesem Artikel nicht mehr. Stattdessen haben wir vollständig auf die von SiteGround verwaltete Google Cloud-Plattform umgestellt. Wir haben die gleichen Geschwindigkeitsergebnisse und eine noch schnellere Backend-Leistung freigeschaltet. Lesen Sie, warum wir zu SiteGround gewechselt sind.
Hintergrund
In letzter Zeit hat WordPress viele schlechte Reputationen von "modernen" Entwicklern erhalten, denen zufolge WordPress langsam ist.
Der Anweisung folgt im Allgemeinen, dass Sie zu einem statischen JAMstack-Site-Generator wie GatsbyJS wechseln sollten. Andere in der Geschäftswelt werden sagen, dass Sie zu einem kopflosen CMS wie Contentful wechseln sollten.
Einige meiner sehr erfolgreichen unternehmerischen Freunde fragten mich, ob dies wahr sei.
Einige haben sogar mit der Migration auf ein kopfloses CMS begonnen, weil sie Fallstudien darüber gelesen haben, wie andere durch den Wechsel von WordPress zu statischen Site-Generatoren enorme Geschwindigkeitsverbesserungen freigeschaltet haben.
Das war sehr frustrierend für mich, weil ich wusste, dass Zehntausende von Dollar für Migrationskosten verschwendet wurden. Ganz zu schweigen von den endlosen Anpassungskosten, die in Zukunft anfallen werden.
Deshalb habe ich mich der Herausforderung gestellt, zu beweisen, dass eine großartige WordPress-Content-Site wie WPBeginner genauso schnell, wenn nicht sogar schneller geladen werden kann als die meisten modernen statischen Site-Builder.
Sie können mich Old School nennen, aber am Ende des Tages ist eine statische Site nur eine Seite, die aus dem Cache geladen wird.
Ergebnisse
Bevor ich mich mit der genauen WordPress-Hosting-Infrastruktur, den Serverkonfigurationen und den Plugins befasse, halte ich es für hilfreich, die Ergebnisse zu teilen.
So schnell wird die WPBeginner-Startseite in Pingdom von Ihrem Server in Washington, DC geladen:
Abhängig von der Tageszeit und dem Ort, von dem aus Sie überprüfen, variiert dieses Ergebnis zwischen 400 ms und 700 ms, was für eine Homepage recht schnell ist.
Hier ist ein Test, den ich für eine einzelne Post-Seite durchgeführt habe, da sie größere Bilder und mehr Inhalt enthält:
Wir haben auch eine perfekte Punktzahl von "100" im Google Desktop-Seitengeschwindigkeitstest erhalten. Obwohl wir Raum für Verbesserungen in der mobilen Punktzahl haben.
Die obigen Ergebnisse beziehen sich auf zwischengespeicherte Seiten. Dies erhalten unsere Leser und Suchmaschinenroboter, wenn sie unsere Website besuchen. Die wahrgenommene Ladezeit von WPBeginner ist fast augenblicklich (dazu später mehr).
Zum Vergleich hier ein Geschwindigkeitstestergebnis für die Gatsby-Homepage. Dies ist ein beliebter statischer Site-Generator, von dem viele Entwickler begeistert sind:
Hier ist das Ergebnis des Geschwindigkeitstests der Homepage von Netlify, einem beliebten statischen Site-Host, der von vielen Entwicklern empfohlen wird. Beachten Sie, dass sie die Hälfte der Anfragen haben und dass ihre Seitengröße 30% WPBeginner beträgt, aber immer noch langsamer als unsere Homepage geladen wird.
Die Geschwindigkeit der Contentful-Homepage, des kopflosen CMS, mit dem "Unternehmen bessere digitale Erlebnisse bieten", ist einfach überhaupt nicht optimiert. Dies war die langsamste Website, die wir getestet haben.
Ich teile diese Statistiken nicht, um die anderen Frameworks zu diskreditieren, sondern um einen Einblick zu geben, dass nicht alle neuen Dinge so brillant sind, wie sie scheinen mögen.
WordPress mit einer geeigneten Hosting-Infrastruktur und Optimierungen kann so schnell sein wie jeder statische Site-Generator. Darüber hinaus wird keine andere Plattform die Flexibilität erreichen, die WordPress Geschäftsinhabern durch sein großes Plugin- und Theme-Ökosystem bietet.
WPBeginner-Hosting-Infrastruktur
Wenn es um die Geschwindigkeit von Websites geht, spielt nichts eine größere Rolle als Ihre Webhosting-Infrastruktur.
Wie viele von Ihnen bereits wissen, bin ich seit 2007 HostGator-Client. Ich habe den WPBeginner-Blog 2009 auf einem kleinen gemeinsam genutzten HostGator-Host-Konto gestartet.
Als unsere Website wuchs, haben wir ein Upgrade auf Ihr VPS-Hosting und dann auf dedizierte Server durchgeführt.
In den letzten zehn Jahren hatte ich die Gelegenheit, eng mit vielen ihrer Teammitglieder zusammenzuarbeiten, und sie sind zu einem erweiterten Teil der WPBeginner-Familie geworden.
Als ich mich der Herausforderung stellte, WPBeginner schneller als statische Site-Builder zu machen, wandte ich mich an sie, um Hilfe zu erhalten.
Ich teilte meine Vision mit ihrem Führungsteam und sie boten mir an, mir beim Aufbau eines einzigartigen Enterprise-Hosting-Setups für WPBeginner zu helfen.
Sie haben die besten Ingenieure des Bluehost- und HostGator-Teams beauftragt, eng mit mir zusammenzuarbeiten, um WPBeginner unglaublich schnell zu machen.
Hier ist eine Übersicht darüber, wie die WPBeginner-Hosting-Konfiguration aussieht:
Wie Sie sehen können, handelt es sich um eine Konfiguration mit mehreren Servern, die in zwei geografischen Regionen (Texas und Utah) verteilt ist. Es gibt insgesamt 9 Server ohne Load Balancer Cloud. Jeder Server ist eine 8-Kern (16-Draht) Xeon-D-CPU mit 32 GB RAM und 2 x 1 TB SSD (RAID-Konfiguration).
Wir verwenden die Cloud-Lastausgleichsplattform von Google, sodass wir weltweit eine automatische Skalierung und einen Lastausgleich durchführen können.
Nachdem die Hardware mit der richtigen Datensynchronisierung eingerichtet worden war, arbeiteten Bluehost und HostGator zusammen, um die Servereinstellungen für WordPress zu optimieren. Ich hoffe, dass einige dieser Optimierungen bald für zukünftige WordPress-Hosting-Pläne gelten 
Zusammenfassung der Serverkonfiguration
Es ist sehr schwierig, die Serverkonfigurationen dieser komplexen Konfiguration in nur wenigen Absätzen zusammenzufassen, aber ich werde mein Bestes geben.
Wir verwenden Apache für unsere Webserver-Software, da das Team damit besser vertraut ist. Ich werde nicht an der Debatte zwischen NGINX und Apache teilnehmen.
Wir verwenden PHP 7.2 zusammen mit PHP-FPM-Gruppen, damit wir große Prozess- und Anforderungslasten verarbeiten können. Wenn Ihr Hosting-Unternehmen PHP 7+ nicht verwendet, verpassen Sie eine ernsthafte Geschwindigkeitsoptimierung.
Wir verwenden Opcode-Caching mit einer erweiterten Cache-Heizung, um sicherzustellen, dass kein echter Benutzer einen Seitenbesuch ohne Cache erlebt.
Wir verwenden auch den Objektcache mit Memcache, damit wir die Antwortzeit für nicht zwischengespeicherte Seitenzugriffe und andere API-Antwortzeiten im WordPress-Administrationsbereich für registrierte Benutzer (unsere Autoren) verbessern können. Hier ist eine Registerkarte zum Hochladen von Netzwerken für unseren Bildschirm "Alle Beiträge" im WordPress-Manager:
Unsere Erfahrung im Verwaltungsbereich ist jetzt doppelt so schnell wie zuvor.
Für unseren Datenbankserver haben wir von MySQL zu MariaDB gewechselt, einem MySQL-Klon, der jedoch schneller und besser ist. Wir haben auch von HyperDB zu LudicrousDB gewechselt, da dies uns hilft, die Datenbankreplikation, das Failover und den Lastausgleich zu verbessern.
Es gibt auch viele andere Einstellungen, die uns bei der Leistung und Skalierbarkeit helfen, wie z. B. HTTP / 2 und HSTS für eine schnellere Verbindung + Verschlüsselung, die Möglichkeit, zusätzliche Server in neuen Regionen bei Ausfall des Rechenzentrums zu aktivieren usw.
Ich habe das Gefühl, dass ich nicht das unglaubliche Setup mache, das das Team gerecht gemacht hat, aber ich weiß, dass meine Hauptstärke das Marketing ist. Ja, ich bin ein Blogger, der über WordPress schreibt, aber viele der technischen Optimierungen hier liegen weit über meinem Gehaltsniveau.
Sie wurden von superschlauen Ingenieuren im Endurance-Team erstellt, darunter David Collins (Lead Endurance / CTO-Architekt für HostGator), Mike Hansen (Lead WordPress Developer) und andere, denen ich im Abschnitt "Credits" unten danken werde.
CDN, WAF und DNS
Neben dem Webhosting spielen Ihr DNS-Anbieter, Ihr Content Delivery-Netzwerk (auch als CDN bezeichnet) und Ihre Webanwendungs-Firewall (WAF) eine wichtige Rolle für die Geschwindigkeit Ihrer Website.
Während ich es als drei separate Dinge aufgelistet habe, bieten viele Unternehmen diese Lösungen jetzt in einem integrierten Plan wie Sucuri, Cloudflare, MaxCDN (StackPath) usw. an.
Da ich maximale Kontrolle haben und das Risiko verteilen möchte, verwende ich drei separate Unternehmen, um jedes Teil effizient zu handhaben.
WPBeginner DNS funktioniert mit DNS Made Easy (dieselbe Firma wie Constellix). Sie werden durchweg als die schnellsten DNS-Anbieter der Welt eingestuft. Der Vorteil von DNS Made Easy besteht darin, dass ich den globalen Datenverkehr leiten kann, wenn ein bestimmtes Rechenzentrum auf meinem CDN oder WAF nicht ordnungsgemäß funktioniert, um eine maximale Verfügbarkeit sicherzustellen.
Unser CDN funktioniert mit MaxCDN (StackPath). Grundsätzlich ermöglichen sie uns, unsere statischen Assets (Bilder, CSS-Dateien und JavaScripts) von einem großen Netzwerk von Servern auf der ganzen Welt aus bereitzustellen.
Wir verwenden Sucuri als Webanwendungs-Firewall. Sie blockieren nicht nur Angriffe, sondern fungieren auch als eine weitere CDN-Schicht, und ihre Gesamtleistung ist einfach erstaunlich. Ich denke, sie haben die beste WordPress-Firewall-Lösung auf dem Markt.
Bei der Optimierung der Website-Geschwindigkeit ist es wichtig, jede Millisekunde zu reduzieren. Aus diesem Grund macht die Verwendung dieser Lösungsanbieter in Kombination mit unserer neuen Webhosting-Infrastruktur einen großen Unterschied.
Zur Veranschaulichung hier die kaskadierende Aufschlüsselung von WPBeginner.com gegen GatsbyJS.org gegen CloudFlare.com:
Bitte beachten Sie, dass die WPBeginner-DNS-Zeit, die SSL-Zeit, die Verbindungszeit und das Timeout im Vergleich zu diesen anderen beliebten Websites erstklassig sind. Jede dieser Verbesserungen wird kombiniert, um die besten Ergebnisse zu erzielen.
Instant.page, optimierte Bilder und andere Best Practices
Eines der Dinge, die Sie vielleicht bemerkt haben, ist die fast sofortige Ladezeit beim Durchsuchen der WPBeginner-Beiträge und -Seiten.
Zusätzlich zu all den Dingen, die ich zuvor erwähnt habe, betrügen wir auch die Latenz, indem wir ein Skript namens instant.page verwenden, das das rechtzeitige Vorladen verwendet.
Grundsätzlich muss ein Benutzer, bevor er auf einen Link klickt, mit der Maus über diesen Link fahren. Wenn ein Benutzer 65 ms (sehr kurze Zeit) geblieben ist, klickt jeder Zweite tatsächlich auf den Link.
Das Instant.page-Skript beginnt sofort mit dem Vorladen dieser Seite. Wenn der Benutzer also tatsächlich auf den Link klickt, ist ein Großteil des schweren Hebens bereits erledigt. Dadurch nimmt das menschliche Gehirn die Ladezeit der Website als nahezu augenblicklich wahr.
Um Instant.page auf Ihrer Site zu aktivieren, können Sie einfach das WordPress Instant Page-Plugin installieren und aktivieren.
Dieses Skript ist ziemlich gut. Ich empfehle Ihnen, Ihre Website zu besuchen und auf die Schaltfläche "Testen Sie Ihre Klickgeschwindigkeit" zu klicken, um zu sehen, wie dies das Gehirn täuscht.
Update: Ich habe instant.page vorerst deaktiviert und werde das FlyingPages-Plugin in naher Zukunft testen. Gijo Varghese teilte mir sein neues Add-On in der Gruppe von mit Facebook WPBeginner Engage, und es scheint das Beste aus instant.page und Quick Link-Skript zu kombinieren.
Bilder für das Web optimieren
Obwohl neue Bildformate wie webp entwickelt werden, verwenden wir sie noch nicht. Stattdessen bitten wir alle unsere Autoren, jedes Bild mit dem TinyPNG-Tool zu optimieren.
Sie können die Bildkomprimierung auch mithilfe von Plugins wie Optimole oder EWWW Image Optimizer automatisieren.
Ich persönlich bevorzuge es jedoch, dass das Team dies manuell macht, damit wir keine großen Dateien auf den Server hochladen.
Derzeit führen wir kein verzögertes Laden von Bildern durch, aber ich plane, es in naher Zukunft hinzuzufügen, da Google die Unterstützung für verzögertes Laden in Chrome 76 integriert hat.
Es gibt auch ein Ticket im WordPress-Kern, um diese Funktion auf allen Websites hinzuzufügen (in der Hoffnung, dass dies bald geschieht), sodass ich kein benutzerdefiniertes Plugin schreiben muss.
Update: Einige Stunden nachdem ich den Blog-Beitrag gepostet hatte, veröffentlichte Google das Native Lazy Load-Plugin für WordPress.
Einschränkung der HTTP-Abfrage + Best Practices
Abhängig von den von Ihnen verwendeten WordPress-Plugins fügen einige bei jedem Laden der Seite zusätzliche CSS- und JavaScript-Dateien hinzu. Diese zusätzlichen HTTP-Anforderungen können außer Kontrolle geraten, wenn Ihre Website viele Plugins enthält.
Weitere Informationen finden Sie unter den Auswirkungen von WordPress-Plugins auf die Ladezeit Ihrer Website.
Bevor ich fälschlicherweise zu dem Schluss komme, dass zu viele WordPress-Plugins schlecht sind, möchte ich Sie darüber informieren, dass auf der WPBeginner-Website 62 aktive Plugins ausgeführt werden.
Sie sollten nach Möglichkeit CSS- und JavaScript-Dateien kombinieren, um HTTP-Anforderungen zu reduzieren. Einige WordPress-Caching-Plugins wie WP Rocket können dies mit ihrer Minimierungsfunktion automatisch tun.
Sie können auch den Anweisungen in diesem Artikel folgen, um dies manuell zu tun. Dies hat unser Team bei WPBeginner getan.
Zusätzlich zu HTTP-Anforderungen, die Plugins und Designs hinzufügen, sollten Sie auch andere Skripte von Drittanbietern kennen, die Sie auf Ihrer Website hinzufügen, da jedes Skript die Geschwindigkeit Ihrer Website beeinflusst.
Wenn Sie beispielsweise viele Anzeigenskripte ausführen oder Skripte umleiten, verlangsamen diese Ihre Website. Möglicherweise möchten Sie ein Tool wie Google Tag Manager verwenden, um Skripts nur bei Bedarf bedingt zu laden.
Wenn Sie eine werbefinanzierte Website wie TechCrunch oder TheNextWeb haben, können Sie nur sehr wenig dagegen tun, da das Entfernen von Anzeigen keine Option ist.
Glücklicherweise ist WPBeginner nicht auf Anzeigenskripte von Drittanbietern angewiesen, um Geld zu verdienen. Möchten Sie sehen, wie WPBeginner Geld verdient? Siehe meinen Blog-Beitrag über WPBeginner-Einnahmen.
Lektionen gelernt (bisher) + Meine letzten Gedanken
Dies ist eine völlig neue Hosting-Infrastruktur, und ich bin sicher, dass ich im Laufe der Zeit unzählige Lektionen lernen werde.
Bisher liebe ich Geschwindigkeitsverbesserungen, weil sie uns geholfen haben, unser SEO-Ranking zu verbessern, und unser Admin-Bereich ist viel schneller.
Mit dem neuen Multi-Server-Setup führen wir einen neuen Bereitstellungsworkflow ein, damit WPBeginner allen anderen Awesome Motive-Produktwebsites ebenbürtig ist.
Dies bedeutet, dass wir jetzt eine ordnungsgemäße Version haben, die das integrierte Steuerelement steuert, und dass Maßnahmen vorhanden sind, um zu verhindern, dass es rücksichtslos ist (d. H. Hinzufügen von Plugins ohne ordnungsgemäße Tests, Aktualisieren von Plugins aus dem Dashboard ohne Testen usw.).
Diese Änderungen legen auch den Weg für Sie fest, um die Entwicklung zu beenden und die Regentschaften der WPBeginner-Site unserem Entwicklungsteam zu übergeben.
Ich habe das jahrelang ertragen, aber ich denke, die Zeit kommt und ich muss es einfach akzeptieren.
Die neue Konfiguration hat kein cPanel oder WHM, daher bin ich sowieso praktisch nutzlos, da ich die Befehlszeile nicht mehr sehr fließend beherrsche.
Bisher haben wir zwei großartige Lektionen gelernt:
Erstens ist das Aktualisieren von WordPress aufgrund der Serversynchronisierung / -replikation nicht so einfach. Als wir mein persönliches Blog (SyedBalkhi.com) auf WordPress 5.2 aktualisiert haben, wurden die Aktualisierungsdateien auf einem der Webknoten nicht ordnungsgemäß synchronisiert, und das Debuggen dauerte viel länger als erwartet. Wir arbeiten daran, einen besseren Build / Test-Prozess dafür zu schaffen.
Zweitens brauchen wir eine bessere Kommunikation zwischen den Teams, da wir eine kleine Krise mit falschen Load-Balancer-Einstellungen hatten, die zu Ausfallzeiten führte. Um die Sache noch schlimmer zu machen, war ich auf einem Transatlantikflug mit Turkish Airlines und das WiFi funktionierte nicht.
Glücklicherweise wurde dank der schnellen Reaktionszeit des Hosting-Teams alles gelöst. Dies half uns jedoch, mehrere neue Standard Operating Procedures (SOP) zu erstellen, um den Vorfall in Zukunft besser behandeln zu können.
Insgesamt bin ich mit dem Setup sehr zufrieden und weiß, dass einige der für WPBeginner vorgenommenen Caching-Einstellungen / -Optimierungen ein Standardbestandteil der HostGator Cloud- und Bluehost WordPress-Hosting-Pläne werden.
Ich denke, dies sollte selbstverständlich sein, dass Sie, wenn Sie gerade eine Website, ein Blog oder einen Online-Shop starten, dieses ausgefeilte Geschäfts-Setup NICHT benötigen.
Ich empfehle immer, dass Sie nach und nach mit den gemeinsam genutzten HostGator- oder Bluehost-Plänen beginnen und dann Ihre Hosting-Infrastruktur aktualisieren, wenn Ihr Unternehmen wächst.
Sie können viele der Optimierungen anwenden, die ich zuvor in Ihren aktuellen WordPress-Hosting-Plänen geteilt habe.
Zum Beispiel enthält der Standard-Bluehost-Plan bereits ein integriertes Caching-Plugin, das Sie verwenden können, und sie bieten standardmäßig auch PHP 7 an.
Sie können dies mit einem CDN + WAF wie Sucuri kombinieren, um Ihre Website erheblich zu beschleunigen.
Wenn Sie ein mittelständisches Unternehmen sind, das ein ähnliches Hosting-Setup wünscht, kontaktieren Sie mich bitte über unser Kontaktformular. Ich kann Ihnen helfen, die richtige Richtung einzuschlagen.
Besonderer Dank + Credits
Während ich im vorherigen Artikel den Marken HostGator und Bluehost vielmals gedankt habe, möchte ich mir einen Moment Zeit nehmen, um die einzelnen Personen anzuerkennen und zu schätzen, die hinter den Kulissen gearbeitet haben, um dies zu erreichen.
Zunächst möchte ich dem Endurance-Führungsteam Suhaib, Mitch, John Orlando, Mike Lillie und Brady Nord dafür danken, dass sie sich bereit erklärt haben, mir bei der Herausforderung zu helfen.
Ich möchte auch Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem und anderen Mitgliedern des Rechenzentrumsteams danken. die harte Arbeit machen und es möglich machen.
Ich möchte Steven Job (Gründer von DNSMadeEasy) meinen besonderen Dank dafür aussprechen, dass er meine Fragen schnell beantwortet und mir geholfen hat, einige Einstellungen besser zu verstehen. Ich möchte auch Tony Pérez und Daniel Cid von Sucuri begrüßen, dass sie immer meinen Rücken haben.
Zu guter Letzt möchte ich Chris Christoff besondere Anerkennung schenken. Er ist Mitbegründer von MonsterInsights und war so freundlich, mir bei vielen Tests und Implementierungen zu helfen.
Ich hoffe wirklich, dass Sie diese Fallstudie hinter den Kulissen zur WPBeginner-Hosting-Infrastruktur hilfreich fanden. Vielleicht möchten Sie auch unsere endgültige Anleitung zur Beschleunigung von WordPress lesen, die viel anfängerfreundlicher ist.
Premium: Hier sind die besten WordPress-Plugins und -Tools, die ich für alle WordPress-Sites empfehle.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
