Для того чтобы ускорить загрузку страниц и улучшить ранжирование сайта в поисковой выдаче, проводится оптимизация JavaScript. Выполнить оптимизацию можно как вручную, так и посредством специальных онлайн-сервисов.
Зачем нужна оптимизация JavaScript
Использование js-скриптов способствует тому, чтобы страница выглядела максимально привлекательной в глазах пользователей. Эти скрипты предназначены для создания всплывающих окон, динамических эффектов и множества других достаточно «тяжелых» объектов.
Большое количество подобных скриптов способствует возникновению очень серьезной проблемы – страница начинает очень долго грузиться. Иногда нужно сократить js-код (но не в ущерб дизайну страницы!). За счет этого можно ускорить процесс загрузки всей страницы.
Уменьшение размера кода JavaScript
Для уменьшения размера js-кода можно использовать онлайн-инструменты, которые обеспечивают автоматическое преобразование кода. Такие инструменты удаляют лишние строки, пробелы, ненужные комментарии и т.д. Также существуют онлайн-сервисы, предназначенные для сокращения переменных, задания им упрощенной кодировки и т.д.
Примером такого сервиса является JavaScript Compressor. Чтобы воспользоваться этим сервисом, достаточно скопировать код и вставить его в поле «Paste your code». После этого нужно нажать на кнопку «Compress».
После этого в окне «Copy» появится оптимизированный код. Дополнительно разработчик может подключить опции «Base62 encode» и «Shrink variables».
Для этого достаточно поставить галочки напротив соответствующих опций. Они предназначены для замены переменных с применением кодирования по технологии Base62.
Перед тем, как выполнить сжатие кода, желательно создать и сохранить его резервную копию. Благодаря этому, будут устранены сбои в работе сайте, которые могут возникнуть в результате некорректной оптимизации кода.
Еще один популярный онлайн-сервис разработан компанией Google. Closure Complier состоит из 2-х полей. Начальный код необходимо вставить в левое поле:
Альтернативой автоматическому сжатию посредством онлайн-сервисов может быть ручная проверка. Ее обычно используют для предотвращения возможности поломки кода в результате некорректной работы онлайн-сервисов.
Ручная проверка предусматривает выполнение следующих действий
- Обновление алгоритма загрузки js-скриптов. Для того чтобы уменьшить «вес» скриптов, их необходимо перенести из тега < head > в конце тега < body >.
- Сокращение имен переменных. Такие переменные, как var_количество_доступных_функций_для_пользователя, лучше не использовать. Такую переменную стоит заменить на var_функции.
- Упрощение формата записи. Стандартный пример: вместо таких записей, как i=i+1, необходимо использовать инкремент (i++). То же самое касается декремента.
- Сокращение математических действий. Опять же вовсе необязательно писать i=i+3. Компилятор способен понять и более короткую запись i+=3.
- Применение короткой записи условия:
Вместо такого кода:
if( age >= 18) {
var mess = "Продажа доступна";
} else {
var mess = "Продажа запрещена";
}
Стоит использовать упрощенную запись с тернарным оператором:
var mess = age >= 18 ? " Продажа доступна " : " Продажа запрещена ";
- Применение шаблонных строк для объединения переменных.
Вместо такого кода:
constant hello = 'Добрый день' + Name + ' ' + Surname + '!';
Нужно писать так:
constant hello = `Добрый день ${Name} ${Surname} !`;
В целях оптимизация js-кода в WordPress также можно использовать интегрированные плагины. Примером такого инструмента является Minify Fix. На других «движках» могут использоваться аналогичные плагины. При использовании дополнительных модулей стоит обязательно выполнить проверку корректности загрузки страниц.
Вывод
Резюмируя, стоит сказать, что оптимизация js-кода может быть эффективно выполнена как вручную, так и посредством специальных онлайн-сервисов. В любом случае в процессе оптимизации разработчику желательно постоянно проверять корректность отображения страниц сайта.
Оптимизация заключается не только в удалении пробелов и лишних строк, но и в упрощении записи кода.
Также стоит заметить, что на различных CMS для оптимизации JavaScript можно использовать специальные плагины и библиотеки.