Как The Economic Times преодолела пороговые значения Core Web Vitals и в целом увеличила показатель отказов на 43 %

Оптимизация основных веб-показателей на веб-сайте The Economic Times значительно улучшила взаимодействие с пользователем и существенно снизила показатель отказов по всему веб-сайту.

Аншу Шарма
Anshu Sharma
Прашант Мишра
Prashant Mishra
Сумит Гуньяни
Sumit Gugnani

Поскольку скорость интернета растет с каждым днем, пользователи ожидают, что веб-сайты будут реагировать и вести себя быстрее, чем когда-либо. The Economic Times обслуживает более 45 миллионов активных пользователей в месяц. Оптимизируя основные веб-показатели по всему домену, на страницах AMP и не-AMP, нам удалось значительно снизить показатели отказов и улучшить качество чтения.

Измерение воздействия

Мы сосредоточились на наибольшем отрисовке контента (LCP) и совокупном сдвиге макета (CLS) , поскольку они имеют наибольшее значение, когда речь идет о предоставлении нашим пользователям приятных впечатлений от чтения. После внедрения различных исправлений производительности, описанных ниже, The Economic Times удалось значительно улучшить показатели отчета Chrome User Experiments (CrUX) за несколько месяцев.

В целом показатель CLS улучшился на 250% с 0,25 до 0,09. В целом время LCP улучшилось на 80 % с 4,5 до 2,5 секунд.

Далее значения LCP в диапазоне «Плохие» были снижены на 33% с октября 2020 года по июль 2021 года:

Распределения LCP сгруппированы по месяцам, начиная с октября 2020 г. и заканчивая июлем 2021 г. Сумма значений LCP, классифицированных как «Плохие», уменьшена с 15,03% до 10,08%.

Кроме того, значения CLS в диапазоне «Плохо» были снижены на 65%, а значения CLS в диапазоне «Хорошо» увеличились на 20% за тот же период времени:

Распределения CLS сгруппированы по месяцам, начиная с октября 2020 года и заканчивая июлем 2021 года. Количество значений CLS, классифицированных как «Плохие», сократилось с 25,92% до 9%, а количество значений CLS, классифицированных как «Хорошие», увеличилось с 62,62%. до 76,5%.

В результате The Economic Times, которая ранее не соответствовала пороговым значениям Core Web Vitals, теперь превысила пороговые значения Core Web Vitals по всему своему источнику и снизила показатели отказов в целом на 43% .

Анимация страницы статьи The Economic Times до и после.

Что такое LCP и как мы его улучшили?

Самый большой элемент является наиболее важным для улучшения пользовательского опыта и определения скорости загрузки. Показатели производительности, такие как First Contentful Paint (FCP), отражают только начальный опыт загрузки страницы. С другой стороны, LCP сообщает время рендеринга наибольшего фрагмента изображения, текста или видео, видимого пользователю.

Помимо перехода на более быстрого DNS-провайдера и оптимизации изображений, вот некоторые из методов, которые мы рассмотрели для улучшения LCP.

Критические запросы в первую очередь

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

Внешний вид текста

Мы экспериментировали со свойством font-display поскольку оно влияет как на LCP, так и на CLS. Мы попробовали font-display: auto; а затем переключился на font-display: swap; . При этом текст сначала отображается в наиболее подходящем и доступном шрифте, а затем переключается на этот шрифт после его загрузки. Это привело к быстрому рендерингу текста, независимо от скорости сети.

Лучшее сжатие

Brotli — это альтернативный алгоритм сжатия Gzip и Deflate, разработанный Google. Мы заменили наши шрифты и ресурсы, а также изменили серверное сжатие с Gzip на Brotli, чтобы уменьшить занимаемый объем:

  • Файлы Javascript на 15% меньше, чем при использовании Gzip.
  • HTML-файлы на 18% меньше, чем при использовании Gzip.
  • Файлы CSS и шрифтов на 17 % меньше, чем при использовании Gzip.

Предварительное подключение к сторонним доменам

preconnect следует использовать осторожно, поскольку он все равно может отнимать ценное время ЦП и задерживать другие важные ресурсы, особенно при защищенных соединениях.

Однако если известно, что произойдет выборка ресурса в стороннем домене, preconnect подойдет. Если это происходит только время от времени на веб-сайте с высоким трафиком, preconnect может вызвать ненужную работу TCP и TLS. Таким образом, dns-prefetch лучше подходит для сторонних ресурсов (например, социальных сетей, аналитики и т. д.) для предварительного поиска DNS.

Разбить код на куски

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

Лучшее кэширование

