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

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

Сократите JavaScript

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

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

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

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

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

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

Путь к исполняемому внешнему JavaScript

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

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

Скачать сжатые JavaScript

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

папка с javascript

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

Сократите JavaScript – как сделать, чтобы понравилось PageSpeed InsightsНе забудьте добавить директиву "Disallow: /js/" в robots.txt.

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

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

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

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

Хороший человек всегда нажмет на кнопку!
Комментарий > Благодарность > Ссылка на секретную страницу блога

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

Страница 1 из 11
  • Татьяна говорит:

    Рома,привет! Я что-то не очень поняла.Это надо все страницы своего блога проверять? Или это сервер PageSpeed Insights все проверит и сам покажет, что и в каком месте надо оптимизировать?

    • Роман Ваховский говорит:

      Таня, проверь главную, страницу записи и статичную страницу. Обычно этого хватает, если только ты не расставляла скрипты на разные страницы отдельно.

  • Дмитрий говорит:

    Ето ерунда этот тест если сайт работает быстро это и так видно и нечего сокращать не надо, если следовать гуглу и добиться 95% по всем позициям то сайт будет работать на 10-15 % быстрее. Только потом разжимать если пийдёться чтоб код правит не очень хорошо, это для мёртвых проектов сделал раз и порядок. Самопис в любом случае быстро работает без тестов. Ну а на wp если не грузить плагины не поможет сжатие. Любой шаблон wocommers сжимай хоть 100% будет работать медленней в 4 раза такогоже на самописе проверенно. Такчто уважаемые продолжайте тестировать гуглом сжимать картинки и прочее

Страница 1 из 11

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка тут
подписка
Рекомендую
Социальный замок
Три урока по материализации желаемого
Никакого спама

Все права защищены © 2011-2017. WordPress-book.ru

Копирование материалов разрешено только с размещением открытой обратной ссылки на источник.