Jak sprawiliśmy, że WordPress działa szybciej niż generatory stron statycznych (Studium przypadku – przyspieszanie WPBeginner)

Kiedy świętowaliśmy naszą dziesiątą rocznicę, podzieliłem się informacją, że nasza infrastruktura hostingowa przeszła ogromną modernizację. Od tego czasu wielu czytelników napisało do mnie z pytaniem, jak dokładnie sprawiliśmy, że nasza strona ładuje się tak szybko.

To prawda, że nasza strona ładuje się szybciej niż większość generatorów stron statycznych. W niektórych przypadkach wyprzedza nawet strony Google AMP.

Nie chodzi tylko o przechwałki. Chcę podzielić się dokładnymi technikami, których używa nasz zespół, aby WordPress działał z absolutnie najwyższą wydajnością.

W tym przewodniku zapewnię ekskluzywny wgląd za kulisy naszej konfiguracji. Dowiesz się, jak zoptymalizowaliśmy WordPress, aby pokonać platformy headless.

Uwaga: Ten artykuł jest bardziej techniczny niż nasze zwykłe treści. Jeśli nie jesteś biegły w technologii, polecam przeczytać nasz ostateczny przewodnik, jak przyspieszyć WordPress.

Tło

Ostatnio WordPress zyskuje złą reputację wśród „nowoczesnych” programistów, którzy twierdzą, że WordPress jest wolny.

Stwierdzenie to jest zazwyczaj uzupełniane sugestią, że powinieneś przejść na generator statycznych stron JAMstack, taki jak GatsbyJS. Inni w świecie korporacyjnym powiedzą, że powinieneś przejść na headless CMS, taki jak Contentful.

Kilku moich bardzo odnoszących sukcesy przyjaciół przedsiębiorców zaczęło pytać mnie, czy to prawda.

Niektórzy nawet rozpoczęli proces migracji do headless CMS, ponieważ czytali studia przypadków o tym, jak inni osiągnęli ogromną poprawę prędkości, przechodząc z WordPressa na generatory stron statycznych.

Było to dla mnie bardzo frustrujące, ponieważ wiedziałem, że marnują dziesiątki tysięcy dolarów na koszty migracji. Nie wspominając o niekończących się kosztach dostosowywania, które pojawią się w przyszłości.

Postanowiłem więc podjąć wyzwanie, aby udowodnić, że duża strona z treściami WordPress, taka jak WPBeginner, może ładować się równie szybko, jeśli nie szybciej, niż większość nowoczesnych statycznych generatorów stron.

Możesz mnie nazwać staroświeckim, ale koniec końców, strona statyczna to po prostu strona ładowana z pamięci podręcznej.

Wyniki

Zanim przejdę do dokładnej infrastruktury hostingowej WordPress, konfiguracji serwera i wtyczek, myślę, że warto podzielić się wynikami.

Oto jak szybko ładuje się strona główna WPBeginner na Pingdom z ich serwera w Waszyngtonie, DC:

W zależności od pory dnia i lokalizacji, z której sprawdzasz, ten wynik będzie się wahał od 400 ms do 700 ms, co jest całkiem szybko jak na stronę główną.

Oto test, który przeprowadziłem dla pojedynczej strony posta, ponieważ zawiera większe obrazy i więcej treści:

Uzyskaliśmy również doskonały wynik „100” w teście szybkości strony Google dla komputerów stacjonarnych. Chociaż mamy pewne pole do poprawy w wyniku mobilnym.

Powyższe wyniki dotyczą stron buforowanych, które nasi czytelnicy i boty wyszukiwarek otrzymują podczas przeglądania naszej strony internetowej. Postrzegany czas ładowania WPBeginner jest niemal natychmiastowy (więcej na ten temat później).

Dla porównania, oto wynik testu prędkości dla strony głównej Gatsby. Jest to popularny generator stron statycznych, o którym wielu programistów mówi z entuzjazmem:

Oto wynik testu szybkości strony głównej Netlify, popularnego hosta statycznych stron, który wielu programistów poleca. Zauważ, że mają o połowę mniej żądań, a rozmiar ich strony to 30% WPBeginner, a mimo to ładuje się wolniej niż nasza strona główna.

