Зеленая зона в PageSpeed: оптимизируем скорость загрузки сайта

Как мы знаем, скорость загрузки сайта — один из ключевых факторов успешного SEO. Поэтому вебмастера стремятся вывести свои площадки в зеленую зону PageSpeed и получить 90 баллов системы и выше. Как этого добиться, и самое главное, нужно ли ради этого бросаться на амбразуру, разберем ниже.  

Что такое Google PageSpeed?

Это инструмент от Гугла для измерения скорости загрузки web-сайтов в десктопе и на мобильных устройствах. Он оценивает сайты по 100-бальной системе. Если ресурс набирает 90 баллов и выше, то попадает в зеленую зону. 

Алгоритм работы инструмента

Проверка сайта в Google PageSpeed делается так:

• переходите на сервис;
• вводите урл площадки и нажимаете «Анализировать»;

• через минуту получаете отчет.

PageSpeed оценивает скорость загрузки веб-ресурса на мобильных устройствах и десктопах. Вот, например, какие данные мы получили по нашему сайту Protraffic.

1. 50 баллов для мобильных. Ресурс больше всего хромает по FCP или первой отрисовке контента. Из 100 загрузок только 40% страниц дали хороший показатель, 41% загружались от 1,8 до 3 секунд, а 20% — более 3 секунд. Среднее значение по скорости загрузки вывелось на 2,3 секунды.
2. 91 балл для компьютеров. Заветная зеленая зона PageSpeed. Лучше всех ресурс показался по FID или по времени задержки между действием пользователя и ответом сервера. Другими словами, наша площадка совершенно не тормозит при прокрутке страницы вниз или кликах (переходах на какие-нибудь элементы). Несколько хуже показатель CLS или степень стабильности контента. Видимо это из-за подгрузки рекламных блоков, задействованных в виджете и контенте.

Как ускорить скорость загрузки сайта?

Полезные рекомендации по улучшению показателей скорости дает сам сервис PageSpeed, учитывающий данные Lighthouse. Вот что он советует конкретно по нашему сайту:

• использовать более современные форматы изображений — в приоритете JPEG 2000, JPEG XR, WebP, загружающиеся быстрее чем PNG или JPEG;

• настроить подходящий размер картинок — согласно Lighthouse в идеале на странице не должно быть тяжелых изображений, приводящих к потере байтов;
• удалить неиспользуемый код JavaScript/CSS — можно удалить ненужные правила из таблиц стилей и отложить загрузку скриптов до тех пор, пока они не понадобятся;
• уменьшить TTFB — это время ответа сервера, влияющее на производительность (если браузер ожидает ответа более 600 мс, это плохо, так как пользователи не любят долго загружающиеся страницы);

• устранить ресурсы, блокирующие первую отрисовку страницы — на Protraffic найдено одно такое изображение и CSS;
• эффективнее настроить кэш для статических объектов — выставив длительное время хранения кэша, можно добиться быстрой загрузки страницы при повторных посещениях;
• сократить размер структуры DOM — на ресурсе найдено 3000 элементов, замедляющих вычисление стилей;

• устранить большие смещения макета — найдено 5 таких элементов.

Базовая настройка среды 

Сюда входят такие работы:

• переход на одну из последних версий PHP — на данный момент 7.3 или 7.4, делается через хостинг;

• обновление версии WP и плагинов — дает прирост скорости и возможностях, а также позволит оперативно избавиться от проблем безопасности;
• включение технологии GZIP через файл htaccess — обеспечивается качественное сжатие файлов, поэтому у сервера уходит меньше времени на обработку;

• установка SSL-сертификата — протокол HTTPS повышает скорость загрузки и обеспечивает безопасность пользовательских данных;
• перенос скриптов в подвал — тяжелые скрипты будут обрабатываться в последнюю очередь.

Оптимизация изображений

В первую очередь рекомендуется обратить внимание на картинки, тем более что оптимизировать их не так уж и сложно. А пользу можно получить огромную. Например, используя формат изображений WebP, удастся в 2-3 раза увеличить скорость загрузки страницы. Так что заменяйте всеми любимые, но уже старые JPG и PNG новыми форматами.

Эффективность замены форматов в плане ускорения сайта доказана многочисленными исследованиями. Вот, например, данные по эксперименту с форматами PNG/JPG и WebP, проведенному на Хабре.

