9 самых эффективных основных веб-жизненных возможностей 2023 года

Сегодня я объясню вам новости этого года `Google I/O`. Я сосредоточусь на разъяснении информации, на которую стоит обратить внимание разработчикам интерфейса, которая должна включать следующие направления:

1. Последние разработки веб-платформы (опубликовано)
2. Предложения по улучшению индекса производительности веб-ядра (текущая часть)
3. Приготовьтесь к прекращению использования сторонних файлов cookie
4. Последние разработки в области разработки веб-интерфейсов.
5. Последние разработки в области веб-анимации
6. Совместная работа над созданием стабильной работы в Интернете
7. Новые возможности мобильной веб-разработки

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

Прежде чем вы начнете, если Core Web Vitalsвы недостаточно знаете о , вы можете сначала прочитать мою статью: Интерпретация нового поколения веб-приложений и показателей качества

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

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

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

Использование традиционного элемента imgelement или добавление ссылки предварительной загрузки может помочь сканеру предварительной загрузки найти ресурс изображения и загрузить его браузером как можно скорее.

Вы также можете использовать инструмент водопада загрузки Chrome devtools, чтобы определить ресурсы, которые начинают загружаться с опозданием, HTMLчто можно исправить, включив изображения (разрешив предварительную загрузку элементов изображения). Но после оптимизации LCPизображения, чтобы его было легко найти, это не значит, что оно может загружаться быстрее. Потому что браузеры, как правило, отдают приоритет контенту, блокирующему отображение, например CSS, и синхронизируют изображения JavaScriptover.

Получить приоритетный API

Новый fetch proirity APIпозволяет настраивать приоритет маркировки ресурсов. Простое добавление атрибута fetchproritythe к нашим изображениям или предварительная загрузка LCPelements может привести к тому, что браузер начнет загрузку их раньше и с более высоким приоритетом, что может сильно повлиять на LCPtiming. Это API уже chromiumдоступно в браузерах на основе , и Safari находится в процессе реализации соответствующего кода, и это свойство является прогрессивным и просто игнорируется в других браузерах, которые не т поддерживать его. Возвращаясь к предыдущему примеру, мы решили проблему, заключающуюся в том, что изображение может быть найдено как можно раньше, но между запросом изображения и началом загрузки остается большая задержка. Используйте, чтобы свести к минимуму задержку и обеспечить максимально быструю загрузку изображений. Это отличный пример метрики оптимизации, и есть много других способов, которыми мы можем снизить приоритетность некритических ресурсов. Например, используйте их или ленивую загрузку, чтобы они загружались по требованию, что позволяет браузеру сосредоточиться на более важных ресурсах, таких как элементы, влияющие на метрики. Нам просто нужно убедиться, что эти методы не используются на самом изображении. Если мы используем фреймворк, рекомендуется добавлять изображения с помощью компонента, разработанного командой. Компоненты и уже имеют встроенную поддержку извлечения приоритетов, и команда также разрабатывает компонент для поддержки этого нового. Команда также работает с другими платформами, например, если вы используете , вы можете попробовать новый модуль приоритета извлечения официального плагина Performance Lab. ЭтоFirefox
fetch proirity API

LCP

fetchprority=lowLCPLCP

JavaScriptChrome AuroraImageAngularXJSNext.jsImageAPI

ChromeWordPressWordPressChromeРезультат совместной разработки команды с WordPressthe Core Performance Team.

Используйте CDN

Первые LCPдва предложения связаны с тем, как создать ресурсыHTML, чтобы их было легко обнаружить и загрузить в первую очередь, но все зависит от скорости загрузки в верхней части страницы. Итак, последнее предложение — использовать для оптимизации времени . Веб-сайт не может начать загрузку каких-либо подресурсов, пока браузер не получит первый байт ответа на первый запрос. Чем раньше вы передадите браузеру первую строфу, тем раньше браузер сможет начать ее обработку, что, в свою очередь, позволит ускорить выполнение всего остального. Вот два лучших способа :LCPHTMLCDNFirst Byte

HTMLttfb

(1) Установите контент-сервер как можно ближе к пользователю, чтобы сократить расстояние между пользователем и сервером;
(2) Контент кэшируется, чтобы недавно запрошенный контент можно было снова быстро обслужить.

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

Разработчики часто используют CDNдля размещения статических ресурсов, таких как CSS、JavaScriptили Mediaфайлы, CDNно HTMLпредоставление файла . Согласно Web Almanacстатистике, через сервис загружаются только запросы документов29%. Если вы этого не делаете, значит, у вас все еще есть прекрасная возможность оптимизировать производительность вашего сайта.HTMLCDN

размер контента

Первое предложение CLSoptimization состоит в том, чтобы обеспечить явное масштабирование содержимого, чтобы при первом отображении в браузере оно отображалось с правильным размером.

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

Например, мы можем использовать новый атрибут CSS aspect-ratio, чтобы другой неграфический контент, такой как видео, также мог реагировать лучше.

Кроме того, вы можете установить соответствующую высоту отображаемого текста, например, использовать min-height, чтобы зарезервировать минимальное пространство для динамического содержимого, такого как рекламные карточки, высота пустых элементов по умолчанию равна нулю пикселей, поэтому даже для некоторого динамического содержимого мы не можем определить фактическую высоту , которую также можно уменьшить на min-heightна CLS.

