Памятка по PageSpeed Insights

Однажды я решил сделать себе сайт-визитку. И эта визитка будет полностью зеленой по PageSpeed Insights.

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

Большинство вебмастеров похожи на сапожников без сапог. Профили на биржах фриланса у них есть, постоянно делают другим людям сайты, а своего собственного у них нет. А если есть - то это какое-то кривое, страшное, и безнадежно устаревшее недоразумение.

Кстати, почему WordPress? Потому что в большинстве случаев - это самый лучший движок для вашего сайта. Именно поэтому каждый третий сайт в мире собран именно на WordPress. С этим движком, если руки растут из того места - можно творить чудеса.

Ну а теперь поговорим про основные ошибки, которые PageSpeed Insights предлагает исправить, для получения заветной цифры. Иногда даже после всех проделанных работ, оценка сайта далека от заветных 90+ (в особенности для мобильных устройств). Рассмотрим основные причины низких оценок:

«Неправильный» размер изображений

Этот момент необходимо продумывать при публикации материалов на сайте. Если у вас ширина основного блока контента 720px, то и картинки надо грузить максимум такой ширины.

Если загрузить картинку 2000 пикселей шириной – Google начнет на нее ругаться. Автоматизировать процесс исправления ошибки бесплатными средствами нельзя, придется вникать в тему, используемую на сайте и «подгонять» картинки под необходимые размеры (их исходные размеры), а также генерировать заново все миниатюры по новым размерам. Такая услуга у многих оптимизаторов обычно не входит в набор услуг.

Однако, голь на выдумку хитра. Некоторые плагины оптимизации картинок имеют поле для задания максимального размера изображения. А именно - уменьшают его размер до заданного. Можно просто выставить нужные настройки и прогнать через плагин все свои картинки. Гугл перестанет ругаться, добавит несколько лишних баллов в рейтинг.

«Используйте современные форматы изображений»

Google рекомендует использовать изображения в форматах JPEG 2000, JPEG XR и WebP.

Суть в том, что эти форматы слабо поддерживаются, и не воспринимаются некоторыми версиями браузеров, особенно мобильными.

JPEG 2000 существует достаточно давно, позволяет сжать изображения на 20% лучше, чем в просто JPG. Но этот формат так и не получил признания, поэтому с ним лучше не связываться, во избежание проблем в будущем.

JPEG-XR, судя по всему, придумал Microsoft, для своего браузера Edge. Так что не будем заострять внимание на больных и убогих.

Ну а WEBP уже достаточно популярен, поддерживается всеми современными браузерами, поэтому при необходимости конвертируем изображения именно в этот формат.

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

Часто, после проделанных работ, Google продолжает ругаться в таком стиле: «Устраните ресурсы, блокирующие отображение», особенно в проверке на мобильных устройствах. Для исправления, нужно переносить подключение css и js в нижнюю часть сайта (footer), что в 100% случаев приведет к ошибкам, «поедет» дизайн, перестанут работать некоторые функции. Поэтому чтобы это решить, нужно проводить отладку, из каждого css файла выделять «критический» код, который необходимо оставить вверху сайта. Проблема решится. До того момента, как вы установите какой-нибудь плагин.

«Сократите время выполнения кода JavaScript»

Ошибка возникает в 99% случаев на сайтах WordPress. Чем больше подключаемых плагинов и скриптов – тем сильнее ругается и понижает оценку Google. Я проводил эксперимент: брал «чистую» установку WordPress, без статей и картинок. Затем оптимизировал его и получал в Google Pagespeed оценку 95+ как для ПК, так и для мобильных. Затем к этому же сайту подключал Яндекс метрику и Google Analytics. Оценка сразу падала до 50 на мобильных. Никто не хочет отказываться от скриптов метрик, поэтому на ошибку лучше не обращать внимания.

Либо, вы можете обратиться ко мне, и я оптимизирую ваши скрипты, поставлю задержку их исполнения, причем это никак не скажется на качестве подсчета посетителей. А вот цифры PageSpeed Insights сразу же подрастут.

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

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

«Отложите загрузку скрытых изображений»

Иногда проблема остается даже после оптимизации. В ходе работы я подключаю отложенную загрузку изображений и видео, но если они появляются в первом экране – то они все равно будут автоматически подгружаться при начальной загрузке страницы, и оценка Pagespeed будет падать. Если ставить какую-то задержку на первый экран – это будет некрасиво выглядеть для посетителей, и принесет больше вреда сайту чем пользы. Для всех элементов, находящихся ниже первого экрана «ленивая» загрузка работает корректно.

«Сократите время ответа сервера (время до получения первого байта)»

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

У Google свои представления о скорости на мобильных устройствах, т.к. они пытаются продвигать технологию AMP, как и Яндекс свои Турбостраницы, поэтому обычной оптимизацией в зеленую зону для мобильных попасть не получится. Тут либо внедрять AMP, либо пытаться "добить" оценку с помощью переписывания используемой темы и плагинов + тонкой настройки и администрирования веб-сервера.

Например, этот сайт на WordPress собран с помощью Oxygen Builder. Это очень быстрый шаблонизатор, который не создает тьму лишних стилей и джаваскриптов, как Elementor. Более того, Oxygen Builder даже отключает тему WordPress, и никак от нее не зависит.

Именно поэтому я получил вот такие цифры на мобильном.

И вот такие цифры производительности можно увидеть для компьютера. Цифра PageSpeed также 100.

Возможны ли такие показатели для вашего сайта? В нашей жизни возможно все. Вопрос только в том, что необходимо сделать для получения аналогичных показателей. И стоит ли оно того (как по цене, так и по времени).

Главный совет, который я могу дать – оценивайте скорость сайта самостоятельно. Если вы видите, что сайт «летает» но при этом имеет оценку 60 – это не значит, что скорость будет плохим фактором в глазах поисковых систем. Если сайт грузится быстро, и у посетителя не возникает желания закрыть его до окончания загрузки – значит все хорошо.