Для всех внешних маршрутов мы добавили слой Redis , который обслуживал шаблоны из кеша. Это сокращает время вычислений на сервере и создает весь пользовательский интерфейс в каждом запросе, тем самым уменьшая LCP в последующих запросах.

Подведение итогов целей и достижений LCP

Прежде чем приступить к проекту оптимизации, команда оценила свой показатель LCP на уровне 4,5 секунды (для 75-го процентиля своих пользователей, на основе данных полей отчета CrUX). После проекта оптимизации оно сократилось до 2,5 секунд .

Распределение LCP с сентября 2020 года по июнь 2021 года. В целом 75-й процентиль значений LCP, наблюдаемых в отчете об опыте пользователей Chrome, показал снижение на 8,97 % «плохих» значений LCP. Общее снижение времени LCP на 75-м процентиле составило 200 миллисекунд, при этом 77,63% значений LCP попали в «хороший» диапазон.
Источник: Отчет CruUX The Economic Times в целом LCP.

Что такое CLS и как мы его улучшили?

Замечали ли вы когда-нибудь неожиданное перемещение содержимого страницы во время просмотра веб-сайта? Одной из причин этого является асинхронная загрузка мультимедиа (изображений, видео, рекламы и т. д.) на странице с неизвестными размерами. Как только медиаресурсы загружаются, они меняют макет страницы.

Мы собираемся рассказать о мерах, которые мы предприняли для улучшения CLS, на веб-сайте The Economic Times.

Используйте заполнители

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

Параллельное сравнение веб-сайта The Economic Times, показанного на мобильном телефоне. Слева серый заполнитель зарезервирован для изображения главного героя статьи. Справа заполнитель заменяется загруженным изображением.

Определенные размеры контейнера

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

Подведение итогов целей и достижений CLS

Прежде чем приступить к проекту оптимизации, команда оценила свой показатель CLS на уровне 0,25 . Нам удалось значительно снизить его на 90% до 0,09 .

Дистрибутивы CLS, показанные в отчете об опыте использования Chrome. 76% значений CLS имеют оценку «хорошо», 15% — «удовлетворительно» и 9% — «плохо». Для 75-го процентиля пользовательского опыта на веб-сайте The Economic Times общий показатель CLS составил 0,09.

Что такое задержка первого ввода (FID) и как мы ее улучшили?

Первая задержка ввода — это показатель, который отслеживает реакцию веб-сайта на ввод пользователя. Основная причина плохой оценки FID — тяжелая работа JavaScript, из-за которой основной поток браузера занят, что может задерживать взаимодействие с пользователем. Мы улучшили FID несколькими способами.

Разбивайте длинные задачи JavaScript

Длинные задачи — это задачи длительностью 50 миллисекунд или дольше. Длинные задачи занимают основной поток браузера и не позволяют ему реагировать на ввод пользователя. По запросу пользователя мы разбивали долго выполняющиеся задачи на более мелкие задачи, что помогло уменьшить раздувание Javascript.

Время процессора с разбивкой по типам активности на панели производительности DevTools Chrome. На планирование загрузки ресурсов было потрачено 143 миллисекунды. На JavaScript было потрачено 4553 миллисекунды. На работу рендеринга было потрачено 961 миллисекунда. На операции покраски ушло 191 миллисекунда. 1488 миллисекунд на системные задачи, 3877 миллисекунд простоя. Общий таймфрейм составил 11212 миллисекунд.

Отложить неиспользуемый JavaScript

Мы отдали приоритет контенту страницы над сторонними скриптами, такими как аналитика, чтобы страница была более отзывчивой. Однако для некоторых библиотек существуют определенные ограничения, поскольку их необходимо загружать в документ <head> , чтобы точно отслеживать путь пользователя.

Уменьшите количество полифилов

Мы уменьшили нашу зависимость от определенных полифилов и библиотек, поскольку браузеры поддерживают современные API, и меньше пользователей используют устаревшие браузеры, такие как Internet Explorer.

Ленивая загрузка рекламы

Ленивая загрузка рекламы внизу страницы помогла сократить время блокировки основного потока и тем самым улучшить FID.

Подведение итогов целей и достижений FID

Сегодня в ходе рутинных экспериментов нам удалось снизить время ПИД с 200 мс до менее 50 мс.

Распределения FID показаны в отчете об опыте использования Chrome. 86% значений CLS имеют оценку «хорошо», 10% — «удовлетворительно» и 4% — «плохо». Для 75-го процентиля пользовательского опыта на веб-сайте The Economic Times в целом FID составил 44 миллисекунды.

Предотвращение регрессий

The Economics Times планирует внедрить автоматизированные проверки производительности в рабочей среде, чтобы избежать снижения производительности страниц. Они планируют протестировать Lighthouse-CI для автоматизации лабораторных испытаний и предотвращения регрессий в их производственной отрасли.

