W artykule:
W rocznicę 10th WPBeginner podzieliłem się tym, że infrastruktura hostingowa WPBeginner otrzymała ogromną aktualizację dzięki naszemu partnerowi hostingowemu, Hostgatorowi.
Wkrótce potem zacząłem otrzymywać e-maile od czytelników z prośbą o udostępnienie szczegółów na temat tego, jak szybko załadowaliśmy WPBeginner.
Tak, WPBeginner ładuje się szybciej niż większość statycznych generatorów witryn, aw niektórych przypadkach szybciej niż witryny Google AMP.
W tym artykule przedstawię ci za kulisami, jak zrobiliśmy WordPress szybciej niż statyczne Generatory witryn i bezgłowe platformy CMS.
Uwaga: Ten artykuł jest nieco bardziej techniczny niż to, co zwykle publikujemy na WPBeginner. Dla użytkowników nie-technicznych polecam postępować zgodnie z naszym ostatecznym przewodnikiem, jak przyspieszyć WordPress.
Aktualizacja: Nie używamy już konfiguracji udostępnionej w tym artykule. Zamiast tego całkowicie przeszliśmy na platformę Google Cloud zarządzaną przez SiteGround. Mamy te same wyniki prędkości i odblokowaliśmy jeszcze szybszą wydajność back-end. Przeczytaj, dlaczego przełączyliśmy się na SiteGround.
Informacje ogólne
Ostatnio WordPress otrzymuje wiele złych reputacji od” nowoczesnych ” programistów, którzy mówią, że WordPress jest powolny.
Instrukcja jest zwykle kontynuowana, powinieneś przełączyć się na statyczny generator stron JAMstack, taki jak GatsbyJS. Inni w świecie przedsiębiorstw powiedzą, że powinieneś przełączyć się na bezgłowy CMS, taki jak Contentful.
Kilku moich odnoszących sukcesy przyjaciół przedsiębiorców zaczęło mnie pytać, czy to prawda.
Niektórzy nawet rozpoczęli proces migracji do Bezgłowego CMS, ponieważ czytają studia przypadków, w jaki sposób inni odblokowali ogromne ulepszenia prędkości, przełączając się z WordPress na statyczne Generatory witryn.
To było 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 dostosowywania, które wzrosną w przyszłości.
Wziąłem to za wyzwanie, aby udowodnić, że duża witryna z treścią WordPress, taka jak WPBeginner, może ładować się równie szybko, jeśli nie szybciej niż większość nowoczesnych statycznych generatorów witryn.
Możesz nazywać mnie starą szkołą, ale pod koniec dnia statyczna strona to tylko ładowanie strony z pamięci podręcznej.
Wyniki
Zanim przejdę do dokładnej infrastruktury hostingowej WordPress, konfiguracji serwerów i wtyczek, myślę, że pomocne jest dzielenie się wynikami.
Oto jak szybko Strona główna WPBeginner ładuje się na Pingdom z ich serwera Washington, DC:
W zależności od pory dnia i lokalizacji, z której sprawdzasz, wynik ten będzie się różnić w zakresie od 400ms – 700ms, co jest dość szybkie jak na stronę główną.
Oto test, który przeprowadziłem dla jednej strony postu, ponieważ ma większe obrazy i więcej treści:
Mamy również doskonały wynik ” 100 ” W Google page speed test na pulpicie. Chociaż mamy trochę miejsca na poprawę wyników mobilnych.
Powyższe wyniki dotyczą stron w pamięci podręcznej, które otrzymują nasi czytelnicy i boty Wyszukiwarek, gdy przeglądają naszą stronę. 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 ‘ ego. Jest to popularny statyczny generator witryn, o którym zachwyca wielu programistów:
Oto wynik testu prędkości strony głównej Netlify, popularnego statycznego hosta witryny, który poleca wielu programistów. Zauważ, że mają połowę liczby żądań, a ich rozmiar strony wynosi 30% WPBeginner, ale nadal ładuje się wolniej niż nasza strona główna.
Szybkość strony głównej Contentful, bezgłowy CMS, który jest “jak przedsiębiorstwa dostarczają lepsze doświadczenia cyfrowe”, nie jest w ogóle zoptymalizowany. To była 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 wszystkie nowe rzeczy są tak błyszczące, jak mogą się wydawać.
WordPress z odpowiednią infrastrukturą hostingową i optymalizacjami może być tak szybki, jak każdy statyczny generator witryn. Co więcej, żadna inna platforma nie zbliży się nawet do poziomu elastyczności, który WordPress oferuje właścicielom firm dzięki dużemu ekosystemowi wtyczek i motywów.
WPBeginner Hosting Infrastructure
Jeśli chodzi o Szybkość witryny, nic nie odgrywa ważniejszej roli niż Infrastruktura hostingu.
Jak wielu z Was już wie, jestem klientem HostGator od 2007. Zacząłem Blog WPBeginner w 2009 na małym współdzielonym koncie hostingowym HostGator.
Wraz z rozwojem naszej strony internetowej zaktualizowaliśmy ją do hostingu VPS, a następnie serwerów dedykowanych.
W ciągu ostatniej dekady miałem okazję ściśle współpracować z wieloma członkami ich zespołu, a oni stali się rozszerzoną częścią rodziny WPBeginner.
Więc kiedy 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 i zaoferowali mi pomoc w zbudowaniu jedynej w swoim rodzaju konfiguracji hostingu dla WPBeginner.
Umieścili najlepszych inżynierów z zespołu Bluehost i HostGator, aby ściśle ze mną współpracowali, aby WPBeginner płonął szybko.
Oto przegląd tego, jak wygląda Konfiguracja hostingu WPBeginner:
Jak widać, jest to konfiguracja wielu serwerów rozłożona na dwa regiony geograficzne (Teksas i Utah). Istnieje w sumie 9 serwerów Nie zawierających chmury load balancer. Każdy serwer to procesor Xeon-D z 8 rdzeniami (16 wątków) z 32GB RAM i 2 x 1TB SSD (konfiguracja RAID).
Korzystamy z platformy równoważenia obciążenia w chmurze Google, dzięki czemu możemy mieć 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ł, aby zoptymalizować konfiguracje serwerów dla WordPress. Mam nadzieję, że niektóre z tych optymalizacji wkrótce przekształcą się w przyszłe plany hostingowe 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 dla naszego oprogramowania serwera www, ponieważ zespół jest z nim bardziej zaznajomiony. Nie będę wdawać się w debatę NGINX vs Apache.
Używamy PHP 7.2 wraz z PHP-FPM pools, dzięki czemu możemy obsługiwać duże obciążenia procesów i żądań. Jeśli Twoja firma hostingowa nie używa PHP 7+, tracisz poważną optymalizację prędkości.
Używamy buforowania kodu Opcode z zaawansowanym cieplejszym buforem, aby upewnić się, że żaden prawdziwy użytkownik nie powinien doświadczyć niezachowanego widoku strony.
Używamy również Object cache z memcache, dzięki czemu możemy poprawić czas reakcji na odsłony strony i inne czasy odpowiedzi API w obszarze administracyjnym WordPress dla zalogowanych użytkowników (naszych pisarzy). Oto karta obciążenia sieciowego naszego ekranu “wszystkie posty” w adminie WordPress:
Patrząc z perspektywy, nasze doświadczenie w obszarze administratora jest teraz 2X szybsze niż to, co mieliśmy wcześniej.
Dla naszego serwera bazy danych przełączyliśmy się z MySQL na MariaDB, który jest klonem MySQL, ale szybszy i lepszy. Przełączyliśmy się również z HyperDB na LudicrousDB, ponieważ pomaga nam to ulepszyć 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 + szyfrowanie, możliwość uruchomienia 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ą siłą jest marketing. Tak, jestem blogerem, który pisze o WordPressie, ale wiele technicznych optymalizacji tutaj jest znacznie powyżej mojej płacy.
Zostały one wykonane przez super inteligentnych inżynierów w zespole Endurance, w tym Davida Collinsa (głównego architekta Endurance / CTO Hostgatora), Mike ‘ a Hansena (core WordPress developer) i innych, którym podziękuję w sekcji kredytów poniżej.
CDN, WAF i DNS
Oprócz hostingu, inne obszary, które odgrywają znaczącą rolę w szybkości witryny, to dostawca DNS, sieć dostarczania treści (CDN) i Zapora aplikacji internetowej (WAF).
Chociaż mam to wymienione jako trzy oddzielne rzeczy, wiele firm oferuje teraz te rozwiązania w pakiecie, takim jak Sucuri, Cloudflare, MaxCDN (StackPath) itp.
Ponieważ chcę mieć maksymalną kontrolę i rozprzestrzeniać ryzyko, korzystam z trzech oddzielnych firm, aby efektywnie obsługiwać każdą część.
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ę wyznaczyć globalny kierunek ruchu, gdy określone centrum danych na moim CDN lub WAF nie działa prawidłowo, aby zapewnić maksymalny czas pracy.
Nasz CDN jest zasilany przez MaxCDN (StackPath). Zasadniczo pozwalają nam obsługiwać nasze zasoby statyczne (obrazy, pliki CSS i skrypty JavaScript) z ich dużej sieci serwerów na całym świecie.
Używamy Sucuri jako zapory sieciowej. Oprócz blokowania ataków, działają również jako kolejna warstwa CDN, a ich ogólna wydajność jest po prostu niesamowita. Wierzę, że mają najlepsze rozwiązanie zapory WordPress na rynku.
Podczas pracy nad optymalizacją prędkości witryny liczy się odcięcie każdej milisekundy. Dlatego korzystanie z tych dostawców rozwiązań w połączeniu z naszą nową infrastrukturą hostingową ma ogromne znaczenie.
Aby zilustrować, oto rozpad wodospadu WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:
Zauważ, że czas DNS WPBeginner, czas SSL, czas połączenia i czas oczekiwania są na najwyższym poziomie w porównaniu do tych innych popularnych stron internetowych. Każda z tych ulepszeń łączy się, aby zapewnić najlepsze wyniki.
Natychmiast.strona, zoptymalizowane obrazy i inne najlepsze praktyki
Jedną z rzeczy, które mogłeś zauważyć, jest prawie Natychmiastowy Czas ładowania podczas przeglądania postów i stron WPBeginner.
Oprócz wszystkich rzeczy, o których wspomniałem powyżej, oszukujemy również opóźnienie za pomocą skryptu o nazwie instant.strona, która wykorzystuje wstępne ładowanie just-in-time.
Zasadniczo, zanim użytkownik kliknie link, musi najechać kursorem myszy na ten link. Gdy użytkownik unosił się przez 65ms (bardzo krótki okres czasu), jeden z dwóch faktycznie kliknie link.
Natychmiast.skrypt strony rozpoczyna wstępne ładowanie tej strony w tym momencie, więc gdy użytkownik faktycznie kliknie link, wiele ciężkich rzeczy jest już zrobione. To sprawia, że ludzki mózg postrzega czas ładowania strony jako prawie natychmiastowy.
Aby włączyć natychmiastowe.strona w Twojej witrynie można po prostu zainstalować i aktywować wtyczkę Instant Page WordPress.
Ten scenariusz jest całkiem niezły. Gorąco polecam sprawdzenie ich strony internetowej i kliknięcie przycisku “przetestuj szybkość klikania”, aby zobaczyć, jak oszukuje mózg.
Aktualizacja: Wyłączyłem natychmiast.strona na razie, a w niedalekiej przyszłości będę testował wtyczkę FlyingPages. Gijo Varghese udostępnił mi swoją nową wtyczkę w grupie WPBeginner Engage na Facebooku i wydaje się, że łączy najlepsze z instant.strona i skrypt quicklink.
Optymalizacja obrazów dla sieci
Chociaż opracowywane są nowe formaty obrazów, takie jak webp, jeszcze ich nie używamy. Zamiast tego prosimy wszystkich naszych autorów o optymalizację każdego obrazu za pomocą narzędzia TinyPNG.
Możesz również zautomatyzować kompresję obrazu za pomocą wtyczek, takich jak Optimole lub EWWW Image Optimizer.
Jednak osobiście wolę, aby zespół zrobił to ręcznie, więc nie przesyłamy dużych plików na serwer.
Obecnie nie robimy żadnego leniwego ładowania obrazów, ale planuję dodać go w najbliższej przyszłości, teraz, gdy Google ma wbudowaną obsługę leniwego ładowania w Chrome 76.
Istnieje również bilet w rdzeniu WordPress, aby dodać tę funkcję we wszystkich witrynach (naprawdę mając nadzieję, że stanie się to wkrótce), więc nie muszę pisać niestandardowej wtyczki.
Aktualizacja: Kilka godzin po tym, jak opublikowałem post na blogu, Google wydało natywną wtyczkę Lazy Load dla WordPress.
Ograniczenie 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 wiele wtyczek na swojej stronie.
Aby uzyskać więcej informacji, zobacz jak wtyczki WordPress mogą wpłynąć na czas ładowania witryny.
Zanim przejdziesz do błędnego wniosku, że zbyt wiele wtyczek WordPress jest złych, chcę poinformować, że na stronie WPBeginner działają aktywne wtyczki 62.
To, co musisz zrobić, to połączyć pliki CSS i JavaScript, jeśli to możliwe, aby zmniejszyć żądania HTTP. Niektóre wtyczki buforujące WordPress, takie jak WP Rocket, mogą to zrobić automatycznie za pomocą 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, chcesz również pamiętać o innych skryptach innych firm, które dodajesz do swojej witryny, ponieważ każdy skrypt wpłynie na szybkość Twojej witryny.
Na przykład, jeśli używasz wielu skryptów reklamowych lub skryptów 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ś stroną obsługiwaną przez reklamy, taką jak TechCrunch lub TheNextWeb, niewiele możesz 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 post na blogu WPBeginner income.
Wyciągnięte wnioski (do tej pory) + moje ostatnie przemyślenia
Jest to zupełnie nowa infrastruktura hostingowa i jestem pewien, że jest mnóstwo lekcji, których będę się uczyć w godzinach nadliczbowych.
Do tej pory uwielbiam ulepszenia prędkości, ponieważ pomogły nam one zwiększyć nasze rankingi SEO, a nasz obszar administracyjny jest znacznie szybszy.
Wraz z nową konfiguracją wielu serwerów wprowadziliśmy nowy przepływ pracy wdrożeniowej, aby zapewnić WPBeginner na równi z resztą niesamowitych witryn produktów Motive.
Oznacza to, że mamy teraz odpowiednią wersję kontrolującą wbudowaną, i istnieją środki wprowadzone, aby powstrzymać mnie od lekkomyślności (tj. dodawanie wtyczek bez właściwego testowania, aktualizowanie wtyczek z Pulpitu nawigacyjnego bez testowania itp.).
Te zmiany wyznaczają mi również ścieżkę, aby w końcu wyjść z rozwoju i przekazać królowanie strony WPBeginner naszemu zespołowi programistów.
Opieram się temu od lat, ale myślę, że nadszedł czas i muszę to zaakceptować.
Nowa konfiguracja nie ma cPanel ani WHM, więc to czyni mnie praktycznie bezużytecznym, ponieważ nie jestem już bardzo biegły w linii poleceń.
Do tej pory wyciągnęliśmy dwie duże wnioski:
Po pierwsze, aktualizacja WordPress nie jest tak prosta ze względu na synchronizację / replikację serwera. Kiedy uaktualniliśmy mój osobisty blog (SyedBalkhi.com) do WordPress 5.2 pliki aktualizacji nie zsynchronizowały się poprawnie na jednym z węzłów sieci web, a debugowanie trwało znacznie dłużej niż oczekiwano. Pracujemy nad stworzeniem lepszego procesu budowania / testowania w tym celu.
Po drugie, musimy mieć lepszą komunikację między zespołami, ponieważ mieliśmy niewielki kryzys z błędnymi konfiguracjami load balancer, które spowodowały pewne przestoje. Co gorsza, byłem na transatlantyckim locie Turkish Airlines, a WiFi nie działało.
Na szczęście wszystko zostało uporządkowane dzięki szybkiemu czasowi reakcji przez zespół hostingowy, ale to pomogło nam stworzyć kilka nowych standardowych procedur operacyjnych (SOP), aby lepiej poradzić 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 wykonane dla WPBeginner, staną się standardową częścią HostGator Cloud i Bluehost WordPress plany hostingowe.
Myślę, że powinno to być oczywiste, że jeśli dopiero zaczynasz stronę internetową, blog lub sklep internetowy, nie potrzebujesz tej zaawansowanej konfiguracji przedsiębiorstwa.
Zawsze polecam, abyś zaczął od małych planów HostGator shared lub Bluehost shared, tak jak ja, a następnie ulepsz swoją infrastrukturę hostingową w miarę rozwoju firmy.
Możesz zastosować wiele optymalizacji, które udostępniłem powyżej w swoich aktualnych planach hostingowych WordPress.
Na przykład, Bluehost standard plan jest już wyposażony we wbudowaną wtyczkę buforowania, której możesz użyć, i domyślnie oferują również PHP 7.
Możesz połączyć to z CDN + WAF, takim jak Sucuri, aby znacznie przyspieszyć swoją stronę.
Teraz, 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. Mogę ci pomóc wskazać właściwy kierunek.
Specjalne Podziękowania + Kredyty
Podczas gdy w powyższym artykule dałem mnóstwo krzyku markom HostGator i Bluehost, chcę poświęcić chwilę, aby rozpoznać i docenić poszczególne osoby, które pracowały za kulisami, aby tak się stało.
Po pierwsze, chcę podziękować zespołowi liderów Endurance Suhaib, Mitch, John Orlando, Mike Lillie i Brady Nord za zgodę na pomoc w Wyzwaniu.
Chcę również podziękować Mike ‘ owi Hansenowi, Davidowi Collinsowi, Rickowi Radingerowi, Chrisowi Milesowi, Davidowi Ryanowi, Jesse Cookowi, Davidowi Fosterowi, Micah Woodowi, Williamowi Earnhardtowi, Robin Mendiecie, Rod Johnsonowi, Alfredowi Najemowi i innym członkom zespołu ds. centrów danych za ciężką pracę i jej realizację.
Chcę dać specjalne okrzyki Stevenowi Jobowi (założycielowi DNSMadeEasy) za szybką odpowiedź na moje pytania i pomoc w lepszym zrozumieniu niektórych ustawień. Chcę również podziękować Tony ‘ emu Perezowi i Danielowi Cidowi z Sucuri za to, że zawsze mnie wspierali.
I na koniec, chcę dać szczególne uznanie Chrisowi Christoffowi. Jest współzałożycielem MonsterInsights i był na tyle uprzejmy, że pomógł mi w wielu testach i wdrożeniach.
Naprawdę mam nadzieję, że znalazłeś to za kulisami studium przypadku na temat infrastruktury hostingowej WPBeginner, które będzie pomocne. Możesz również zobaczyć nasz najlepszy przewodnik, jak przyspieszyć WordPress, który jest 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 dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
