Автор: Интернет Хостинг Центр

Ожидания пользователей от сайтов постоянно растут: они хотят мгновенной загрузки, плавного взаимодействия с ресурсом и невероятной отзывчивости. Однако зачастую именно JavaScript становится «узким местом», замедляющим работу веб-страниц. Медленная загрузка сайта может привести к потере трафика и, в конечном итоге, к уменьшению ваших доходов. В статье мы обсудим актуальные техники оптимизации JS, которые позволят вам улучшить производительность сайта и обеспечить удобство его использования.

Почему JavaScript может замедлять сайт

JavaScript — один из основополагающих языков веб-разработки, который делает сайты интерактивными и динамичными. Однако, несмотря на свои возможности, он также может стать «тормозом» для вашего сайта. Каждое условие или функция, которые браузеру посетителя необходимо обработать, увеличивают суммарное время загрузки. Рассмотрим, почему JavaScript способен ухудшить производительность веб-страниц.

  1. Синхронная загрузка JS-файлов. По умолчанию браузеры загружают JavaScript-сценарии синхронно — они приостанавливают рендеринг страницы до завершения загрузки и выполнения всех скриптов. Если JS-файл загружается из удаленного источника с низкой скоростью, это может вызвать существенные задержки при загрузке страницы.
  2. Большие размеры файлов. Чем больше JS-файл, тем больше времени потребуется для его загрузки. Если ваш сайт использует множество библиотек и фреймворков, и каждый из них добавляет свои собственные скрипты, это может заметно увеличить итоговый размер кода. Важно для мобильных пользователей, использующих медленные интернет-соединения.
  3. Неэффективный код. Код JScript может быть недостаточно эффективным по нескольким причинам — от лишнего количества циклов до излишне сложной логики обработки данных. Например, плохо написанный код, который вызывает одну и ту же функцию много раз вместо того, чтобы сохранить результат в переменной, будет расходовать ресурсы браузера и время посетителей.
  4. Неиспользуемый код. Некоторые фрагменты скриптов и библиотеки могут никогда не вызываться. Это значит, что браузер будет не только загружать неактуальные скрипты, но и выполнять их — это приведёт к затратам времени и ресурсов. Удаление невостребованных кода и библиотек может существенно повысить производительность сайта.
  5. Взаимодействие с DOM. JS активно взаимодействует с Document Object Model, когда обновляет или изменяет элементы на странице. При каждой манипуляции скрипта с DOM браузер должен перечитать CSS, перерисовать и обновить визуальные компоненты. Если ваш код слишком часто обращается к DOM или делает это неэффективно, реакции сайта замедляются.
  6. Блокировка рендеринга. JavaScript может блокировать рендеринг страницы, если он выполняется на начальных этапах загрузки — пользователь не увидит ничего, пока все скрипты не загрузятся и не будут обработаны. У пользователей может сложиться неприятное впечатление от работы с сайтом, особенно если это происходит слишком часто или надолго.
  7. Сложность асинхронного кода. Если разработчик не понимает, как правильно использовать асинхронные операции, его ошибки приведут к необходимости загрузки вспомогательных библиотек и создадут потери времени на их исправление.

Таким образом JavaScript несёт в себе риски, приводящие к замедлению загрузки и снижению производительности. Каждый разработчик должен осознанно подходить к созданию скриптов и использовать принципы optimizations. Понимание того, как от JS зависит производительность сайта, — первый шаг к созданию производительного и отзывчивого онлайн-приложения.

Почему JavaScript может замедлять сайт.
Image by vectorjuice on Freepik.

Способы оптимизации JavaScript

Рассмотрим, как именно оптимизация JavaScript может улучшить производительность и быстродействие вашего сайта. Существует несколько scripting методов, у каждого есть свои преимущества и предпочтительные области применения.

Минификация и объединение JS-файлов

Это начальные шаги оптимизации файлов со скриптами.

Минификация — удаление лишних пробелов, переносов строк, комментариев и прочих ненужных символов из JS-кода. Минимизированный код занимает гораздо меньше места — это уменьшает объемы данных, передаваемых от сервера к клиенту и позволяет быстрее загружать скрипты.

Пример минификации: 

// Исходный код
function add(a, b) {
return a + b;
}
console.log(add(5, 3));

Минифицированный код будет выглядеть так:

function add(a,b){return a+b}console.log(add(5,3));

