Total blocking time как уменьшить

Улучшаем производительность сайта с помощью PageSpeed от Google

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

Одним из инструментов для анализа качества и usability страницы с составлением отчёта является PageSpeed Insights (далее просто PageSpeed).

Какие вопросы я затрону в статье:

• что такое PageSpeed;
• как измеряется и оценивается производительность;
• лирическое отступление: critical render path;
• способы оптимизации PageSpeed;
• для чего это нужно?

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

При анализе мы получаем два результата: для десктопной и мобильной версий, где значения от 0 до 49 являются низкими, от 50 до 86 — средними, и от 87 до 100 — высокими.

С выходом 8-го релиза PageSpeed, на примере мобильной версии главной страницы ДомКлик (актуальной на момент написания статьи) мы можем увидеть значения ниже, чем, например, в 5-м релизе (см. дальше), что доказывает рост пороговых показателей и ужесточение требований к производительности сайтов.

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

На текущий момент в основном используются: имитация мобильного устройства Nexus 5 на Android, сеть 3G со скоростью 8 мегабит/с., задержка 150 миллисекунд, рендерится на европейских серверах и применяется троттлинг процессора.

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

Если говорить о критериях оценки, то основные представлены ниже:

First Contentful Paint — первичная отрисовка контента; показатель, определяющий интервал между началом загрузки страницы и появлением первого видимого блока, текста или изображения. Иными словами, время от ответа сервера до отрисовки, белый экран. Ответ сервера при этом не входит в этот показатель.

Speed Index — индекс скорости загрузки, который показывает, как быстро загружается содержимое.

Largest Contentful Paint — время отрисовки крупного содержимого, находящегося на первом экране. Под крупным содержимым мы понимаем картинки, видео или текст.

Time to Interactive — время, в течении которого страница становится полностью готова к взаимодействию с пользователем.

Total Blocking Time — сумма всех периодов от первой отрисовки содержимого, когда скорость выполнения задач превышала 50 мс. Измеряется в миллисекундах.

Cumulative Layout Shift — процентная величина, на которую смещаются видимые элементы области просмотра при загрузке.

Прежде чем описывать способы улучшения этих показателей, важно вспомнить, что такое Critical Render Path. Схематично шаги по отрисовке сайта выглядят следующим образом:

• запрос на сервер;
• получение HTML-документа;
• построение DOM-дерева;

• запрос на получение критических ресурсов (JS, CSS);
• построение CSSOM-дерева;

• получение и отработка JS-кода;
• построение render-дерева;
• отрисовка страницы

Как можно улучшить метрики?

Актуальная версия HTTP

Использование актуальной версии HTTP позволяет оптимизировать запросы к серверу. Если сравнивать версию HTTP/1.1, которая поддерживается до сих пор, и версию HTTP/2.0, то изменения ярко заметны и влияют на работу сайта в целом в HTML/2.0:

• используется мультиплексирование;
• служебные заголовки передаются в сжатом виде;
• повышается безопасность.

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

Используйте правильные размеры изображений. На странице не должно быть изображений, размер которых больше, чем можно отобразить на экране пользователя. С помощью «отзывчивых» изображений можно создать несколько версий каждой картинки, а затем через, к примеру, @media-запросы указать нужную для отображения. Также можно воспользоваться ресайзерами: thumbor, npm sharp, imagemagick или любым другим на ваш вкус.

Вне первого экрана важно использовать для всех изображений «ленивую загрузку», она позволяет подгружать картинки по мере необходимости.

Использование критического CSS

Прежде чем браузер отрисует содержимое страницы, он должен получить и обработать всю информацию о макете и внешних стилях для неё. Внешний CSS — это код, загружаемый через внешнюю таблицу стилей. В теории, он может считаться блокирующим, потому что, как сказано выше, браузер не сможет отрисовать страницу, пока этот код не будет обработан. Критический CSS отвечает за стили первого экрана сайта, такой код необходимо заинлайнить внутри прямо в HTML-документе, это снижает нагрузку на сервер.

Уменьшайте bundle.js

Минифицируйте JS и CSS, это ускорит анализ скриптов и сократит объём полезной сетевой нагрузки.

