Оптимизация веб-производительности в 2024 году: тенденции и прогнозы

За день мы просматриваем около 130 веб-страниц, ожидая загрузки каждой около 6 секунд.

Это означает, что вы тратите ошеломляющие 13 минут, праздно зависая над экраном каждый день, и более 17 минут, если вы разговариваете по телефону.

Неудивительно, что оптимизация веб-производительности (WPO) продолжает расширять границы возможностей в поисках лучших способов вернуть часть потерянного времени. Или, по крайней мере, постарайтесь, чтобы мы ждали как можно меньше.

Давайте пробежимся по наиболее заметным достижениям за последние 12 месяцев и приготовимся использовать едва заметные тенденции, которые мы видим в 2024 году!

Более быстрая сеть: где мы сейчас?

Только за 2023 год производительность Интернета претерпела существенную эволюцию, о чем, в частности, свидетельствуют впечатляющие достижения в Core Web Vitals (CWV).

Метрики, представляющие скорость загрузки, скорость реагирования на взаимодействие и стабильность макета, установили новые стандарты производительности веб-сайта.

Истинным свидетельством этого прогресса является ошеломляющая экономия времени ожидания в 10 000 лет – монументальное достижение, ставшее результатом усовершенствований, внесенных в Core Web Vitals.

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

Более того, данные из HTTP Archive красноречиво говорят о растущем внедрении и внедрении Core Web Vitals.

Число веб-сайтов, прошедших оценку Core Web Vitals, значительно возросло: только в 2023 году оно увеличилось на 6% . Этот скачок свидетельствует о коллективных усилиях веб-разработчиков, владельцев сайтов и продуктов по всему миру, направленных на определение приоритетов и оптимизацию своих сайтов для более плавного, быстрого и удобного просмотра для всех.

В настоящее время в отчете об опыте пользователей Chrome (CrUX) указано более 6,5 миллионов источников, соответствующих критериям.

Состояние основных веб-жизненных показателей: ретроспектива и достижения

В начале 2023 года 41,8% веб-сайтов прошли проверку Core Web Vitals. С тех пор мы наблюдаем устойчивый рост: процент проходимости настольных компьютеров вырос до 47,4%.

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

Разработки Google Chrome

Основные достижения были достигнуты непосредственно командой разработчиков Google Chrome:

• Пожалуй, самой большой новостью в Core Web Vitals на 2023 год станет официальное внедрение новой метрики отзывчивости — Interaction to Next Paint (INP) . INP должен заменить FID в марте 2024 года как более комплексный способ измерения всех взаимодействий во время сеанса, а не только первого, как его предшественник.
• Введение обратного/вперед-кэша (bfcache) в браузере Chrome: он создан, чтобы помочь вам быстро вернуться назад или вперед в истории просмотров, не дожидаясь перезагрузки страницы.

Результаты: процент попаданий BFCache улучшился по сравнению с предыдущим месяцем как на Android (3,6%), так и на настольных компьютерах (1,8%).

• Новая функция PreconnectOnAnchorInteraction , которая подключается к источникам при наведении указателя вниз, а не при наведении указателя вверх.

Результаты: привело к медианному улучшению LCP на 6/10 мс (0,4/1%) на Android/Desktop и улучшению LCP между разными источниками на ~60 мс как на Android, так и на настольном компьютере. Запуск также привел к увеличению доходов от контентной рекламы на 0,08%.

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

Результаты. Загрузка страниц с помощью ввода URL-адресов непосредственно в омнибоксе позволила улучшить медианное значение LCP на 500–700 мс (14–25 %) с помощью предварительной отрисовки, сместив глобальное медианное значение LCP для всех переходов на 6,4 мс.

• Запуск регулирования вкладок для фоновых вкладок , работающих в EcoQOS в Windows 11, а также ролей задач и настроек QoS в macOS, чтобы фоновые вкладки не мешали вам.

Результаты: привели к улучшениям в функциях «Наибольшая отрисовка контента» (LCP) и «Взаимодействие со следующей отрисовкой» (INP).

• Непрерывная оптимизация для Chrome на нескольких активных вкладках

