Lighthouse (PWA) показывает «Устранить ресурсы, блокирующие рендеринг» для Bootstrap CSS, но я использую «async» - PullRequest
1 голос
/ 02 июня 2019

Вот раздел из отчета Маяка:

enter image description here И вот эта рассматриваемая веб-страница: https://idealofficetemperature.web.app/

Вот HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" async>

Так что я делаю не так?Я использую async - я думал, что это удовлетворит валидацию Маяка.

Есть идеи?Спасибо!

1 Ответ

0 голосов
/ 04 июня 2019

Вы можете извлечь все критические элементы и поместить их в строку
Вот статья на прошлой неделе, в которой объясняется, что
https://web.dev/extract-critical-css

Две другие вещи, которые могут работать
Обаработа для меня

  1. Изменить асинхронный на lazyload
    Согласно CanIUse,это не поддерживается, но, кажется, работает для маяка?
    https://caniuse.com/#search=lazyload

  2. ИЛИ добавить это вместо async
    media = "nope!"onload = "this.media = 'all'"

Нашел это решение здесь
https://www.filamentgroup.com/lab/async-css.html

...