Оптимизация сайта под требования PageSpeed Insights

Оптимизация скорости загрузки страниц сайта под требования PageSpeed Insights — следующая тема, которую я хочу затронуть в серии из нескольких статей.
Возможно, даже отдельная рубрика.

Уже в марте 2021 года Google ужесточит свои требования к оптимизации страниц сайтов, скорости их загрузки, и именно, на мобильных устройствах.
В своем сервисе Google Search Console, вкладка Удобство для мобильных, стала давно его неотъемлемой частью.

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

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

Хотя, еще очень многие не придают этому большого значения. Повторяется история с SSL-сертификатами — пока гром не грянет.
Ждут до последнего часа.

Всем нам приходиться заниматься SEO-оптимизацией своих сайтов под поисковые запросы Yandex и Google, для получения органического трафика из этих систем.

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

А вот здесь и появляется второй, но не маловажный аспект — это те же Поведенческие факторы посетителей сайта, которые ой как учитывают поисковые системы.
Если сайт медленный, все тормозит, интерфейсы тупят — на тепловых картах видно как посетитель пару раз кликнет, подождет, на третий раз психанет и закроет сайт.

Медленная загрузка страниц напрямую связана с конверсией сайтов, тех же подписных и продающих страниц — Landing Page.

Сервис от Google — PageSpeed Insights.

PageSpeed это продукт Lighthouse, который использует Google на своем сервисе PageSpeed Insights для замера скорости загрузки, именно, отдельных страниц (по URL-адресу, веденному в строку анализа), а не всего сайта, как некоторые, по незнанию, думают.

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

Google обновил Lighthouse с версии 5.5 на 6.3. Очень скоро предстоит обновление и до 7 версии. Она уже есть в наличии.
После этого было много нареканий, что упала скорость загрузки сайта. В действительности, скорость не упала, а изменились критерии оценки.

До сих пор многие не понимают, что происходит эмуляция (имитация) на 25% выше Мобильной сети 3G, и на 25% ниже чем 4G.
Эмуляция устройства — замедление процессора устройства — Троттлинг.
Естественно, на это влияет и сам сайт — его отзывчивость и время отклика сервера, на котором расположен сайт и т.д.

Три основных составляющих:

1. Эмуляция сети (сетевой Троттлинг).
2. Эмуляция устройства (Троттлинг процессора).
3. Время отклика страницы сайта, отзывчивость.

Время отклика сервера, в реальном времени, без регистрации, можно отслеживать по ссылке:
https://ttfb.site/ru/
только вводите ссылку на свой сайт, ping обновляется постоянно.

На ранжирование сайтов влияет и отчет об удобстве пользования сайтом в браузере Google Chrome. Но эти данные обновляются только раз в месяц.

Если у Вас мощный компьютер и скоростной Интернет — 1000 Мб/с, и на нем Ваш сайт открывается быстро — это не значит, что он будет так же быстро работать на медленных устройствах.

Но если страницы сайта мгновенно открываются на медленных устройствах, значит Ваш сайт действительно Быстрый. Поэтому Lighthouse и использует Троттлинг.

Учитывая то, что пользователи используют различные устройства (ПК, ноутбуки, планшеты, смартфоны) и в сетях с разной скоростью подключения, а PageSpeed Insights с определенным набором условий, поэтому и данные могут разниться.

Более подробно можно прочитать на сервисе PageSpeed Insights в меню DOCS.

Параметры анализа PageSpeed Insights.

Сервис PageSpeed Insights, при помощи технологии Lighthouse, использует 6 параметров для анализа скорости загрузки страницы сайта в браузере:

1. FCP — Первая отрисовка контента.

   Показатель времени между ответом сервера и появлением первого контента — изображения или текстового блока. Ответ самого сервера не входит в этот показатель. До FCP посетитель будет видеть белый экран. Измеряется в секундах.
   До двух секунд — зеленая зона. От 2 до 4 секунд — желтая. Больше четырех — красная зона.

2. TTI — Загрузка до интерактивности.

   Время, через которое страница полностью готова к взаимодействию с пользователем. До этого времени работа со страницей̆ может вызывать затруднение (притормаживание скролла, не работают кнопки). Измеряется в секундах.
   До 3.8 сек. — зеленая зона. От 3.9 до 7.3 сек. — желтая. Больше 7.4 сек. — красная зона показателя.

3. SI — Speed Index — Индекс скорости загрузки.

   Показывает насколько быстро загружается содержимое первого экрана страницы сайта при отрисовке в браузере (имеется ввиду то что видно на 1-ом экране монитора ПК или мобильного
   устройства). Измеряется в секундах.
   До 4.3 сек. — зеленая зона. От 4.4 до 5.8 сек. — желтая. Больше 5.9 сек. — красная зона показателя.

4. TBT — Общее время блокировки основного потока в миллисекундах.

   Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 м/с. Это параметр показывает общую загрузку основного потока. Сюда входит и применение стилей̆, и отрисовка, и выполнение Java-скриптов. Измеряется в м/секундах.
   До 300 м/с. — зеленая зона. От 300 до 600 м/с. — желтая. Больше 600 м/с. — красная зона показателя.