Результаты: Замечены улучшения в планировании и борьбе с конфликтами, что позволило повысить INP на 5% и LCP на 2% за последние 6 месяцев.

• Улучшения в средстве рендеринга Chrome , которые изменяют приоритет очередей задач для оптимального CWV, например высокоприоритетная загрузка изображений, приоритетная компоновка после задержки и оптимизация растра SVG. Все улучшения привели к увеличению количества сданных экзаменов LCP, CLS и INP.

Достижения WordPress и Core Web Vitals

В 2023 году благодаря целенаправленным усилиям команды Core Performance и участников WordPress добился существенного прогресса в улучшении показателей прохождения Core Web Vitals.

Если быть точным, 8,25% для настольных компьютеров и 8,13% для мобильных устройств.

Одной из основных целей дорожной карты на год было предоставить владельцам сайтов возможность пройти самую сложную метрику CWV в ядре WP — LCP.

Многие улучшения в ядре направлены на улучшение времени ответа сервера, работу более эффективных баз данных, улучшение доставки JS и CSS и оптимизацию изображений:

• Выявление и устранение крупнейших узких мест во времени ответа сервера в ядре WordPress.
• Повышение производительности PHP тем блоков
• Поддержка фазы 3 Gutenberg с ориентированными на производительность рекомендациями, улучшениями и обзорами.
• Автозагрузка PHP-классов WordPress
• Изучение способов повышения производительности переводов
• Интеграция с базой данных SQLite
• Оптимизация запроса к базе данных автоматически загружаемых параметров в ядре WordPress
• Изучение способов дальнейшего повышения производительности запросов к базе данных
• Улучшение API сценариев с помощью стратегии загрузки
• Устранение использования jQuery из интерфейса в темах WordPress по умолчанию.
• Добавление fetchpriority="high" к образу LCP в ядре WordPress
• Как избежать ленивой загрузки изображений LCP/героев в ядре WordPress
• Улучшение расчета атрибутов размеров изображения.

Результаты?

WordPress 6.3 загружается на 27% быстрее для блочных тем и на 18% быстрее для классических тем по сравнению с WordPress 6.2, согласно метрике Largest Contentful Paint (LCP).

Если разобрать это еще дальше, мы увидим явное улучшение всех показателей Core Web Vitals в мобильном WordPress:

• 43,37% проходят LCP
• 78,98% проходят CLS
• И 97,42% проходят FID

Мы в NitroPack гордимся тем, что внесли свой вклад в улучшение CWV на платформе, поскольку это решение помогает более чем 180 тысячам владельцев сайтов WordPress добиться отличного пользовательского опыта. При предварительном рендеринге ссылок через API правил спекуляции мы наблюдали улучшение LCP на 80 % и улучшение INP на 55 % на предварительно обработанных страницах по сравнению со страницами без какой-либо спекулятивной загрузки.

Сообщество JavaScript для улучшения основных веб-показателей

В рамках проекта Chrome Aurora, в котором Chrome и веб-платформы с открытым исходным кодом сотрудничают, мы увидели успешное партнерство с Next.js, Angular и Nuxt в выпуске функций, ориентированных на производительность, таких как:

• следующий/компонент сценария
• Нгоптимизированное изображение
• nuxt/google-шрифты

По данным Next.js, в 2022 году процент успешно сданных экзаменов увеличился с 20,4% до 27,3%. Процент прохождения Angular вырос с 7,6% до 13,2%, а процент прохождения Nuxt — с 15,8% до 20,2%.

В реальной жизни эти новые функции привели к заметным улучшениям Core Web Vitals для таких корпоративных компаний, как Land's End и CareerKarma.

После перехода на NgOptimizedImage компания Land's End добилась улучшения LCP на мобильных устройствах на 40 % в лабораторных тестах Lighthouse и на 75 % на настольных компьютерах. С другой стороны, LCP CareerKarma был уменьшен на 24% при переключении в рабочий режим next/script.

«Настоящим я объявляю 2024 год годом веб-компонентов! Веб-компоненты размером в байт, без зависимостей, необязательные для JavaScript, независимые от платформы, отображаемые на сервере веб-компоненты».

