Ускорение WordPress. Часть 2.
Сегодня наша задача — ускорение WordPress, которое мы начали здесь.
Предзагрузка CSS
Предзагрузка стилей (CSS) помогает снять замечание Page Speed «Устраните ресурсы, блокирующие отображение». Добавляем следующий скрипт в functions.php:
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
<link rel=’preload’ as=’style’ onload=»this.onload=null;this.rel=’stylesheet'» id=’$handle’ href=’$href’ type=’text/css’ media=’all’ />
EOT;
return $html;
}
add_filter( ‘style_loader_tag’, ‘add_rel_preload’, 10, 4 );
Тестируем и видим, что в списке ресурсов блокирующих отображение остался только jquery.js:
Вернемся к jQuery несколько позже.
Отмечаем, что другие оценки не поменялись.
Включаем кеширование
Пришло время «тяжелой артиллерии». Пожалуй, одна из самых эффективных технологий ускорения сайтов – это кеширование. Суть технологии в том, что при обращении пользователя к сайту нет необходимости каждый раз заново генерировать страницу. В большинстве случаев страница будет браться из кеша браузера на компьютере клиента, если он уже посещал нашу страницу, или из кеша на сервере хостинга.
Что касается настроек на стороне сервера, то самый простой выход — написать в тех. поддержку хостинга. Например, для снятия замечаний Page Speed «Задайте правила эффективного использования кеша для статических объектов», если хостинг использует для вашего сайта сервер Apache, можно добавить в файл .htaccess следующие настройки для кеширования:
<ifModule mod_expires.c>
ExpiresActive OnExpiresDefault «access plus 1 month»
ExpiresByType image/x-icon «access plus 2 months»
ExpiresByType image/jpeg «access plus 2 months»
ExpiresByType image/png «access plus 2 months»
ExpiresByType image/gif «access plus 2 months»
ExpiresByType application/x-shockwave-flash «access plus 2 months»
ExpiresByType text/css «access plus 2 months»
ExpiresByType text/javascript «access plus 2 months»
ExpiresByType application/javascript «access plus 2 months»
ExpiresByType application/x-javascript «access plus 2 months»
ExpiresByType text/html «access plus 2 months»
ExpiresByType application/xhtml+xml «access plus 2 months»</ifModule>
<ifModule mod_headers.c>
Header set Strict-Transport-Security «max-age=31536000; includeSubDomains; preload» env=HTTPS
Header always set X-XSS-Protection «1; mode=block»
Header always set X-Content-Type-Options «nosniff»
Header always set Referrer-Policy: «no-referrer-when-downgrade»
</ifModule>
Далее устанавливаем плагин Clear Enabler:
Ставим две галочки в настройках:
Тестируем:
Отмечаем существенное уменьшение TTFB с 1 секунды до 169 mc.
Оптимизация JS и CSS
Вторая пушка – это оптимизация JS и CSS (скриптов и стилей). Ее будем проводить с помощью плагина Autoptimize:
Активируем плагин и идем в настройки. Включаем оптимизацию и объединение JS:
Включаем оптимизацию и объединение CSS:
Тестируем:
Видим, что пушка выстрелила отлично. Выросли оценки Page Speed и для мобильной версии и для десктопов. Снизился размер страницы. В два раза сократилось число запросов.
Оптимизируем загрузку jQuery и кода HTML
У нас остается замечание по jQuery:
Попробуем решить проблему. Идем в настройки плагина Autoptimize и убираем скрипт jquery.js из списка исключений:
Вместо строки:
wp-includes/js/dist/, wp-includes/js/tinymce/, js/jquery/jquery.js
Оставляем только:
wp-includes/js/dist/, wp-includes/js/tinymce/
Сохраняем настройки, чистим кеш, грузим сайт в режиме инкогнито и проверяем его работу. Если страница грузится корректно и все скрипты работают, то можно использовать данную настройку.
Дополнительно поставим галочку на пункте «Оптимизировать код HTML»:
И отключим оптимизацию при работе с админ. панелью:
Тестируем:
Отметим хороший прирост в оценке Page Speed для мобильных.
Чит-код или что будет если отключить аналитику
Нужно четко понимать, что на скорость загрузки сайта влияют и установленные на нем счетчики аналитики. У меня подключены Яндекс Метрика, Google Analytics, пиксель Facebook и пиксель ВКонтакте. Подключение сделано через Google Tag Manager.
Давайте посмотрим, что будет если не грузить коды счетчиков при проверке сайта на скорость ( т.е. когда к сайту обращается User-agent Lighthouse). Добавим условие в наш скрипт подключения аналитики:
Давайте посмотрим, что будет если не грузить коды счетчиков при проверке сайта на скорость ( т.е. когда к сайту обращается User-agent Lighthouse). Добавим условие в наш скрипт подключения аналитики:
Видим, что заметно выросла оценка для мобильных. Ожидаемо снизились размер страницы и количество запросов.
Нужна аналитика или нет, вопрос скорее риторический. Во всяком случае, теперь мы знаем «чего она стоит» при загрузке сайта.
Ускорение WordPress - итоги
Результатом проделанной работы стало увеличение показателей Google PageSpeed Insights с 7 до 85 — для мобильных, с 41 до 99 — для компьютеров. Неплохой результат с учетом использования на сайте конструктора Elementor. Конечно, есть еще над чем поработать, например, виджет Image Accordion грузит максимальный размер картинок, но красота, как и аналитика, требует жертв. Хотя…
Для сравнения вот каких результатов мне удалось добиться на сайте с темой собственной разработки, без использования конструкторов. Заветная «зеленая» зона для мобильных и максимальные 100 баллов — для компьютеров.