Откажитесь от тяжёлых библиотек и асинхронной/отложенной загрузки скриптов

Для сокращения расхода трафика необходимо поддерживать код в актуальном состоянии, своевременно удалять неиспользуемый код. Чтобы не блокировать основной поток, по возможности загружайте сторонние скрипты асинхронно (атрибут async или defer в тегах script , или приоритизация загрузки основного содержимого, к примеру, рекламу грузим после), и при их выборе отдавайте предпочтение более легковесным библиотекам. Если в подгружаемой библиотеке используется менее 10-ти методов, можно рассмотреть вариант самостоятельной реализации этих методов в проекте, но такой подход должен быть хорошо обдуман.

Уменьшайте Critical Render Path

Включает в себя совокупность предыдущих пунктов. Сюда можно добавить «ленивую загрузку» DOM-элементов.

Использование SSR

Server Side Rendering — рендеринг страницы на сервере. В этом случае поисковые роботы получают готовый код сайта, что важно в условиях новых правил ранжирования.

Это основные моменты, которые работают на практике и которые мы применяем у себя в ДомКлик при разработке сервисов.

Для чего нам нужно улучшать метрики?

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

Очень ёмко и кратко смысл оптимизации описывает цитата из твиттера Википедии:

Cut page load by 100ms and you save Wikipedia readers 617 years of wait annually

Подведём итоги

Не следует ставить перед собой цель достичь заветных 100 %, скорее, нужно сосредоточиться на поиске и оптимизации проблемных мест, на сокращении времени загрузки. Чтобы создавать удобный и быстрый сайт для пользователей не во вред функциональной части и не в ущерб пользовательскому опыту. Оптимизируйте с умом.

• web
• perfomance optimization

• Блог компании Домклик
• Клиентская оптимизация
• Веб-аналитика
• Поисковая оптимизация

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

В мире цифровых технологий скорость – это всё. Быстрый сайт не только улучшает пользовательский опыт и повышает конверсию, но также влияет на рейтинги в поисковой оптимизации (SEO). Так что, готовы ли вы улучшить производительность своего сайта? Давайте погрузимся в мир Google PageSpeed Insights и узнаем, как сделать ваш сайт более эффективным и быстрым.

Коротко о главном:

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

Google PageSpeed Insights, также известный как Google PageSpeed, — инструмент от Google, который оценивает производительность сайтов как мобильной и так десктопной версий. Используя данные из отчета Chrome User Experience и API Lighthouse, инструмент Google PageSpeed Insights предоставляет оценки и рекомендации по оптимизации для улучшения скорости вашего сайта.

Google PageSpeed предоставляет следующие возможности:

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

Сервис выдает результаты для десктопной и мобильной версий, где значения от 0 до 49 считаются низкими, от 50 до 86 — средними, и от 87 до 100 — высокими.

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

Google PageSpeed Insights использует следующие критерии оценки:

• First Contentful Paint (FCP): Интервал от начала загрузки страницы до появления первого видимого блока, текста или изображения. Это время от ответа сервера до первой отрисовки, исключая ответ сервера.
• Speed Index: Индекс скорости загрузки, отражающий скорость появления содержимого.
• Largest Contentful Paint (LCP): Время отрисовки крупного содержимого, такого как картинки, видео или текста, расположенного на первом экране.
• Time to Interactive (TTI): Время, за которое страница полностью готова к взаимодействию с пользователем.
• Total Blocking Time (TBT): Суммарное время, в течение которого скорость выполнения задач была более 50 мс, от первой отрисовки содержимого.
• Cumulative Layout Shift (CLS): Процентное изменение позиции видимых элементов области просмотра при загрузке.

Для улучшения метрик мы рекомендуем:

1. Обновить версию HTTP:

Переход на HTTP/2.0, поддерживающий мультиплексирование и сжатие служебных заголовков, повышает эффективность и безопасность.

2. Оптимизировать изображения:

• Использовать «отзывчивые» изображения с правильными размерами для экранов.
• Использовать такие форматы, как: WebP и SVG.
• Применять «ленивую загрузку» для изображений вне первого экрана. Такая загрузка позволяет подгружать изображения по мере необходимости в фоновом режиме.

3. Оптимизировать критическое CSS:

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

