Skrypty zewnętrzne: ciężar, którego nie napisaliście

Analityka, menedżery tagów, widżety czatu i piksele z osobna wyglądają niewinnie. Razem decydują o tym, jak szybka jest strona — oto jak zrobić inwentaryzację i je ograniczyć.

Wydajność · Opublikowano: 3 października 2026 · 6 min czytania · Ольга Мирошник

Otwórz panel Network na niemal dowolnej komercyjnej stronie i policz domeny. Własna domena, CDN, a potem długi ogon: analityka, menedżer tagów, dwa piksele reklamowe, widżet czatu, narzędzie do testów A/B, serwis z fontami, mapa, osadzone wideo. Ani linijki tego kodu nie napisał twój zespół, nic z tego nie przechodzi review w waszych pull requestach — a wszystko działa z tymi samymi uprawnieniami co wasz własny JavaScript.

Każdy tag dodał ktoś, kto go potrzebował, i miał ku temu dobry powód. Problem w tym, że za sumę nie odpowiada nikt.

Ile kosztuje każde nowe źródło

Nawiązanie połączenia. Nowa domena to zapytanie DNS, uzgadnianie TCP i negocjacja TLS, zanim dotrze pierwszy bajt skryptu. Na łączu mobilnym to łatwo kilkaset milisekund na każde źródło, a skrypt, który dociąga kolejne skrypty z jeszcze innej domeny, płaci tę cenę ponownie.

Czas głównego wątku. Zewnętrzny JavaScript trzeba pobrać, sparsować i wykonać w tym samym wątku, który obsługuje kliknięcia i dotknięcia. Widżet czatu uruchamiający cały framework UI albo narzędzie A/B przepisujące DOM bezpośrednio konkurują z interakcjami na stronie — i widać to w słabym INP (Interaction to Next Paint).

Blokowanie renderowania. Zwykły <script src> w <head> bez async ani defer zatrzymuje parser, dopóki skrypt nie zostanie pobrany i wykonany. Niektóre snippety testów A/B robią to celowo i ukrywają stronę do czasu, aż skończą, żeby uniknąć mrugania.

Pojedynczy punkt awarii. Jeśli serwer dostawcy zwalnia albo leży, blokujący skrypt spowalnia albo zostawia pustą także twoją stronę. Twoja dostępność zależy teraz od cudzej, a monitoring nie powie ci, dlaczego.

Prywatność i zgoda. Piksel, który odpala się, zanim odwiedzający odpowie na baner cookie, wysyła jego dane stronie trzeciej bez zgody. Często samo załadowanie skryptu wystarcza, by przekazać adres IP i referera.

Bezpieczeństwo. Każdy zewnętrzny skrypt jest częścią twojego łańcucha dostaw. Jeśli dostawca albo CDN zostanie przejęty, kod atakującego wykona się na stronie płatności. Ścisłą Content Security Policy pisze się znacznie trudniej, gdy lista dozwolonych źródeł rośnie z każdym tagiem.

Zrób inwentaryzację

Zacznij od faktów, nie od pamięci:

W Chrome DevTools otwórz Network, przeładuj stronę i pogrupuj albo posortuj żądania według domeny. Zapisz każde obce źródło i to, co z niego się ładuje.
Otwórz panel Coverage, żeby zobaczyć, jaka część każdego skryptu faktycznie się wykonuje na typowej stronie.
Zajrzyj do menedżera tagów: spisz wszystkie tagi, ich reguły uruchamiania i datę ostatniej zmiany.

Przy każdym tagu zadaj trzy pytania. Kto za niego odpowiada? Jeśli nikt nie potrafi wskazać osoby ani zespołu, to kandydat do usunięcia. Czy ktoś go jeszcze używa? Piksele kampanii zakończonych w zeszłym roku i wersje próbne nigdy niekupionych narzędzi to częste znaleziska. Czy musi się ładować na każdej stronie i od razu? Zwykle nie.

W pierwszym kroku pomoże raport SiteScan: liczy zewnętrzne źródła, z których strony ładują zasoby, i ostrzega, gdy jest ich za dużo („Ogranicz liczbę zewnętrznych źródeł, z których ładują się strony”). Pokazuje też technologie i widżety wykryte na stronie — szybki sposób, by zauważyć zapomniane narzędzie.

Techniki, które działają

Usuwaj. Najszybszy skrypt to ten, którego nie ma. Usunięcie dwóch martwych tagów daje więcej niż optymalizacja pięciu żywych.

Odraczaj to, co zostaje. Analityka i większość pikseli mogą używać async albo defer lub być uruchamiane z menedżera tagów po załadowaniu strony. Nic, co nie rysuje pierwszego ekranu, nie powinno go blokować.

Ładuj przy interakcji. Widżet czatu czy osadzone wideo z YouTube nie muszą startować, zanim ktokolwiek ich zechce. Pokaż lekką fasadę — statyczny przycisk albo miniaturę — i załaduj właściwy komponent po kliknięciu:

<button class="chat-facade" type="button">Napisz do nas</button>
<script>
  document.querySelector(".chat-facade").addEventListener("click", () => {
    const s = document.createElement("script");
    s.src = "https://widget.example-chat.com/loader.js";
    document.head.append(s);
  }, { once: true });
</script>

Hostuj u siebie, jeśli licencja na to pozwala. Fonty i małe biblioteki serwowane z własnej domeny obywają się bez dodatkowego połączenia i podlegają twoim regułom cache.

Oszczędnie z preconnect. <link rel="preconnect"> pomaga przy jednym czy dwóch zewnętrznych źródłach na ścieżce krytycznej. Dodany dla dziesięciu po prostu marnuje wczesne pasmo i gniazda na rzeczy, które nie są pilne.

Dbaj o porządek w menedżerze tagów. Ogranicz, kto może publikować, wymagaj opisu i właściciela dla każdego tagu, regularnie przeglądaj kontener. Menedżer tagów ma ułatwiać dodawanie skryptów — a nie czynić go niewidocznym.

Przypinaj statyczne pliki przez Subresource Integrity. Dla wersjonowanej biblioteki z publicznego CDN atrybut integrity sprawi, że przeglądarka odrzuci zmodyfikowany plik:

<script src="https://cdn.example.com/lib@2.4.1/lib.min.js"
        integrity="sha384-..."
        crossorigin="anonymous"></script>

SRI nie działa dla skryptów, które dostawca podmienia w miejscu — i właśnie dlatego one wymagają największej uwagi.

Ustal budżet. Uzgodnijcie limit — liczbę zewnętrznych źródeł, kilobajty zewnętrznego JavaScriptu — i sprawdzajcie go przed uruchomieniem każdego nowego tagu. Budżet zamienia „jeszcze tylko jeden piksel” w świadomą decyzję.

Check-lista

Każde zewnętrzne źródło ma zapisanego właściciela i cel.
Nieużywane tagi i piksele zakończonych kampanii są usunięte.
Żaden zewnętrzny skrypt nie blokuje renderowania pierwszego ekranu.
Widżety czatu i osadzone wideo ładują się przy interakcji, za fasadą.
Nic, co śledzi odwiedzających, nie ładuje się przed wyrażeniem zgody.
Preconnect jest użyty tylko dla jednego czy dwóch krytycznych źródeł.
Statyczne pliki z CDN mają atrybut integrity.
Istnieje budżet na kod zewnętrzny, a nowe tagi są z nim porównywane.

Przeczytaj także

Sprawdź, ile z tego dotyczy Twojej strony

Darmowe skanowanie pokaże uszkodzone linki, błędy JS i problemy z wydajnością w minutę.

Uruchom skanowanie