Узнайте о трех новых новинках веб-производительности, представленных на I/O 2019.
Во время доклада «Скорость в масштабе» на Google I/O 2019 мы анонсировали три вещи, которые, как мы надеемся, улучшат производительность сети в следующем году.
Lighthouse теперь поддерживает бюджетирование, ориентированное на результат
LightWallet — это новая функция в Lighthouse, которая добавляет поддержку бюджетов производительности . Бюджеты производительности устанавливают стандарты производительности вашего сайта. Что еще более важно, они позволяют легко выявлять и устранять снижение производительности перед выпуском продукта.
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 в код для встраивания по умолчанию (как показано ниже). Мы надеемся, что это побудит больше разработчиков опробовать это интересное дополнение.
Вот демонстрация использования дисплея с несколькими семействами шрифтов на Glitch. Попробуйте это с помощью сетевой эмуляции DevTools , чтобы увидеть влияние font-display: swap .
Смотрите больше
В нашем докладе также было рассмотрено несколько практических примеров использования передовых шаблонов производительности для улучшения пользовательского опыта. К ним относятся сайты, использующие CDN изображений, сжатие Brotli , интеллектуальное обслуживание JavaScript и предварительную выборку для ускорения своих страниц. Посмотрите разговор, чтобы узнать больше :)