4. Уменьшить bundle.js:

Уменьшайте размер файлов JS и CSS, чтобы ускорить их обработку и снизить объем передаваемых данных.

5. Перейти на легкие библиотеки и оптимизировать загрузку скриптов:

• Поддерживайте актуальный код, удаляйте неиспользуемое.
• Загружайте сторонние скрипты асинхронно, отдавая предпочтение легким библиотекам.
• Если в библиотеке менее 10 методов, рассмотрите возможность самостоятельной реализации в проекте, чтобы снизить зависимости.

6. Использование SSR:

Рендеринг страницы на сервере (SSR) обеспечивает поисковым роботам готовый код сайта, который соответствует новым правилам ранжирования.

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

Оптимизация в цифрах из твиттера Википедии

Подведем итоги:

Не стремитесь к 100% оптимизации, а сфокусируйтесь на поиске и улучшении проблемных мест, сокращая время загрузки. Создавайте быстрый и удобный сайт, не жертвуя функциональностью и пользовательским опытом. Оптимизируйте разумно.

Вы можете попробовать оценить свой сайт самостоятельно, для этого перейдите на сайт Google PageSpeed Insights, введите URL вашего сайта и нажмите кнопку «Анализировать».

Но как говорится, лучше довериться профессионалам. У нашей компании свыше 50 успешно оптимизированных сайтов. Мы применяем только проверенные и уникальные методы оптимизации, которых нет у других. Мы гарантируем значительный рост показателей PageSpeed.

Оставьте заявку, перейдя по ссылке: https://www.artismedia.biz/pagespeed, и наши эксперты помогут максимально ускорить ваш сайт. Наша цель — не только создать быстрый ресурс, но и сделать его максимально удобным для ваших клиентов. Вместе мы сделаем ваш бизнес более продуктивным и конкурентоспособным.

Свежие записи

• 10 ЛУЧШИХ ПРОГРАММ ДЛЯ ОБМЕНА ФАЙЛАМИ НА ПК В 2024 ГОДУ
• ИССЛЕДОВАНИЯ 2024: ИИ ТРАНСФОРМИРУЕТ РИТЕЙЛ
• ЧТО ТАКОЕ БЕЗОПАСНОСТЬ КОНЕЧНЫХ ТОЧЕК И ПОЧЕМУ ЭТО ВАЖНО?
• ИИ 2024: НОВАЯ ЭРА В РАЗРАБОТКЕ ПО
• КАПЧА: ЗАЩИТА ОТ РОБОТОВ И ПОЧЕМУ БЕЗ НЕЁ НЕЛЬЗЯ

Рубрики

Архивы

