23078 24
How-to Читать 5 минут 24 апреля 2019

Как оптимизировать код 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 — набор инструментов для поискового маркетинга!

Находите ключевые фразы и площадки для обратных ссылок, анализируйте SEO-стратегии конкурентов, ежедневно отслеживайте позиции в выдаче, исправляйте SEO-ошибки и управляйте SEO-командами.

Набор инструментов для экономии времени на выполнение SEO-задач.

7 дней бесплатно

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

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

Используйте лучшие SEO инструменты

Подбор ключевых слов

Поиск ключевых слов – раскройте неиспользованный потенциал вашего сайта

Возможности Serpstat

Возможности Serpstat – комплексное решение для эффективного продвижения вебсайтов

Кластеризация ключевых слов

Кластеризация ключевых слов автоматически обработает до 50 000 запросов в несколько кликов

SEO аудит страницы

Проанализируйте уровень оптимизации документа используя SЕО аудит страницы

Поделитесь статьей с вашими друзьями

Вы уверены?

Знакомство с Serpstat

Узнайте об основных возможностях сервиса удобным способом!

Отправьте заявку и наш специалист предложит вам варианты обучения: персональную демонстрацию, пробный период или материалы для самостоятельного изучения и повышения экспертизы. Все для комфортного начала работы с Serpstat.

Имя

Email

Телефон

Будем рады вашему комментарию
Я принимаю условия Политики конфиденциальности.

Спасибо, мы сохранили ваши новые настройки рассылок.

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

Отменить
Открыть чат технической поддержки
mail pocket flipboard Messenger telegramm