Szybkość strony głównej Contentful, headless CMS, który „jest sposobem, w jaki przedsiębiorstwa dostarczają lepsze cyfrowe doświadczenia”, nie jest w ogóle zoptymalizowana. Była to najwolniejsza testowana przez nas strona internetowa.

Dzielę się tymi statystykami nie po to, aby zdyskredytować inne frameworki, ale raczej po to, aby dać perspektywę, że nie wszystko, co nowe, jest tak błyszczące, jak może się wydawać.

WordPress, z odpowiednią infrastrukturą hostingową i optymalizacjami, może być równie szybki jak każdy generator statycznych stron. Ponadto żadna inna platforma nie zbliży się nawet do poziomu elastyczności, jaką WordPress oferuje właścicielom firm dzięki swojemu dużemu ekosystemowi wtyczek i motywów.

Infrastruktura Hostingowa WPBeginner

Jeśli chodzi o szybkość strony internetowej, nic nie odgrywa ważniejszej roli niż infrastruktura hostingu internetowego.

Jak wielu z Was już wie, jestem klientem HostGator od 2007 roku. Założyłem bloga WPBeginner w 2009 roku na małym koncie hostingu współdzielonego HostGator.

W miarę rozwoju naszej strony internetowej uaktualniliśmy do ich hostingu VPS, a następnie do serwerów dedykowanych.

Przez ostatnią dekadę miałem okazję blisko współpracować z wieloma członkami ich zespołu i stali się oni rozszerzoną częścią rodziny WPBeginner.

Kiedy więc podjąłem wyzwanie, aby WPBeginner działał szybciej niż generatory stron statycznych, zwróciłem się do nich o pomoc.

Podzieliłem się moją wizją z ich zespołem kierowniczym i zaoferowali pomoc w zbudowaniu unikalnego rozwiązania hostingowego dla przedsiębiorstw dla WPBeginner.

Zaangażowali najlepszych inżynierów z zespołów Bluehost i HostGator, aby ściśle ze mną współpracowali, aby WPBeginner działał błyskawicznie.

Oto przegląd tego, jak wygląda konfiguracja hostingu WPBeginner:

Jak widać, jest to konfiguracja wieloserwerowa rozłożona na dwa regiony geograficzne (Teksas i Utah). W sumie jest 9 serwerów, nie licząc chmury load balancera. Każdy serwer to procesor Xeon-D z 8 rdzeniami (16 wątkami), 32 GB pamięci RAM i 2 x 1 TB SSD (konfiguracja RAID).

Korzystamy z platformy Google Cloud Load Balancing, dzięki czemu możemy mieć płynne skalowanie automatyczne i równoważenie obciążenia na całym świecie.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. I hope that some of these optimizations will soon make it into future WordPress hosting plans

Podsumowanie konfiguracji serwera

Podsumowanie konfiguracji serwerów tego złożonego systemu w zaledwie kilku akapitach jest bardzo trudne, ale postaram się jak najlepiej.

Używamy Apache jako naszego oprogramowania serwera WWW, ponieważ zespół jest z nim bardziej zaznajomiony. Nie będę wchodził w debatę NGINX vs Apache.

W tamtym czasie używaliśmy PHP 7.2 wraz z pulami PHP-FPM (metoda, która pomaga serwerowi efektywnie przetwarzać duże natężenie ruchu). Dziś, jeśli Twoja firma hostingowa nie używa PHP 8.1 lub nowszego, tracisz poważne optymalizacje prędkości i ważne aktualizacje bezpieczeństwa.

Używaliśmy buforowania Opcode (które zapisuje skompilowany kod PHP, dzięki czemu serwer działa szybciej) z zaawansowanym podgrzewaczem pamięci podręcznej, aby zapewnić, że żaden rzeczywisty użytkownik nie doświadczy niebuforowanego wyświetlenia strony.

Używaliśmy również buforowania obiektów z memcache. Buforowanie obiektów zapisuje zapytania do bazy danych, co pozwala nam drastycznie poprawić czas odpowiedzi dla niebuforowanych trafień strony i przyspieszyć obszar administracyjny WordPress dla zalogowanych użytkowników (naszych pisarzy).

Oto zakładka obciążenia sieciowego naszego ekranu „Wszystkie posty” w administracji WordPress w tamtym czasie:

