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

Оптимизация под Google PageSpeed Insights

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

Цена: от 5 000 руб.

или

Что такое PageSpeed?

Google + Lighthouse = PageSpeed Insights. Лайтхаус это движок, на котором все работает, ядро. Пейджспид это надстройка и визуальная часть, и уже некий бренд.

Что измеряет Lighthouse?

  • производительность.
  • доступность сайта для людей с ограниченными возможностями.
  • SEO для сайтов и web-приложений.
  • дает рекомендации.

Как считается общий показатель PageSpeed?

В расчете участвуют 6 параметров:

  1. Первая отрисовка - First Contentful Paint - FCP.
  2. Отрисовка крупного контента - Largest Contentful Paint - LCP.
  3. Загрузка до интерактивности - Time to Interactive - TTI.
  4. Время полной блокировки - Total Blocking Time - TBT.
  5. Индекс скорости загрузки - Speed Index - SI.
  6. Совокупное смещение макета - Cumulative Layout Shift - CLS.

Все они имеют разную силу или вес в калькуляции 100% показателя PageSpeed:

  1. FCP влияет на 15%
  2. TTI влияет на 15%
  3. SI влияет на 15%
  4. TBT влияет на 25%
  5. LCP влияет на 25%
  6. CLS влияет на 5%

Как улучшить PageSpeed Insights?

Необходимо работать с наиболее значимыми показателями.

Оптимизация TBT + LCP даст больший эффект.

Первая отрисовка - First Contentful Paint - FCP

Что такое FCP?

Дословный перевод - первая отрисовка контента. Время между ответом сервера и появлением первого контента.

Время ответа сервера не входит в этот показатель.

До FCP посетитель сайта будет видеть белый экран. Измеряется в секундах.

Как измеряется FCP?

До 2 сек. - зеленая зона показателя. От 2 до 4 сек. - желтая. Больше 4 сек. - красная зона показателя.

Как улучшить FCP?

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

  1. Если стили меньше 100 килобайт, то вписать их методом инлайн.
  2. Исключить выполнение JS при первой отрисовке. Если сверстано грамотно, то для отрисовки первого контента в первом экране JS не требуется.

Загрузка до интерактивности - Time to Interactive - TTI

Что такое TTI?

Время до взаимодействия - это время, через которое страница полностью готова к взаимодействию с пользователем.

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

Как измеряется TTI?

До 3.8 сек. - зеленая зона показателя. От 3.9 до 7.3 сек. - желтая. Больше 7.4 сек. - красная зона показателя.

Как улучшить TTI?

  1. Сторонние (внешние) скрипты откладываем. Чат, Метрика, Аналитика;
  2. Iframe контент откладываем или отказываемся;
  3. Собственные скрипты - оптимизируем и разбиваем их выполнение на этапы;
  4. Отказываемся от тяжелых библиотек. Например от jQuery.

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

Что такое Speed Index?

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

Как измеряется Speed Index?

До 4.3 сек. - зеленая зона показателя. От 4.4 до 5.8 сек. - желтая. Больше 5.9 сек. - красная зона показателя.

Как улучшить Speed Index?

  1. Необходимо улучшать FCP, LCP, TTI и Speed Index подтянется.

Время полной блокировки - Total Blocking Time - TBT

Что такое TBT?

Это общее время блокировки основного потока в миллисекундах. Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 мс.

Это параметр показывает общую загрузку основного потока. Сюда входит и применение стилей и отрисовка, и выполнение JS. Измеряется в секундах.

Как измеряется TBT?

До 300 мс. - зеленая зона показателя. От 300 до 600 мс. - желтая. Больше 600 мс. - красная зона показателя блокировка потока.

Как улучшить TBT?

  1. Разбиваем выполнение JS на мелкие задачи.
  2. Оптимизируем long task.
  3. Откладываем по времени функционал, не нужный для отрисовки первого экрана сайта.

Отрисовка крупного контента - Largest Contentful Paint - LCP

Что такое LCP?

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

Как измеряется LCP?

До 2 сек. - зеленая зона показателя. От 2 до 4 сек. - желтая. Больше 4 сек. - красная зона показателя.

Как улучшить LCP?

Сначала нужно понять, что именно является элементом LCP.

  1. Если картинка, проверяем, что она не отложена.
  2. Если картинка - добавляем в preload.
  3. Если текст - добавляем шрифты в preload.
  4. Если текст - добавляем HTTP/2 Push Server.

Совокупное смещение макета - Cumulative Layout Shift - CLS

Что такое CLS?

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

Как измеряется CLS?

До 0.1 сек. - зеленая зона показателя. От 0.1 до 0.25 сек. - желтая. Больше 0.25 - красная зона показателя.

Как улучшить CLS?

Просто резервируем место для контента заранее, до его отображения и загрузки. Стабильность отображения контента - важное условие для этого показателя. Ничего не должно отъезжать и раздвигаться без резерва места заранее.

100% автоматический метод улучшения всех показателей

Его не существует. Никакие автоматические инструменты не способны сделать этот большой пласт работы.

Мы можем выполнить этот объем работ и привести ваш сайт к стандартам Google PageSpeed Insights.

Заказать оптимизацию под Google PageSpeed Insights