Jak sprawiliśmy, że WordPress stał się szybszy niż statyczne generatory witryn (Studium przypadku – Przyspieszenie WPBeginner)

W 10. rocznicę WPBeginner podzieliłem się informacją, że infrastruktura hostingowa WPBeginner została znacznie ulepszona dzięki naszemu partnerowi hostingowemu, HostGator.

Wkrótce potem zacząłem otrzymywać e-maile od czytelników z prośbą o podzielenie się szczegółami na temat tego, jak sprawiliśmy, że WPBeginner wczytywał się błyskawicznie.

Tak, WPBeginner wczytuje się szybciej niż większość statycznych generatorów witryn, a w niektórych przypadkach szybciej niż witryny Google AMP.

W tym artykule przedstawię zakulisowe spojrzenie na to, jak sprawiliśmy, że WordPress działa szybciej niż statyczne generatory witryn i bezgłowe platformy CMS.

Uwaga: Ten artykuł jest nieco bardziej techniczny niż to, co zwykle publikujemy na WPBeginner. Użytkownikom, którzy nie są zaawansowani technicznie, polecam nasz przewodnik po tym, jak przyspieszyć WordPressa.

Aktualizacja: Nie używamy już konfiguracji udostępnionej w tym artykule. Zamiast tego przeszliśmy całkowicie na platformę Google Cloud zarządzaną przez SiteGround. Mamy takie same wyniki prędkości i odblokowaliśmy jeszcze szybszą wydajność zaplecza. Przeczytaj, dlaczego przeszliśmy na SiteGround.

Tło

Ostatnio WordPress otrzymuje wiele złych opinii od „nowoczesnych” programistów, którzy twierdzą, że WordPress jest powolny.

Stwierdzenie to jest zwykle uzupełniane stwierdzeniem, że powinieneś przełączyć się na statyczny generator witryn JAMstack, taki jak GatsbyJS. Inni w świecie korporacyjnym powiedzą, że powinieneś przełączyć się na bezgłowy CMS, taki jak Contentful.

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

Niektórzy nawet rozpoczęli proces migracji do headless CMS, ponieważ czytali studia przypadków o tym, jak inni odblokowali ogromną poprawę prędkości poprzez przejście z WordPressa na statyczne generatory witryn.

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 już o niekończących się kosztach dostosowań, które pojawią się w przyszłości.

Podjąłem więc wyzwanie, aby udowodnić, że duża witryna WordPress z treścią, taka jak WPBeginner, może wczytywać się równie szybko, jeśli nie szybciej, niż większość nowoczesnych statycznych generatorów witryn.

Możesz nazwać mnie starą szkołą, ale pod koniec dnia statyczna witryna to tylko strona wczytywana z pamięci podręcznej.

Wyniki

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

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

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

Oto test, który przeprowadziłem dla strony z pojedynczym wpisem, ponieważ ma ona większe obrazki 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 trochę miejsca na poprawę wyniku mobilnego.

Powyższe wyniki dotyczą pamięci podręcznej stron, czyli tego, co nasi czytelnicy i boty wyszukiwarek otrzymują, gdy zobaczą naszą witrynę internetową. Postrzegany czas wczytywania WPBeginner jest niemal natychmiastowy (więcej na ten temat później).

Dla porównania, oto wynik testu szybkości dla strony głównej Gatsby. Jest to popularny generator witryn statycznych, za którym szaleje wielu programistów:

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

Szybkość strony głównej Contentful, bezgłowego systemu CMS, który jest „sposobem, w jaki przedsiębiorstwa zapewniają lepsze doświadczenia cyfrowe”, po prostu nie jest w ogóle zoptymalizowana. Była to najwolniejsza witryna internetowa, jaką testowaliśmy.

Dzielę się tymi statystykami nie po to, by zdyskredytować inne frameworki, ale raczej po to, by dać perspektywę, że nie wszystkie nowe rzeczy są tak błyszczące, jak mogłoby się wydawać.

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

Infrastruktura hostingowa WPBeginner

Jeśli chodzi o szybkość witryny internetowej, nic nie odgrywa ważniejszej roli niż twoja infrastruktura hostingowa.

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

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

W ciągu ostatniej dekady miałem okazję ściśle współpracować z wieloma członkami ich zespołu, którzy stali się rozszerzoną częścią rodziny WPBeginner.

Kiedy więc podjąłem wyzwanie, aby WPBeginner był szybszy niż statyczne generatory witryn, 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 jedynej w swoim rodzaju konfiguracji hostingu korporacyjnego dla WPBeginner.

