PartyTown - optymalizacja pagespeed google
W dzisiejszym wpisie pokażę Ci jak zoptymalizować ładowanie skryptów firm zewnętrznych za pomocą Web Workerów, aby zoptymalizować wynik w Google PageSpeed Insight.
Pracując nad optymalizacją strony, często poświęcamy dużo czasu na optymalizację i refaktoryzację kodu, optymalizację obrazów, ustawieniem serwera oraz wszelkimi problemami, które wskaże nam narzędzie Google Pagespeed Insight. Strona w końcu uzyskuje przyzwoity wynik i przychodzi ten moment, w którym dział marketingu zleca nam umieszczenie skryptów zewnętrznych potrzebnych do analityki, reklam, czy filmiki z YT. Okazuje się, że wynik z 90 spada do 50 w skali 100 punktów.
Problem z wydajnością strony internetowej często jest powiązany z skryptami ładowanymi przez firmy trzecie tzw. Third-Party Javascript. Są to najczęściej narzędzia:
- skrypty Facebooka (FB Pixel, czat Messenger),
- skrypty analityczne i pomiarowe (Google Tag Manager, Google Analytics),
- skrypty analityczne Heap https://www.rekinysukcesu.pl/blog/internet/heap-analytics-analityka-na-sterydach
- skrypty testów A/B do eksperymentów (Google Optimize),
- powiadomienia push, https://www.rekinysukcesu.pl/blog/marketing/powiadomienia-push-na-twojej-www-w-10-minut
- przyciski udostępniania społecznościowego (np. Twitter, Facebook),
- osadzone odtwarzacze wideo (np. YouTube, Vimeo),
- iframe reklamowe lub filmy,
- czaty do obsługi klienta na stronie.
Jak dobrze wiemy, skrypty zewnętrzne dostarczają szeroki zakres przydatnych funkcji i danych. Dzięki nim możemy analizować zachowania użytkowników, wyświetlać reklamy, optymalizować działania na stronie.
Czym jest Web Workers?
Termin Web Workers jest nowy, dostępny w HTML5 API. Pozwala programistom uruchomić części zasobożernych (obciążających stronę) skryptów Javascript w osobnym wątku. Dzięki temu rozwiązaniu podczas uruchamiania strony na komputerze klienta interfejs użytkownika nie jest blokowany.
Czym jest Partytown i dlaczego warto z niego korzystać?
Partytown to biblioteka typu lazy-loaded, która pomaga przenieść skrypty wymagające dużych zasobów do web workera zamiast wywołania ich w głównym wątku. Jej celem jest przyspieszenie stron poprzez pozostawienie w głównym wątku tylko niezbędnego kodu do uruchomienia strony, pozostały jest delegowany do web workera.
Biblioteka jest utrzymywana poprzez Builder.io
Jak możemy zauważyć na zdjęciu powyżej, główny wątek jest o wiele ważniejszy niż skrypty innych firm. Oznacza to, że główny wątek może wykonywać czynności związane z logiką biznesową Twojej aplikacji lub strony internetowej.
Kompatybilność z przeglądarkami
PartyTown jest obecnie w wersji beta. Oznacza to, że wciąż są prowadzone nad nim prace. Wspiera przeglądarki, które obsługują web workery, service workery Atomics. Jeżeli użyjesz biblioteki na swojej witrynie lub aplikacji i martwisz się o wsparcie starszych przeglądarek, to robisz to niepotrzebnie, ponieważ na przeglądarkach, które nie mają wsparcia działa to w tradycyjny sposób, czyli tak jak bez użycia PartyTown.
Jak użyć PartyTown?
Partytown możesz zainstalować poprzez pakiet NPM.
npm install @builder.io/partytownPo instalacji, możesz dodać polecenie do pliku package.json. Można to zautomatyzować jako część etapu kompilacji przy np. webpacka.
"partytown": "partytown copylib public/~partytown"Umieść link do pliku partytown w nagłówki strony
<head> <script src="/~partytown/partytown.js"> </script > </head>
Skrypty do partytown możemy umieścić liniowo lub dodając jako atrybut do ładowanego zewnętrznie.
<script type="text/partytown">
... your code ...
</script>
<script type="text/partytown" src="/analytics.js"></script>
Wszelkie wywołania kodu wykonywanego w web workerze powinien być do niego przekazywany. Jeżeli będzie to np. Google Tag Manager, to wywołania push do datalayer należy przekazać.
<script>
partytown = {
forward: ['dataLayer.push'],
};
</script>
<script type="text/partytown">
... tag manager snippet ...
</script>
Podsumowanie
Partytown jest bardzo ciekawym narzędziem do optymalizacji zewnętrznych skryptów. W końcu dzięki tej bibliotece obciążamy główny wątek przeglądarki. Jej twórca - Builder.io stworzył framework Qwik, który świetnie współpracuje z Partytown. Dowiecie się o nim więcej w artykule Mateusza.
Tworzenie w tej technologii znacznie poprawia wydajność mierzoną w PageSpeed Insight. Parametry Web Vitals takie jak TBT czy TTI znacząco spadły i strona uzyskuje wyniki zbliżone do 100 punktów.