Объединение нескольких JS-файлов в один уменьшает число HTTP-запросов, используемых для загрузки страницы. Каждый запрос к серверу требует времени для выполнения — чем меньше запросов, тем быстрее загружается веб-страница. Объединяя файлы, можно уменьшить время отклика сервера и улучшить пользовательский опыт.

Примеры инструментов для минификации

  1. UglifyJS — может минифицировать ES5 и ES6+ код и имеет дополнительные возможности — например, возможность удаления неиспользуемого кода и оптимизации функций. Предоставляет различные настройки управления уровнем optimization, в т. ч. сокращение имен переменных и функций.
  2. Terser — основан на UglifyJS, но с лучшей поддержкой ES6+ кода. Поддерживает функции tree shaking и восстановления исходного кода для отладки. Подходит для проектов, использующих современный JS.
  3. Google Closure Compiler — инструмент для минификации, оптимизации и проверки JS-кода. Не только минифицирует код, но и анализирует его на наличие ошибок и возможных проблем с производительностью. Хорошо подходит для крупных проектов.

Выбор оптимизатора зависит от ваших целей, размера проекта и используемых технологий.

Асинхронная загрузка и отложенная загрузка (async и defer)

Следующий метод — это асинхронная и отложенная загрузка скриптов. При установке атрибутов async или defer браузер может продолжать загружать другие элементы веб-страницы, не дожидаясь завершения обработки JavaScript.

С установленным атрибутом async скрипты загружаются асинхронно — браузер будет загружать JS файлы параллельно с другими ресурсами страницы. После завершения загрузки скрипт выполняется немедленно, что даёт возможность значительно ускорить рендеринг.

Пример использования async:

<script src="script.js" async></script>

С атрибутом defer скрипты также загружаются асинхронно, но с тем отличием, что выполнение кода происходит только после полной загрузки HTML-документа (отложенная загрузка). Это позволяет избежать блокировки рендеринга и в итоге улучшить производительность.

Пример использования defer:

<script src="script.js" defer></script>

Ленивая загрузка

При ленивой загрузке (lazy loading) ресурсы (например, мультимедиа-контент или дополнительные скрипты) загрузятся только тогда, когда они станут видимыми для посетителя. Например, если на странице есть множество изображений, невидимых при первоначальном контакте — они загрузятся только по мере прокрутки страницы вниз. Это особенно актуально для веб-страниц со значительным количеством контента.

Для реализации ленивой загрузки можно применить атрибут loading="lazy" для изображений и библиотек, таких как Intersection Observer API, следящих за тем, когда элемент попадает в область видимости.

Разделение кода JavaScript

Оптимизировать код можно, разделив его на модули, загружаемые по необходимости (code splitting). Суть метода — вместо загрузки сразу всего JavaScript-кода загружаются только те части, которые действительно нужны конкретному пользователю в данный момент.

Инструменты для разделения кода

Для разделения возможно использовать:

  1. Webpack — позволяет автоматически разбивать код на модули и загружать их по мере необходимости.
  2. Rollup — подходит для библиотек, позволяет создавать модули с минимальными размерами.

Удаление неиспользуемого кода (tree shaking)

Tree shaking — удаление неиспользуемого кода из JavaScript-файлов. Актуально для больших библиотек и фреймворков, где могут находиться функции, фактически не применяемые в вашем проекте. Удаляя неиспользуемые фрагменты, вы уменьшаете объём загружаемого кода и способствуете повышению производительности приложения.

Инструменты для автоматической очистки кода

  • Webpack — с плагинами для tree shaking;
  • Rollup;
  • Parcel — для быстрого прототипирования и небольших проектов;
  • Babel (в комбинации с Webpack или Rollup). Хотя Babel сам по себе не поддерживает tree shaking, его можно интегрировать с Webpack или Rollup, чтобы улучшить оптимизацию и удалить неактуальный код;
  • ESBuild. Поддерживает tree shaking «из коробки» и ES6 модули.

Использование CDN для загрузки JavaScript

Сеть доставки контента (CDN) — система распределенных серверов, которая хранит копии файлов, в том числе JS-библиотеки и фреймворки, и даёт возможность получить их с ближайшего сервера. Использование CDN значительно снижает время загрузки.