Кэш БФ

Одним из самых больших улучшений, которые мы CLS заметили, является Chromeрезервный кеш, или BFкэш, . Кроме того, Safariи Firefoxтакже запустили эту функцию на некоторое время.

Страница может иметь большую начальную нагрузку CLS, потому что структура страницы постоянно меняется по мере того, как другой контент (например, изображения и реклама) загружается CLS. Конечно, мы должны стараться избегать загрузки этого контента при отображении первой страницы экрана.

BFКэш хранит в памяти полный CLSмоментальный снимок. Если пользователь вернется на эту страницу, снимок будет восстановлен. Точно так же, если пользователь снова заходит вперед, этот снимок также может быть восстановлен. Это полностью устраняет любую загрузку CLS файлов , BF, а кэширование также включено по умолчанию, если страница повторно отображается с нуля, нам не нужно ничего делать, чтобы активно включить его, но мы можем APIprevent Браузер не может реагировать лучше. Рекомендуется не отказываться от этого бесплатного решения для оптимизации производительности.

Chrome DevToolsСуществует инструмент, который позволяет нам проверить, соответствует ли страница требованиям BF Cacheto . Если нет возможности использовать его BF Cache, инструмент, как правило, сообщит нам конкретную причину. Наиболее распространенная причина заключается в том, что мы cache-controlустанавливаем Headerзначение этого no-storageили используем его на странице unload handler, что предотвращает использование BF Cacheиз . В

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

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

Работа с анимацией и переходами

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

Отрисовка анимации требует от браузера переразметки страницы, поэтому требуется больше работы, даже если абсолютно позиционированный элемент выбивается из нормального потока документа, например, при использовании topили leftперемещения содержимого, будет считаться сменой макета, даже если он не перемещается вокруг Другого контента, сам контент также перемещается и может повлиять на другой контент, поэтому это также повлияет на это CLS. Делает

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

Всегда отдавайте предпочтение составным анимациям, таким как, например, transform, а не несоставным анимациям, вызванным слоями, таким как изменение top、right、bottom и left.

И есть Lighthouseтакже связанная с этим способность выявлять эти проблемы.

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

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

Chrome Devtools определяют длительные задачи как задания рендеринга, которые занимают миллисекунды и более. Это может показаться не таким уж большим, но с точки зрения браузера это может быть разницей между отзывчивостью веб-сайта или нет. является однопоточным и жадным, и как только он занят, он сохраняет его столько, сколько может, пока не сможет его обработать или не будет выполнено. В этом примере, несмотря на наличие пяти дочерних процессов, все пять процессов будут выполняться один за другим. Таким образом, ключевым моментом является размещение нескольких точек останова в нашем коде. Мы можем использовать установленную задержку в миллисекундах тайм-аута для выполнения некритической работы и новых задач, которые будут выполняться после любых задач, уже поставленных в очередь. Существуют также новые и перспективные браузеры, такие как , и , которые могут помочь каждому решить, когда и как отказаться от основного потока. Для получения более подробной информации вы можете прочитать статьи по теме оптимизации длинных задач: https://web.dev/optimize-long-tasks/. Также на , есть отдельный разговор, посвященный оптимизации длинных задач.Lighthouse50

JavaScriptCPU

settimeout 0

APIisInputPendingscheduler.postTaskscheduler.yieldweb.devGoogle I/O

Удалите ненужный JS

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

Теперь веб-сайт загружается JavaScript все больше и больше, но нам нужно перепроверить JavaScriptнужно ли это.

Мы можем Chrome Devtoolsиспользовать Coverageатрибуты объекта , чтобы увидеть, JavaScriptкак они выполняются. Если большая часть кода не используется во время загрузки страницы JavaScript, рассмотрите возможность разделения кода, чтобы загружать его по мере необходимости или когда браузер менее загружен.

AuroraКоманда также разработала компонент сценариев xjs, который позволяет нам загружать менее критичный сторонний код и использовать различные стратегии для уменьшения влияния этих сценариев. Диспетчеры тегов — еще одно удобное место для накопления старого JavaScriptcode, который может больше не понадобиться. Регулярно проверяйте наши теги, чтобы убедиться, что все теги удалены, поскольку даже если они больше не активируются, их все равно необходимо загрузить, проанализировать и скомпилировать.

Избегайте больших обновлений рендеринга

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

У нас также есть инструмент Lighthouseaudit, который поможет вам в этом.

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

content-visibility расширение возможности, позволяющее полностью отказаться от компоновки и рендеринга содержимого за пределами экрана. Наконец, следует избегать злоупотреблений, его следует использовать только для критически важной работы по рендерингу, если запланировано слишком много работы, это приведет к замедлению рендеринга. Это девять советов по оптимизации, которые, как мы думаем, вы должны рассмотреть в первую очередь, чтобы улучшить основные показатели производительности вашего сайта. Это не окончательный список, а несколько наиболее эффективных вариантов, которые, как показало наше исследование, действительно могут улучшить производительность вашего сайта. Включая компоненты, которые мы добавляем в наши фреймворки и платформы, многие из этих рекомендаций уже учтены в наших различных инструментах. Но мы не теряем бдительности и обновляем наши инструменты и документацию, чтобы отразить эти ключевые рекомендации.CSS containment