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

Нажав кнопку "Принять и продолжить", вы соглашаетесь с Политики конфиденциальности

Принять и продолжить

Закрыть

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

Отменить
2710 26
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

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

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

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

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

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

Войти Регистрация

Вы исчерпали лимит запросов.

Или email
Забыли пароль?
Или email
Back To Login

Не волнуйтесь! Напишите свой электронный адрес и мы пришлем вам новый пароль.

Вы уверены?

Awesome!

To complete your registration you need to enter your phone number

Назад

Мы отправили код подтверждения на ваш номер телефона

Your phone Resend code Осталось запросов

Что-то пошло не так.

Свяжитесь с нашей службой поддержки
Или подтвердите регистрацию с помощью Телеграм бота Перейдите по этой ссылке
Выберите один из проектов

Знакомство с сервисом

Ознакомьтесь с основными возможностями Serpstat удобным способом!

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

Имя

Email

Телефон

Будем рады вашему комментарию
Увеличить лимиты

Улучшить тариф

Экспорт недоступен для вашего тарифного плана. Вам необходимо улучшить свой тариф до Lite или выше, чтобы получить доступ к инструменту Подробнее

Зарегистрироваться

Спасибо, мы с вами свяжемся в ближайшее время

Пригласить
Просмотр Редактирование

E-mail
Сообщение
необязательно
E-mail
Сообщение
необязательно

У вас закончились лимиты

Вы достигли лимита на количество созданных проектов и больше не можете создавать новые проекты. Увеличьте лимиты или удалите существующие проекты.

Я хочу больше лимитов