Пошаговая инструкция оптимизаций скорости загрузки сайта на WordPress по Google PageSpeed Insights

Увеличение скорости загрузки страницы по Google PageInsight на 100%

Google PageSpeed Insights — это бесплатный онлайн-инструмент от Google, который предоставляет рекомендации по увеличению скорости загрузки сайта в браузере посетителя.

Принцип работы сервиса:

  1. Анализ структуры html-страницы по указанному адресу
  2. Отображение элементов, которые замедляют прорисовку страницы
  3. Рекомендации по устранению проблем.

Чем меньше время между кликом по ссылке (переход на ваш сайт) и моментом полной загрузки контента, тем больше вероятность того, что посетителей станет вашем клиентом и не закроет вкладку наблюдая белый экран.
Мы не можем утверждать, что 100% показатель влияет на ранжированность сайта в поиске Google, но то, что это прямо или косвенно влияет на конверсию сайта — это факт.

Сервис для проверки скорости загрузки страницы:

  • https://developers.google.com/speed/ pagespeed/insights

Сервис для проверки мобильной версии сайта:

  • https://www.google.com/webmasters/tools/ mobile-friendly

Оптимизация изображений

Для увеличения скорости загрузки html-страницы необходимо оптимизировать изображения, так как правильный формат и сжатие позволяет значительно сократить общий объем.

Ссылки на изображения, которые используются на сайте, могут находится в тегах <img>  (например: карточки товаров, баннеры и т.д.), а также в файлах CSS (файл стилей) и JS (скрипты).
Для оптимизации первой группы можно использовать готовый плагин WP Smush, для второй — онлайн сервис Tinypng.com

Подробнее рассмотрим каждый из них.

Плагин WP-Smush

Оптимизация изображений
Скачать плагин WP-Smush можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/wp-smushit/

Установка и настройка плагина WP-Smush

  1. Перед установкой рекомендуется проверить совместимость плагина с вашей версией WordPress
  2. Установить плагин через админ.панель (Админ.панель — Плагины — Добавить новый — вбить в поиск WP-Smush и нажать скачать) или загрузить исходные файлы через ftp в папку plugins.
  3. Перейти в настройки (Settings) и кликнуть Check Images.

Онлайн-сервис Tinypng

Онлайн-сервис Tinypng
Сервис позволяет сжимать изображения в формате PNG и JPG без видимой потери качества. Это значит, что соблюдается правильный баланс между качеством изображений и ее размером.

Чтобы воспользоваться сервисом не требуется регистрация. Все что нужно сделать — это загрузить на сайт изображения и через несколько минут скачать сжатые картинки по ссылке. Максимально допустимый размер изображения — 5мб, количество картинок для одной загрузки — 20.

Обфускация HTML, Javascript, CSS

Обфускация — это процесс, в результате которого код программы приобретает трудный для анализа вид, например запись кода в одну строку.

В нашем случае обфускация — это процесс сжатия статических файлов (html, css, javascript), с целью увеличения скорости загрузки страницы.

 

Для сайтов на базе CMS WordPress существует множество готовых решений, например плагин Autoptimize

Плагин для сжатия CSS и JS файлов

Плагин Autoptimize позволяет:

  •  сжать файлы javascript, css;
  • объединить все стили в один CSS файл;
  • объединить js-файлы и встроенные скрипты в один файл, тем самым уменьшить количество запросов на сервер.

Скачать плагин Autoptimize можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/autoptimize/

Посмотреть результат внедрения всех рекомендаций можно в кейсе «Разработка промо-сайта и запуск контекстной рекламы для культурно-развлекательного комплекса Навруз»

Установка и настройка плагина Autoptimize

  1. Установить плагин через админ.панель (Админ.панель — Плагины — Добавить новый — вбить в поиск Autoptimize и нажать скачать) или загрузить исходные файлы через ftp в папку plugins.
  2. Перейти в настройки
  3. Выбираем пункты, которые нужно оптимизировать

Настройка плагина Autoptimize

Удаление кода JavaScript и CSS, блокирующего и замедляющего отображение верхней части страницы

Мы можем это сделать в настройках ранее установленного плагина Autoptimize:

  • В разделе Опции JavaScript снять галочку “Force JavaScript in?”

Удаление кода JavaScript и CSS, блокирующего и замедляющего отображение верхней части страницы

  • В разделе Опции CSS выбрать “Inline all CSS?”

Удаление кода JavaScript и CSS, блокирующего и замедляющего отображение верхней части страницы

Использование кеша браузера

Благодаря кешированию пользователи, повторно посещающие ваш сайт, тратят меньше времени на загрузку страниц. Заголовки кеширования должны применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них (например, изображениям). Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (мультимедийное содержание, файлы PDF и т. д.). Обычно код HTML не является статическим ресурсом и по умолчанию не считается кешируемым.

