PageSpeed Insights: делаем 100/100 баллов на WordPress

Быстрый сайт – это посещаемый сайт. А значит продающий.
Рассказываю о том, как разогнать сайт на WordPress на хостинге Timeweb!

Исследования показывают, что 30% пользователей ждут загрузки сайта не более 6-10 секунд, затем возвращаются в поиск.
Ниже я расскажу, как добиться 100 из 100 баллов в Google PageSpeed Insights в CMS WordPress на хостинге Timeweb.

Что имеем

  • Чистая установленная CMS WordPress 4.8.1
  • Визуальная тема Optimizer PRO
  • Установленный плагин Akismet
  • PHP 5.3 и MySQL 5.5
  • SSL-сертификат Let’s Encrypt

Изначальные значения

Изначально при проверке я получил 78/100 баллов для компьютера. И 86/100 баллов для мобильных устройств.
При пинге в 15 мс и отключенных расширениях Chrome полная загрузка сайта занимает 85-110 мс.
Не критично, но надо лучше.

В моём случае PageSpeed Insights ругается на CSS файл, предлагая отложить его загрузку:
https://bkayne.ru/wp-content/themes/optimizer_pro/style.css

Цитирую:
Все содержание верхней части страницы отображается только после загрузки указанных далее ресурсов. Попробуйте отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML.

Едем дальше. В теме Optimizer Pro используется изображение высокого качества.
PageSpeed Insights предлагает его оптимизировать, уменьшив размер на 38%.
Также рекомендуется сокращение CSS, JS и HTML файлов. Приступаем.

ОПТИМИЗАЦИЯ

Самый простой и важный шаг – изменить версию PHP на современную – в нашем случае PHP 7.0.
Панель управления хостинга Timeweb даёт возможность легко и быстро переключить версию.

Проверим  актуальные значения с помощью инструментов разработчика Google Chrome.

Результаты очередной раз впечатляют. Мы получили рост скорости загрузки с 85-110 мс до 39-50 мс.
Без какой-либо дополнительной оптимизации. Пара кликов и сайт загружается быстрее.

Двигаемся дальше. Следующим шагом в поверхностной оптимизации станет включение и настройка кэширования.

Это большой плюс, когда на одну страницу сайта за одну минуту хотят зайти, ну скажем, 100 человек. Не нужно каждый раз нагружать Apache выполнением динамического запроса. У вас уже будет сгенерированный HTML-файл среди файлов сайта, который веб-сервер nginx влёт отдаст пользователю. Это существенно снижает нагрузку и увеличивает скорость загрузки страницы для конечного пользователя.

Наиболее эффективным и простым плагином для кэширования является WP SuperCache.
Установить его можно из раздела “Плагины” внутри самого WordPress.

После установки его достаточно будет включить из раздела “Настройки”.

Скорость загрузки вновь увеличена! Конечному пользователю отдаётся подготовленный HTML-файл при обращении к странице. Смотрим в инструменты разработчика, там появилась приятная цифра в 20 мс (т.е. 1/50 сек)

Теперь, когда наш сайт открывается супер-быстро, займёмся получением желаемых 100/100 баллов в PageSpeed. Стоит заметить, что получать 100/100 не обязательно, не нужно быть фанатиками. Достижение значения 85+ баллов для компьютеров и мобильных будет достаточным для большинства проектов.

Начнём с оптимизации HTML, CSS и CSS. Устанавливаем плагин Autoptimize.
Ниже скрин с настройками, которые идеально подходят для чистой версии WordPress.

Также я ужал изображение из темы в графическом редакторе PaintNet и загрузил новое.
Это было одной из рекомендаций от сервиса.

Проверяем скорость загрузки сайта и значения в Google PageSpeed Insights.
… Идеально!

Сайт всё еще загружается быстро, имеет 100/100 баллов и готов к размещению новых статей!
В будущем я поставлю плагин для оптимизации изображений налету при загрузке в систему.

Надеюсь, мои рекомендации помогли вам достичь желаемого результата. Успехов!

Administrator

Leave a Reply Text

Your email address will not be published. Required fields are marked *