Ta strona została przetłumaczona przez Cloud Translation API.

Pakiet Next.js do zarządzania bibliotekami innych firm

Houssein Djirdeh

W 2021 r. zespół Chrome Aurora przedstawił Script , aby ulepszyć wczytywaniu wydajności skryptów zewnętrznych w Next.js. Od tego czasu rozwinęło swoje możliwości, aby ułatwić ładowanie zasobów zewnętrznych i dla programistów.

Ten post zawiera omówienie nowszych funkcji udostępnianych przez nas, większość z nich zwłaszcza @next/third-parties oraz zarysu przyszłych inicjatyw w naszym planie.

Wpływ skryptów innych firm na wydajność

41% wszystkich żądań innych firm w witrynach Next.js to skrypty. W przeciwieństwie do innych treści pobieranie i uruchamianie skryptów może zająć sporo czasu, co może blokować renderowanie i opóźniać interakcję użytkownika. Dane z Chrome Raport na temat wygody użytkowników pokazuje, że witryny Next.js, które wczytują więcej witryn zewnętrznych, skrypty mają mniejszą wartość od interakcji do następnego wyrenderowania (INP) i największe wyrenderowanie treści (LCP).

Wykres słupkowy pokazujący spadek procentowego udziału pliku Next.js w osiąganiu dobrych wyników INP i LCP proporcjonalnie do liczby wczytanych aplikacji innych firm. — Raport na temat użytkowania Chrome grudzień 2023 r. (110 823 witryny)

Korelacja zaobserwowana na tym wykresie nie wskazuje na związek przyczynowo-skutkowy. Jednak lokalne eksperymenty dostarczają dodatkowych dowodów na to, że skrypty innych firm w znacznym stopniu mają wpływ na wydajność strony. Na przykład na wykresie poniżej porównano różne moduły w przypadku kontenera Menedżera tagów Google – składający się z 18 losowo wybranych danych jest dodawany do taksonomii, popularnego przykładu kodu Next.js. .

Wykres słupkowy pokazujący różnice między różnymi wskaźnikami laboratoryjnymi, gdy witryna jest wczytywana zarówno za pomocą Menedżera tagów Google, jak i bez niego — WebPageTest (Mobile 4G – Wirginia USA)

Dokumentacja WebPageTest zawiera szczegółowe informacje o sposobie pomiaru tych czasów. To już na pierwszy rzut oka Rozumiem, że kontener Menedżera tagów Google ma wpływ na wszystkie te dane laboratoryjne. Dla: np. Total Block Time (TBT) – przydatny moduł przybliżony INP. Odnotowaliśmy 20-krotny wzrost.

Komponent skryptu

Wprowadzając komponent <Script> w Next.js, zadbaliśmy o wprowadzenie za pomocą łatwego w użyciu interfejsu API, który przypomina tradycyjny interfejs <script> . Korzystając z niego, deweloperzy mogą umieścić skrypt innej firmy w dowolnym a Next.js zajmie się sekwencjonowaniem po załadowaniu zasobów krytycznych.

<!-- By default, script will load after page becomes interactive -->
<Script src="https://example.com/sample.js" />

<!-- Script is injected server-side and fetched before any page hydration occurs -->
<Script strategy=”beforeInteractive” src="https://example.com/sample.js" />

<!-- Script is fetched later during browser idle time -->
<Script strategy=”lazyOnload” src="https://example.com/sample.js" />

Dziesiątki tysięcy aplikacji Next.js, w tym popularne witryny, Patreon, Target i Wskazówka – użyj komponentu <Script>. Pomimo niektórzy programiści mają wątpliwości dotyczące następujących kwestii:

Gdzie w aplikacji Next.js umieścić komponent <Script> przy zachowaniu zgodności z zasadami zgodnie z zróżnicowanymi instrukcjami instalacji udostępnianymi przez różnych dostawców zewnętrznych. (doświadczenie programisty).
Która strategia wczytywania jest optymalna w przypadku różnych skrypty innych firm (interfejs).

Aby rozwiać te wątpliwości, wprowadziliśmy @next/third-parties – specjalistyczna biblioteka oferująca zestaw zoptymalizowanych komponentów i narzędzi dla popularnych marek zewnętrznych.

Interfejs programisty: łatwiejsze zarządzanie bibliotekami innych firm

W znacznym odsetku witryn Next.js jest używanych wiele skryptów innych firm, przy czym Menedżer tagów Google jest najpopularniejszy. odpowiednio 66% witryn. @next/third-parties bazuje na: <Script> przez wprowadzenie kodów wyższego poziomu w celu uproszczenia obsługi dla tych typowych przypadków użycia.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleTagManager gtmId="GTM-XYZ" />
    </html>
  );
}

Google Analytics – inny powszechnie używany skrypt zewnętrzny (52% stron Next.js) – ma też własny specjalny komponent.

import { GoogleAnalytics } from "@next/third-parties/google";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XYZ" />
    </html>
  );
}

@next/third-parties upraszcza proces wczytywania często używanych skryptów, ale także rozszerza nasze możliwości opracowywania narzędzi dla innych firm, takich jak umieszczanie filmów. Na przykład umieszczone w Mapach Google lub serwisie YouTube elementy używane w 8% oraz 4% witryn Next.js i wprowadziliśmy już komponenty, które umożliwiają które ułatwiają wczytywanie.