Dla porównania, nasze doświadczenie w obszarze administracyjnym jest teraz 2 razy szybsze niż wcześniej.

Dla naszego serwera baz danych przeszliśmy z MySQL na MariaDB, która jest klonem MySQL, ale szybszym i lepszym. Przeszliśmy również z HyperDB na LudicrousDB, ponieważ pomaga nam to poprawić replikację bazy danych, przełączanie awaryjne i równoważenie obciążenia.

Istnieje również wiele innych konfiguracji, które pomagają nam w wydajności i skalowalności, takich jak HTTP/2 i HSTS dla szybszego połączenia + szyfrowania, możliwość uruchamiania dodatkowych serwerów w nowych regionach w przypadku awarii centrum danych itp.

Czuję, że nie oddaję sprawiedliwości niesamowitej konfiguracji, którą zbudował zespół, ale proszę, wiedz, że moją główną siłą jest marketing. Tak, jestem blogerem, który pisze o WordPressie, ale wiele z tych technicznych optymalizacji wykracza poza moje kompetencje.

Zostały one wykonane przez super inteligentnych inżynierów z zespołu Endurance, w tym Davida Collinsa (głównego architekta Endurance / CTO HostGator), Mike'a Hansena (kluczowego dewelopera WordPress) i innych, którym podziękuję w poniższej sekcji z podziękowaniami.

CDN, WAF i DNS

Oprócz hostingu internetowego, inne obszary, które odgrywają znaczącą rolę w szybkości Twojej strony internetowej, to Twój dostawca DNS, Twoja sieć dostarczania treści (zwana również CDN) i Twoja zapora aplikacji internetowej (WAF).

Chociaż wymieniłem to jako trzy oddzielne rzeczy, wiele firm oferuje obecnie te rozwiązania w pakiecie, takie jak Sucuri, Cloudflare, MaxCDN (obecnie StackPath CDN) itp.

Ponieważ chcę mieć maksymalną kontrolę i rozłożyć ryzyko, korzystam z trzech oddzielnych firm, które efektywnie zajmują się każdą częścią.

WPBeginner DNS jest zasilany przez DNS Made Easy (ta sama firma co Constellix). Są oni konsekwentnie klasyfikowani jako najszybsi dostawcy DNS na świecie. Zaletą DNS Made Easy jest to, że mogę kierować globalny ruch, gdy określone centrum danych w moim CDN lub WAF nie działa poprawnie, aby zapewnić maksymalny czas pracy.

Nasze CDN było zasilane przez MaxCDN (później znane jako StackPath CDN, które jest teraz wycofane). Pozwalało nam to zasadniczo na serwowanie naszych statycznych zasobów (obrazów, plików CSS i JavaScript) z dużej sieci serwerów na całym świecie.

Używamy Sucuri jako naszej zapory aplikacji internetowej. Oprócz blokowania ataków, działają one również jako dodatkowa warstwa CDN, a ich ogólna wydajność jest po prostu niesamowita. Wierzę, że mają najlepsze rozwiązanie zapory sieciowej dla WordPressa na rynku.

Podczas pracy nad optymalizacją szybkości strony internetowej, liczy się każda milisekunda. Dlatego korzystanie z tych dostawców rozwiązań w połączeniu z naszą nową infrastrukturą hostingową robi ogromną różnicę.

Dla ilustracji, oto podział wykresu WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Zauważ, że czas DNS, czas SSL, czas połączenia i czas oczekiwania WPBeginner są na najwyższym poziomie w porównaniu do tych innych popularnych stron internetowych. Każda z tych ulepszeń sumuje się, aby zapewnić najlepsze wyniki.

Instant.page, zoptymalizowane obrazy i inne najlepsze praktyki

Jedną z rzeczy, które mogłeś zauważyć, jest niemal natychmiastowy czas ładowania podczas przeglądania postów i stron WPBeginner.

Oprócz wszystkich rzeczy, o których wspomniałem powyżej, zmniejszamy również opóźnienia, używając skryptu o nazwie instant.page, który wykorzystuje ładowanie wstępne w czasie rzeczywistym.

