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