Audytor prędkości: dowiedz się, co hamuje twój WordPress

Niektórzy administratorzy witryn WordPress mają obsesję na punkcie PageSpeed Insights lub GTmetrix. Moja rada i rada wielu innych, którzy wiedzą o tym znacznie więcej, jest taka, że nie powinieneś nadawać tym wskaźnikom większego znaczenia niż mają.

Jeśli postrzegana szybkość ładowania jest dobra, nie jest konieczne umieszczanie wszystkiego "na zielono". W wielu przypadkach może to nawet przynieść efekt przeciwny do zamierzonego, ponieważ można popaść w nadmierną optymalizację lub, co gorsza, zrujnować różne rzeczy, próbując naprawić jedną rzecz.

Mimo to, niezależnie od tego, czy jesteś miłośnikiem WPO, entuzjastą optymalizacji, czy po prostu chcesz spróbować poprawić responsywność swojej witryny, narzędzia te są niemal niezbędne. Problem polega na tym, że oferują one "nieruchome obrazy" pobrane z zewnętrznych serwerów. Ale co się dzieje, gdy jako administrator przeglądasz swoją witrynę, co z tymi reklamami, które ładują się z opóźnieniem lub menu, które przeskakuje właśnie wtedy, gdy masz zamiar kliknąć?

Pochodzenie

Speed Auditor powstał jako odpowiedź na osobistą potrzebę posiadania kilku prostych, ale potężnych lokalnych narzędzi diagnostycznych. Nie jest to wtyczka optymalizacyjna (nie zmienia niczego w kodzie), jest to wtyczka do audytu w czasie rzeczywistym.

Jeśli szukasz dobrej, być może najlepszej, płatnej wtyczki do WPO, za pomocą której możesz wprowadzać zmiany i dostrajać, spójrz na Perfmatters. Z drugiej strony, jeśli szukasz czegoś darmowego i prostego, bez zawracania sobie głowy ustawieniami i regulacjami, ale z wieloma możliwościami, możesz wypróbować WPO Rocket Tweaks autorstwa Fernando Tellado, dostępne w repozytorium WordPress.

Jeśli nie wiesz, czym jest węzeł DOM lub metryka opóźnienia, nie martw się. Speed Auditor został zaprojektowany, aby pomóc ci zrozumieć twoją stronę internetową na pierwszy rzut oka:

• Inteligentny wskaźnik: Na pasku administratora pojawi się ikona zmieniająca kolor. Jeśli jest zielona, LCP (czas potrzebny do zobaczenia najważniejszych rzeczy) jest optymalny. Jeśli zmieni kolor na pomarańczowy lub czerwony, coś wymaga uwagi.

• Audyt podczas przeglądania: Nie musisz konfigurować niczego skomplikowanego. Aktywujesz wtyczkę, a podczas gdy sprawdzasz swoje posty, działa ona w tle, analizując, czy obrazy są zbyt ciężkie lub czy serwer reaguje wolno.
• Więcej ludzkich raportów: Wystarczy jedno kliknięcie, aby pobrać plik .txt, który można wysłać do programisty lub zapisać w celu porównania wyników po zastosowaniu zmian.

Pod maską

Wersja 1.1.8 stara się zapewnić pewną głębię diagnostyki, aby zaoszczędzić czas spędzony w konsoli przeglądarki.

• Precyzyjna identyfikacja LCP: Wtyczka wykrywa dokładnie, który element (obraz lub blok tekstu) wywołał Largest Contentful Paint.
• Analiza głębokości DOM: Kluczowe dla uniknięcia "nadmiernego rozmiaru DOM". Speed Auditor rozbija liczbę węzłów według stref (nagłówek, treść, stopka) i ostrzega, jeśli zagnieżdżenie przekracza 15-20 poziomów.
• Media Latency Monitor: Mierzy rzeczywisty czas transferu (Resource Timing API) obrazów. Jeśli pobranie obrazu zajmuje 500 ms, wtyczka oznacza go jako krytyczny.
• Zerowy wpływ na serwer: Całe przetwarzanie odbywa się po stronie klienta (przeglądarki). Nie ma ciężkich zapytań do bazy danych lub procesów PHP, które spowalniają witrynę.

Wielki skok. Już wkrótce: Speed Auditor 1.1.9 (z "Radar CLS")

Do tej pory Cumulative Layout Shift (CLS ) był abstrakcyjną liczbą w raporcie. Wiedziałeś, że coś się porusza, ale nie zawsze wiedziałeś co. Wkrótce, w wersji 1.1.9, to się zmieni.