• Январь 2024 (18)
• Декабрь 2023 (15)
• Ноябрь 2023 (2)
• Октябрь 2023 (8)
• Сентябрь 2023 (2)
• Август 2023 (2)
• Июль 2023 (1)
• Июнь 2023 (2)
• Май 2023 (1)
• Апрель 2023 (2)
• Март 2023 (3)
• Январь 2023 (2)
• Декабрь 2022 (1)
• Ноябрь 2022 (2)
• Октябрь 2022 (2)
• Сентябрь 2022 (2)
• Август 2022 (2)
• Июнь 2022 (1)
• Май 2022 (1)
• Апрель 2022 (1)
• Март 2022 (7)
• Январь 2022 (10)
• Декабрь 2021 (3)
• Ноябрь 2021 (5)
• Октябрь 2021 (2)
• Сентябрь 2021 (2)
• Июль 2021 (1)
• Июнь 2021 (1)
• Май 2021 (3)
• Февраль 2021 (3)
• Январь 2021 (1)
• Декабрь 2020 (1)
• Ноябрь 2020 (3)
• Октябрь 2020 (1)
• Сентябрь 2020 (5)
• Август 2020 (1)
• Июль 2020 (3)
• Июнь 2020 (1)
• Май 2020 (3)
• Апрель 2020 (1)
• Март 2020 (2)
• Февраль 2020 (1)
• Декабрь 2019 (1)
• Ноябрь 2019 (1)
• Октябрь 2019 (3)
• Сентябрь 2019 (3)
• Июль 2019 (1)
• Май 2019 (3)
• Апрель 2019 (8)
• Март 2019 (8)
• Февраль 2019 (7)
• Январь 2019 (9)
• Декабрь 2018 (7)
• Ноябрь 2018 (8)
• Октябрь 2018 (8)
• Сентябрь 2018 (8)
• Август 2018 (7)
• Июль 2018 (4)
• Июнь 2018 (8)
• Май 2018 (8)
• Апрель 2018 (6)
• Март 2018 (3)
• Февраль 2018 (1)
• Ноябрь 2017 (1)
• Октябрь 2017 (2)
• Август 2017 (4)
• Июль 2017 (6)
• Июнь 2017 (5)
• Май 2017 (1)
• Апрель 2017 (6)
• Март 2017 (10)
• Февраль 2017 (12)
• Январь 2017 (8)
• Декабрь 2016 (10)
• Ноябрь 2016 (12)
• Октябрь 2016 (11)
• Сентябрь 2016 (11)
• Август 2016 (13)
• Июль 2016 (11)
• Июнь 2016 (13)
• Май 2016 (6)
• Апрель 2016 (7)
• Март 2016 (5)
• Февраль 2016 (5)
• Январь 2016 (5)
• Декабрь 2015 (2)
• Ноябрь 2015 (8)
• Октябрь 2015 (1)
• Сентябрь 2015 (4)
• Август 2015 (7)
• Июль 2015 (5)
• Июнь 2015 (4)
• Май 2015 (14)
• Апрель 2015 (1)
• Март 2015 (4)
• Февраль 2015 (6)
• Январь 2015 (1)
• Декабрь 2014 (1)
• Ноябрь 2014 (5)
• Октябрь 2014 (9)
• Сентябрь 2014 (9)
• Февраль 2014 (1)
• Ноябрь 2013 (2)
• Сентябрь 2013 (4)
• Август 2013 (7)
• Июль 2013 (4)
• Май 2013 (7)

Общее время блокировки (TBT)

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Филип Уолтон

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

Что такое ТБТ?

Метрика «Общее время блокировки» (TBT) измеряет общее количество времени после первой контентной отрисовки (FCP), когда основной поток был заблокирован на достаточно долгое время, чтобы предотвратить реакцию ввода.

По умолчанию Lighthouse прекращает мониторинг TBT после Time to Interactive (TTI) , как и некоторые другие лабораторные инструменты, измеряющие загрузку страницы. См. Как TBT соотносится с TTI? .

Основной поток считается «заблокированным» каждый раз, когда существует длинная задача — задача, которая выполняется в основном потоке более 50 миллисекунд (мс). Мы говорим, что основной поток «заблокирован», потому что браузер не может прервать выполняемую задачу. Таким образом, в случае, если пользователь взаимодействует со страницей во время выполнения долгой задачи, браузеру придется дождаться завершения задачи, прежде чем он сможет ответить.

Если задача достаточно длинная (более 50 мс), вполне вероятно, что пользователь заметит задержку и воспримет страницу как вялую или дерганную.

Временем блокировки данной длинной задачи считается ее продолжительность более 50 мс. А общее время блокировки страницы представляет собой сумму времени блокировки для каждой длительной задачи, возникающей после FCP за измеренный период времени (обычно TTI для инструментов загрузки страниц или общее время трассировки для других инструментов).

Например, рассмотрим следующую диаграмму основного потока браузера во время загрузки страницы:

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

Таким образом, хотя общее время, затрачиваемое на выполнение задач в основном потоке, составляет 560 мс, только 345 мс из этого времени считаются временем блокировки.

Продолжительность задачи	Время блокировки задачи
Задача первая	250 мс	200 мс
Задача вторая	90 мс	40 мс
Задача третья	35 мс	0 мс
Задача четвертая	30 мс	0 мс
Задача пятая	155 мс	105 мс
Общее время блокировки		345 мс

Как ТБТ соотносится с TTI?

ТБТ измеряется в течение определенного периода времени. Для некоторых лабораторных инструментов, которые традиционно измеряют загрузку страниц, включая Lighthouse, TBT измеряется вплоть до TTI, поскольку он помогает количественно оценить степень неинтерактивности страницы до того, как она станет надежно интерактивной. Однако TBT также можно продолжать измерять после загрузки страницы и, следовательно, после TTI, например, в режиме Lighthouse Timespan.

