Optymalizacja priorytetów JavaScript dla szybszego ładowania stron

Dowiedz się, jak skutecznie priorytetyzować skrypty, aby poprawić Core Web Vitals.

Arjen Karel Core Web Vitals Consultant
Arjen Karel - linkedin
Last update: 2024-12-12

Zarządzanie priorytetami JavaScript dla lepszej wydajności stron

Jedno zawsze było jasne: nie wszystkie skrypty JavaScript są sobie równe. Niektóre obsługują kluczowe interakcje, takie jak ‘interakcja z menu’ czy ‘dodaj do koszyka’, podczas gdy inne są znacznie mniej istotne. Weźmy na przykład skrypt ‘exit intent’, który zachęca odwiedzających zamierzających opuścić Twoją stronę do wypełnienia ankiety. Jestem pewien, że wszyscy moglibyśmy się obejść bez tych ostatnich, ale bardzo trudno byłoby nawigować po stronie bez tych pierwszych.

Jednak na  ‘przeciętnej stronie internetowej’ na poziomie technicznym to rozróżnienie prawie nigdy nie jest stosowane. Wszystkie skrypty JavaScript są ‘po prostu dodawane’ do strony, a przeglądarka musi sama sobie z tym poradzić. To jest problem, ponieważ Twoja przeglądarka nie ma pojęcia, co jest ważne, a co nie. My, jako programiści, wiemy. Więc naprawmy to!

Jak priorytet JavaScript może wpływać na Core Web Vitals

Samo dodanie skryptów do strony bez odpowiedniego namysłu może wpłynąć na wszystkie 3 Core Web Vitals: Largest Contentful Paint, Interaction to Next Paint i Cumulative Layout Shift. 

javascript lcp impact example

Przykład: zasób sieciowy LCP jest opóźniany przez blokujące renderowanie skrypty JavaScript

Largest Contentful Paint jest podatny na rywalizację o przepustowość i CPU. Gdy zbyt wiele skryptów walczy o wczesne zasoby sieciowe, opóźni to zasób sieciowy Largest Contentful Paint, a wczesna praca CPU opóźni LCP blokując główny wątek.

Interaction to Next Paint może być dotknięty przez skrypty wykonujące się tuż przed interakcją. Gdy skrypty się wykonują, blokują główny wątek i opóźniają każdą interakcję podczas tego czasu wykonania.

Skrypty mogą również powodować  Cumulative Layout Shift jeśli skrypty ‘zmieniają wygląd strony’. Skrypty reklamowe wstrzykujące banery na stronę oraz slidery są z tego niesławne.

5 typów priorytetów JavaScript

Lubię rozróżniać 5 typów priorytetów JavaScript. Omówmy je krótko, zanim przejdziemy do szczegółów.

  • Krytyczne dla renderowania: te skrypty należą do najgorszych. Zmieniają układ strony i bez ich załadowania układ będzie całkowicie inny. Przykład: niektóre skrypty sliderów lub testy A/B.
  • Skrypty krytyczne: Te skrypty obsługują kluczowe funkcje strony i bez nich krytyczne zadania, takie jak dodanie produktu do koszyka, wyszukiwanie na stronie czy nawigacja, nie są możliwe.
  • Skrypty ważne. Te skrypty obsługują ważną logikę (biznesową) i Twoja strona od nich zależy. Na przykład: Analytics
  • Skrypty opcjonalne. Te skrypty są miłym dodatkiem, ale jeśli przyjdzie co do czego, nie potrzebujemy ich do działania strony. Na przykład widget czatu lub exit intent
  • Skrypty przyszłe. Te skrypty mogą być krytyczne lub opcjonalne, ale nie potrzebujemy ich teraz, ponieważ ‘inne kroki’ muszą zostać podjęte, zanim będziemy mogli z nich skorzystać. Na przykład skrypt wieloetapowego procesu zakupowego.
Teraz, gdy mamy pojęcie o priorytetach skryptów, przejdźmy do szczegółów!

1. Skrypty krytyczne dla renderowania

