diff --git a/src/articles/web-vitals-lighthouse/images/1.webp b/src/articles/web-vitals-lighthouse/images/1.webp deleted file mode 100644 index b285449d4..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/1.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/11.webp b/src/articles/web-vitals-lighthouse/images/11.webp deleted file mode 100644 index 65f0305c9..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/11.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/12.webp b/src/articles/web-vitals-lighthouse/images/12.webp deleted file mode 100644 index ec34f59ab..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/12.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/13.webp b/src/articles/web-vitals-lighthouse/images/13.webp deleted file mode 100644 index 7fe1888cc..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/13.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/14.webp b/src/articles/web-vitals-lighthouse/images/14.webp deleted file mode 100644 index e933d7163..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/14.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/15.webp b/src/articles/web-vitals-lighthouse/images/15.webp deleted file mode 100644 index b596938c9..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/15.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/16.webp b/src/articles/web-vitals-lighthouse/images/16.webp deleted file mode 100644 index 1cbdef89e..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/16.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/17.webp b/src/articles/web-vitals-lighthouse/images/17.webp deleted file mode 100644 index 5fbca54cf..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/17.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/18.webp b/src/articles/web-vitals-lighthouse/images/18.webp deleted file mode 100644 index 5c3273d18..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/18.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/19.webp b/src/articles/web-vitals-lighthouse/images/19.webp deleted file mode 100644 index 9e4c04c20..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/19.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/2.webp b/src/articles/web-vitals-lighthouse/images/2.webp deleted file mode 100644 index 0b1c1ade9..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/2.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/20.webp b/src/articles/web-vitals-lighthouse/images/20.webp deleted file mode 100644 index 06ae3963d..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/20.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/21.webp b/src/articles/web-vitals-lighthouse/images/21.webp deleted file mode 100644 index 33cee66c6..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/21.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/3.webp b/src/articles/web-vitals-lighthouse/images/3.webp deleted file mode 100644 index bdbe94bfc..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/3.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/4.webp b/src/articles/web-vitals-lighthouse/images/4.webp deleted file mode 100644 index e60f1c7e7..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/4.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/5.webp b/src/articles/web-vitals-lighthouse/images/5.webp deleted file mode 100644 index a16be74ff..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/5.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/6.webp b/src/articles/web-vitals-lighthouse/images/6.webp deleted file mode 100644 index b2dd27f1f..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/6.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/7.webp b/src/articles/web-vitals-lighthouse/images/7.webp deleted file mode 100644 index e782e7222..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/7.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/8.webp b/src/articles/web-vitals-lighthouse/images/8.webp deleted file mode 100644 index 0fc1979d8..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/8.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/images/9.webp b/src/articles/web-vitals-lighthouse/images/9.webp deleted file mode 100644 index 527be57a1..000000000 Binary files a/src/articles/web-vitals-lighthouse/images/9.webp and /dev/null differ diff --git a/src/articles/web-vitals-lighthouse/index.md b/src/articles/web-vitals-lighthouse/index.md index cabd6f566..957f1499d 100644 --- a/src/articles/web-vitals-lighthouse/index.md +++ b/src/articles/web-vitals-lighthouse/index.md @@ -29,10 +29,7 @@ Lighthouse 7.x включает новые возможности, наприм Мы также добавили возможность делать скриншоты элементов страницы в PageSpeed Insights, чтобы легче было найти проблемы, которые возникают при разовой загрузке страницы. - - - Возможность делать скриншот элемента интерфейса пользователя с подсветкой узла DOM-дерева, участвующего в сдвиге раскладки на странице. - +![Возможность делать скриншот элемента интерфейса пользователя с подсветкой узла DOM-дерева, участвующего в сдвиге раскладки на странице.](images/1.png) ## Метрики Core Web Vitals @@ -40,21 +37,18 @@ Lighthouse может [синтетически](https://web.dev/vitals-measurem Раздел «Metrics» в отчёте Lighthouse включает лабораторные версии этих метрик. Его можно использовать как обзор аспектов пользовательского опыта, которые требует вашего внимания. - - - Метрики производительности Lighthouse. - +![Метрики производительности Lighthouse.](images/2.png) Lighthouse фокусируется на оценке пользовательского опыта при начальной загрузке страницы в лабораторных условиях, эмулируя медленный телефон или десктоп. Если сдвиги макета или длительные JavaScript-таски возникнут на странице уже после её загрузки, лабораторные метрики этого не отразят. Для измерения показателей после загрузки страницы стоит обратиться к вкладке «Performance» инструментов разработчика, [Search Console](https://search.google.com/search-console/about), [расширения Web Vitals](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma?hl=en) или [RUM](https://web.dev/vitals-measurement-getting-started/#measuring-web-vitals-using-rum-data).
- - - Трек Web Vitals на панели производительности в инструментах разработчика. - -
- На панели Web Vitals во вкладке Performance инструментов разработчика можно включить индикаторы, соответствующие метрикам. Например, индикаторы для метрики Layout Shift (LS) показаны на скриншоте выше. -
+ +![Трек Web Vitals на панели производительности в инструментах разработчика.](images/3.png) + +
+ На панели Web Vitals во вкладке Performance инструментов разработчика можно включить индикаторы, соответствующие метрикам. Например, индикаторы для метрики Layout Shift (LS) показаны на скриншоте выше. +
+
[Полевые метрики](https://web.dev/vitals-field-measurement-best-practices/), которые вы можете найти [в отчёте Chrome User Experience (CrUX)](https://developers.google.com/web/tools/chrome-user-experience-report) или [в RUM](https://developer.mozilla.org/en-US/docs/Web/Performance/Rum-vs-Synthetic), не имеют этих ограничений и полезно дополняют лабораторные метрики. С другой стороны, полевые данные не могут предоставить диагностическую информацию, которую вы можете получить от лабораторных метрик, вот так они и сочетаются вместе. @@ -67,33 +61,21 @@ LCP — характеристика воспринимаемой пользо В Lighthouse есть отчёт «Largest Contentful Paint element», который позволяет выделить такой LCP-элемент. Если навести на элемент в отчёте, он подсветится на странице. - - - Элемент, отрисовка которого занимает наибольшее время (LCP-элемент). - +![Элемент, отрисовка которого занимает наибольшее время (LCP-элемент).](images/4.png) Если этот элемент картинка, эта информация подскажет, что вам стоит оптимизировать её загрузку. В Lighthouse есть несколько отчётов по оптимизации графики, которые помогают понять, можно ли лучше сжать картинки, изменить их размеры или использовать более современный формат. - - - Аудит размера картинок. - +![Аудит размера картинок.](images/5.png) Вам может пригодиться [LCP-букмарклет](https://gist.github.com/anniesullie/cf2982342337fd1b2be95c2d5fe5ea06) Энни Салливан, который поможет быстро найти LCP-элемент и подсветить его красной рамкой в один клик. - - - Подсвеченный LCP-элемент. - +![Подсвеченный LCP-элемент.](images/6.png) ### Предзагрузка картинок для улучшения LCP Чтобы улучшить метрику LCP, вы можете [предзагрузить](https://web.dev/preload-responsive-images/) хиро-картинки _(например, обложки статей — прим. редактора),_ если браузер находит их слишком поздно. Одна из причин позднего обнаружения картинок — если сначала нужно загрузить JS-бандл, чтобы узнать о картинках, которые нужно загрузить. - - - Предварительная загрузка картинок. - +![Предварительная загрузка картинок.](images/7.png) **Предзагрузкой нужно пользоваться аккуратно**. Пропускная способность соединения на первом этапе загрузки страницы невелика и предзагрузка картинок может повлиять на загрузку других важных ресурсов. Для эффективной предзагрузки убедитесь, что ресурсы расположены в правильном порядке, чтобы не привести к ухудшению других метрик, когда другие ресурсы тоже считаются важными (например, критический CSS, JS, шрифты). Читайте подробнее [о цене предзагрузки](https://docs.google.com/document/d/1ZEi-XXhpajrnq8oqs5SiW-CXR3jMc20jWIzN5QRy1QA/view) (Google Docs). @@ -133,28 +115,19 @@ LCP — характеристика воспринимаемой пользо Этот отчёт выделяет элементы DOM, которые вносят основной вклад в сдвиги на странице. В колонке «Element» отчёта Lighthouse вы увидите список таких элементов DOM, а справа — их вклад в CLS. - - - Оценка Cumulative Layout Shift в Lighthouse выделяет узел DOM-дерева, который даёт существенный вклад в индикатор CLS. - +![Оценка Cumulative Layout Shift в Lighthouse выделяет узел DOM-дерева, который даёт существенный вклад в индикатор CLS.](images/8.png) Благодаря новой возможности Lighthouse делать скриншот элемента мы теперь можем видеть превью ключевого элемента из отчёта и увеличивать его для более детального просмотра: - - - Клик по скриншоту элемента увеличивает его. - +![Клик по скриншоту элемента увеличивает его.](images/9.png) Для CLS после загрузки страницы, бывает полезно обозначить элементы, которые оказали наибольшее влияние на сдвиг раскладки. Это можно найти в сторонних инструментах, например, [в панели Core Web Vitals](https://speedcurve.com/blog/web-vitals-user-experience/) от SpeedCurve или [в Layout Shift GIF Generator](https://defaced.dev/tools/layout-shift-gif-generator/) от Defaced, который мне очень нравится: -Генератор сдвига раскладки страницы, с выделением процесса сдвига. +![Генератор сдвига раскладки страницы, с выделением процесса сдвига.](images/10.gif) Для анализа сдвигов раскладки для всего сайта мне помогает [отчёт Core Web Vitals](https://support.google.com/webmasters/answer/9205520), который создаёт Google Search Console. Этот отчёт позволяет видеть страницы сайта с высоким значением CLS, что помогает понять, на какие файлы шаблонов мне стоит обратить внимание прежде всего: - - - Google Search Console отображает страницы, на которых есть проблемы с CLS. - +![Google Search Console отображает страницы, на которых есть проблемы с CLS.](images/11.png) Чтобы улучшить показатель CLS для веб-шрифтов, обратите внимание на новый дескриптор [`size-adjust`](https://groups.google.com/a/chromium.org/g/blink-dev/c/1PVr94hZHjU/m/J0xT8-rlAQAJ) для `@font-face`. Он позволяет изменять размер базовых шрифтов для уменьшения значения CLS. @@ -162,10 +135,7 @@ LCP — характеристика воспринимаемой пользо Чтобы [уменьшить](https://web.dev/optimize-cls/#images-without-dimensions) сдвиг раскладки, вызванный загрузкой ресурсов без заданных размеров, задайте картинкам и видео атрибуты `width` и `height`. Это помогает браузеру выделить достаточное место на странице, пока картинки или видео грузятся. - - - Поиск картинок без ширины и высоты. - +![Поиск картинок без ширины и высоты.](images/12.png) Читайте статью «[Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)» для лучшего понимания важности указания размеров и соотношения сторон для картинок. @@ -173,10 +143,7 @@ LCP — характеристика воспринимаемой пользо Отчёт «[Publisher Ads для Lighthouse](https://developers.google.com/publisher-ads-audits)» позволит вам найти возможности загрузку рекламы на ваших страницах, включая роль рекламы в сдвиге раскладки и долгих операций, которые могут отложить интерактивность страницы для пользователей. Вы можете включить этот инструмент в Lighthouse с помощью Community Plugins. - - - Аудит рекламных баннеров на странице, которые влияют на сдвиг раскладки и увеличивают время готовности к взаимодействию с пользователем. - +![Аудит рекламных баннеров на странице, которые влияют на сдвиг раскладки и увеличивают время готовности к взаимодействию с пользователем.](images/13.png) Помните, что рекламные баннеры — это элементы, которые по статистике [вносят наибольший вклад](https://web.dev/optimize-cls/#ads-embeds-and-iframes-without-dimensions) в сдвиг раскладки. Важно: @@ -189,19 +156,13 @@ LCP — характеристика воспринимаемой пользо Если Chrome обнаруживает, что анимация не может быть выделена в отдельный слой, он сообщает об этом в DevTools. Это позволяет составить список всех элементов, для которых анимация не была композитной и выяснить причину. Вы можете найти эту информацию в отчёте «[Avoid non-composited animations](https://web.dev/non-composited-animations/)». - - - Отчёт об анимациях, не объединённых в общий слой. - +![Отчёт об анимациях, не объединённых в общий слой.](images/14.png) ### Отладка метрик FID, TBT, LT Метрика First Input измеряет время от первой попытки взаимодействия со страницей (например, когда они кликают по ссылке, кнопке или использую JS-контрол), до момента, когда браузер действительно начинает обрабатывать события в ответ на это взаимодействие. Долгие JavaScript-таски могут повлиять на эту метрику и на её прокси-метрику Total Blocking Time. - - - Отчёт о долгих JS-тасках в основном потоке. - +![Отчёт о долгих JS-тасках в основном потоке.](images/15.png) Lighthouse включает отчёт «[Avoid long main-thread tasks](https://web.dev/long-tasks-devtools/)», которая перечисляет долгие таски в основном потоке. Это помогает отыскать самое большое влияние на задержку первого взаимодействия. В левой колонке вы можете увидеть адрес скрипта, ответственного за долгие таски в главном потоке. @@ -209,10 +170,7 @@ Lighthouse включает отчёт «[Avoid long main-thread tasks](https:// Из сторонних сервисов для мониторинга работы основного потока мне понравился [Calibre](https://calibreapp.com/docs/features/main-thread-execution-timeline), который отображает на оси времени долгие таски, родительские и дочерние. - - - JS-таски в основном потоке, отображённые с помощью Calibre. - +![JS-таски в основном потоке, отображённые с помощью Calibre.](images/16.png) ### Блокировка сетевых запросов в Lighthouse @@ -220,24 +178,15 @@ Lighthouse включает отчёт «[Avoid long main-thread tasks](https:// Блокировка сетевых запросов также работает в Lighthouse! Давайте взглянем на отчёт Lighthouse для сайта. Например, «Performance» выдаёт 63 из 100 очков с TBT, равным 400 мс. Покопавшись, мы найдём загрузку полифила Intersection Observer в Chrome, который для этого браузера не нужен. Заблокируем его! - - - Блокировка сетевых запросов. - +![Блокировка сетевых запросов.](images/17.png) Мы можем кликнуть правой кнопкой на скрипте в инструментах разработчика на панели «Network» и выбрать «Block request URL». Здесь мы сделали это для полифила Intersection Observer. - - - Заблокировать запрашиваемый URL в инструментах разработчика - +![Заблокировать запрашиваемый URL в инструментах разработчика.](images/18.png) Затем мы перезапускаем Lighthouse. На этот раз мы видим улучшение показателя Performance (70/100) и Total Blocking Time (с 400 мс до 300 мс). - - - После блокировки дорогого сетевого запроса. - +![После блокировки дорогого сетевого запроса.](images/19.png) ### Замена дорогих сторонних виджетов на заглушки @@ -245,17 +194,11 @@ Lighthouse включает отчёт «[Avoid long main-thread tasks](https:// Один из способов улучшения скорости загрузки таких виджетов — [ленивая загрузка во время взаимодействия](https://addyosmani.com/blog/import-on-interaction/). Это может быть реализовано с помощью лёгкой заглушки виджета: полная версия загрузится только тогда, когда начнётся взаимодействие. В Lighthouse есть отчёт, который рекомендует сторонние решения для [ленивой загрузки с заглушкой](https://web.dev/third-party-facades/), например, для видео с YouTube. - - - Отчёт позволяет выделить виджеты, которые могут быть заменены на заглушку с ленивой загрузкой. - +![Отчёт позволяет выделить виджеты, которые могут быть заменены на заглушку с ленивой загрузкой.](images/20.png) Напомню, что Lighthouse будет [подсвечивать сторонний код](https://web.dev/third-party-summary/), который блокирует основной поток более, чем на 250 мс. Это поможет обнаружить все сторонние скрипты (включая собственные Google), которые стоит отложить или загрузить лениво, если результат их рендеринга прячется за прокруткой. - - - Увеличение скорости загрузки страницы с помощью ленивой загрузки сторонних скриптов. - +![Увеличение скорости загрузки страницы с помощью ленивой загрузки сторонних скриптов.](images/21.png) ### Не только Core Web Vitals