— Стоян Стефанов, создатель perfplanet.com, бывший сотрудник Yahoo, автор публикации JS

SEO/SEA и основные веб-показатели: точки соприкосновения

Важность Core Web Vitals по отношению к SEO (поисковая оптимизация) уже давно обсуждается.

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

«Связь между Core Web Vitals и эффективностью SEO до сих пор горячо обсуждается, и многие люди полагают, что это редко что-то, что напрямую влияет на рейтинг. Но я рад сообщить, что вижу, что все больше и больше организаций отдают приоритет повышению скорости, несмотря ни на что. Более быстрый сайт означает более счастливых пользователей, меньшее трение, более высокие экологические показатели и больший доход».

— Джоно Алдерсон, ведущий мировой эксперт по SEO (бывший руководитель отдела SEO @Yoast)

Важно отметить, что релевантность остается решающим фактором при ранжировании страницы, как объяснил Джон Мюллер (Google Search Advocate) :

«Если веб-сайт A быстрее, чем веб-сайт B, но B более соответствует запросу поискового пользователя, веб-сайт B все равно обгонит A».
В теме в Твиттере он также подчеркнул, что «...Core Web Vitals — это больше, чем случайный фактор ранжирования, это также то, что влияет на удобство использования вашего сайта после того, как он ранжируется (когда люди действительно его посещают)».

Во время своей презентации на мероприятии Google I/O Extended в Сиднее в июне 2023 года Тамаш Пирос также подтвердил важность Core Web Vitals, заявив : «... если ваш сайт загружается медленно, это окажет негативное влияние на ваш поиск. результаты рейтинга страниц».

Что касается SEA (поисковая реклама) , пользовательский опыт напрямую коррелирует с показателем качества вашей рекламы. Реальные примеры включают в себя:

• Один из клиентов Lever Interactive увеличил свой показатель качества, что привело к -17% CPC и -31% CPA, что также означало увеличение коэффициента конверсии на 20% на более быстрых целевых страницах;
• Высокий показатель качества также означает получение скидки до 50 % на цену за клик и мгновенную оптимизацию рекламных бюджетов;
• Благодаря оптимизации для Core Web Vitals в Netzwelt доходы от рекламы увеличились на 18 %, видимость рекламы выросла более чем на 75 %, показатели отказов снизились на 50 %, а количество просмотров страниц увеличилось на 27 %.
• В 2023 году страницы, отвечающие всем требованиям Google, будут иметь рейтинг на 1 процентный пункт выше среднего. При этом более медленные домены будут ранжироваться на 3,7 процентных пункта ниже, чем быстрые.

Жизненно важные показатели веб-бизнеса: влияние оптимизации веб-производительности на конечный результат

В 2023 году компании продолжили внедрять оптимизацию Core Web Vitals, чтобы повысить свою прибыль, поскольку улучшение времени загрузки на 0,1 секунды означает:

• За сеанс просматривается до 8,6 % больше страниц.
• Улучшение взаимодействия с клиентами на 5,2 %.
• На 8,4% больше конверсий
• Увеличение средней стоимости заказа (AOV) на 9,2 %.

В последнем тематическом исследовании WPO показаны результаты Carpe после оптимизации своего веб-сайта для лучшего взаимодействия с пользователем: улучшение на 52 % по показателю наибольшего содержания контента и на 41 % по совокупному сдвигу макета, увеличение трафика на 10 %, увеличение коэффициента конверсии интернет-магазина на 5 %, и рост выручки на 15%.

Во время вебинара с Google на тему «Основные веб-показатели вашего бизнеса» в сентябре 2023 года компания NitroPack поделилась результатами собственных исследований, связывающих пользовательский опыт и скорость с конкретными моделями поведения пользователей:

• Пользователи, у которых время загрузки составляло 3 секунды или меньше, посещали на 60% больше страниц.

• На 50% больше посетителей уходят, когда страница загружается за 3 секунды, по сравнению с 2-секундной загрузкой страницы.

• Посетители теряют терпение и непропорционально начинают покидать веб-страницу на 2,75 секунде загрузки страницы.

