DevTools / WebPageTest - jak korzystać z tych narzędzi w sposób efektywny?
Przeprowadziłem webinar, przedstawiając możliwości DevTools i WebPageTest. Są to natomiast tylko narzędzia, które należy używać wg ustrukturyzowanego procesu, jaki pokazałem podczas wystąpienia na żywo, a które teraz możesz obejrzeć za darmo, na YouTube.
Najważniejsze fakty, jakie powinieneś wynieść z tego mini-szkolenia, to przede wszystkim:
1. DevTools i WebPageTest (WPT) to zaawansowane narzędzia i dobrze wykorzystywać je równocześnie w procesie testowania wydajności. Oba się uzupełniają, jednak WPT oferuje znacznie więcej możliwości i cennych informacji.
2. Liczy się nie tylko load-time performance, ale także run-time performance. Być może Web Vitals w 2022 będą bardziej zorientowane na płynność animacji i interakcji na stronie.
3. Najważniejszym "centrum informacji" o wydajności Twojej strony jest waterfall. To dzięki jego analizie będziesz w stanie zauważyć dziury wydajnościowe i stworzyć plan wdrożeniowy poprawek.
4. Dzięki możliwościom customizacji waterfalla (np. w postaci blokowania danych requestów), jesteś w stanie odpalać testy wydajnościowe bez niektórych zasobów, dzięki czemu szybko zauważysz, co negatywnie wpływa na wydajność Twojej strony.
5. Testujmy nie tylko czas ładowania danej pojedynczej strony, ale także tranzycji między jedną a drugą stroną, z czym ma do czynienia realny użytkownik. W webinarze przedstawiłem możliwości WebPageTest pod tym kątem, których nie znajdziesz np. w popularnym PageSpeed Insights. Super przydatne, jeśli tworzysz strony jako SPA (np. w React'cie, Next.js itd.).
6. Kolejność ładowanych zasobów ma ogromne znaczenie, zwłaszcza w sekcji <head>.
7. WPT posiada masę przydatnych funkcjonalności np. porównawczych, a Custom Scripts pozwolą Ci testować Twoją stronę również jako zalogowany użytkownik lub bez np. Cookie Consent.
8. Liczy się proces :-)