Оптимизация сайта на 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:

Таким образом весь 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. После установки необходимо в настройках плагина включить кеширование и включить опцию - "Сжимать файлы кэша чтобы ускорить работу":

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

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

Добавьте в файл .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;
    }



}