Najlepsi inżynierowie z zespołów Bluehost i HostGator ściśle ze mną współpracowali, aby WPBeginner był niesamowicie szybki.

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

Jak widać, jest to konfiguracja wieloserwerowa rozmieszczona w dwóch regionach geograficznych (Teksas i Utah). Łącznie jest 9 serwerów, nie wliczając w to chmury równoważącej obciążenie. Każdy serwer to procesor Xeon-D z 8 rdzeniami (16 wątków) z 32 GB pamięci RAM i 2 dyskami SSD o pojemności 1 TB (konfiguracja RAID).

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

Po skonfigurowaniu sprzętu z odpowiednią synchronizacją danych, zespół Bluehost i HostGator współpracował nad optymalizacją konfiguracji serwera dla WordPress. Mam nadzieję, że niektóre z tych optymalizacji wkrótce trafią do przyszłych planów hostingowych WordPress

Podsumowanie konfiguracji serwera

Podsumowanie konfiguracji serwera tej złożonej konfiguracji 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ę zagłębiał się w debatę NGINX vs Apache.

Używamy PHP 7.2 wraz z pulami PHP-FPM, dzięki czemu możemy wczytywać duże ilości procesów i żądań. Jeśli twoja firma hostingowa nie używa PHP 7+, to tracisz możliwość poważnej optymalizacji prędkości.

Używamy buforowania Opcode z zaawansowaną pamięcią podręczna, aby zapewnić, że żaden prawdziwy użytkownik nie doświadczy niebuforowanej odsłony.

Używamy również pamięci podręcznej obiektów z memcache, dzięki czemu możemy poprawić czas odpowiedzi na niebuforowane odsłony stron i inne czasy odpowiedzi API w obszarze administracyjnym WordPress dla zalogowanych użytkowników (naszych autorów). Oto karta wczytywania sieci na naszym ekranie „Wszystkie wpisy” w panelu administracyjnym WordPress:

Patrząc z perspektywy, nasz obszar administracyjny jest teraz 2 razy szybszy niż wcześniej.

W przypadku naszego serwera bazy danych przeszliśmy z MySQL na MariaDB, który jest klonem MySQL, ale jest szybszy i lepszy. Przeszliśmy również z HyperDB na LudicrousDB, ponieważ pomaga nam to usprawnić replikację bazy danych, przełączanie awaryjne i równoważenie wczytywania.

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 + szyfrowanie, 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 wiedz, że moją rdzenną siłą jest marketing. Tak, jestem blogerem, który pisze o WordPressie, ale wiele technicznych optymalizacji tutaj jest znacznie powyżej moich możliwości.

Zostały one wykonane przez super inteligentnych inżynierów z zespołu Endurance, w tym Davida Collinsa (głównego architekta Endurance / CTO firmy HostGator), Mike’a Hansena (rdzeń programisty WordPress) i innych, którym podziękuję w sekcji autorzy poniżej.

CDN, WAF i DNS

Oprócz hostingu, innymi obszarami, które odgrywają znaczącą rolę w szybkości twojej witryny internetowej, są dostawca DNS, sieć dostarczania treści (aka CDN) i zapora aplikacji internetowych (WAF).

Chociaż wymieniłem je jako trzy oddzielne rzeczy, wiele firm oferuje obecnie te rozwiązania w ramach planu pakietowego, takiego jak Sucuri, Cloudflare, MaxCDN (StackPath) itp.

Ponieważ chcę mieć maksymalną kontrolę i rozłożyć ryzyko, korzystam z trzech oddzielnych firm, aby skutecznie obsługiwać każdą część.

DNS WPBeginner jest obsługiwany 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ć ruchem globalnym, gdy określone centrum danych w moim CDN lub WAF nie działa prawidłowo, aby zapewnić maksymalny czas pracy.

Nasz CDN jest obsługiwany przez MaxCDN (StackPath). Zasadniczo pozwalają nam obsługiwać nasze statyczne zasoby (obrazki, pliki CSS i skrypty JavaScript) z ich dużej sieci serwerów na całym świecie.

Używamy Sucuri jako naszej zapory aplikacji internetowych. Oprócz blokowania ataków, działają oni również jako kolejna warstwa CDN, a ich ogólna wydajność jest po prostu niesamowita. Uważam, że jest to najlepsza zapora WordPress na rynku.