Было проработано множество изображений, и практически всегда WebP-файлы оказывались на 30-70% меньше оптимизированных версий графических файлов других форматов.

Оптимизация HTML 

Далее оптимизируйте HTML и удалите неиспользуемые CSS/JavaScript. Процедура не из легких, занимает много времени и сил, но и результат дает хороший — ускоряется работа сайта в целом, повышается производительность. Выполнение этого шага лучше доверить программистам. Но есть и другое решение для ресурсов на WordPress — плагин Asset CleanUP Pro, автоматически удаляющий неиспользуемый код.

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

Оптимизация TTFB

Уменьшить время ответа сервера можно одним из этих способов:

• смените сервер на более производительный — откажитесь от бесплатного хостинга, используйте VPS или выделенные серверы;
• используйте акселераторы PHP, которые позволят уменьшить TTFB предварительной компиляцией кода и снизить нагрузку на процессор — среди популярных акселераторов APC, PhpExpress, XCache и другие;
• установите плагин кэша — это уменьшит количество запросов к базе данных;
• подключите серверное кэширование — в таком случае при повторном обращении пользователя к файлу, сервер не будет генерировать страницу заново.

Проверить показатель TTFB конкретного сайта удастся через отладчик в браузере, Netpeak Spider, webpagetest.org и непосредственно в PageSpeed.

Оптимизация структуры DOM

Если сайт долго загружается, то возможно он плохо структурирован. DOM — это древовидная структура, открывающая доступ к контенту сайта. Если она будет чересчур сложной и объемной, страница будет тормозить, так как браузер выполняет огромное количество запросов. Многим юзерам это попросту надоедает, они уходят к конкурентам.

Сокращение DOM обычно проводится чисткой узлов, в которых отпала необходимость. К примеру, на WordPress это делается несколькими способами:

• большие страницы делятся на более мелкие;

• устанавливают быструю и хорошо написанную тему — Astra, GeneratePress;
• используют плагин ленивой загрузки;
• отключает неактивные и лишние плагины.

Оптимизация кэша

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

Рассмотрим лучшие варианты.

• Правильно составить файл htaccess. Здесь нужно прописать правило, чтобы все статичные элементы (изображения, редко обновляемые скрипты) сохранялись в кэш пользователю. Это нужно для того чтобы при повторных его визитах, данные элементы грузились непосредственно с диска, а не с сервера.

• Использовать CDN. Например — Cloudflare, Akamai, Fastly и другие.

Что касается плагинов, то самые популярные это W3 Total Cache и WP Super Cache. Их достаточно легко установить и настроить, после чего они будут автоматически кэшировать записи и страницы Вордпресса и передавать пользователям уже статические файлы, что заметно снизит нагрузку на сервер. А если дополнительно подключите кэш страниц системного уровня, такой как Varnish — добьетесь еще лучшей производительности.

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

С 2019 года Гугл перевел сайты на Mobile-first index — причина в том, что мобильный трафик значительно превышает десктопный. Теперь независимо от того, с какого устройства пользователь делает запрос, ему показываются результаты мобильной выдачи. Таким образом, ресурсы оптимизированные под смартфоны и планшеты, получают преимущество в ранжировании.

Для улучшения мобильного SEO подойдет один из этих способов.

• Создать отдельную мобильную версию сайта на поддомене. Получите простой интерфейс, высокую скорость загрузки и дадите пользователям воспользоваться альтернативой. Однако придется актуализировать информацию отдельно от основного сайта, обязательно настраивать мобильные урл-адреса для разных устройств и т. д. Многие специалисты считают, что в плане SEO это самый плохой способ оптимизации ресурса под мобильные устройства.
• Настроить динамический показ. Весь ваш контент находится на одном урл-адресе, но в зависимости от устройства входа, пользователям показываются разные HTML/CSS. Такой способ определенно лучше для SEO, но и в этом случае не все идеально. Были случаи, когда мобильным пользователя отображалась десктопная версия.

• Сделать адаптивный дизайн. Пока что наилучший вариант показа контента каждому пользователю, независимо от используемого им устройства. В этом случае не нужно создавать отдельные урл-адреса или разные коды HTML/CSS. Сам Google рекомендует адаптивный дизайн. Из минусов — нужно нанимать программиста.

Если ваш сайт на WordPress, то позаботиться о мобильной версии сайта могут плагины. Лучшие из них — Hammy, Responsive Widgets, WP Lightbox и другие. Можно также изначально выбрать тему с адаптивным дизайном — Divi, Hestia, Astra.