TTI считает страницу «надежно интерактивной», если в основном потоке не было длительных задач в течение как минимум пяти секунд. Это означает, что три задачи по 51 мс, распределенные по 10 секундам, могут отодвинуть TTI так же далеко, как и одна задача длительностью 10 секунд, но эти два сценария будут сильно отличаться для пользователя, пытающегося взаимодействовать со страницей.

В первом случае три задачи по 51 мс будут иметь TBT 3 мс . В то время как для одной задачи продолжительностью 10 секунд TBT будет составлять 9950 мс . Большее значение TBT во втором случае количественно характеризует худшие впечатления.

Этот пример показывает, почему TBT часто является лучшим показателем, чем TTI, поскольку он менее подвержен выбросам. Это справедливо даже в том случае, когда TTI используется в качестве конечной точки для TBT.

Как измерить ТБТ

ТБТ – это показатель, который следует измерять в лаборатории . Лучший способ измерить TBT — провести аудит производительности Lighthouse на вашем сайте. Подробности использования см. в документации Lighthouse по TBT .

Лабораторные инструменты

• Маяк
• Веб-ПейджТест

Что такое хороший показатель TBT?

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

Подробную информацию о том, как TBT вашей страницы влияет на ваш показатель производительности Lighthouse, см. в разделе «Как Lighthouse определяет ваш показатель TBT».

Как улучшить ТБТ

Чтобы узнать, как улучшить TBT для конкретного сайта, вы можете запустить аудит производительности Lighthouse и обратить внимание на любые конкретные возможности, которые предлагает аудит.

Чтобы узнать, как улучшить TBT в целом (для любого сайта), обратитесь к следующим руководствам по производительности:

• Уменьшите влияние стороннего кода
• Сократите время выполнения JavaScript
• Минимизируйте работу основного потока
• Следите за тем, чтобы количество запросов было небольшим, а размеры переводов — небольшими.

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2023-11-17 UTC.

Оп­ти­ми­за­ция мет­рик Web Vitals с по­мо­щью Lighthouse

В этой статье мы рассмотрим новые возможности инструментов Lighthouse, PageSpeed и DevTools, чтобы помочь разобраться с тем, как улучшить ваш сайт по метрикам Web Vitals.

Коротко вспомним, что это за инструменты. Lighthouse — это автоматический, постоянно обновляемый инструмент с открытым кодом для улучшения качества страниц. Вы можете найти его в инструментах разработчика Chrome DevTools и запустить в нём любые страницы: публичные или скрытые за авторизацией. Вы также можете найти Lighthouse в PageSpeed Insights, CI и WebPageTest.

Lighthouse 7.x включает новые возможности, например, скриншоты элементов интерфейса, влияющих на пользовательские метрики, вроде тех, что вызывают смещение раскладки.

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

Метрики Core Web Vitals Скопировать ссылку

Lighthouse может синтетически измерять метрики Core Web Vitals, включая Largest Contentful Paint, Cumulative Layout Shift и Total Blocking Time (аналог First Input Delay для измерения в лабораторных условиях). Эти метрики отражают загрузку, стабильность раскладки и готовность страницы к взаимодействию. Также есть и другие метрики, такие как First Contentful Paint, с запасом на будущее Core Web Vitals (CWV).

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

Lighthouse фокусируется на оценке пользовательского опыта при начальной загрузке страницы в лабораторных условиях, эмулируя медленный телефон или десктоп. Если сдвиги макета или длительные JavaScript-таски возникнут на странице уже после её загрузки, лабораторные метрики этого не отразят. Для измерения показателей после загрузки страницы стоит обратиться к вкладке «Performance» инструментов разработчика, Search Console, расширения Web Vitals или RUM.

Полевые метрики, которые вы можете найти в отчёте Chrome User Experience (CrUX) или в RUM, не имеют этих ограничений и полезно дополняют лабораторные метрики. С другой стороны, полевые данные не могут предоставить диагностическую информацию, которую вы можете получить от лабораторных метрик, вот так они и сочетаются вместе.