Zasadniczo, zanim użytkownik kliknie w link, musi najechać na niego kursorem myszy. Kiedy użytkownik najechał na link przez 65 ms (bardzo krótki okres czasu), jeden na dwóch faktycznie kliknie w link.

Skrypt Instant.page zaczyna wstępnie ładować tę stronę w tym momencie, więc kiedy użytkownik faktycznie kliknie link, wiele ciężkich zadań jest już wykonanych. To sprawia, że ludzki mózg postrzega czas ładowania strony internetowej jako prawie natychmiastowy.

Aby włączyć Instant.page na swojej stronie, możesz po prostu zainstalować i aktywować wtyczkę Instant Page WordPress.

Ten skrypt jest całkiem niezły. Gorąco polecam odwiedzić ich stronę internetową i kliknąć przycisk „testuj szybkość klikania”, aby zobaczyć, jak oszukuje mózg.

Optymalizacja obrazów dla sieci

Chociaż rozwijane są nowe formaty obrazów, takie jak WebP, jeszcze ich nie używamy. Zamiast tego prosimy wszystkich naszych pisarzy o optymalizację każdego obrazu za pomocą narzędzia TinyPNG.

Możesz również zautomatyzować kompresję obrazów za pomocą wtyczek takich jak Optimole lub EWWW Image Optimizer.

Osobiście jednak wolę, aby zespół robił to ręcznie, abyśmy nie przesyłali dużych plików na serwer.

W tamtym czasie nie stosowaliśmy żadnego leniwego ładowania obrazów, ale planowaliśmy dodać je, gdy tylko Google wprowadzi natywne wsparcie dla leniwego ładowania w Chrome.

Na szczęście, od wersji WordPress 5.5, leniwe ładowanie jest teraz wbudowane bezpośrednio w rdzeń WordPress. Oznacza to, że dzisiaj nie potrzebujesz już niestandardowej wtyczki, aby uzyskać podstawowe leniwe ładowanie obrazów na swojej stronie internetowej.

Ograniczanie zapytań HTTP + Najlepsze praktyki

W zależności od używanych wtyczek WordPress, niektóre dodają dodatkowe pliki CSS i JavaScript przy każdym ładowaniu strony. Te dodatkowe żądania HTTP mogą wymknąć się spod kontroli, jeśli masz dużo wtyczek na swojej stronie internetowej.

Więcej szczegółów znajdziesz w jak wtyczki WordPress mogą wpływać na czas ładowania Twojej witryny.

Teraz, zanim wyciągniesz błędne wnioski, że zbyt wiele wtyczek WordPress jest złych, chcę Ci powiedzieć, że na stronie WPBeginner działa 62 aktywne wtyczki.

Należy połączyć pliki CSS i JavaScript tam, gdzie to możliwe, aby zmniejszyć liczbę żądań HTTP. Niektóre wtyczki do buforowania WordPress, takie jak WP Rocket, mogą to robić automatycznie dzięki funkcji minifikacji.

Możesz również postępować zgodnie z instrukcjami w tym artykule, aby zrobić to ręcznie, co zrobił nasz zespół w WPBeginner.

Oprócz żądań HTTP, które dodają wtyczki i motywy, należy również pamiętać o innych skryptach stron trzecich, które dodajesz do swojej witryny, ponieważ każdy skrypt wpłynie na szybkość Twojej witryny.

Na przykład, jeśli uruchamiasz wiele skryptów reklamowych lub retargetingowych, spowolnią one Twoją witrynę. Możesz użyć narzędzia takiego jak Google Tag Manager, aby warunkowo ładować skrypty tylko wtedy, gdy są potrzebne.

Jeśli jesteś witryną wspieraną przez reklamy, taką jak TechCrunch lub TheNextWeb, to niewiele możesz z tym zrobić, ponieważ usunięcie reklam nie wchodzi w grę.

Na szczęście WPBeginner nie polega na zewnętrznych skryptach reklamowych, aby zarabiać pieniądze. Chcesz zobaczyć, jak WPBeginner zarabia pieniądze? Zobacz mój wpis na blogu o dochodach WPBeginner.

Wyciągnięte wnioski (do tej pory) + Moje końcowe przemyślenia

Jest to zupełnie nowa infrastruktura hostingowa i jestem pewien, że z czasem nauczę się mnóstwa rzeczy.

