Оптимизация основных веб-показателей на веб-сайте The Economic Times значительно улучшила взаимодействие с пользователем и существенно снизила показатель отказов по всему веб-сайту.
Поскольку скорость интернета растет с каждым днем, пользователи ожидают, что веб-сайты будут реагировать и вести себя быстрее, чем когда-либо. 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 года:
Кроме того, значения CLS в диапазоне «Плохо» были снижены на 65%, а значения CLS в диапазоне «Хорошо» увеличились на 20% за тот же период времени:
В результате The Economic Times, которая ранее не соответствовала пороговым значениям Core Web Vitals, теперь превысила пороговые значения Core Web Vitals по всему своему источнику и снизила показатели отказов в целом на 43% .
Что такое 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 секунд .
Что такое CLS и как мы его улучшили?
Замечали ли вы когда-нибудь неожиданное перемещение содержимого страницы во время просмотра веб-сайта? Одной из причин этого является асинхронная загрузка мультимедиа (изображений, видео, рекламы и т. д.) на странице с неизвестными размерами. Как только медиаресурсы загружаются, они меняют макет страницы.
Мы собираемся рассказать о мерах, которые мы предприняли для улучшения CLS, на веб-сайте The Economic Times.
Используйте заполнители
Мы использовали стилизованный заполнитель для рекламных блоков и медиа-элементов известных размеров, чтобы избежать смещения макета при загрузке и отображении рекламных объявлений на странице библиотеки объявлений. Это гарантирует отсутствие сдвигов в макете за счет резервирования места для рекламы.
Определенные размеры контейнера
Мы указали явные размеры для всех изображений и контейнеров, чтобы движку браузера не приходилось вычислять ширину и высоту элементов DOM, когда они станут доступны. Это позволило избежать ненужных сдвигов макета и дополнительных покрасочных работ.
Подведение итогов целей и достижений CLS
Прежде чем приступить к проекту оптимизации, команда оценила свой показатель CLS на уровне 0,25 . Нам удалось значительно снизить его на 90% до 0,09 .
Что такое задержка первого ввода (FID) и как мы ее улучшили?
Первая задержка ввода — это показатель, который отслеживает реакцию веб-сайта на ввод пользователя. Основная причина плохой оценки FID — тяжелая работа JavaScript, из-за которой основной поток браузера занят, что может задерживать взаимодействие с пользователем. Мы улучшили FID несколькими способами.
Разбивайте длинные задачи JavaScript
Длинные задачи — это задачи длительностью 50 миллисекунд или дольше. Длинные задачи занимают основной поток браузера и не позволяют ему реагировать на ввод пользователя. По запросу пользователя мы разбивали долго выполняющиеся задачи на более мелкие задачи, что помогло уменьшить раздувание Javascript.
Отложить неиспользуемый JavaScript
Мы отдали приоритет контенту страницы над сторонними скриптами, такими как аналитика, чтобы страница была более отзывчивой. Однако для некоторых библиотек существуют определенные ограничения, поскольку их необходимо загружать в документ <head> , чтобы точно отслеживать путь пользователя.
Уменьшите количество полифилов
Мы уменьшили нашу зависимость от определенных полифилов и библиотек, поскольку браузеры поддерживают современные API, и меньше пользователей используют устаревшие браузеры, такие как Internet Explorer.
Ленивая загрузка рекламы
Ленивая загрузка рекламы внизу страницы помогла сократить время блокировки основного потока и тем самым улучшить FID.
Подведение итогов целей и достижений FID
Сегодня в ходе рутинных экспериментов нам удалось снизить время ПИД с 200 мс до менее 50 мс.
Предотвращение регрессий
The Economics Times планирует внедрить автоматизированные проверки производительности в рабочей среде, чтобы избежать снижения производительности страниц. Они планируют протестировать Lighthouse-CI для автоматизации лабораторных испытаний и предотвращения регрессий в их производственной отрасли.
,Оптимизация основных веб-показателей на веб-сайте The Economic Times значительно улучшила взаимодействие с пользователем и существенно снизила показатель отказов по всему веб-сайту.
Поскольку скорость интернета растет с каждым днем, пользователи ожидают, что веб-сайты будут реагировать и вести себя быстрее, чем когда-либо. 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 года:
Кроме того, значения CLS в диапазоне «Плохо» были снижены на 65%, а значения CLS в диапазоне «Хорошо» увеличились на 20% за тот же период:
В результате The Economic Times, которая ранее не соответствовала пороговым значениям Core Web Vitals, теперь превысила пороговые значения Core Web Vitals по всему своему источнику и снизила показатели отказов в целом на 43% .
Что такое 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 секунд .
Что такое CLS и как мы его улучшили?
Замечали ли вы когда-нибудь неожиданное перемещение содержимого страницы во время просмотра веб-сайта? Одной из причин этого является асинхронная загрузка мультимедиа (изображений, видео, рекламы и т. д.) на странице с неизвестными размерами. Как только медиаресурсы загружаются, они меняют макет страницы.
Мы собираемся рассказать о мерах, которые мы предприняли для улучшения CLS, на веб-сайте The Economic Times.
Используйте заполнители
Мы использовали стилизованный заполнитель для рекламных блоков и медиа-элементов известных размеров, чтобы избежать смещения макета при загрузке и отображении рекламных объявлений на странице библиотеки объявлений. Это гарантирует отсутствие сдвигов в макете за счет резервирования места для рекламы.
Определенные размеры контейнера
Мы указали явные размеры для всех изображений и контейнеров, чтобы движку браузера не приходилось вычислять ширину и высоту элементов DOM, когда они станут доступны. Это позволило избежать ненужных сдвигов макета и дополнительных покрасочных работ.
Подведение итогов целей и достижений CLS
Прежде чем приступить к проекту оптимизации, команда оценила свой показатель CLS на уровне 0,25 . Нам удалось значительно снизить его на 90% до 0,09 .
Что такое задержка первого ввода (FID) и как мы ее улучшили?
Первая задержка ввода — это показатель, который отслеживает реакцию веб-сайта на ввод пользователя. Основная причина плохой оценки FID — тяжелая работа JavaScript, из-за которой основной поток браузера занят, что может задерживать взаимодействие с пользователем. Мы улучшили FID несколькими способами.
Разбивайте длинные задачи JavaScript
Длинные задачи — это задачи длительностью 50 миллисекунд или дольше. Длинные задачи занимают основной поток браузера и не позволяют ему реагировать на ввод пользователя. По запросу пользователя мы разбивали долго выполняющиеся задачи на более мелкие задачи, что помогло уменьшить раздувание Javascript.
Отложить неиспользуемый JavaScript
Мы отдали приоритет контенту страницы над сторонними скриптами, такими как аналитика, чтобы страница была более отзывчивой. Однако для некоторых библиотек существуют определенные ограничения, поскольку их необходимо загружать в документ <head> , чтобы точно отслеживать путь пользователя.
Уменьшите количество полифилов
Мы уменьшили нашу зависимость от определенных полифилов и библиотек, поскольку браузеры поддерживают современные API, и меньше пользователей используют устаревшие браузеры, такие как Internet Explorer.
Ленивая загрузка рекламы
Ленивая загрузка рекламы внизу страницы помогла сократить время блокировки основного потока и тем самым улучшить FID.
Подведение итогов целей и достижений FID
Сегодня в ходе рутинных экспериментов нам удалось снизить время ПИД с 200 мс до менее 50 мс.
Предотвращение регрессий
The Economics Times планирует внедрить автоматизированные проверки производительности в рабочей среде, чтобы избежать снижения производительности страниц. Они планируют протестировать Lighthouse-CI для автоматизации лабораторных испытаний и предотвращения регрессий в их производственной отрасли.