Podczas pracy nad optymalizacją szybkości witryny internetowej liczy się każda milisekunda. Właśnie dlatego korzystanie z tych dostawców rozwiązań w połączeniu z naszą nową infrastrukturą hostingu robi ogromną różnicę.

Aby to zilustrować, oto rozkład wodospadu WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Powiadomienie, że czas DNS, czas SSL, czas połączenia i czas oczekiwania WPBeginner są na najwyższym poziomie w porównaniu do innych popularnych witryn internetowych. Każde z tych ulepszeń zapewnia najlepsze wyniki.

Instant.page, zoptymalizowane obrazki i inne najlepsze praktyki

Jedną z rzeczy, które mogłeś powiadomić jest niemal natychmiastowy czas wczytywania podczas przeglądania wpisów i stron WPBeginner.

Oprócz wszystkich rzeczy, o których wspomniałem powyżej, oszukujemy również opóźnienia za pomocą skryptu o nazwie instant.page, który wykorzystuje wstępne ładowanie just-in-time.

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

SkryptInstant. page rozpoczyna wstępne ładowanie tej strony w tym momencie, więc gdy użytkownik faktycznie kliknie odnośnik, wiele ciężkich zadań jest już wykonanych. Dzięki temu ludzki mózg postrzega czas wczytywania witryny internetowej jako niemal natychmiastowy.

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

Ten skrypt jest całkiem niezły. Gorąco polecam odwiedzenie ich witryny internetowej i kliknięcie przycisku „przetestuj swoją szybkość klikania”, aby zobaczyć, jak oszukuje mózg.

Aktualizacja: Na razie wyłączyłem instant.page i zamierzam przetestować wtyczkę FlyingPages w najbliższej przyszłości. Gijo Varghese podzielił się ze mną swoją nową wtyczką w grupie WPBeginner Engage na Facebooku i wydaje się ona łączyć w sobie najlepsze cechy instant.page i skryptu quicklink.

Optymalizacja obrazków dla stron internetowych

Chociaż opracowywane są nowe formaty obrazków, takie jak webp, jeszcze ich nie używamy. Zamiast tego prosimy wszystkich naszych autorów o optymalizację każdego obrazka za pomocą narzędzia TinyPNG.

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

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

Obecnie nie stosujemy leniwego wczytywania obrazków, ale planuję dodać je w niedalekiej przyszłości, gdy Google udostępni obsługę leniwego wczytywania wbudowaną w Chrome 76.

W rdzeniu WordPress znajduje się również bilet, aby dodać tę funkcję do wszystkich witryn (naprawdę mam nadzieję, że stanie się to wkrótce), więc nie muszę pisać własnej wtyczki.

Aktualizacja: Kilka godzin po opublikowaniu wpisu na blogu, Google wydało wtyczkę Native Lazy Load dla WordPressa.

Ograniczanie zapytań HTTP + najlepsze praktyki

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

Aby uzyskać więcej informacji, zobacz, jak wtyczki WordPress mogą mieć wpływ na czas wczytywania twojej witryny.

Teraz, zanim dojdziesz do błędnego wniosku, że zbyt wiele wtyczek WordPress jest złych, chcę ci powiedzieć, że w witrynie internetowej WPBeginner są włączone 62 aktywne wtyczki.

To, co musisz zrobić, to połączyć pliki CSS i JavaScript tam, gdzie to możliwe, aby zmniejszyć liczbę żądań HTTP. Niektóre wtyczki do pamięci podręcznej WordPressa, takie jak WP Rocket, mogą to zrobić automatycznie dzięki funkcji minifikacji.

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

Oprócz żądań HTTP dodawanych przez wtyczki i motywy, należy również pamiętać o innych skryptach innych firm, które dodajesz do swojej witryny internetowej, ponieważ każdy skrypt będzie miał wpływ na szybkość Twojej witryny.

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

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

Na szczęście WPBeginner nie polega na skryptach reklamowych innych firm, aby zarabiać pieniądze. Chcesz zobaczyć, jak WPBeginner zarabia pieniądze? Zobacz mój wpis na blogu na temat dochodów WPBeginner.

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

To zupełnie nowa infrastruktura hostingowa i jestem pewien, że jest mnóstwo lekcji, których nauczę się z czasem.

Jak dotąd uwielbiam poprawę szybkości, ponieważ pomogło nam to poprawić nasze rankingi SEO, a nasz obszar administracyjny jest znacznie szybszy.

Wraz z nową konfiguracją wielu serwerów wprowadziliśmy nowy przepływ pracy wdrażania, aby dostosować WPBeginner do reszty witryn produktów Awesome Motive.

