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

Z okazji 10. rocznicy WPBeginner, podzieliłem się informacją, że nasza infrastruktura hostingowa przeszła ogromną modernizację dzięki naszemu partnerowi hostingowemu, HostGator. Następnie wielu naszych czytelników zastanawiało się, jak dokładnie sprawiliśmy, że WPBeginner ładuje się błyskawicznie, i zacząłem otrzymywać e-maile z prośbą o szczegóły.

Tak, WPBeginner ładuje się szybciej niż większość generatorów stron statycznych, a w niektórych przypadkach nawet szybciej niż strony Google AMP. Nie chodzi tylko o przechwałki; chodzi o udostępnienie dokładnych technik, których użyliśmy, aby WordPress działał na absolutnie najwyższym poziomie.

W tym artykule przedstawię ekskluzywny wgląd za kulisy tego, jak zoptymalizowaliśmy WordPress, aby był szybszy niż generatory stron statycznych i platformy headless CMS.

Uwaga: Ten artykuł jest nieco bardziej techniczny niż to, co zazwyczaj publikujemy na WPBeginner. Dla użytkowników nietechnicznych polecam zapoznanie się z naszym ostatecznym przewodnikiem, jak przyspieszyć WordPress.

Tło

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

Stwierdzenie to zazwyczaj kończy się stwierdzeniem: 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 dostosowania, które narosną 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 generatorów statycznych 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 hostingu WordPress, konfiguracji serwerów 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 szybkie dla strony głównej.

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 jeszcze pewne pole do poprawy w przypadku wyniku dla urządzeń mobilnych.

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 prędkości strony głównej Netlify, popularnego hosta stron statycznych, który wielu programistów poleca. Zauważ, że mają o połowę mniej żądań, a rozmiar ich strony to 30% rozmiaru 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 doświadczenia cyfrowe”, w ogóle nie jest zoptymalizowana. Była to najwolniejsza strona, którą testowaliśmy.

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 stron statycznych. Ponadto, żadna inna platforma nie zbliży się do poziomu elastyczności, jaki 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. Rozpocząłem blog WPBeginner w 2009 roku na małym koncie hostingu współdzielonym HostGator.

W miarę rozwoju naszej strony internetowej, przeszliśmy na ich hosting VPS, a następnie na serwery dedykowane.

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, a oni zaoferowali mi pomoc w zbudowaniu unikalnego rozwiązania hostingowego dla przedsiębiorstw dla WPBeginner.

Najlepsi inżynierowie z zespołów Bluehost i HostGator ś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ątków), 32 GB pamięci RAM i 2 x 1 TB SSD (konfiguracja RAID).

Używamy platformy równoważenia obciążenia w chmurze Google, dzięki czemu możemy zapewnić 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. My hope is 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 oprogramowania serwera WWW, ponieważ zespół jest z nim bardziej zaznajomiony. Nie będę wchodził w debatę NGINX vs Apache.

Używamy PHP 7.2 wraz z pulami PHP-FPM, dzięki czemu możemy obsługiwać wysokie obciążenia procesów i żądań. Jeśli Twoja firma hostingowa nie korzysta z PHP 7+, tracisz poważną optymalizację prędkości.

Używamy cachowania Opcode z zaawansowanym cache warmerem, aby zapewnić, że żaden prawdziwy użytkownik nie doświadczy nie-cachowanej wizyty strony.

Używamy również cachowania obiektów z memcache, aby poprawić czas odpowiedzi dla nie-cachowanych trafień strony i innych czasów odpowiedzi API w obszarze administracyjnym WordPress dla zalogowanych użytkowników (naszych pisarzy). Oto zakładka ładowania sieci naszej ekranu "Wszystkie posty" w panelu administracyjnym WordPress:

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

W przypadku 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ę baz 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 wykonane przez super inteligentnych inżynierów z zespołu Endurance, w tym Davida Collinsa (głównego architekta Endurance / CTO HostGator), Mike'a Hansena (głównego dewelopera WordPress) i innych, którym podziękuję w sekcji podziękowań poniżej.

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 konkretne centrum danych na moim CDN lub WAF nie działa prawidłowo, aby zapewnić maksymalny czas pracy.

