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