Удалите неиспользуемый JavaScript

Published on

Translated to: English, Español

Неиспользуемый JavaScript может замедлить скорость загрузки вашей страницы:

  • Если JavaScript блокирует рендеринг, браузер должен загрузить, проанализировать, скомпилировать и оценить скрипт, прежде чем он сможет продолжить всю остальную работу, необходимую для рендеринга страницы.
  • Даже если JavaScript является асинхронным (т. е. не блокирует рендеринг), код во время загрузки конкурирует за пропускную способность с другими ресурсами, что значительно снижает производительность. Отправка неиспользованного кода по сети также расточительна для мобильных пользователей, у которых нет безлимитных тарифных планов.

Причины плохих результатов проверки неиспользуемого JavaScript

Lighthouse отмечает каждый файл JavaScript с более чем 20 кибибайтами неиспользуемого кода:

Скриншот проверки.
Щелкните значение в столбце URL, чтобы открыть исходный код сценария в новой вкладке.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

Как удалить неиспользуемый JavaScript

Выявите неиспользуемый JavaScript

Вкладка Coverage в Chrome DevTools предоставляет построчную разбивку неиспользуемого кода.

Класс Coverage в Puppeteer может помочь автоматизировать процесс обнаружения неиспользуемого кода и извлечения используемого кода.

Инструмент сборки для поддержки удаления неиспользуемого кода

Ознакомьтесь со следующими тестами Tooling.Report, чтобы узнать, поддерживает ли ваш сборщик проектов функции, которые упрощают удаления кода или не дают ему накапливаться.

Рекомендации по стекам

Angular

Если вы используете Angular CLI, включите карты кода в производственную сборку кода, чтобы проверить свои бандлы.

Drupal

Подумайте об удалении неиспользуемых ресурсов JavaScript и прикрепите только необходимые библиотеки Drupal к соответствующей странице или компоненту на странице. Более подробно см. в статье «Определение библиотеки».

Joomla

Подумайте о том, чтобы сократить количество (удалить или отключить) расширений Joomla, загружающих неиспользуемый JavaScript на вашу страницу.

Magento

Отключите встроенный в Magento бандлинг JavaScript.

React

Если вы не выполняете рендеринг на стороне сервера, разделите бандлы JavaScript с помощью React.lazy(). В противном случае разделите код с помощью сторонней библиотеки, такой как loadable-components.

Vue

Если вы не выполняете рендеринг на стороне сервера и используете маршрутизатор Vue, разделите бандлы для отложенной загрузки маршрутов.

WordPress

Подумайте о том, чтобы сократить количество (удалить или отключить) плагинов WordPress, загружающих неиспользуемый JavaScript на вашу страницу.

Ресурсы

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.