Odkładaj ładowanie skryptów do momentu, gdy są potrzebne

Odkładaj ładowanie skryptów do momentu, gdy są potrzebne

W tym artykule pokażę i wyjaśnię sprytny wzorzec ładowania skryptów, które nie są potrzebne podczas startu ładowania strony, w późniejszym czasie, tuż przed momentem, gdy będą potrzebne.

Absolutnie najskuteczniejszą rzeczą, jaką możesz zrobić z JavaScript w kontekście Core Web Vitals, jest opóźnienie ładowania zasobu do momentu, gdy jest potrzebny. Spowoduje to usunięcie nieużywanego i niepotrzebnego JavaScript ze strony i załadowanie go dopiero wtedy, gdy będzie potrzebny. Naprawi to ostrzeżenie Lighthouse 'reduce unused JavaScript', a także poprawi metryki responsywności, takie jak Interaction to Next Paint (INP).
Robimy to z obrazami od dawna. Nazywa się to lazy loading. Przy lazy loading obraz znajdujący się poniżej widocznej części strony jest ładowany tuż przed przewinięciem do niego. Dzięki temu nie musimy ładować obrazu natychmiast podczas ładowania strony, a przeglądarka może przeznaczyć swoje cenne zasoby na pobieranie, parsowanie i renderowanie elementów, które są faktycznie potrzebne.

Teraz wyobraź sobie, że moglibyśmy zrobić to samo ze skryptami zamiast z obrazami. Okazuje się, że możemy! Niestety nie jest to tak proste jak dodanie loading="lazy" do obrazu, ale przy odrobinie wysiłku możemy to uruchomić

Krok 1: Ładowanie skryptów na żądanie

Aby dodać skrypty do strony po załadowaniu strony, potrzebujemy małego skryptu, który zrobi to za nas.

function injectScript(scriptUrl, callback) {
  var script = document.createElement("script");
  script.src = scriptUrl;
  if (typeof callback === "function") {
    script.onload = function () {
      callback();
    };
  }
  document.head.appendChild(script);
}        

Ta funkcja wstrzykuje skrypt do bieżącej strony internetowej, tworząc nowy element script i dodając go do sekcji head dokumentu. Parametr scriptUrl określa URL skryptu do wstrzyknięcia. Parametr callback to opcjonalna funkcja, która zostanie wywołana po zakończeniu ładowania skryptu. Po zakończeniu ładowania skryptu wywoływane jest zdarzenie onload elementu script. Jeśli została podana funkcja callback, zostanie ona wywołana w tym momencie.

Krok 2: Ładowanie skryptów na żądanie

Następnym krokiem jest ładowanie skryptów na żądanie. Istnieją 2 popularne metody. Pierwsza to bardziej niezawodna metoda „gdy część strony jest widoczna”, a druga to szybsza metoda „przy interakcji”.

2a: Intersection observer

Pierwsza metoda ładowania skryptu tuż przed momentem, gdy jest potrzebny, wykorzystuje intersection observer. Intersection observer to niezawodna metoda, która „uruchamia się”, gdy element przecina widoczną część ekranu. Możemy wykorzystać to zachowanie do wyzwalania pobierania skryptu tylko wtedy, gdy element jest widoczny. Wadą tej metody jest to, że mimo iż element jest „na ekranie”, wciąż może nie zostać użyty.

function injectScriptOnIntersection(scriptUrl, elementSelector) {
  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        injectScript(scriptUrl);
        observer.unobserve(entry.target);
      }
    });
  });

  var element = document.querySelector(elementSelector);
  observer.observe(element);
}
        

Ta funkcja przyjmuje dwa parametry: scriptUrl to URL skryptu do wstrzyknięcia, a elementSelector to selektor CSS elementu, który powinien wyzwolić wstrzyknięcie.

Funkcja tworzy nowy obiekt IntersectionObserver i przekazuje mu funkcję callback, która zostanie wywołana za każdym razem, gdy obserwowany element przecina viewport. Funkcja callback sprawdza, czy element się przecina i jeśli tak, wstrzykuje skrypt i przestaje obserwować element.

Zwróć uwagę, że Intersection Observer API nie jest obsługiwane we wszystkich przeglądarkach, więc może być konieczne użycie polyfilla, jeśli musisz obsługiwać starsze przeglądarki.

injectScriptOnIntersection('script.js', '#my-element');

Spowoduje to wstrzyknięcie skryptu, gdy element o ID my-element stanie się widoczny w viewport.

2b: Przy interakcji

Najskuteczniejszą metodą ładowania JavaScript na żądanie jest załadowanie go, gdy odwiedzający wchodzi w interakcję z określonym elementem. Na przykład formularzem. Zaletą tej metody jest to, że prawdopodobnie nigdy nie załadujesz skryptu, jeśli nie jest potrzebny. Wadą jest to, że pobieranie następuje dość późno i musimy zdecydować, których zdarzeń (mouseover, hover, touchstart itp.) chcemy nasłuchiwać.

function injectScriptOnInteraction(scriptUrl, elementSelector, eventTypes) {
  var element = document.querySelector(elementSelector);
  var eventHandler = function() {
    injectScript(scriptUrl);
    eventTypes.forEach(function(eventType) {
      element.removeEventListener(eventType, eventHandler);
    });
  };
  eventTypes.forEach(function(eventType) {
    element.addEventListener(eventType, eventHandler);
  });
}
        

Ta funkcja przyjmuje trzy parametry: scriptUrl to URL skryptu do wstrzyknięcia, elementSelector to selektor CSS elementu, który powinien wyzwolić wstrzyknięcie, a eventTypes to tablica typów zdarzeń, które powinny wyzwolić wstrzyknięcie (np. ["click", "mouseover"]).

Funkcja znajduje element za pomocą document.querySelector i dodaje do niego nasłuchiwacze zdarzeń dla każdego z określonych typów zdarzeń. Gdy wystąpi którekolwiek z określonych zdarzeń, wywoływana jest funkcja injectScript z podanym URL, a nasłuchiwacze zdarzeń są usuwane za pomocą element.removeEventListener.

injectScriptOnInteraction(
  'script.js',
  '#my-element', 
  ['click', 'mouseover']
);

Spowoduje to wstrzyknięcie skryptu, gdy element o ID my-element zostanie kliknięty lub najechany kursorem, a następnie usunie nasłuchiwacze zdarzeń.

Podsumowanie

Gdy skrypty nie są potrzebne od razu podczas startu ładowania strony, świetnym pomysłem jest ładowanie ich na żądanie! Możemy to zrobić za pomocą intersection observer lub przy interakcji. Pozwoli to zwolnić cenne zasoby podczas wczesnych etapów ładowania strony