Оптимизация сайта на WordPress для Google PageSpeed. Как нужно выполнять рекомендации сервисов?

Евгений
Автор статьи: Евгений
Веб-мастер, SEO-специалист. Занимаюсь созданием и продвижением сайтов с 2012 года.
опубликовал: 136 статей
Оптимизация сайта на WordPress для Google PageSpeed

В последнее время все помешались на ускорении сайтов и подгонке их под требования PageSpeed Insights. Особенно это актуально для WordPress, где сам движок и плагины создают множество проблем при загрузке. Я тоже занялся этим вопросом и вот моё мнение. В погоне за "зелёненькими" цифрами оптимизаторы забывают про элементарную логику. Есть цифры в сервисах тестирования, а есть реальная скорость загрузки сайта, измеряющаяся в секундах. Поэтому для тестирования сайта и оптимизации я смотрю три сервиса:

  1. Google PageSpeed (смотрим собственно цифры)
  2. GTmetrix (сайт 5 в 1, собраны все метрики в удобном виде)
  3. PingDom Tools (можно выбрать разные сервера для тестирования, показывает реальную скорость загрузки в секундах)

 

к содержанию ↑

Что сделать для оптимизации WP?

Отключите граватары, Identicon или другие аватарки комментаторов

Проходим в Настройки - Обсуждение и отключаем аватарки полностью. У меня они давали плюс 2-3 секунды загрузки. Если же они Вам очень нужны, то ставим простую аватарку по-умолчанию. Это даст плюс 2-5 баллов. Если конечно у Вас есть комментарии на сайте.

Аватар по-умолчанию

Чтобы выставить пользовательский аватар для Администратора, можно установить плагин WP User Avatar, и загрузить необходимую картинку. Тогда она будет кешироваться плюс Вы не зависите от скорости загрузки со стороннего сервера.

к содержанию ↑

Уберите или кешируйте скрипты Google Analitics или Яндекс.Метрики

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

Например сервис часто требует, чтобы Вы осуществляли кеширования Google Analitics. Я сравнивал. Если убрать аналитику скорость загрузки уменьшается на 1,7 с! А это немало. Т.е. проще совсем убрать аналитику от Google. Тоже самое касается Яндекс.Метрики.

Но если Вы хотите выполнить это требование, то самый просто способ это сделать - использовать плагины, которые сохраняют analitics.js локально у Вас на сервере, и автоматически обновляют:

  • Webcraftic Clearfy
  •  CAOS | Host Google Analytics Locally

А за кеширование этих файлов будет отвечать любой установленный у Вас плагин: WP Fastest Cache, W3 Total Cache и т.д. Это позволит сэкономить 0,5-0,6 с и получить несколько баллов.

к содержанию ↑

Убираем поиск по сайту от Google или Яндекс

Сторонний поиск по сайту от Google или Яндекс конечно лучше, чем дефолтный WordPress, но это опять сторонние скрипты, которые задерживают загрузку страницы. Лучше оставить "родной" поиск, но расширить его с помощью плагина Relevanssi – A Better Search  или похожего. Можете даже попробовать реализовать отложенную загрузку, аналогично предыдущему пункту.

Оптимизация загрузки блоков Google Adsense или РСЯ

Даже если Вы удалите с сайта всё лишнее, всё равно блоки контекстной рекламы не дадут получить "зелёненькие" цифры. Всё дело в том, что блоки рекламы обычно находятся в первом экране и непосредственно влияют на скорость загрузки и показатели PageSpeed. Если убирать эти блоки - падает доход. Так что это компромисс между заработком и скоростью загрузки.

Но если у Вас есть блоки в конце статьи, то можно и нужно отложить их загрузку. Всё равно пользователь не скоро доскроллит до них и они могу загружаться уже после формирования страницы.. Сделать это можно несколькими способами. Самый простой - скрипт:

<div id="delayload">Загружается....</div>

<script> 
setTimeout(function(){  
  $.get("ads1.php", function(data) {
    $('#delayload').replaceWith($(data));
})
 },2280);
</script>

Блок с id "delayload" вставить там, где должна выводиться реклама.

