Оптимизация сторонних скриптов
Многие приложения используют сторонний JavaScript для включения различных функций, таких как аналитика, реклама и виджеты поддержки клиентов. Однако встраивание кода от сторонних разработчиков может задержать отображение содержимого страницы и негативно повлиять на производительность, если загрузка происходит слишком рано.
Next.js предоставляет встроенный компонент Script, который оптимизирует загрузку любых сторонних скриптов, позволяя разработчикам самостоятельно решать, когда их загружать и выполнять.
Использование компонента Script
При использовании обычного HTML внешние скрипты нужно вручную добавлять в next/head:
import Head from 'next/head';
function IndexPage() {
return (
<div>
<Head>
<script src="https://www.googletagmanager.com/gtag/js?id=123" />
</Head>
</div>
);
}С компонентом Script в Next.js вы можете добавить его в любое место компонента без необходимости использовать next/head:
import Script from 'next/script';
function IndexPage() {
return (
<div>
<Script
strategy="afterInteractive"
src="https://www.googletagmanager.com/gtag/js?id=123"
/>
</div>
);
}Компонент Script предоставляет свойство strategy, которое позволяет определить оптимальное время для загрузки и выполнения скрипта. Чтобы не влиять негативно на показатель Largest Contentful Paint (LCP), большинство сторонних скриптов следует загружать после полной загрузки содержимого страницы — либо сразу после того, как страница становится интерактивной (strategy="afterInteractive"), либо в период простоя браузера (strategy="lazyOnload").
Дополнительные материалы
- Next.js: Компонент Script
- Next.js: API-справочник для
next/script