Мы видим, что все больше компаний отходят от идеи скорости как конечной цели и все больше внимания уделяют улучшению взаимодействия пользователей со своими веб-сайтами. Решение проблем Core Web Vitals выходит далеко за рамки работы с серверной частью. Фактически, он нашел заслуженное место среди ключевых показателей эффективности бизнеса, а также в отчетах о росте.

Более быстрая сеть в 2024 году: прогнозы

«Помимо продолжения существующей тенденции к улучшению Core Web Vitals, я действительно думаю, что 2024 год может стать годом «мгновенного Интернета», когда API-интерфейс Speculation Rules API Chrome станет мейнстримом и сделает предварительный рендеринг простым дополнением для многих сайтов. Это обеспечит более плавную работу, особенно в сочетании с многостраничным API View Transitions».

— Барри Поллард, адвокат разработчиков веб-производительности @Google Chrome

Давайте посмотрим, какие тенденции сделают 2024 год не только более быстрым, но и почти мгновенным.

Прохождение LCP: фокус на правильной оптимизации

56,4%

Именно столько веб-сайтов проходят LCP на мобильных устройствах по сравнению с 94,2% для FID и 77,2% для CLS. Сложный характер метрики LCP обусловлен сложностью времени, затрачиваемого на загрузку самого большого элемента контента.

В 2022 году Филип Уолтон предложил на этот раз новый способ разрушения:

• Время начала получения контента на клиенте (TTFB)
• Время начала загрузки образа LCP (задержка загрузки ресурса)
• Время окончания загрузки образа LCP (время загрузки ресурса)
• Время до отрисовки элемента LCP (задержка отрисовки элемента).

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

Проблема? Задержка загрузки ресурса.

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

✦ Мы прогнозируем...

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

Подготовка к INP: новая метрика реагирования

Многие уже предположили, окажет ли прекращение действия метрики FID большое влияние на показатели прохождения CWV.

Ответ: да.

Процент успешно сданных экзаменов снизится после запуска INP (особенно на мобильных устройствах), и разработчикам придется засучить рукава, чтобы их оценки CWV оставались зелеными.

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

✦ Мы прогнозируем...

В 2024 году разработчики будут все чаще использовать API-интерфейсы Scheduler.yield() и Long Animation Frames, чтобы разбивать и сокращать длинные задачи, чтобы основной поток был готов к взаимодействию без задержек.

Лучшее понимание производительности сайта

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

В 2023 году мы стали свидетелями растущего интереса к тому, как Core Web Vitals вписывается в более широкий бизнес-контекст в целом.

CruX, HTTP Archive, Web Almanac, WPO Stats, внутренние и общедоступные отчеты, а также инструменты бизнес-аналитики от независимых сервисов и плагинов — все это предназначено для подсчета цифр и обеспечения прозрачности усилий владельцев сайтов по улучшению пользовательского опыта.

✦ Мы прогнозируем...

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

«Заглядывая в будущее, в 2024 год, я вижу положительный сдвиг в нашем подходе к веб-производительности. Мы уходим от простого рассмотрения лабораторных данных и больше сосредотачиваемся на реальном опыте пользователя. Это захватывающее время, когда появляется множество новых идей, которые помогут сделать веб-сайты быстрее для всех. В NitroPack мы очень рады быть частью этих изменений, помогая сделать Интернет лучшим местом для пользователей».

— Георгий Петров, генеральный директор и соучредитель @NitroPack

Роль искусственного интеллекта: следующие шаги в оптимизации веб-производительности

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

Фактически, только в 2023 году 35% компаний уже используют ИИ в своем бизнесе, причем лидерами по внедрению ИИ являются финансовые услуги, здравоохранение, розничная торговля и производство.

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

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

✦ Мы прогнозируем...

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

Последние мысли

По мере приближения 2024 года основное внимание по-прежнему уделяется сохранению этой динамики.

Постоянное развитие и раннее внедрение правильных методов оптимизации веб-производительности откроют путь к еще более быстрой и эффективной работе в Интернете.

За быстрый 2023 год, и давайте все будем стремиться к еще более быстрому 2024 году!