Где можно улучшить метрики Web Vitals Скопировать ссылку

Largest Contentful Paint (LCP) Скопировать ссылку

LCP — характеристика воспринимаемой пользователем загрузки. Она отмечает точку в процессе загрузки страницы, когда главный (или самый большой) контент загрузился и стал видим пользователю.

В Lighthouse есть отчёт «Largest Contentful Paint element», который позволяет выделить такой LCP-элемент. Если навести на элемент в отчёте, он подсветится на странице.

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

Вам может пригодиться LCP-букмарклет Энни Салливан, который поможет быстро найти LCP-элемент и подсветить его красной рамкой в один клик.

Предзагрузка картинок для улучшения LCP Скопировать ссылку

Чтобы улучшить метрику LCP, вы можете предзагрузить хиро-картинки (например, обложки статей — прим. редактора), если браузер находит их слишком поздно. Одна из причин позднего обнаружения картинок — если сначала нужно загрузить JS-бандл, чтобы узнать о картинках, которые нужно загрузить.

Предзагрузкой нужно пользоваться аккуратно. Пропускная способность соединения на первом этапе загрузки страницы невелика и предзагрузка картинок может повлиять на загрузку других важных ресурсов. Для эффективной предзагрузки убедитесь, что ресурсы расположены в правильном порядке, чтобы не привести к ухудшению других метрик, когда другие ресурсы тоже считаются важными (например, критический CSS, JS, шрифты). Читайте подробнее о цене предзагрузки (Google Docs).

Начиная с версии 6.5, Lighthouse предлагает возможности для применения этой оптимизации.

Есть несколько популярных вопросов о предварительной загрузке LCP-картинок, которые стоит рассмотреть.

Можно ли предварительно загрузить адаптивные картинки? Да, можно. Скажем, у вас есть набор хиро-картинок для разных размеров экрана, которые описаны с помощью srcset и sizes , например:

Благодаря атрибутам imagesrcset и imagesizes , добавленным в , вы можете предзагрузить адаптивные картинки, используя ту же логику из srcset и sizes :

Подсветит ли отчёт возможности предзагрузки, если LCP-картинка задана с помощью CSS-фона? Да, конечно.

Любая картинка, помеченная как LCP (будь то или фоновая картинка в CSS), это кандидат для аудита, если она обнаружена в водопаде на глубине три уровня и больше.

Поиск влияний на CLS Скопировать ссылку

Кумулятивный сдвиг раскладки (Cumulative Layout Shift, CLS) — это оценка визуальной стабильности. Она показывает, насколько контент страницы визуально сдвигается во время загрузки. Lighthouse содержит специальный отчёт «Avoid large layout shifts» для отладки CLS.

Этот отчёт выделяет элементы DOM, которые вносят основной вклад в сдвиги на странице. В колонке «Element» отчёта Lighthouse вы увидите список таких элементов DOM, а справа — их вклад в CLS.

Благодаря новой возможности Lighthouse делать скриншот элемента мы теперь можем видеть превью ключевого элемента из отчёта и увеличивать его для более детального просмотра:

Для CLS после загрузки страницы, бывает полезно обозначить элементы, которые оказали наибольшее влияние на сдвиг раскладки. Это можно найти в сторонних инструментах, например, в панели Core Web Vitals от SpeedCurve или в Layout Shift GIF Generator от Defaced, который мне очень нравится:

Для анализа сдвигов раскладки для всего сайта мне помогает отчёт Core Web Vitals, который создаёт Google Search Console. Этот отчёт позволяет видеть страницы сайта с высоким значением CLS, что помогает понять, на какие файлы шаблонов мне стоит обратить внимание прежде всего:

Чтобы улучшить показатель CLS для веб-шрифтов, обратите внимание на новый дескриптор size-adjust для @font-face . Он позволяет изменять размер базовых шрифтов для уменьшения значения CLS.

Поиск картинок без размеров для улучшения CLS Скопировать ссылку

Чтобы уменьшить сдвиг раскладки, вызванный загрузкой ресурсов без заданных размеров, задайте картинкам и видео атрибуты width и height . Это помогает браузеру выделить достаточное место на странице, пока картинки или видео грузятся.

