Скорость в масштабе: что нового в веб-производительности?

Узнайте о трех новых новинках веб-производительности, представленных на I/O 2019.

Адди Османи
Addy Osmani
Кэти Хемпениус
Katie Hempenius

Во время доклада «Скорость в масштабе» на Google I/O 2019 мы анонсировали три вещи, которые, как мы надеемся, улучшат производительность сети в следующем году.

Lighthouse теперь поддерживает бюджетирование, ориентированное на результат

LightWallet — это новая функция в Lighthouse, которая добавляет поддержку бюджетов производительности . Бюджеты производительности устанавливают стандарты производительности вашего сайта. Что еще более важно, они позволяют легко выявлять и устранять снижение производительности перед выпуском продукта.

Отчет LightWallet, показывающий, какие ресурсы превышают бюджет размера файла.

LightWallet доступен в новейшей версии Lighthouse CLI, и его настройка занимает всего пару минут. Эти инструкции содержат дополнительную информацию.

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

Изображение на уровне браузера и отложенная загрузка iframe теперь доступны в Интернете

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

До сих пор вам приходилось решать проблему отложенной загрузки изображений с помощью библиотеки JavaScript, но вскоре ситуация может измениться. Этим летом Chrome запустит поддержку атрибута loading , который обеспечит стандартизированную отложенную загрузку <img> и <iframe> в Интернете.

Отложенная загрузка на уровне браузера с выделением закадрового контента, загружаемого по требованию

Атрибут loading позволяет браузеру откладывать загрузку закадровых изображений и iframe до тех пор, пока пользователи не прокрутят их рядом. loading поддерживает три значения:

  • lazy : хороший кандидат для отложенной загрузки.
  • eager : не является хорошим кандидатом для отложенной загрузки. Загрузите сразу.
  • auto : браузер определит, следует ли выполнять ленивую загрузку.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>

Точная эвристика «когда пользователь прокручивает страницу рядом» остается на усмотрение браузера. В целом мы надеемся, что браузеры начнут получать отложенные изображения и содержимое iframe немного раньше, чем оно попадет в область просмотра.

Атрибут loading реализован за флагами в Chrome Canary. Вы можете опробовать эту демонстрацию в Chrome 75+ с включенными флагами about://flags/#enable-lazy-image-loading и about://flags/#enable-lazy-frame-loading .

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

Google Fonts теперь поддерживает font-display в качестве параметра запроса.

Мы объявили, что поддержка font-display теперь доступна для всех шрифтов Google Fonts через параметр строки запроса display :

https://fonts.googleapis.com/css?family=Lobster&display=swap

Дескриптор font-display позволяет вам решить, как ваши веб-шрифты будут отображаться или возвращаться в исходное состояние, в зависимости от того, сколько времени потребуется для их загрузки. Он поддерживает ряд значений, включая auto , block , swap , fallback и optional .

Раньше единственным способом указать font-display для веб-шрифтов из Google Fonts было их самостоятельное размещение, но это изменение устраняет необходимость в этом.

Документация Google Fonts была обновлена ​​и теперь включает font-display в код для встраивания по умолчанию (как показано ниже). Мы надеемся, что это побудит больше разработчиков опробовать это интересное дополнение.

Код для внедрения Google Fonts со шрифтом-display, включенным в URL-адрес в качестве параметра запроса.

Вот демонстрация использования дисплея с несколькими семействами шрифтов на Glitch. Попробуйте это с помощью сетевой эмуляции DevTools , чтобы увидеть влияние font-display: swap .

Смотрите больше

В нашем докладе также было рассмотрено несколько практических примеров использования передовых шаблонов производительности для улучшения пользовательского опыта. К ним относятся сайты, использующие CDN изображений, сжатие Brotli , интеллектуальное обслуживание JavaScript и предварительную выборку для ускорения своих страниц. Посмотрите разговор, чтобы узнать больше :)