Мы используем файлы cookie для обеспечения работоспособности сервиса, улучшения навигации и маркетинговых активностей Serpstat. Нажимая "Принять и продолжить", вы соглашаетесь с нашей Политика конфиденциальности

Сообщить об ошибке

Отменить
15900 12
How-to Читать 5 минут

Как оптимизировать код JavaScript для ускорения загрузки сайта

Как сократить Javascript код
АУДИТ САЙТА — СКОРОСТЬ ЗАГРУЗКИ
Инструкцию одобрил
Front End Developer в Serpstat
Оптимизация JavaScript способствует ускорению загрузки страниц и улучшает ранжирование сайта поисковыми системами. Уменьшить размер скриптов можно вручную либо с помощью онлайн-сервисов.

Почему важно оптимизировать JavaScript

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

Как уменьшить размер кода JavaScript

Используйте онлайн-инструменты, которые автоматически преобразуют весь код. В нем удаляются пробелы, комментарии, лишние строки. Некоторые сервисы сокращают переменные, задают им упрощенную кодировку. Рассмотрим на примере сервис JavaScript Compressor. Вставьте код в верхнее поле и нажмите на кнопку «Compress»:
JavaScript Compressor онлайн
После нажатия кнопки в нижнем поле появится уменьшенный в размере код. Если включить функции Base 62 encode и Shrink variables, кроме удаления пробелов с комментариями будут меняться переменные с использованием кодирования по технологии Base 62.

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

Еще одним популярным инструментом сокращения кода скриптов считается Closure Complier от Google. Интерфейс сервиса состоит из двух вертикальных полей. Вставлять код JS нужно в левое поле:
Онлайн сжатие скриптов Closure Complier
В качестве альтернативы автоматического сжатия или после него можно использовать ручную проверку. Например, удалить пробелы и комментарии можно через онлайн-сервис, а все остальные манипуляции выполнить вручную во избежание поломки кода. Вот что можно сделать:
1
Обновить алгоритм загрузки скриптов. Чтобы в итоге код весил меньше, а грузился быстрее. Желательно перенести все скрипты из тега <head> в конец тега <body> для ускорения загрузки страницы.
2
Сократить имена переменных. Например, var здесь_расположены_все_записи_для_сайта замените на var архив.
3
Упростить формат записи. Например, при уменьшении числового значения на единицу, заменить строку на «--». Аналогично для плюса:
Было: i=i+1;
      j=j-1;
Стало: i++;
       j--;
4
Сократить переменные с математическими действиями. Например, вместо i=i+5 можно использовать i+=5, а вместо j=j*7 написать j*=7. Аналогично со всеми действиями.
5
Применить короткую версию условия. Было:
if( age >= 21) {
      var message = "Разрешено";
    } else {
      var message = "Запрещено";
    }
Стало:
var message = age >= 21 ? "Разрешено" : "Запрещено";
6
Использовать шаблонные строки ${} для объединения переменных вместо «+». Было:
constant welcome = 'Здравствуйте' + Name + ' ' + Surname + '!';
Стало:
constant welcome = `Здравствуйте ${Name} ${Surname} !`;
При этом важно учитывать, что шаблонные строки нового стандарта JavaScript могут не работать на старых версиях.
7
Оптимизация JavaScript в WordPress может быть проведена с помощью встроенных плагинов. Например, Minify Fix. Для других CMS существуют аналогичные модули и расширения. При включении сжатия важно проверять корректность загрузки страниц.

Заключение

Оптимизировать JavaScript с целью сокращения его размера можно вручную и с помощью онлайн-инструментов. Каждая манипуляция по сжатию должна сопровождаться параллельной проверкой страниц сайта.

После удаления пробелов, комментариев, лишних строк замените обычные переменные на их сокращенные версии. Оптимизация кода JS для сайтов на WordРress и других СMS может проводиться с помощью встроенных плагинов.

Ручная оптимизация JavaScript дает не такой большой эффект, как подключение дополнительных плагинов. Для более эффективного сжатия лучше использовать библиотеки Gulp, Webpack и другие.
Эта статья — часть модуля «Аудит сайта» в Serpstat
«Аудит сайта» в Serpstat
Аудит всего сайта или отдельной страницы в один клик. Полный список ошибок, отсортированный по критичности, пути их устранения и рекомендации. Любая периодичность проверки и автоматическая рассылка отчетов на почту.
Запустить аудит сайта

Сэкономьте время на изучении Serpstat

Хотите получить персональную демонстрацию сервиса, тестовый период или эффективные кейсы использования Serpstat?

Оставьте заявку и мы свяжемся с вами ;)

Оцените статью по 5-бальной шкале

2.54 из 5 на основе 22 оценок
Нашли ошибку? Выделите её и нажмите Ctrl + Enter, чтобы сообщить нам.