Сжатие скриптов

Минификация ресурсов относится к стандартным рекомендациям сервиса PSI. Нужно иметь сжимать все, что только можно. Конечно, с этой задачей автоматически справляется технология кэширования и утилита GZIP. Но этого может оказаться недостаточно.

Например, можно сделать следующее:

• минимизировать количество попапов (всплывающих окон) на страницах;
• предзагружать шрифты;
• отказаться от больших сторонних библиотек.

Зеленая зона PageSpeed — насколько это важно?

А теперь мы подошли к самому главному. На практике оптимизация по PageSpeed к серьезным улучшениям в ранжировании сайта поисковиками не приводит. В принципе оно и верно — скорость загрузки является всего лишь одним фактором ранжирования, но есть ведь еще и другие.

Маркетолог Телеграм-канала «Seo для роботов» провел специальное исследование. На одном из проектов (интернет-магазин) снизились позиции в Гугле. Это совпало с просадкой показателей в Google PageSpeed. И оптимизатор решил проверить корреляцию между LCP и CLS, а затем сравнить данные с позициями в топе. Он пропарсил через API Google Page Speed 10 к страниц конкурентов и получил такие результаты.

	Позиции в выдаче упали	Позиции в выдаче выросли
По LCP сайт не в зеленой зоне	54,48%	45,52%
По LCP сайт в зеленой зоне	55,35%	44,65%
По CLS сайт не в зеленой зоне	54,67%	45,33%
По CLS сайт в зеленой зоне	54,47%	45,53%

Как видно, данные практически одинаковые, заметной корреляции не заметно. Сайты с неудовлетворительными показателями по LCP и CLS также занимают позиции в топе, опережая конкурентов по другим факторам ранжирования.

С другой стороны, точно известно — медленные сайты не любят ни поисковики, ни пользователи. Например, по исследованиям Гугла, если веб-ресурс грузится дольше 10 секунд, отказы увеличиваются на 123%! Владельцам интернет-проектов стоит подумать об удобстве посетителей и обеспечить загрузку контента на первом экране сразу после запроса браузера.

Советы и рекомендации после ускорения сайта

Вы добились ускорения сайта — отлично. Но для вывода сайта в топ этого мало. Помните, что у Гугла несколько факторов ранжирования:

• релевантность контента поисковому запросу;
• качество ссылающихся на ваш сайт доноров;
• наличие в тексте прямых вхождений ключей и LSI-фраз;
• удобство мобильной версии;
• достоверность контента;
• свежесть публикации материала;
• поведенческие факторы;
• внутренняя перелинковка;
• исходящие ссылки;
• возраст домена и многое другое. 

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

Кроме того, надо знать 2 важные особенности работы PSI:

• оценка производительности может меняться, даже если на сайте не проводились правки — например, когда во время теста сеть бывает перегружена, баллы показываются меньше реального значения;
• алгоритм PSI регулярно обновляется — так, после апдейта в 2019 многие web-площадки выкинуло из зеленой зоны, что вызвало справедливый гнев вебмастеров, вложивших на улучшение показателей немало времени и денег.

Для реальной оценки производительности сайта одних данных Google PageSpeed будет недостаточно. Надо применять и другие инструменты из стандартного набора профессиональных оптимизаторов:

• GTmetrix — сервис собирает данные PSI в одном интерфейсе, каждая метрика оценивается по 100-балльной шкале и дает грамотные советы по улучшению (регистрация дает привилегии, например, видео проверки);

• Tools Pingdom — платный сервис, но доступна 14-дневная пробная версия;

• Loading Express — тоже предоставляет полезные цифры, такие как первая отрисовка страницы, время выполнения Javascript и т. д.

Заключение

Хорошо, что вы стараетесь вывести сайт в зеленую зону Google PageSpeed. Однако это не гарантирует повышение страниц в выдаче. И сколько бы ни твердили сотрудники Гугла, что для них на первом месте скорость загрузки, отходить от приемов классического SEO не нужно. Оно продолжает успешно работать и сегодня.

Опытные вебмастера давно поняли, что данные PSI — лишь рекомендации, которые не нужно понимать буквально. А вот у новичков часто включается синдром «отличника», и они стремятся, во что бы то ни стало набрать заветные 100 баллов. В итоге сильно разочаровываются и опускают руки.