Wprowadzony zostanie przycisk radaru lub wizualnego podświetlenia CLS.

Wyobraź sobie aktywację trybu "radaru", który rysuje czerwone pola nad każdym elementem, który porusza się podczas przewijania. To, co niektóre rozszerzenia już robią, z mniejszym lub większym powodzeniem, jest zawsze bardzo przydatną pomocą wizualną, aby spróbować złapać te "przepełnienia", które czasami umykają oku.

• Czy jest to baner AdSense promujący treść? Zobaczysz go z czerwoną ramką. Możesz zagłębić się w ten problem tutaj.
• Czy jest to obraz bez zdefiniowanych wymiarów? Radar to wychwyci.
• Całkowita wytrwałość: Będziesz mógł przeglądać całą witrynę z włączonym radarem; wtyczka zapamięta, że chcesz wizualnie kontrolować każdy zakątek.

Ta aktualizacja będzie również zawierać krótki glosariusz techniczny, który zostanie rozszerzony o wskazówki i samouczki, które zostaną zintegrowane z pulpitem nawigacyjnym WordPress, dzięki czemu terminy takie jak ins, iframe lub figure nie będą już tajemnicą.

Chodzi o to, aby poprawić zarówno reakcję analizy, jak i generowane raporty, gdy testuję ją w różnych scenariuszach i otrzymuję sugestie dotyczące ulepszeń lub ostrzeżenia o błędach.

Wersja 1.1.8 jest już dostępna, aby uporządkować metryki, a wkrótce 1.1.9 sprawi, że jeszcze łatwiej będzie naprawić stabilność wizualną WordPressa. Jeśli zainstalujesz ją teraz, wkrótce otrzymasz aktualizację.

Jak to działa?

Kod składa się z trzech kroków:

1. PerformanceObserver

Przeglądarka (Chrome, Edge, Opera) ma natywny interfejs API o nazwie Performance API. Wtyczka rejestruje "obserwatora" o nazwie PerformanceObserver specjalnie skonfigurowanego dla typu wejścia layout-shift.

Za każdym razem, gdy coś porusza się na ekranie po jego wstępnym pomalowaniu, przeglądarka generuje zdarzenie. Wtyczka przechwytuje to zdarzenie i wyodrębnia dwa kluczowe elementy danych:

• Wartość przesunięcia: (ta liczba to 0,0145).
• Element winowajca: Przeglądarka informuje wtyczkę dokładnie o tym, który węzeł HTML został przeniesiony.

2. Filtr "Ostatnie interakcje"

W tym miejscu wtyczka stara się być sprytna. Nie wszystkie ruchy są "złe". Jeśli klikniesz menu rozwijane, a zawartość przewinie się w dół, jest to oczekiwany ruch użytkownika.

Wtyczka sprawdza właściwość o nazwie hadRecentInput. Jeśli dotknąłeś klawisza lub kliknąłeś w ciągu ostatnich 500 ms, przeglądarka oznacza ten ruch jako "oczekiwany", a wtyczka ignoruje go, aby uniknąć fałszywych alarmów. Wykrywa tylko ruchy, które występują nieoczekiwanie (takie jak nagle pojawiająca się reklama).

3. Renderowanie wizualne (czerwone pola)

Gdy wtyczka ma już element, który został przeniesiony, do gry wkracza część wizualna:

1. Obliczanie współrzędnych: Używa funkcji o nazwie getBoundingClientRect(), aby dowiedzieć się, gdzie dany element znajduje się na ekranie w danym momencie (piksel w górę, piksel w lewo).
2. Wstrzyknięcie ramki: Utwórz element div z pozycją bezwzględną, czerwonym obramowaniem 2px i bardzo wysokim indeksem z, aby rysować na wierzchu wszystkiego.
3. Etykieta: Dodaj małe pole w lewym górnym rogu czerwonego pola z nazwą etykiety (ins, img, div) i wartością zgromadzonego CLS.

Dlaczego jest to lepsze niż raport zewnętrzny?

Narzędzia takie jak PageSpeed czasami nie wykrywają CLS, ponieważ nie przewijają do dołu lub nie czekają na załadowanie niektórych reklam.

Wtyczka, korzystając z trwałości, mierzy CLS zgromadzony podczas rzeczywistej sesji przeglądania użytkownika. Jeśli element porusza się trochę na początku i trochę podczas przewijania, wtyczka dodaje to i podświetla, dając najbardziej przybliżoną rzeczywistą liczbę, którą Google zobaczy w swoim raporcie"Chrome User Experience" (CrUX).