Zdaj każdy test CWV i PageSpeed ​​Insights za pomocą tych technik programistycznych WordPress

W 2021 r. w StrategiQ, agencji cyfrowej full stack z siedzibą w Wielkiej Brytanii, postawiliśmy sobie za cel rozpoczęcie opracowywania i uruchamiania każdej witryny, którą opracowujemy i uruchamiamy, aby przeszła wyniki Google Core Web Vitals (CWV) i PageSpeed ​​Insights (PSI) raport.

Podstawowe wskaźniki internetowe pokazują na różne sposoby, jak działa Twoja witryna. Obejmuje to szybkość ładowania pierwszej treści na stronie (pierwsze i największe wyrenderowanie treści), szybkość, jak długo użytkownik musi czekać, zanim będzie mógł z nią wejść w interakcję (czas do interakcji) oraz zmiany układu (skumulowane przesunięcie układu) .

Testowanie CWV jest dziecinnie proste – po prostu przejdź do https://pagespeed.web.dev/ i wpisz swój adres. W górnym obszarze wyświetlane są najnowsze dane ze świata rzeczywistego z ostatnich 28 dni, podczas gdy dolna część (wynik na 100, zarówno dla urządzeń mobilnych, jak i komputerów stacjonarnych) to dane wygenerowane w laboratorium.

Dlaczego to ma znaczenie? No bo tak mówi Google.

W lipcu 2018 r. Google ogłosił, że szybkość jest czynnikiem wpływającym na wygląd witryny w wynikach wyszukiwania, zwłaszcza na urządzeniach mobilnych. Źródło.

W 2020 r. ogłosili również, że metryki doświadczenia użytkownika (które składają się na kluczowe wskaźniki internetowe / CVW) są teraz wykorzystywane w sposobie oceniania witryn. Źródło.

To proste: im szybsza i skuteczniejsza witryna, tym lepsza pozycja w rankingu.

Dlatego zespół programistów StrategiQ zdecydował, że to nasza kolej, aby pomóc działowi SEO. Eksperci SEO mogą odpracować swoje małe tyłki tak ciężko, jak tylko mogą, ale witryna, która działa fatalnie, może wyrządzić znacznie więcej szkody niż pożytku. Witryna, która przeszła CWV i PSI, zapewni jednak, że ich doskonała praca będzie miała genialną odskocznię.

Co warto zauważyć, CWV i PSI są bardzo trudne do przejścia. Zdecydowana większość witryn tego nie robi, nawet wiele najbardziej znanych witryn na świecie . Pomyśl, że YouTube, BBC, a nawet WP Engine mają problemy z uzyskaniem przepustki zarówno na urządzeniach mobilnych, jak i stacjonarnych ( przepraszam ).

Co więc zrobiliśmy, aby upewnić się, że zobaczymy te zachwycające zielone pączki rozkoszy?

Rozebraliśmy wszystko i pracowaliśmy nad jedną prostą mantrą:

Ładuj jak najmniej, tak szybko, jak to możliwe.

Chociaż nie będę wdawać się w najdrobniejsze szczegóły, omówię nasze podstawowe metody, aby nasze spersonalizowane motywy WordPress były jak najbardziej uproszczone.

Najpierw porozmawiajmy o sprzęcie. Nie możemy kontynuować bez wcześniejszej rozmowy o WP Engine. Bez wątpienia są jednym z najlepszych, jeśli nie najlepszymi dostawcami hostingu dla WordPressa. Byliśmy zachwyceni imponującym wsparciem, dostępnością, środowiskami dla każdej instalacji, kopiami zapasowymi oraz łatwością zarządzania certyfikatem SSL i domenami wśród wielu innych funkcji. Ponadto ich pamięć podręczna i twarda optymalizacja prędkości zapewniają, że witryna działa tak szybko, jak to możliwe na poziomie serwera.

Dzięki wysokowydajnemu serwerowi u podstaw, wiemy, że teraz zależy od nas, aby witryna działała tak szybko, jak to możliwe.

Podobnie jak większość agencji, mamy własny, ręcznie wykonany szablon bazowy, którego używamy jako punkt wyjścia dla wszystkich naszych stron internetowych na zamówienie. Każda tworzona przez nas witryna jest projektowana i kodowana wewnętrznie – a nie gotowy motyw w zasięgu wzroku.

Nasz szablon podstawowy zawiera nasze metody optymalizacji prędkości, a także szereg sprytnych funkcji i komponentów wielokrotnego użytku, których potrzebujemy w każdym projekcie. Posiadanie tego punktu początkowego oszczędza nam czas na dłuższą metę i zapewnia, że ​​każda witryna będzie działać najlepiej, jak może, przy niewielkim nakładzie pracy wymaganym przez programistę.

Wiem, o czym myślisz – przejdź do dobrych rzeczy!

