Свежая Расшифровка про Google PageSpeed Insights

Свежая Расшифровка про Google PageSpeed Insights

Полная Расшифровка PageSpeed Insights
Привет. В одном из прямых эфиров с Михаилом Шакиным, мы рассказали всё про PageSpeed Insights и как реально ускорить загрузку сайта.
В конце письма ссылка на видео. На нём есть временные метки. Смотреть удобно.
Что Такое PageSpeed
Google + Lighthouse = PageSpeed Insights . Лайтхаус это движок, на котором всё работает. Ядро. Пейджспид это надстройка и визуальная часть, и уже некий бренд.
Что измеряет Lighthouse: производительность; доступность сайта для людей с ограниченными возможностями; SEO для сайтов и web-приложений; даёт рекомендации
У нас есть свой Лайтхаус, проверьте в нём ваш сайт тоже — тут .
Как Рассчитывается PageSpeed
В расчете участвуют 6 параметров. Первая отрисовка (FCP), Отрисовка крупного контента (LCP), загрузка до интерактивности (TTI), время полной блокировки (TBT), индекс скорости загрузки (SI). Совокупное смещение макета (CLS). Они имеют разную силу или вес в калькуляции 100% показателя PageSpeed: FCP влияет на 15% TTI влияет на 15% SI влияет на 15% TBT влияет на 25% LCP влияет на 25% CLS влияет на 5%
Сам калькулятор здесь: googlechrome.github.io/lighthouse/scorecalc/ .
Теперь кратко, что значит каждый параметр и как его улучшить.
Как Улучшить PageSpeed Insights
Работайте с наиболее значимыми показателями.
Оптимизация TBT + LCP даст больший эффект.
Что Такое FCP
Дословный перевод  —  первая отрисовка контента. Время между ответом сервера и появлением первого контента.
Время ответа сервера не входит в этот показатель.
До FCP посетитель сайта будет видеть белый экран. Измеряется в секундах.
Как измеряется FCP
До двух секунд — зеленая зона показателя. От 2 до 4 секунд — желтая . Больше четырех — красная зона показателя.
Как Улучшить FCP
Убрать всё, что блокирует первую отрисовку контента: Если стили меньше 100 килобайт, то вписать их методом инлайн. Исключить выполнение JS при первой отрисовке. Если сверстано грамотно, то для отрисовки первого контента в первом экране JS не требуется.
Что Такое TTI
Время до взаимодействия — это время, через которое страница полностью готова к взаимодействию с пользователем.
До этого времени взаимодействие со страницей может вызывать затруднение (притормаживание скролла, не работают кнопки). Измеряется в секундах.
До 3.8 сек. — зеленая зона показателя. От 3.9 до 7.3 сек. — желтая . Больше 7.4 сек.  — красная зона показателя.
Как улучшить TTI Сторонние (внешние) скрипты откладываем. Чат, Метрика, Аналитика; Iframe контент откладываем или отказываемся; Собственные скрипты — оптимизируем и разбиваем их выполнение на этапы; Отказываемся от тяжелых библиотек. Например от jQuery.
Что Такое Speed Index Индекс скорости загрузки показывает, как быстро на странице появляется контент. (FCP, LCP, FMP). Насколько быстро загружается содержимое первого экрана вашего сайта при отрисовке в браузере. В секундах.
До 4.3 сек. — зеленая зона показателя. От 4.4 до 5.8 сек. — желтая . Больше 5.9 сек.  — красная зона показателя.
Как Улучшить Speed Index
Улучшаем FCP, LCP, TTI и Speed Index подтянется.
Что Такое TBT
Это общее время блокировки основного потока в миллисекундах. Суммарное время всех задач от FCP до TTI, которые выполнялись дольше 50 мс.
Это параметр показывает общую загрузку основного потока. Сюда входит и применение стилей и отрисовка, и выполнение JS. Измеряется в секундах.
До 300 мс. — зеленая зона показателя. От 300 до 600 мс. — желтая . Больше 600 мс.  — красная зона показателя блокировка потока.
Как улучшить TBT Разбиваем выполнение JS на мелкие задачи. Оптимизируем long task. Откладываем по времени функционал, не нужный для отрисовки первого экрана сайта.
Что Такое LCP
Отрисовка крупного контента — это время, через которое отрисовался крупный контент первого экрана вашей страницы. Это может быть изображение или текст.  До этого времени, первый экран вашего сайта ещё не полностью отрисован пользователю.
До 2 сек. — зеленая зона показателя. От 2 до 4 сек. — желтая . Больше 4 сек.  — красная зона показателя.
Как улучшить LCP
Сначала нужно понять, что именно является элементом LCP. Если картинка, проверяем, что она не отложена. Если картинка — добавляем в preload. Если текст — добавляем шрифты в preload. Если текст — добавляем HTTP/2 Push Server.
Что Такое CLS Показатель смещения элемента в процентах на странице во время загрузки.
Элементы могут смещаться из-за подгрузки изображений, шрифтов, рекламных блоков. Сверху или снизу. Чаще бывает сверху. Этот показатель считается в живых данных считается даже после полной загрузки страницы.
До 0.1 — зеленая зона показателя. От 0.1 до 0.25 сек. — желтая . Больше 0.25 — красная зона показателя.
Как улучшить CLS
Просто резервируем место для контента заранее, до его отображения и загрузки. Стабильность отображения контента — важное условие для этого показателя. Ничего не должно отъезжать и раздвигаться без резерва места заранее.
100% автоматический метод улучшения всех показателей
Его не существует. Никакие автоматические инструменты не способны сделать этот большой пласт работы. Но вы точно сможете сделать все показатели в норме, если найдете хорошего фронтенд программиста.
Или вы можете воспользоваться нашими наработками из следующего письма.
Видео про всё, что написано выше, с временными метками
В этом эфире мы с Михаилом Шакиным обсудили 6 способов оптимизации PageSpeed и рассказывали всё по порядку. В закрепленном комментарии можно найти временные метки. По клику на время — видео будет проигрываться именно с этого момента. Скачать презентацию в PDF
LOADING.express • sale@loading.express
Вы получили данную рассылку, так как являетесь клиентом или подписчиком LOADING.express. Отказаться от рассылки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Call Now Button