import { GoogleMapsEmbed } from "@next/third-parties/google";
import { YouTubeEmbed } from "@next/third-parties/google";

export default function Page() {
  return (
    <>
      <GoogleMapsEmbed
        apiKey="XYZ"
        height={200}
        width="100%"
        mode="place"
        q="Brooklyn+Bridge,New+York,NY"
      />
      <YouTubeEmbed videoid="ogfYd705cRs" height={400} params="controls=0" />
    </>
  );
}

Interfejs użytkownika: szybsze ładowanie bibliotek innych firm

W idealnym świecie każda szeroko rozpowszechniona biblioteka innej firmy zoptymalizowane, dzięki czemu wszystkie abstrakcje, które zwiększają ich skuteczność, są niepotrzebne. Dopóki jednak nie stanie się to możliwe, możemy spróbować zwiększyć ich skuteczność, podczas integracji z popularnymi platformami, takimi jak Next.js. Możemy Poeksperymentuj z różnymi technikami wczytywania, zadbaj o odpowiednią sekwencję skryptów w właściwy sposób, a ostatecznie podzielić się naszą opinią z zewnętrznymi firmami, aby zachęcić dostawców do wprowadzania zmian na wcześniejszych etapach.

Weźmy na przykład elementy umieszczone z YouTube. Jeśli niektóre alternatywne implementacje zapewnia znacznie większą wydajność niż natywne umieszczanie na stronie. Obecnie <YouTubeEmbed> komponent wyeksportowany przez aplikację @next/third-parties używa lite-youtube-embed, który, po zaprezentowaniu w aplikacji „Hello, World”, Porównanie Next.js – znacznie się wczytuje szybciej.

GIF przedstawiający porównanie wczytania strony między komponentem YouTube do umieszczenia na stronie a zwykłym elementem iframe YouTube — WebPageTest (Mobile 4G – Wirginia USA)

Analogicznie w Mapach Google dodajemy loading="lazy" jako domyślny atrybut aby mapa była wczytywana tylko wtedy, gdy znajduje się w określonej odległości od w widocznym obszarze. Dodanie tego atrybutu może wydawać się oczywiste, szczególnie ponieważ Mapy Google dokumentacja umieszcza go w przykładowym fragmencie kodu, ale tylko 45% witryn Next.js, na których są umieszczone Mapy Google, używa loading="lazy".

Uruchamianie skryptów innych firm w środowisku internetowym

Jedną z zaawansowanych metod, którą omawiamy w aplikacji @next/third-parties, jest to, z powodu wdrożenia skryptów innych firm będzie łatwiejsza do obsługi procesów internetowych. Spopularyzowane przez takich jak Partytown, może to zmniejszyć wpływ skryptów innych firm na wydajność strony znacząco przenosząc je całkowicie poza główny wątek.

Ten animowany GIF przedstawia zmiany w długich zadaniach i wątku głównym czas blokowania przy stosowaniu różnych strategii <Script> do kontenera Menedżera tagów Google w witrynie Next.js. Pamiętaj, że przy przełączaniu między opcjami strategii opóźnia czas wykonania skryptów przez przekierowywanie ich do instancji roboczej całkowicie wyeliminuje ich czas w wątku głównym.

GIF przedstawiający różnice w czasie blokowania głównego wątku w przypadku różnych strategii dotyczących skryptów — WebPageTest (Mobile 4G – Wirginia USA)

W tym przykładzie przeniesienie wykonania kontenera Menedżera tagów Google i jego powiązanych skryptów tagów z narzędziem webowym zmniejszyło TBT o 92%.

Warto zauważyć, że bez odpowiedniej staranności technika ta może dyskretnie mogą nie działać w przypadku wielu skryptów innych firm, co utrudnia debugowanie. W najbliższych sprawdzimy, czy jakiekolwiek komponenty innych firm oferowane przez @next/third-parties działa prawidłowo w narzędziu internetowym. Jeśli tak, nad zapewnieniem deweloperom łatwego i opcjonalnego sposobu korzystania za pomocą tej metody.

Dalsze kroki

W procesie opracowywania tego pakietu stało się jasne, że istnieje scentralizuj rekomendacje innych firm dotyczące wczytywania, aby inne platformy mogłyby również skorzystać na tych samych podstawowych technikach. Doprowadziło to do utwórz firmę zewnętrzną Capital, biblioteka używającego kodu JSON do opisywania zewnętrznych technik wczytywania, które obecnie służy za podstawę do tworzenia @next/third-parties.

W kolejnych krokach będziemy nadal skupiać się na ulepszaniu komponentów w Next.js, a także rozszerzyć nasze wysiłki, aby uwzględnić podobne narzędzia w innych na popularnych platformach i platformach CMS. Obecnie współpracujemy z Nixt i planują opublikować podobne zewnętrzne narzędzia, w najbliższym czasie.

Jeśli któraś z firm zewnętrznych, z których korzystasz w aplikacji Next.js, jest obsługiwana przez @next/third-parties, zainstaluj pakiet i spróbuj! Chętnie poznamy Twoją opinię na temat GitHub