,

Оптимизация основных веб-показателей на веб-сайте The Economic Times значительно улучшила взаимодействие с пользователем и существенно снизила показатель отказов по всему веб-сайту.

Аншу Шарма
Anshu Sharma
Прашант Мишра
Prashant Mishra
Сумит Гуньяни
Sumit Gugnani

Поскольку скорость интернета растет с каждым днем, пользователи ожидают, что веб-сайты будут реагировать и вести себя быстрее, чем когда-либо. The Economic Times обслуживает более 45 миллионов активных пользователей в месяц. Оптимизируя основные веб-показатели по всему домену, на страницах AMP и не-AMP, нам удалось значительно снизить показатели отказов и улучшить качество чтения.

Измерение воздействия

Мы сосредоточились на наибольшем отрисовке контента (LCP) и совокупном сдвиге макета (CLS) , поскольку они имеют наибольшее значение, когда речь идет о предоставлении нашим пользователям приятных впечатлений от чтения. После внедрения различных исправлений производительности, описанных ниже, The Economic Times удалось значительно улучшить показатели отчета Chrome User Experiments (CrUX) за несколько месяцев.

В целом показатель CLS улучшился на 250% с 0,25 до 0,09. В целом время LCP улучшилось на 80 % с 4,5 до 2,5 секунд.

Далее значения LCP в диапазоне «Плохие» были снижены на 33% с октября 2020 года по июль 2021 года:

Распределения LCP сгруппированы по месяцам, начиная с октября 2020 г. и заканчивая июлем 2021 г. Сумма значений LCP, классифицированных как «Плохие», уменьшена с 15,03% до 10,08%.

Кроме того, значения CLS в диапазоне «Плохо» были снижены на 65%, а значения CLS в диапазоне «Хорошо» увеличились на 20% за тот же период:

Распределения CLS сгруппированы по месяцам, начиная с октября 2020 г. и заканчивая июлем 2021 г. Количество значений CLS, классифицированных как «Плохие», сократилось с 25,92% до 9%, а количество значений CLS, классифицированных как «Хорошие», увеличилось с 62,62%. до 76,5%.

В результате The Economic Times, которая ранее не соответствовала пороговым значениям Core Web Vitals, теперь превысила пороговые значения Core Web Vitals по всему своему источнику и снизила показатели отказов в целом на 43% .

Анимация страницы статьи The Economic Times до и после.

Что такое LCP и как мы его улучшили?

Самый большой элемент является наиболее важным для улучшения пользовательского опыта и определения скорости загрузки. Показатели производительности, такие как First Contentful Paint (FCP), отражают только начальный опыт загрузки страницы. С другой стороны, LCP сообщает время рендеринга наибольшего фрагмента изображения, текста или видео, видимого пользователю.

Помимо перехода на более быстрого DNS-провайдера и оптимизации изображений, вот некоторые из методов, которые мы рассмотрели для улучшения LCP.

Критические запросы в первую очередь

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

Внешний вид текста

Мы экспериментировали со свойством font-display поскольку оно влияет как на LCP, так и на CLS. Мы попробовали font-display: auto; а затем переключился на font-display: swap; . При этом текст сначала отображается в наиболее подходящем и доступном шрифте, а затем переключается на этот шрифт после его загрузки. Это привело к быстрому рендерингу текста, независимо от скорости сети.

Лучшее сжатие

Brotli — это альтернативный алгоритм сжатия Gzip и Deflate, разработанный Google. Мы заменили наши шрифты и ресурсы, а также изменили серверное сжатие с Gzip на Brotli, чтобы уменьшить занимаемый объем:

  • Файлы Javascript на 15% меньше, чем при использовании Gzip.
  • HTML-файлы на 18% меньше, чем при использовании Gzip.
  • Файлы CSS и шрифтов на 17 % меньше, чем при использовании Gzip.

Предварительное подключение к сторонним доменам

preconnect следует использовать осторожно, поскольку он все равно может отнимать ценное время ЦП и задерживать другие важные ресурсы, особенно при защищенных соединениях.

Однако если известно, что произойдет выборка ресурса в стороннем домене, preconnect подойдет. Если это происходит только время от времени на веб-сайте с высоким трафиком, preconnect может вызвать ненужную работу TCP и TLS. Таким образом, dns-prefetch лучше подходит для сторонних ресурсов (например, социальных сетей, аналитики и т. д.) для предварительного поиска DNS.

Разбить код на куски

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

Лучшее кэширование

Для всех внешних маршрутов мы добавили слой Redis , который обслуживал шаблоны из кеша. Это сокращает время вычислений на сервере и создает весь пользовательский интерфейс в каждом запросе, тем самым уменьшая LCP в последующих запросах.