5. LCP — Отрисовка крупного контента.

   Время, необходимое для отрисовки крупного контента 1-го экрана страницы. Это может быть изображение или текст. Остальной контент будет не полный. Измеряется в секундах.
   До 2 сек. — зеленая зона. От 2 до 4 сек. — желтая. Больше 4 сек. — красная зона показателя.

6. CLS — Совокупное смещение элементов макета в процентах на странице во время загрузки.

   Элементы могут смещаться из-за подгрузки изображений, шрифтов, рекламных блоков. Сверху или снизу. Чаще бывает сверху. Виновником может быть изображение, видео или шрифт с неизвестными размерами.
   Этот показатель считывается в живых данных, даже после полной загрузки страницы. Измеряется в секундах.
   До 0.1 — зеленая зона. От 0.1 до 0.25 сек. — желтая. Больше 0.25 — красная зона показателя.

Как улучшить показатели PageSpeed Insights.

Как улучшить показатели PageSpeed Insights на 100%, чтобы все страницы сайта загружались мгновенно?
Сразу скажу — автоматических методов нет. Это очень большой и кропотливый объем работы. Да, можно обратиться к высококлассному программисту — если средства позволяют.

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

Очень большое значение имеет то, на каком движке или CMS создан сам сайт. У меня сайты на WordPress. Исходя из этого — все мои методы, используемые скрипты и отдельные плагины будут касаться именно этой CMS.

Часть работы уже сделана. Тема-шаблон, установленная на сайте —  BeTheme.
Премиум-тема адаптивная, тяжелая, очень навороченная, с тремя редакторами и т. д. Отдельного плагина, типа AMP, для мобильной версии сайта не использую.
С более простыми и легкими темами для WordPress — работы, конечно, меньше. Тогда и не было бы смысла писать.

Важная информация! В своей работе, частично, я использовал советы и приобретенные скрипты на сайте LOADING.express у его создателей А.Белогородцева и А.Махметхаждиева.
Правда, хочу оговориться, что скрипты, которые они предлагают, подходят для самописных сайтов, самостоятельных Landig Page, сверстанных программистами.
Пример анализа загрузки страницы сайта мобильной версии на сервисе LOADING.express:

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

Отдельно Скрипты я не продаю, но их можно скачать, зарегистрировавшись в Учебном разделе сайта Centr-Sit-Info Уровень Profi-bizblog. Раздел платный.
Но, регистрация стоит намного дешевле самих скриптов. Решайте сами.

Вам я хочу предложить только то, что протестировал и применяю на своих сайтах.

Перечень работ для улучшения показателей PageSpeed Insights.

А теперь, вкратце, что необходимо будет сделать на сайте WordPress, чтобы улучшить все 6 показателей PageSpeed Insights для быстрой загрузки его страниц.

FCP (First Contentful Paint).

Устранить всё, что блокирует первую отрисовку контента:

• Минимизируем файлы CSS. Если Стили меньше 100 килобайт, вписываем их методом инлайн (встраиваем стили CSS в HTML-код).
• По возможности, исключить выполнение Java-скриптов при первой отрисовке.
  Особое внимание внешним ресурсам (социальные сети, метрики).
• Если сайт сверстан грамотно, то для отрисовки первого контента на первом экране JS не требуются.

TTI (Time to Interactive).

• Отложить выполнение сторонних скриптов через атрибут lazi (на определенное
  время).
• Включить отложенную загрузку для фреймов (iframe) или заменить.
• Оптимизируем собственные скрипты сайта. Откладываем их загрузку с помощью атрибута defer (по всему сайту).
• По возможности, отказываемся от тяжелых библиотек.

SI (Speed Index).

• Улучшаем показатели FCP, LCP и TTI. В результате показатель Speed Index
  сам поднимется вверх.

TBT (Total Blocking Time).

• Разбиваем выполнение Java-скриптов на мелкие задачи.
  Оптимизируем long task — задачи (скрипты), на выполнение которых уходит более 50 миллисекунд.
• Откладываем функционал сайта ненужный для отрисовки.

LCP (Largest Contentful Paint).

Определяем самый крупный контент на первом экране сайта.

• Если это изображение, проверяем, чтобы оно не была отложено и добавляем его в предзагрузку — атрибут preload.
• Если текст — добавляем шрифт в предзагрузку (preload).

CLS (Cumulative Layout Shift).

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

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

Видео-версия, урок из учебного раздела Centr-Sit-Info Уровень Profi-bizblog:

В следующих статьях, с дополнительными видео-уроками, разберем конкретно каждый из методов увеличения производительности сайта. Применяя, по возможности, все рекомендации тестирования PageSpeed Insights.

Учитывая прошлый опыт, начнем работу со скриптами от внешних сервисов — Яндекс-метрика, Facebook, ВКонтакте, Одноклассники.
Читайте продолжение в статье — Оптимизация асинхронной загрузки кода виджетов социальных сетей.
Любой виджет из этих сервисов загружается раньше любого контента сайта, тем самым, сильно тормозит отрисовку первого экрана.

Тем, кому нужна помощь и кого заинтересовала данная тема, переходите в раздел
Centr-Sit-Info Уровень Profi-bizblog.

Нужна дополнительная информация, возникли сопутствующие вопросы? — пишите в комментариях – рад буду помочь.

Подписывайтесь на обновления Sit-Info, чтобы вовремя знать о выходе нового поста с необходимой информацией.
Не забываете нажать на кнопку Поделиться в социальных сетях.