Оптимизация сайта на WordPress для Google PageSpeed

Оптимизация сайта на WordPress для Google PageSpeed

Скорость загрузки сайта - это один из факторов ранжирования поисковых систем. И чем быстрее загружается сайт - тем лучше.

Проверить, насколько быстр ваш сайт, можно с помощью сервиса Google PageSpeed Insights.

Хорошая скорость загрузки - если сайт находится в зеленой зоне.

Как улучшить показатели Google PageSpeed

Ошибка "Отложите загрузку скрытых изображений"

Чтобы уменьшить время до начала взаимодействия с сайтом, Google рекомендует использовать принцип lazy loading для скрытых изображений, то есть загружать их не сразу, а по мере прокрутки страницы. 

Установите плагин Lazy Load Optimizer, который добавляет ленивую загрузку для изображений WordPress, а также для изображений товаров и категорий товаров WooCommerce.

Ошибка - "Задайте правила эффективного использования кеша для статических объектов"

Часто возникает ошибка "Задайте правила эффективного использования кеша для статических объектов".

Для исправления этой ошибки нужно вставить следующий код в файл .htaccess (находится в корневой директории WordPress, еще к нему можно получить доступ с помощью плагина Yoast SEO):

# BEGIN EXPIRES 
<IfModule mod_expires.c>
ExpiresActive On 
ExpiresDefault "access plus 6 month"
ExpiresByType text/css "access plus 6 month" 
ExpiresByType text/plain "access plus 6 month"
ExpiresByType image/gif "access plus 6 month"
ExpiresByType image/png "access plus 6 month" 
ExpiresByType image/jpeg "access plus 6 month" 
ExpiresByType application/x-javascript "access plus 6 month"
ExpiresByType application/javascript "access plus 6 month"
ExpiresByType application/x-icon "access plus 6 month" 
</IfModule>  
# END EXPIRES

 

Если у вас стоит Яндекс.Метрика, или Google Analytics - то исправить данную ошибку не получится. Но ничего страшного, так как данные сервисы не тормозят работу вашего сайта.

Ошибки - "Уменьшите размер кода CSS", "Уменьшите размер кода JavaScript", "Сократите глубину вложенности критических запросов",  "Устраните ресурсы, блокирующие отображение"

Эти ошибки поможет исправить плагин Autoptimize. В настройках включаем:

  • Оптимизировать код HTML
  • Оптимизировать код JavaScript
  • Оптимизировать код CSS

Для исправления ошибки "Устраните ресурсы, блокирующие отображение" нужно поставить галочку в пункте Встраивать все CSS:

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

Таким образом весь css встроится в начало страницы. Что касается js  - плагин собирает все js-файлы в один файл, и загружает его в конце документа. То есть js больше не будет мешать загрузке сайта, что ускорит отображение страницы для пользователя.

Ошибка "Сократите глубину вложенности критических запросов" может возникнуть, если на сайте используются шрифты Google fonts.  Перейдите на вкладку "Дополнительно" данного плагина.  Там нужно установить настройку для Гугл шрифтов - Combine and preload in head (fonts load late, but are not render-blocking).

Ошибка - "Настройте эффективную кодировку изображений"

Чтобы оптимизировать изображения, установите плагин WP Smush.  Этот плагин оптимизирует все изображения, загруженные в Медиа-библиотеку WordPress.

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

Хороший сайт, на котором можно оптимизировать картинки онлайн - https://tinypng.com/

Ошибка "Сократите время ответа сервера (время до получения первого байта)"

Чаще всего с ней помогает бороться плагин WP Super Cashe. После установки необходимо в настройках плагина включить кеширование и включить опцию - "Сжимать файлы кэша чтобы ускорить работу":

Настройки Wp Super Cashe

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

Ошибка "Включите сжатие текста"

Добавьте в файл .htaccess:

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Дополнительно

Cниппет, который добавит асинхронную загрузку для скриптов, подключенных через wp_enqueue_script():

add_filter('script_loader_tag', 'add_async_attribute', 10, 2);

function add_async_attribute($tag, $handle)
{
    if(!is_admin()){
        if ('jquery-core' == $handle) {
            return $tag;
        }
        return str_replace(' src', ' defer src', $tag);
    }else{
        return $tag;
    }



}

Обновлено: 01.05.2019

Вам помогла эта статья? Оцените!
(37 оценок, среднее: 4,16 из 5)
Загрузка...


Комментариев: 10

  • Здравствуйте. А я блин, от многого избавится не могу. Плагин Autoptimize не работает, как было куча скриптов, так и есть. Но вопрос в другом! Как мобильную версию оптимизировать? На десктопе 86% добился, а вот на мобильном 71% максимально. Может кто подскажет?

    • Плагин Autoptimize может не работать из-за неправильной конфигурации хостинга, или устаревшей версии PHP. Попробуйте поставить версию PHP 7.0

  • Не получается оптимизировать данными способами, может кто что подскажет?

    • Статья обновлена, возможно сейчас результат будет лучше.

  • Спасибо, теперь сервис PageSpeed Insights перестал ругаться красными воцклицательными знаками. Использовал подсказку по добавлению правил в .htaccess

  • а как для самописного сайта ускорить загрузку?

    • Сделать вручную то, что делают эти плагины - минифицировать css, js и html. Все скрипты объединить в 1 файл и подключать внизу страницы, либо используя атрибут async. Сжать все изображения на сайте. Интегрировать ленивый загрузчик для изображений, например lazysizes, ссылка на него есть в начале статьи.

  • Когда делаю шаблон (не использую готовые, там трудно добиться высоких показателей по pagespeed), обязательно включаю кеш в htaccess с указанием всех форматов, ужимаю все картинки через FileOptimizer, обязательно ставлю плагин Minit. Шрифты стараюсь подключать со своего сервера и в CSS прописываю им font-display: swap. Также просматриваю код и если что-то не устраивает в плане нагрузки удаляю (скрипты, стили картинки). Когда начинал заниматься созданием шаблонов под WordPress большая ошибка была в том, что подключал стили и скрипты прямо в шаблоне, например в header.php, а оказалось правильно через functions.php через функции wp_enqueue_style/wp_enqueue_script, начинающим стоит взять на заметку.

  • у меня на сайте тестов для врачей с 30 на мобильных до 61 поднялось. Так гугл пишет, что блокируют отображение файлы autoptimize.css , которые он комбинирует.

    • Возможно вы не включили в настройках "Встраивать все CSS"

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

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