Nasz CDN jest zasilany przez MaxCDN (obecnie StackPath CDN). W zasadzie pozwalają nam serwować nasze statyczne zasoby (obrazy, pliki CSS i JavaScript) z ich 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 WordPress 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 z wyprzedzeniem 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 rozpoczyna wstępne ładowanie tej strony w tym momencie, więc gdy użytkownik faktycznie kliknie link, wiele ciężkich zadań jest już wykonanych. Dzięki temu 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.

Obecnie nie stosujemy leniwego ładowania obrazów, ale planuję dodać je w najbliższej przyszłości, teraz, gdy Google ma wbudowane leniwe ładowanie w Chrome 76 wbudowane w Chrome 76.

Istnieje również zgłoszenie w rdzeniu WordPress, aby dodać tę funkcję do wszystkich stron (naprawdę mam nadzieję, że to się wkrótce stanie), więc nie będę musiał pisać niestandardowej wtyczki.

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 artykule jak wtyczki WordPress mogą wpływać na czas ładowania Twojej witryny.

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 skryptach reklamowych stron trzecich, 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 nowej konfiguracji wieloserwerowej wprowadziliśmy nowy przepływ pracy wdrażania, aby zrównać WPBeginner z pozostałymi witrynami 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ć.

Nowa konfiguracja nie ma cPanel ani WHM, więc to sprawia, że jestem praktycznie bezużyteczny, ponieważ nie jestem już zbyt biegły w linii poleceń.

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. Kiedy aktualizowaliśmy mojego osobistego bloga (SyedBalkhi.com) do WordPressa 5.2, pliki aktualizacji nie zsynchronizowały się poprawnie na jednym z węzłów sieciowych, a debugowanie zajęło znacznie więcej czasu niż przewidywano. Pracujemy nad stworzeniem lepszego procesu budowania/testowania dla tego.

Po drugie, potrzebujemy lepszej komunikacji między zespołami, ponieważ mieliśmy drobny kryzys z błędnymi konfiguracjami równoważenia obciążenia, co spowodowało pewne przestoje. Co gorsza, byłem w samolocie transatlantyckim linii 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 konfiguracje/optymalizacje buforowania, które zostały wprowadzone dla WPBeginner, staną się standardową częścią planów HostGator Cloud i hostingu WordPress Bluehost.

Myślę, że nie trzeba dodawać, że jeśli dopiero tworzysz stronę internetową, bloga lub sklep internetowy, to NIE potrzebujesz tego zaawansowanego rozwiązania 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.

Wiele z udostępnionych przeze mnie optymalizacji można zastosować do obecnych planów hostingu WordPress.

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

Możesz połączyć to z CDN + WAF, takim jak Sucuri, aby znacznie przyspieszyć działanie Twojej strony internetowej.

Teraz, jeśli jesteś firmą średniej wielkości / korporacyjną, która chce podobnej konfiguracji hostingu, skontaktuj się ze mną za pośrednictwem naszego formularza kontaktowego. Mogę pomóc Ci wskazać 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 poszczególnych osób, które pracował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.

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

Na koniec, ale nie mniej ważna, chcę szczególnie wyróżnić Chrisa Christoffa. Jest on współzałożycielem MonsterInsights i był na tyle miły, że pomógł mi w wielu testach i wdrożeniach.

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 współdzielony plan hostingowy od Bluehost lub HostGator. Zawsze możesz zaktualizować swój plan w miarę rozwoju Twojej witryny.

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 w nim rozumieć. Postępując zgodnie z poradnikami dla początkujących, używając dobrej wtyczki do buforowania, takiej jak WP Rocket, i optymalizując obrazy, możesz znacząco wpłynąć na szybkość swojej witryny 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ększeniu szybkości i wydajności WordPressa – Nasz najbardziej kompleksowy przewodnik dla użytkowników na wszystkich poziomach zaawansowania, jak poprawić szybkość strony.
• Jak wybrać najlepszy hosting WordPress – Dowiedz się, jak wybrać odpowiedniego dostawcę hostingu do 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.
• Blueprint WPBeginner – Zobacz pełną listę narzędzi i wtyczek, których używamy do prowadzenia WPBeginner dzisiaj.

Bonus: Oto najlepsze wtyczki WordPress i narzędzia, które polecam do wszystkich stron WordPress. Możesz również rzucić okiem na WPBeginner’s Blueprint, który zawiera listę wtyczek i narzędzi, których używamy do prowadzenia strony WPBeginner.

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.