Jak dotąd uwielbiam usprawnienia prędkości, ponieważ pomogły nam poprawić nasze rankingi SEO, a nasz obszar administracyjny jest znacznie szybszy.

Dzięki nowemu, wieloserwerowemu setupowi wprowadziliśmy nowy przepływ pracy wdrażania, aby doprowadzić WPBeginner do poziomu pozostałych witryn produktów Awesome Motive.

Oznacza to, że mamy teraz wbudowane prawidłowe zarządzanie wersjami i wprowadzono środki zapobiegające mojej lekkomyślności (tj. dodawaniu wtyczek bez odpowiedniego testowania, aktualizowaniu wtyczek z panelu administracyjnego bez testowania itp.).

Te zmiany utorowały mi drogę do ostatecznego wyjścia z rozwoju i przekazania sterów strony WPBeginner naszemu zespołowi deweloperskiemu.

Opierałem się temu przez lata, ale myślę, że nadchodzi ten czas i po prostu muszę się z tym pogodzić.

Nowy system nie ma cPanel ani WHM, więc to sprawia, że jestem praktycznie bezużyteczny, ponieważ nie jestem już zbyt biegły w linii komend.

Do tej pory nauczyliśmy się dwóch ważnych lekcji:

Po pierwsze, aktualizacja WordPressa nie jest tak prosta ze względu na synchronizację/replikację serwerów. Podczas dużej aktualizacji rdzenia na moim osobistym blogu (SyedBalkhi.com) pliki aktualizacji nie zsynchronizowały się poprawnie na jednym z węzłów sieciowych, a debugowanie zajęło znacznie więcej czasu niż przewidywano. Musieliśmy zbudować lepszy proces testowania.

Po drugie, potrzebujemy lepszej komunikacji między zespołami, ponieważ mieliśmy niewielki kryzys z błędnymi konfiguracjami równoważenia obciążenia, co spowodowało przestoje. Co gorsza, byłem w samolocie transatlantyckim Turkish Airlines, a WiFi nie działało.

Na szczęście wszystko zostało rozwiązane dzięki szybkiej reakcji zespołu hostingowego, ale pomogło nam to stworzyć kilka nowych Standardowych Procedur Operacyjnych (SOP), aby lepiej radzić sobie z incydentem w przyszłości.

Ogólnie jestem bardzo zadowolony z konfiguracji i wiem, że niektóre z konfiguracji/optymalizacji pamięci podręcznej, które zostały wprowadzone dla WPBeginner, staną się standardową częścią planów hostingowych HostGator Cloud i Bluehost WordPress hosting.

Myślę, że to oczywiste, że jeśli dopiero zaczynasz tworzyć stronę internetową, bloga lub sklep internetowy, to NIE potrzebujesz tej zaawansowanej konfiguracji dla przedsiębiorstw.

Zawsze polecam, aby zacząć od małych planów HostGator shared lub Bluehost shared, tak jak ja, a następnie rozbudowywać swoją infrastrukturę hostingową w miarę rozwoju firmy.

Możesz zastosować wiele z udostępnionych powyżej optymalizacji do swoich obecnych planów hostingowych WordPress.

Na przykład, standardowy plan Bluehost już zawiera wbudowany plugin do cachowania, którego możesz użyć, a także domyślnie oferują PHP 7.

Możesz połączyć to z CDN + WAF, takim jak Sucuri, aby znacznie przyspieszyć swoją stronę internetową.

Teraz, jeśli jesteś firmą ze średniego rynku / przedsiębiorstwem, które chce podobnej konfiguracji hostingu, skontaktuj się ze mną za pośrednictwem naszego formularza kontaktowego. Mogę wskazać Ci właściwy kierunek.

Specjalne podziękowania + uznania

Chociaż w powyższym artykule wielokrotnie wspominałem o markach HostGator i Bluehost, chcę poświęcić chwilę na docenienie osób, które stały za kulisami, aby to się udało.

Po pierwsze, chcę podziękować zespołowi kierownictwa Endurance, Suhaibowi, Mitchowi, Johnowi Orlando, Mike'owi Lillie i Brady'emu Nordowi za zgodę na pomoc w tym wyzwaniu.