Читайте статью «Setting Height And Width On Images Is Important Again» для лучшего понимания важности указания размеров и соотношения сторон для картинок.

Поиск влияния на CLS от рекламы Скопировать ссылку

Отчёт «Publisher Ads для Lighthouse» позволит вам найти возможности загрузку рекламы на ваших страницах, включая роль рекламы в сдвиге раскладки и долгих операций, которые могут отложить интерактивность страницы для пользователей. Вы можете включить этот инструмент в Lighthouse с помощью Community Plugins.

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

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

Избегайте раздельных анимаций Скопировать ссылку

Анимации, не объединённые в общий композитный слой рендеринга, могут дёргаться на слабых устройствах, если исполнение сложных JavaScript-тасков занимает главный поток. Такие анимации могут вызывать и сдвиги раскладки.

Если Chrome обнаруживает, что анимация не может быть выделена в отдельный слой, он сообщает об этом в DevTools. Это позволяет составить список всех элементов, для которых анимация не была композитной и выяснить причину. Вы можете найти эту информацию в отчёте «Avoid non-composited animations».

Отладка метрик FID, TBT, LT Скопировать ссылку

Метрика First Input измеряет время от первой попытки взаимодействия со страницей (например, когда они кликают по ссылке, кнопке или использую JS-контрол), до момента, когда браузер действительно начинает обрабатывать события в ответ на это взаимодействие. Долгие JavaScript-таски могут повлиять на эту метрику и на её прокси-метрику Total Blocking Time.

Lighthouse включает отчёт «Avoid long main-thread tasks», которая перечисляет долгие таски в основном потоке. Это помогает отыскать самое большое влияние на задержку первого взаимодействия. В левой колонке вы можете увидеть адрес скрипта, ответственного за долгие таски в главном потоке.

Справа вы можете увидеть длительность выполнения этих тасок. Отмечу, что долгие таски — это те, что занимают более 50 миллисекунд. Такая длительность блокирует основной поток настолько, чтобы повлиять на частоту смены кадров или задержку первого взаимодействия.

Из сторонних сервисов для мониторинга работы основного потока мне понравился Calibre, который отображает на оси времени долгие таски, родительские и дочерние.

Блокировка сетевых запросов в Lighthouse Скопировать ссылку

Инструменты разработчика Chrome поддерживают блокировку сетевых запросов, чтобы увидеть вклад каждого из загружаемых ресурсов, если они доступны или нет. Это может оказаться важным для понимания вклада каждого отдельного скрипта, который может повлиять на такие метрики, как Total Blocking Time (TBT) и Time to Interactive (TTI).

Блокировка сетевых запросов также работает в Lighthouse! Давайте взглянем на отчёт Lighthouse для сайта. Например, «Performance» выдаёт 63 из 100 очков с TBT, равным 400 мс. Покопавшись, мы найдём загрузку полифила Intersection Observer в Chrome, который для этого браузера не нужен. Заблокируем его!

Мы можем кликнуть правой кнопкой на скрипте в инструментах разработчика на панели «Network» и выбрать «Block request URL». Здесь мы сделали это для полифила Intersection Observer.

Затем мы перезапускаем Lighthouse. На этот раз мы видим улучшение показателя Performance (70/100) и Total Blocking Time (с 400 мс до 300 мс).

Замена дорогих сторонних виджетов на заглушки Скопировать ссылку

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

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

Напомню, что Lighthouse будет подсвечивать сторонний код, который блокирует основной поток более, чем на 250 мс. Это поможет обнаружить все сторонние скрипты (включая собственные Google), которые стоит отложить или загрузить лениво, если результат их рендеринга прячется за прокруткой.

Не только Core Web Vitals Скопировать ссылку

Помимо использования Core Web Vitals, последние версии Lighthouse и PageSpeed Insights также пытаются обеспечить разработчиков конкретными советами для ускорения тяжёлых JS-приложений, если у вас включены карты кода.

Также эти инструменты включают растущий список отчётов для уменьшения стоимости JavaScript на ваших страницах, включая зависимость от полифилов и дублирование кода, который не нужен пользователям.

За подробностями об инструментах Core Web Vitals следите в Твиттере команды Lighthouse, а также в разделе What’s new in DevTools.