Подведение итогов целей и достижений LCP

Прежде чем приступить к проекту оптимизации, команда оценила свой показатель LCP на уровне 4,5 секунды (для 75-го процентиля своих пользователей, на основе данных полей отчета CrUX). После проекта оптимизации оно сократилось до 2,5 секунд .

Распределение LCP с сентября 2020 года по июнь 2021 года. В целом 75-й процентиль значений LCP, наблюдаемых в отчете об опыте пользователей Chrome, показал снижение на 8,97 % «плохих» значений LCP. Общее снижение времени LCP на 75-м процентиле составило 200 миллисекунд, при этом 77,63% значений LCP попали в «хороший» диапазон.
Источник: Отчет CruUX The Economic Times в целом LCP.

Что такое CLS и как мы его улучшили?

Замечали ли вы когда-нибудь неожиданное перемещение содержимого страницы во время просмотра веб-сайта? Одной из причин этого является асинхронная загрузка мультимедиа (изображений, видео, рекламы и т. д.) на странице с неизвестными размерами. Как только медиаресурсы загружаются, они меняют макет страницы.

Мы собираемся рассказать о мерах, которые мы предприняли для улучшения CLS, на веб-сайте The Economic Times.

Используйте заполнители

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

Параллельное сравнение веб-сайта The Economic Times, показанного на мобильном телефоне. Слева серый заполнитель зарезервирован для изображения главного героя статьи. Справа заполнитель заменяется загруженным изображением.

Определенные размеры контейнера

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

Подведение итогов целей и достижений CLS

Прежде чем приступить к проекту оптимизации, команда оценила свой показатель CLS на уровне 0,25 . Нам удалось значительно снизить его на 90% до 0,09 .

Дистрибутивы CLS, показанные в отчете об опыте использования Chrome. 76% значений CLS имеют оценку «хорошо», 15% — «удовлетворительно» и 9% — «плохо». Для 75-го процентиля пользовательского опыта на веб-сайте The Economic Times общий показатель CLS составил 0,09.

Что такое задержка первого ввода (FID) и как мы ее улучшили?

Первая задержка ввода — это показатель, который отслеживает реакцию веб-сайта на ввод пользователя. Основная причина плохой оценки FID — тяжелая работа JavaScript, из-за которой основной поток браузера занят, что может задерживать взаимодействие с пользователем. Мы улучшили FID несколькими способами.

Разбивайте длинные задачи JavaScript

Длинные задачи — это задачи длительностью 50 миллисекунд или дольше. Длинные задачи занимают основной поток браузера и не позволяют ему реагировать на ввод пользователя. По запросу пользователя мы разбивали долго выполняющиеся задачи на более мелкие задачи, что помогло уменьшить раздувание Javascript.

Время процессора с разбивкой по типам активности на панели производительности DevTools Chrome. На планирование загрузки ресурсов было потрачено 143 миллисекунды. На JavaScript было потрачено 4553 миллисекунды. На работу рендеринга было потрачено 961 миллисекунда. На операции покраски ушло 191 миллисекунда. 1488 миллисекунд на системные задачи, 3877 миллисекунд простоя. Общий таймфрейм составил 11212 миллисекунд.

Отложить неиспользуемый JavaScript

Мы отдали приоритет контенту страницы над сторонними скриптами, такими как аналитика, чтобы страница была более отзывчивой. Однако для некоторых библиотек существуют определенные ограничения, поскольку их необходимо загружать в документ <head> , чтобы точно отслеживать путь пользователя.

Уменьшите количество полифилов

Мы уменьшили нашу зависимость от определенных полифилов и библиотек, поскольку браузеры поддерживают современные API, и меньше пользователей используют устаревшие браузеры, такие как Internet Explorer.

Ленивая загрузка рекламы

Ленивая загрузка рекламы внизу страницы помогла сократить время блокировки основного потока и тем самым улучшить FID.

Подведение итогов целей и достижений FID

Сегодня в ходе рутинных экспериментов нам удалось снизить время ПИД с 200 мс до менее 50 мс.

Распределения FID показаны в отчете об опыте использования Chrome. 86% значений CLS имеют оценку «хорошо», 10% — «удовлетворительно» и 4% — «плохо». Для 75-го процентиля пользовательского опыта на веб-сайте The Economic Times в целом FID составил 44 миллисекунды.

Предотвращение регрессий

The Economics Times планирует внедрить автоматизированные проверки производительности в рабочей среде, чтобы избежать снижения производительности страниц. Они планируют протестировать Lighthouse-CI для автоматизации лабораторных испытаний и предотвращения регрессий в их производственной отрасли.