Chciałbym również podziękować Mike'owi Hansenowi, Davidowi Collinsowi, Rickowi Radingerowi, Chrisowi Milesowi, Davidowi Ryanowi, Jesse'emu Cookowi, Davidowi Fosterowi, Micahowi Woodowi, Williamowi Earnhardtowi, Robinowi Mendieta, Rodowi Johnsonowi, Alfredowi Najemowi i innym z zespołu centrum danych za wykonanie ciężkiej pracy i doprowadzenie tego do końca.

Chcę szczególnie podziękować Stevenowi Jobowi (założycielowi DNSMadeEasy) za szybkie odpowiadanie na moje pytania i pomoc w lepszym zrozumieniu niektórych ustawień. Chcę również podziękować Tony'emu Perezowi i Danielowi Cid z Sucuri za to, że zawsze mnie wspierali.

Na koniec, ale nie mniej ważne, chcę szczególnie docenić Chrisa Christoffa. Jest on współzałożycielem MonsterInsights i był na tyle miły, że pomógł mi z wieloma testami i wdrożeniem.

Najczęściej zadawane pytania (FAQ)

Rozumiemy, że jest to wiele informacji technicznych do przyswojenia. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących szybkości i wydajności WordPress.

Czy potrzebuję skomplikowanej konfiguracji hostingu, takiej jak WPBeginner, aby mieć szybką stronę internetową?

Absolutnie nie. Ten studium przypadku pokazuje, co jest możliwe na poziomie przedsiębiorstwa. Dla większości użytkowników idealnym punktem wyjścia jest wysokiej jakości plan hostingowy shared od Bluehost lub HostGator. Zawsze możesz ulepszyć hosting w miarę rozwoju Twojej strony.

Jakie są najważniejsze czynniki wpływające na szybkość WordPressa?

Trzy filary szybkości strony internetowej to infrastruktura hostingu, cachowanie i sieć dostarczania treści (CDN). Poprawne skonfigurowanie tych trzech elementów rozwiąże największe wąskie gardła wydajności dla większości stron WordPress.

Czy mogę sprawić, żeby moja strona WordPress działała szybko, nie będąc ekspertem technicznym?

Tak. Chociaż ten artykuł jest techniczny, nie musisz wszystkiego rozumieć. Postępując zgodnie z poradnikami dla początkujących, używając dobrego pluginu do cachowania, takiego jak WP Rocket, i optymalizując obrazy, możesz znacząco wpłynąć na szybkość swojej strony bez żadnej wiedzy programistycznej.

Czy używanie wielu wtyczek spowalnia WordPress?

Liczy się nie liczba wtyczek, ale ich jakość. Dobrze napisana wtyczka będzie miała minimalny wpływ. Jednak źle napisane wtyczki mogą dodawać niepotrzebny kod i zapytania do bazy danych, które spowalniają Twoją witrynę.

Dodatkowe zasoby poprawiające wydajność strony internetowej

Jeśli ten studium przypadku okazał się pomocny, mamy inne poradniki, które krok po kroku przeprowadzą Cię przez proces przyspieszania Twojej strony WordPress. Sprawdź je, aby uzyskać więcej praktycznych wskazówek:

• Kompletny przewodnik po zwiększaniu szybkości i wydajności WordPress – Nasz najbardziej kompleksowy przewodnik dla użytkowników wszystkich poziomów umiejętności, aby poprawić szybkość strony.
• Jak wybrać najlepszy hosting WordPress – Dowiedz się, jak wybrać odpowiedniego dostawcę hostingu dla swoich potrzeb i budżetu.
• Dlaczego potrzebujesz CDN dla swojego bloga WordPress – Szczegółowe wyjaśnienie, jak działa CDN i dlaczego jest niezbędny dla szybkości.
• Schemat WPBeginner – Zobacz pełną listę narzędzi i pluginów, których używamy do prowadzenia WPBeginner dzisiaj.

Bonus: Oto najlepsze wtyczki WordPress i narzędzia, które polecam do wszystkich witryn WordPress. Możesz również przyjrzeć się planowi WPBeginner, który zawiera listę wtyczek i narzędzi, których używamy do prowadzenia witryny WPBeginner dzisiaj.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.