Są to najbardziej destrukcyjne skrypty, ponieważ bezpośrednio wpływają na sposób wyświetlania strony. Bez nich układ może się zepsuć lub wyglądać drastycznie inaczej niż zamierzony projekt. Przykłady obejmują skrypty sliderów lub frameworki testów A/B, które zmieniają układ na wczesnym etapie ładowania. 

Problem z tego typu skryptami polega na tym, że nie można ich odroczyć ani opóźnić. Jakiekolwiek opóźnienie spowoduje przesunięcie układu strony, co doprowadzi do złego UX i niespełnienia Core Web Vitals.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Page Title</title>
    <link href="styles.css" rel="stylesheet" />
    <script src="render-critical.js"></script>
  </head>
  <body></body>
</html>

Najlepsze praktyki:

  • Unikaj skryptów krytycznych dla renderowania, gdy tylko to możliwe. Przepisz swój kod, aby uniknąć zależności od tego typu skryptów.
  • Jeśli nie da się tego uniknąć, wstaw inline lub załaduj tylko absolutnie niezbędne części tych skryptów. 
  • Nie używaj defer ani async dla tych skryptów i umieść je na górze sekcji head, aby uruchomić pobieranie ‘jak najwcześniej’.

2. Skrypty krytyczne

Te skrypty umożliwiają podstawowe interakcje. Bez nich krytyczne zadania, takie jak nawigacja po stronie, dodawanie produktów do koszyka, powiadomienie o plikach cookie czy wyszukiwanie, stają się niemożliwe. Są niezbędne dla podstawowej funkcjonalności strony.

Te skrypty powinny być umieszczone w sekcji head strony z atrybutem async lub defer.

<script defer src="critical.js"></script>
<script async src="critical.js"></script>

Najlepsze praktyki:

  • Ogranicz takie skrypty do minimum i nie łącz tej funkcjonalności z inną, mniej krytyczną funkcjonalnością.
  • Ładuj te skrypty wcześnie, używając async lub defer, w zależności od ich zależności.
  • Używaj narzędzi RUM, takich jak CoreDash, aby identyfikować wąskie gardła w wykonaniu i upewnić się, że ich wydajność odpowiada potrzebom użytkowników.

3. Skrypty ważne

Choć nie są bezpośrednio powiązane z użytecznością strony, ważne skrypty wspierają kluczowe funkcje biznesowe. Skrypty analityczne, na przykład, dostarczają istotnych danych, ale nie muszą się ładować przed ważniejszymi elementami wizualnymi. Oczywiście rozróżnienie między skryptami krytycznymi a ważnymi może być kwestią dyskusji, więc upewnij się, że porozmawiasz ze wszystkimi interesariuszami przed ustaleniem tego priorytetu!

Istnieją 3 sposoby na obniżenie priorytetu skryptu dla tego typu skryptów.

<html>
<head>
<!-- method 1: low fetchpriority -->
<script fetchpriority="low" defer src="important.js"></script>

<!-- method 2: inject after DOMContentLoaded -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var script = document.createElement('script');
    script.src = 'important.js';
    document.body.appendChild(script);
  });
</script>
</head>
<body>

<!-- method 3: place at the bottom of the page -->
<script defer src="important.js"></script>
</body>
</html>

1. Niski fetchpriority. 

Ustawienie fetchpriority obniży względny priorytet skryptu. Inne skrypty z atrybutem defer lub async prawdopodobnie zostaną ustawione w kolejce z wysokim priorytetem, podczas gdy skrypty z fetchprioriy="low" zostaną ustawione z niskim priorytetem. W zależności od Twojej strony (lub ścieżki renderowania) może to wystarczyć do priorytetyzacji innych zasobów, takich jak obraz Largest Contentful Paint i ważne czcionki. 

2: Wstrzyknięcie po DOMContentLoaded

Wstrzykując skrypt po zdarzeniu DOMContentLoaded, zapewniasz, że skrypt zaczyna się pobierać bezpośrednio po pełnym sparsowaniu HTML. Pozwala to wykrywalnym zasobom, takim jak obrazy i czcionki, na pierwszeństwo. Ta metoda zapewnia równowagę: skrypt zaczyna się ładować wystarczająco wcześnie, aby uniknąć opóźnień w funkcjonalności, ale nie konkuruje z wczesnymi zasobami kluczowymi dla początkowego renderowania strony.

