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:

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.

Narzędzie do optymalizacji ładowania zaenwętrznych skryptów - PartyTown

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

Korzyści z korzystania z PartyTown

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/partytown

Po 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.

Szukasz efektywnej agencji interaktywnej?

Na naszą efektywność składa się ponad 10-letnie doświadczenie, stale rozwijająca się kadra specjalistów i rzetelne oraz uczciwe podejście do Klienta. Wiemy jak osiągnąć założone cele w błękitnym i czerwonym oceanie marketingu online.

Agencja marketingowa RekinySukcesu.pl to ponad 350 zadowolonych Klientów, ponad 2 000 przeszkolonych osób, ponad 500 tys. zł obsługiwanego w roku budżetu w kampaniach PPC. Sumując wszystkie dane, użytkownicy spędzili już łącznie ponad 90 lat na wyprodukowanych przez nas stronach internetowych. A nam ciągle mało. Nie uznajemy kompromisów. Dlatego warto kliknąć jeden z przycisków poniżej i umówić się na wizytę we Wrocławiu, Kłodzku lub na spotkanie online.

Zobacz inne:

close
keyboard_arrow_up