Если указывать в заголовках HTTP дату или срок действия статических ресурсов, браузер будет загружать уже полученные ранее ресурсы с локального диска, а не из Интернета.

Плагин Hyper Cache

Плагин Hyper Cache
Скачать плагин Hyper Cache можно на официальном сайте WordPress по ссылке: https://uk.wordpress.org/plugins/hyper-cache/

Hyper Cache сохраняет уже готовый, сформированный документ в виде статичного HTML файла страницы. При повторном запросе этой страницы другим пользователем или обновлении, плагин показывает сохраненную в кэше версию, не обращаясь за информацией к базе данных и не заставляя WordPress выполнять php скрипты.

Установка и настройка плагина Hyper Cache

  • Установить плагин через админ.панель (Админ.панель — Плагины — Добавить новый — вбить в поиск Hyper Cache и нажать скачать) или загрузить исходные файлы через ftp в папку plugins.
  • Откройте расположенный в корне сайта wp-config.php добавьте нужный код define(‘WP_CACHE’, true); до этого элемента:
    if ( !defined('ABSPATH') )
    	define('ABSPATH', dirname(__FILE__) . '/');
    require_once(ABSPATH . 'wp-settings.php');
    
  • В разделе Настройки переходим в Hyper Cache
  • Вкладка Главные

Главные настройки плагина Hyper Cache
Disable translations — позволяет отключить встроенный переводчик, если поставите галочку. В этом случае весь текст плагина должен отображаться в оригинале на английском.

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

Включить сжатие — включает сжатие данных при передаче информации.

Enable on-the-fly compression — включает сжатие «на лету» для страниц, которых нет в кэше.
Можно настроить обновление кэша последних записей в том случае, если обновлена главная. Для этого в «Когда обновлена домашняя страница, обновятся остальные.» укажите количество постов, которые должны меняться.

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

Папка кэша — позволяет сменить стандартную папку, используемую плагином для хранения данных на свою.
Далее эта функция будет выполняться через — включает опцию автоматической очистки кэша от старых неиспользуемых (несуществующих) материалов.
Разрешение кеширования браузерами — разрешает браузерам кэшировать данные с сайта на пользовательской стороне (на компьютере посетителя). Указывается время актуальности данных.

HTTPS – эта настройка нужна в том случае, если ваш блог использует соответствующий протокол. По умолчанию устанавливается хранение раздельного кэша для http и https протоколов.

Служит ботам со страницами с закончившимся сроком действия — вы можете выбрать – показывать данные с истекшим сроком годности из кэша или отдавать обычную страницу WordPress.

  • Вкладка Исключения

Исключения настройки плагина Hyper Cache
Вы можете выбрать, какие страницы кэшировать не следует. Можно исключать как конкретные, предложенные самим плагином страницы (главная, ошибка 404, лента комментариев), так и собственные — просто укажите URL, и Hyper Cache не будет кэшировать эту страницу.

  • Вкладка Мобильный

Настройки для мобильной версии
Для начала необходимо указать плагину, какой посетитель будет считаться пришедшим с мобильного устройства. Для этого используем тот же список мобильных агентов, что мы указывали на вкладке исключения (если вы рассчитывали на такие устройства). Если никаких особых указаний для мобильного трафика вы не планируете – оставляйте поле пустым и все.

Теперь выбираем режим работы, там есть 3 варианта:

  1. Использовать стандартный кэш – это вариант, при котором никакой разницы между пользователями разных устройств не будет – все получат те же самые страницы.
  2. Кэшировать отдельно – позволяет пользователям с мобильными user-agent выдавать кэш с использованием темы оформления отличной от основной (для пользователей ПК показываете обычный шаблон, для мобильных другой – облегченный) — получается 2 разных кэша.
  3. Не кэшировать страницу – плагин вмешиваться в работу сайта, при заходе мобильных пользователей, не будет.

Если в режиме работы был выбран вариант с раздельным кэшем, то во вкладке мобильная тема необходимо указать какая тема должна применяться для мобильного трафика (из выпадающего списка).

Настройка кеширования на виртуальном сервере

Так как, в нашем случае, есть возможность настроить кеширование на сервере:

  • Нужно зайти в Настройка сайта
  • В поле Статические файлы указать список расширений статических файлов
  • В поле Кеширование выбрать время кеширования файлов
  • Сохранить настройки

А если у Вас нет настроек кеширования на виртуальном сервере, то нужно обратиться в Техническую поддержку сервера, или попытаться настроить самому в файле .htaccess.

 

    • Игорь Владимирович

      Спасибо, большинство уже сделал, но новый плаг все же открыл для себя — Autoptimize.

  • Спасибо, большинство уже сделал, но новый плаг все же открыл для себя — Autoptimize.

Акция для новых клиентов

Закажи разработку Landing page "под ключ" и получи скидку 50% на контекстную рекламу

Получить бесплатную консультацию
Присоединяйся к нам в соц.сетях
Интересные статьи по теме