Как ускорить сайт на WordPress — базовые рекомендации

Уверен, вы слышали фразу, что медленный сайт убивает SEO. В этой статье я расскажу как быстро и просто максимально ускорить ваш сайт на WordPress.

Как измерить скорость сайта

В этой статье для анализа скорости загрузки сайта я буду пользоваться парой популярных сервисов — https://developers.google.com/speed/pagespeed/insights/ и https://gtmetrix.com/.

Наша задача минимум — это попасть в зеленую зону обоих тестов.

Что тормозит ваш сайт

На скорость загрузки сайта влияет следующее:

• Хостинг
• Изображения
• JS скрипты
• CSS стили

Остановлюсь подробно на каждом пункте

Быстрый хостинг для сайта на WordPress

Эти рекомендации универсальные и подойдут любому сайту, не только на WordPress. Однако мощный сервер отнюдь не гарантирует быструю работу сайта, ведь очень многое зависит от его настроек.

Список базовых рекомендаций:

• Используйте PHP версии 7. Эта версия заметно быстрее предыдущих. Не забудьте про Zend OPcache.
• В качестве веб-сервера используйте NGINX и режим работы PHP — PHP-FPM. WordPress поддерживает такой режим работы «из коробки».
• Если не можете отказаться от веб-сервера Apache, то обязательно используйте NGINX в качестве Front-End.

По моему опыту связка NGINX плюс PHP-FPM работает заметно быстрее чем Apache плюс NGINX в качестве Front-End.

Как изображения тормозят ваш сайт

С изображениями все просто: они должны иметь оптимальное разрешение для вашего дизайна и минимально возможный размер файла.

Проанализируйте ширину страницы (поста, колонки) куда вставляете картинку. Если она 700 пикселей, то не следует загружать изображение размером 2048х2048! Поставьте ссылку на оригинальное изображение размеров 2048х2048, а на странице используйте оптимизированную картинку шириной 700 пикселей. Это заметно снизит размер файла изображения и соответственно ускорит загрузку сайта.

Экспериментируйте с форматами файлов изображений. В одних случаях меньший размер у PNG, в других у JPG.

В каждом формате есть свои методы оптимизации. В частности в PNG при малом количестве цветов лучше выбрать палитру из 256 цветов, что заметно уменьшит размер файла. А в JPG лучшее сжатие дает цветовая схема YCbCr.

Все вышеописанное хорошо, когда вы только готовите статью к публикации. Но если нужно оптимизировать существующие изображения на работающем сайте, то могу порекомендовать WordPress плагин — WP Smush (Smush Image Compression and Optimization).

Оптимальная загрузка JavaScript

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

Размещать JavaScript лучше в конце HTML документа перед закрывающим тегом BODY. Такой способ не тормозит загрузку видимой части сайта.

Чтобы это реализовать в WordPress используйте следующий код в файле functions.php для загрузки файлов JavaScript (это условный пример для рекламной сети Google.Adsense):

/* Подключаем скрипты */
 function theme_scripts_method(){
    wp_enqueue_script( 'adsbygoogle', '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', false, null, true );
}

add_action( 'wp_enqueue_scripts', 'theme_scripts_method' );

В этом случае (последняя опция в значении true), ссылка на файл JavaScript будет размещаться перед закрывающим тегом BODY:

<script type='text/javascript' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
</body>
</html>

А в секции HEAD появится код:

<link rel='dns-prefetch' href='//pagead2.googlesyndication.com' />

Это нововведение так же ускоряет загрузку сайта. Так как является предзапросом ссылки и используется для определения источника, который будет востребован для загрузки необходимых ресурсов, чтобы браузер получил данные как можно скорее. Так что загружайте JavaScript в WordPress правильно, это ускорит ваш сайт!

Если загрузка файла JavaScript необходима в начале HTML документа (актуально для jQuery), то используйте асинхронную загрузку. Примеры моей реализации метода асинхронной загрузки скриптов в WordPress — https://moonback.ru/page/wordpress-javascript-async

Что не так с CSS стилями у WordPress

Реализация WordPress такова, что темы (шаблоны) до сих пор не подключают автоматически файл стилей по умолчанию style.css, который является обязательным.

Но проблема даже не в этом. Если вам необходимо подключить несколько файлов стилей, то не используйте оператор @import для подключения дополнительных стилей. Так как в таком случае браузер будет последовательно загружать все файлы стилей и объединять их в один.

Вместо этого используйте тег link для каждого файла стилей:

<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />

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

Подробно как это сделать в WordPress описано в моей статье здесь.

Промежуточные результаты оптимизации

Применение этих простых правил позволит вам попасть в «зеленую» зону теста https://developers.google.com/speed/pagespeed/insights/

Можно ли получить еще большие значения, например 95/100 и выше? На wordPress это сложно, но так же реализуемо.

Скорость загрузки на мобильных является фактором ранжирования в Google

Для чего эта статья и почему все описанное важно. Дело в том, что с июля 2018 скорость загрузки является фактором ранжирования в поисковой выдаче Google для мобильных устройств. Это официальная информация — https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html

Суть документа в том, что ценный и уникальный контент все равно будет в ТОПе. Но при равной релевантности медленные сайты в результатах мобильного поиска буду ниже.