Nie zamierzam zawracać sobie głowy wyliczaniem zwykłych nudnych rzeczy, które widzisz w każdym poście na blogu, takich jak „leniwe ładowanie obrazów”. Ale jeśli tego nie zrobisz, jest to rzeczywiście konieczność – mamy funkcję obrazu, która drukuje nasze obrazy leniwie załadowane tagami srcset i size (znane jako obrazy responsywne).

Przejdźmy od razu.

Metoda 1: porcja i kolejka

Zdarza się to bardzo często: projekt ma tylko jeden plik css i jeden plik js, które w końcu powiększają się do rozmiarów małej planety. Co następne? Google pyta „dlaczego ładujesz style i javascript, które nie są używane na tej stronie?”. Czemu? Czemu?!

To ważny punkt. Dlaczego miałbyś ładować mnóstwo CSS i JavaScript dla całej witryny, gdy potrzebujesz tylko ułamka tego na stronę?

Wszystkie nasze strony są w całości zbudowane z bloków Gutenberga. Oznacza to, że dla każdego bloku możesz wykorzystać genialną moc kolejkowania plików css i js.

Dla każdego bloku tworzymy osobny plik css i js tylko dla tego pliku (jeśli jest to wymagane). Są one następnie minimalizowane (więcej informacji w następnym punkcie) i umieszczane w kolejce blok po bloku.

Wynik? Ładujemy tylko to, co faktycznie znajduje się na każdej stronie.

Metoda 2: użyj narzędzia do uruchamiania zadań, takiego jak łyk, aby połączyć i zminimalizować swoje zasoby

Wszystkie generowane zasoby są minimalizowane przez funkcję gulp (dostępne są inne, takie jak grunt). Warto zauważyć, że wiele księżyców temu Google wolałby konkatenację niż minifikację (jedno duże żądanie byłoby lepsze niż 5 małych żądań), ale od czasu powstania HTTP/2 (który multipleksuje wiele żądań jednocześnie) nie jest to już wydanie.

Ponownie robimy to, aby pliki były jak najmniejsze. Więc teraz nie tylko ładujemy tylko zasoby znajdujące się na stronie, ale także są one znikome.

Metoda 3: przestań renderować blokujące zasoby

Upewniamy się, że wszystkie te umieszczone w kolejce zasoby znajdują się na dole strony, a zatem nie blokują renderowania.

Usuwamy nawet z kolejki jQuery, które jest dostarczane z WordPressem i umieszczamy w kolejce nową wersję (taką, która nie ma luk w zabezpieczeniach), również na dole strony.

Ale co z FOUC (Flash of Unstyled Content) słyszę, jak mówisz?

Metoda 4: powyżej krotnie css

Flash of Unstyled Content pojawia się, gdy strona początkowo ładuje się bez żadnych stylów, ponieważ arkusz stylów znajduje się na dole strony. Po załadowaniu arkusza stylów style są stosowane, witryna miga i wreszcie wygląda poprawnie.

Aby to naprawić, podzieliliśmy powyższe style składania i dodaliśmy je jako wbudowany tag <style> w nagłówku. Nie jest to zasób blokujący renderowanie i nie otrzymujemy FOUC.

Metoda 5: Rakieta WP

Ostatnim elementem układanki jest najlepsza w swojej klasie wtyczka wydajnościowa WP Rocket. Zbudowany we współpracy z inżynierami WP Engine, jest to jedyna wtyczka buforowania dozwolona na ich platformie hostingowej.

Wyniki?

Cóż, wyniki mówią same za siebie.

SportsAidEastern to organizacja charytatywna wspierająca brytyjskich sportowców. Według PSI witryna, którą dla nich stworzyliśmy, osiąga aż 97/100 na urządzeniach mobilnych i 100/100 na komputerach.

Calligo oferuje transformacyjne usługi danych, a ich wyniki witryn są nawet lepsze niż SportsAid; osiąga prawie idealne 99/100 na urządzeniach mobilnych i 100/100 na komputerach.

Wniosek

Mam nadzieję, że był to powiew świeżego powietrza ze wszystkich innych postów w witrynie „jak przyspieszyć działanie WordPressa”, a jeśli walczysz o przepustkę, być może podkreśliliśmy coś, co możesz wypróbować.

StrategiQ to agencja marketingowa zorientowana na strategię. Odkrywając cenne informacje rynkowe, ujawniając możliwości pokonania konkurencji, określając i dostarczając skuteczne strategie marketingowe, nasz zespół pomaga ambitnym markom w osiąganiu lepszych wyników dzięki doradztwu, kreatywności, marketingu i technologii.
Niezależnie od tego, czy potrzebujesz strategii, porady, zasobów czy wiedzy, zrób pierwszy krok. Opowiedz nam o sobie, a zobaczymy, jak możemy pomóc.