Сократите JavaScript – как сделать, чтобы понравилось PageSpeed Insights

Здравствуйте, уважаемые коллеги веб-мастера, читатели WordPress-book.ru.

Продолжая цикл обучающего материала по ускорению загрузки страниц сайта по рекомендациям сервиса PageSpeed Insights от Google, затронем животрепещущую тему о сокращении JavaScript.

«Сжатие кода JavaScript (сокращенно JS) позволяет сократить объем данных, чтобы ускорить загрузку, обработку и выполнение» – так говорит нам сам сервис. Ваш сайт тоже нуждается в таком улучшении? Если ответ утвердительный, тогда читайте дальше. Инструкция будет короткой и очень простой.

Ну что же, надо так надо. Выигрыш в скорости конечно небольшой, зато мы увеличим свой рейтинг в PageSpeed Insights (сокращенно PSI) и, как следствие — слегка улучшим свои позиции в ТОПе. Как говорится: «Маленькая бородавка – все сайту прибавка».

В прошлый раз в статье «Удалите из верхней части страницы код javascript и CSS» мы оптимизировали внутренние JavaScript, принадлежащие шаблону проекта или его плагинам. Рекомендация по сокращению теперь может возникнуть в основном для внешних системных скриптов, которые подгружаются со стороны чужого сервера.

Кликните по ссылке «Как исправить?» под рекомендацией PSI и чуть ниже всплывут URL всех JS, нуждающихся в сжатии. Внутренние несжатые JS будут иметь URL адрес вашего ресурса а внешние (как на первом скриншоте), соответственно, не вашего :-). Начнем с последних.

Сокращение внешних JavaScript

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

Если пути и имя скрипта в форме и под рекомендацией PSI совпадают, значит его нам и предстоит сжать. Дальше действуйте по следующей простой инструкции.

1. Скачайте уже оптимизированные JS по ссылке в самом низу страницы PageSpeed Insights.

2. На своем сервере через фтп соединение создайте папку с именем js и залейте туда скачанный сжатый сервисом скрипт.

3. В коде формы измените путь к JS на свой в папке js.

Не забудьте добавить директиву «Disallow: /js/» в robots.txt.

Сокращение внутренних JavaScript

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

Проверьте результат, наслаждайтесь выполненной работой.

P.S. Возможно, из-за врожденного косноязычия или лени я не все доступно объяснил. Поэтому, если у кого останутся вопросы, спрашивайте в комментариях.