Примеры CDN для популярных JavaScript-библиотек

  • Google Hosted Libraries — предоставляет доступ к наиболее распространенным JavaScript-библиотекам;
  • Яндекс CDN (RU);
  • jQuery CDN ;
  • Microsoft CDN;
  • jsDelivr — бесплатный CDN для npm и GitHub.

Использование этих сервисов значительно ускоряет загрузку JavaScript-файлов.

Кэширование JavaScript

Сохраняет копии JS-файлов на стороне клиента (в браузере пользователя). Пользователям не нужно повторно загружать файлы при каждом посещении вашего сайта. Корректная настройка кэширования может существенно уменьшить время загрузки ваших скриптов.

Заголовки HTTP (например Cache-Control) содержат указания, как долго кэшировать файлы в браузере. Так, вы можете установить 30-дневное кэширование статических файлов и 1-дневное кэширование динамических.

Онлайн-сервисы для анализа производительности сайта

Для успешной оптимизации важно периодически контролировать производительность вашего сайта. Существуют онлайн-сервисы, способные в этом помочь.

Lighthouse

Это бесплатный инструмент с открытым исходным кодом от Google. Применяя его, можно оценить сайт по следующим основным показателям:

  1. Performance — производительность. Эту оценку определяют продолжительность блокировки, отрисовка стилей, загрузка интерактивных элементов, шрифтов и контента.
  2. Best Practices — лучшие практики. Оценивает безопасность сайта и использование современных стандартов веб-разработки. Оценка определяется такими факторами, как использование на сайте HTTPS, актуальных API, правильной кодировки, и другими.
  3. Accessibility — доступность. Проверяет, могут ли все пользователи получать доступ к контенту и свободно ориентироваться на сайте. Эта оценка зависит от понятности и воспринимаемости контента, возможности управлять интерфейсом и перемещаться по содержимому без помощи мыши.
  4. SEO — оценка соответствия страниц рекомендациям Google по поисковой оптимизации.

Каждому параметру выставляется оценка по 100-балльной шкале: чем выше, тем лучше. Диапазонам оценок присваивается свой цвет:

  • зелёный — 90 – 100 баллов, с сайтом всё хорошо;
  • оранжевый — 50 – 89 баллов, с сайтом всё хорошо, но можно сделать ещё лучше;
  • красный — менее 49 баллов, над производительностью надо поработать.
Lighthouse — результаты проверки.
Lighthouse — результаты проверки.

Lighthouse не только даёт оценку по каждому из четырёх критериев, но и предлагает конкретные рекомендации: что возможно улучшить.

PageSpeed Insights

Ещё один бесплатный инструмент от Google, который анализирует веб-страницы и подготавливает рекомендации. Он применяет те же основные показатели производительности, что и Lighthouse, и предоставляет:

  1. Общую оценку производительности мобильных и десктопных устройств.
  2. Метрики производительности.
  3. Список проблем.
  4. Рекомендации по оптимизации.

PageSpeed Insights возможно использовать как онлайн-сервис или интегрировать с другими инструментами, например с Google Search Console.

Отчёт PageSpeed Insights
Отчёт PageSpeed Insights.

GTmetrix

Формирует подробный отчет, включающий:

  1. Общую оценку производительности (от A до F).
  2. Анализ производительности по этапам загрузки страницы.
  3. Водопад запросов, показывающий время загрузки каждого ресурса.
  4. Проблемы с подробными объяснениями.
  5. Рекомендации по оптимизации.

GTmetrix имеет бесплатный и платный тарифные планы с дополнительными функциями (мониторинг performance, сравнение с конкурентами и др.).

На момент подготовки материала был недоступен в России.

Отчёт GTmetrix
Отчёт GTmetrix.

Использовать перечисленные сервисы очень просто — введите URL своего сайта и нажмите на кнопку «Анализировать». Сервисы проанализируют ваш сайт и предоставят подробный отчет о производительности. Обратите внимание на любые проблемы, связанные с JS, а затем следуйте рекомендациям по оптимизации.

Заключение

Оптимизация JavaScript — это многоаспектный процесс, который требует комплексного подхода и внимательного анализа вашего кода. Используя вышеописанные методы и советы, вы можете значительно увеличить производительность вашего сайта, сократить время загрузки и улучшить общий пользовательский опыт. Каждый из этих методов является значимой частью процедуры оптимизации JavaScript и поможет создать быстрые и отзывчивые веб-приложения.