Поймите концепцию компонента Script Next.js, который предоставляет встроенное решение для оптимизации загрузки сторонних скриптов.
Около 45% запросов с веб-сайтов, обслуживаемых на мобильных устройствах и компьютерах, являются сторонними запросами, из которых 33% являются скриптами . Размер, задержка и загрузка сторонних скриптов могут существенно повлиять на производительность сайта. Компонент Next.js Script поставляется с встроенными лучшими практиками и значениями по умолчанию, чтобы помочь разработчикам внедрять сторонние скрипты в свои приложения, устраняя потенциальные проблемы производительности из коробки.
Сторонние скрипты и их влияние на производительность
Сторонние скрипты позволяют веб-разработчикам использовать существующие решения для внедрения общих функций и сокращения времени разработки. Но создатели этих скриптов обычно не заинтересованы в том, чтобы учитывать влияние производительности на потребляющий веб-сайт. Эти скрипты также являются черным ящиком для разработчиков, которые их используют.
Скрипты составляют значительное количество сторонних байтов, загружаемых веб-сайтами по разным категориям сторонних запросов. По умолчанию браузер отдает приоритет скриптам на основе того, где они находятся в документе, что может задержать обнаружение или выполнение скриптов, критически важных для пользовательского опыта.
Сторонние библиотеки, необходимые для макета, должны быть загружены заранее для рендеринга страницы. Сторонние библиотеки, которые не требуются для начального рендеринга, должны быть отложены, чтобы они не блокировали другую обработку в основном потоке. Lighthouse имеет два аудита для пометки скриптов, блокирующих рендеринг или блокирующих основной поток.