Скрипт можно расположить там же, или в футере - это не важно. В папке с Вашей темой расположить файл ads1.php (кодировка UTF-8 без BOM) в который вставить код рекламы.

Важно! Значение 2280 в скрипте - это задержка в миллисекундах после которой начнёт загружаться реклама. Если у Вас страница "тяжёлая", то возможно придётся увеличить это значение до 4000 мс.

Кстати я разработал плагин, который позволяет это реализовать с помощью шорткодов.

к содержанию ↑

Загружаем шрифты со свойством font-display:swap

Для того чтобы решить проблему:

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

Нужно добавить следующее свойство:

font-display:swap;

Обычно бывает проблемно найти где именно происходит подключение шрифта. У меня это было в файле font-awesome.min.css, который подключался в function.php. Отредактировал таким образом:

Настройте показ всего текста во время загрузки веб-шрифтов

Это даёт всего +1 балл и 0,1-0,3 сек прироста скорости загрузки.

к содержанию ↑

Загрузка изображений с помощью Lazy load

Многие плагины WordPress для Lazy load работают откровенно плохо. Многие не учитывают атрибуты  srcset и sizes, которые к изображениям добавляются автоматически. Поэтому после включения плагина сайт "плывёт". Могу посоветовать плагин lazysizes. Он корректно работает с этими атрибутами и там можно настроить исключения.

Самое главное - Lazy load нужно отключить для тех изображений, которые видны на первом экране. Обычно это картинки в шапке и превью статьи. Для этого добавляем классы этих изображений в исключения. Пример настроек (исключены классы nolazyload и post_thumbnail):

Настройка Lazy load для WordPress

 

к содержанию ↑

Устраните ресурсы, блокирующие отображение

Обычно это файлы стилей и скриптов, генерируемые темой и плагинами, которые загружаются в header. И если с объединением внутренних файлов и скриптов и переносом в footer прекрасно справляется плагин типа Autooptimaze, то с внешними скриптами всегда будут проблемы:

Устраните ресурсы, блокирующие отображение - jquery

В данном случае PageSpeed требует чтобы мы устранили проблему с JQuery и даже говорит что так мы сэкономим 270 мс. Логичным было бы сохранить этот файл у себя на сервере в подпапке и подгружать локально. Сделать это несложно, но только (неожиданно) это вообще никак может не ускорить загрузку. Потому что файл этот всё равно должен загрузиться, а сервера Google могут оказаться более скоростными чем Ваш собственный shared hosting.

В моём случае сайт был расположен на серверах в USA и прирост всё-таки был. В итоге показатели Page Speed растут с 68/88 до 74/95, а по PingDom Tools время загрузки (Load time) улучшилось на 61 мс: с 1.04 с до 979 мс. Это конечно не 270 мс, но тоже неплохо.

Итак применяя 2 несложных приёма: сохранение у себя на сервере и кеширование Google Analitics и JQuery, мы легко добиваемся "зелёных" цифр для компьютеров. С мобильными уже всё обстоит немного иначе.

к содержанию ↑

Оптимизация под мобильные устройства

Рассмотрим оптимизацию страницы блога типичного сеошника.

Оптимизация загрузки в Page speed

Как видим цифры красненькие. Но для данного блога сеотрафик неважен. У него основной трафик реферальный.

Однако, если задаться целью и начать оптимизацию, то Page Speed сам нам подсказывает, что нужно оптимизировать. Выделил на скриншоте первый экран. Именно эти элементы надо оптимизировать в первую очередь, чтобы получить "зелёненькие" цифры. Самый простой способ - убрать баннер в заголовке. Всё что находится ниже первого экрана - а там могут быть виде, картинки и прочее -намного меньше влияют на показатели. Ими можно заняться в последнюю очередь.

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

И да. Осторожнее с Lazy load. Изображения на первом экране (логотип, миниатюрка и т.д.) должны загружаться быстро и без Lazy load. Иначе, Вы сами себе создадите проблемы, откладывая загрузку изображений на первом экране.

 

 

Буду информировать Вас о том что можно сделать в этом направлении.

One thought on “Оптимизация сайта на WordPress для Google PageSpeed. Как нужно выполнять рекомендации сервисов?”

Leave a Reply

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