3: Umieszczenie na dole strony

Ta klasyczna technika odkłada ładowanie skryptu do momentu, aż przeglądarka przetworzy cały dokument, i osiąga mniej więcej taki sam rezultat jak technika powyżej. Jedyna różnica polega na tym, że technika 2 pomija preload scanner przeglądarki, a ta technika nie. Preload scanner to lekki, szybki skaner, którego przeglądarka używa do szybkiego identyfikowania i kolejkowania krytycznych zasobów. Pominięcie preload scannera może być dobrym pomysłem, jeśli istnieje możliwość leniwie ładowanych obrazów w widocznym obszarze, natomiast użycie preload scannera przyspieszy ładowanie tego skryptu.

4. Skrypty opcjonalne

Te skrypty ulepszają doświadczenie użytkownika, ale nie są wymagane do działania strony. Przykłady obejmują widgety czatu, wyskakujące okna z opiniami klientów lub opcjonalne animacje. Choć są korzystne, nie powinny zakłócać podstawowego doświadczenia użytkownika.

Te skrypty są idealnym kandydatem do załadowania za pomocą wzorca zwanego ‘lazy on load’. Oznacza to oczekiwanie na zdarzenie load strony, a następnie, w czasie bezczynności, wstrzyknięcie skryptu.  Oczekiwanie na zdarzenie load zapewnia, że skrypt nie konkuruje o przepustowość i CPU  z ważniejszymi wczesnymi zasobami. Oczekiwanie na moment bezczynności zapewnia, że przeglądarka nie obsługuje ważniejszych zadań, takich jak dane wejściowe użytkownika.

Oto działający przykład:

window.addEventListener("load", () => {
  window.requestIdleCallback(() => {
    const script = document.createElement("script");
    script.src = "/path/to/script.js";
    document.head.appendChild(script);
  });
});

Najlepsze praktyki:

  • Ładuj te skrypty leniwie po załadowaniu strony i poczekaj na moment bezczynności.
  • Pamiętaj, że skrypty ładowane w ten sposób nie mają gwarancji szybkiego załadowania

5. Skrypty przyszłe

Skrypty przyszłe to takie, które nie będą potrzebne, dopóki nie zostaną spełnione określone warunki. Na przykład skrypt wieloetapowego procesu zakupowego staje się istotny dopiero po tym, jak użytkownik dodał produkty do koszyka. Te skrypty często mogą poczekać do znacznie późniejszego etapu ścieżki użytkownika.

Spójrz na ten przykład. Używa on intersection observer do załadowania logiki JavaScript wymaganej dla skryptu rejestracji tylko wtedy, gdy formularz jest w widocznym obszarze.

<!DOCTYPE html>
<html>
  <head>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("form");
        const observer = new IntersectionObserver(function (entries) {
          entries.forEach((entry) => {
            if (entry.isIntersecting) {
              const script = document.createElement("script");
              script.src = "/sign-up.js";
              document.head.appendChild(script);
              observer.unobserve(form);
            }
          });
        });
        observer.observe(form);
      });
    </script>
  </head>
  <body>
    <form action="/sign-up" method="post">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required />
      <button type="submit">Sign Up</button>
    </form>
  </body>
</html>

Najlepsze praktyki:

  • Ładuj te skrypty na żądanie, uruchamiane przez akcje użytkownika.
  • Używaj technik dzielenia kodu, aby dostarczać tylko te części, które są wymagane na każdym etapie.
  • Wstrzykuj je dynamicznie tylko wtedy, gdy są potrzebne, na przykład gdy użytkownik przewinie do określonej sekcji.

Secure your Q3 Metrics.

Do not let technical debt derail your Core Web Vitals. I provide the strategy, the code, and the verification to pass Google's assessment.

Start the Engagement >>

  • Strategic Planning
  • Code Implementation
  • Verification & Testing
Optymalizacja priorytetów JavaScript dla szybszego ładowania stronCore Web Vitals Optymalizacja priorytetów JavaScript dla szybszego ładowania stron