Oznacza to, że mamy teraz wbudowaną właściwą kontrolę wersji i wprowadzono środki, które powstrzymują mnie przed lekkomyślnością (np. dodawanie wtyczek bez odpowiedniego testowania, aktualizowanie wtyczek z kokpitu bez testowania itp.)

Zmiany te wyznaczyły mi również drogę do ostatecznego wycofania się z rozwoju i przekazania panowania nad witryną WPBeginner naszemu zespołowi programistów.

Opierałem się temu przez lata, ale myślę, że nadszedł czas i muszę to zaakceptować.

Nowa konfiguracja nie ma cPanelu ani WHM, więc i tak jestem praktycznie bezużyteczny, ponieważ nie jestem już zbyt biegły w wierszu poleceń.

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

Po pierwsze, aktualizacja WordPressa nie jest tak prosta ze względu na synchronizację / replikację serwera. Kiedy zaktualizowaliśmy mojego osobistego bloga(SyedBalkhi.com) do wersji WordPress 5.2, pliki aktualizacji nie zsynchronizowały się poprawnie na jednym z węzłów sieciowych, a debugowanie trwało znacznie dłużej niż przewidywano. Pracujemy nad stworzeniem lepszego procesu kompilacji / testowania.

Po drugie, musimy mieć lepszą komunikację między zespołami, ponieważ mieliśmy mały kryzys związany z błędną konfiguracją load balancera, co spowodowało pewne przestoje. Co gorsza, leciałem transatlantyckim samolotem Turkish Airlines, a WiFi nie działało.

Na szczęście wszystko udało się uporządkować dzięki szybkiej reakcji zespołu hostingowego, ale pomogło nam to stworzyć kilka nowych standardowych procedur operacyjnych (SOP), aby lepiej radzić sobie z incydentami w przyszłości.

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

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

Zawsze zalecam, aby zacząć od małych planów hostingu współdzielonego HostGator lub Bluehost, tak jak ja to zrobiłem, a następnie ulepszać infrastrukturę hostingową w miarę rozwoju twojej firmy.

Możesz zastosować wiele optymalizacji, które udostępniłem powyżej w twoich obecnych, aktualnych planach hostingowych WordPress.

Na przykład, standardowy plan Bluehost ma już wbudowaną pamięć podręczną, z której można korzystać, a także domyślnie oferuje PHP 7.

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

Jeśli jesteś firmą średniej wielkości / przedsiębiorstwem, która chce podobnej konfiguracji hostingu, skontaktuj się ze mną za pośrednictwem naszego formularza kontaktowego. Pomogę ci wskazać właściwy kierunek.

Specjalne podziękowania + autorzy

Chociaż w powyższym artykule dałem mnóstwo okrzyków dla marek HostGator i Bluehost, chcę poświęcić chwilę, aby rozpoznać i docenić poszczególne osoby, które pracowały za kulisami, aby to się stało.

Po pierwsze, chcę podziękować zespołowi kierowniczemu Endurance: Suhaibowi, Mitchowi, Johnowi Orlando, Mike’owi Lillie i Brady’emu Nordowi za to, że zgodzili się pomóc mi w tym wyzwaniu.

Chcę również podziękować Mike’owi Hansenowi, Davidowi Collinsowi, Rickowi Radingerowi, Chrisowi Milesowi, Davidowi Ryanowi, Jesse’emu Cookowi, Davidowi Fosterowi, Micah Woodowi, Williamowi Earnhardtowi, Robinowi Mendiecie, Rodowi Johnsonowi, Alfredowi Najemowi i innym osobom z zespołu centrum danych za wykonanie ciężkiej pracy i zrealizowanie tego wyzwania.

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

Na koniec chciałbym wyrazić szczególne uznanie dla Chrisa Christoffa. Jest on współzałożycielem MonsterInsights i był na tyle uprzejmy, że pomógł mi w wielu testach i wdrożeniach.

Mam nadzieję, że to zakulisowe studium przypadku dotyczące infrastruktury hostingowej WPBeginner okazało się pomocne. Możesz również zapoznać się z naszym przewodnikiem po tym, jak przyspieszyć WordPressa, który jest znacznie bardziej przyjazny dla początkujących.

Bonus: Oto najlepsze wtyczki i narzędzia WordPress, które polecam dla wszystkich witryn WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki filmowe dotyczące WordPressa. Możesz nas również znaleźć na Twitterze i Facebooku.