Как загрузить CSS Асинхронно
Я пытаюсь устранить 2 файла CSS, которые являются рендерингом, блокирующимся на моем сайте - они появляются на Google Page Speed Insights. Я следовал различным методам, ни один из которых не имел успех. Но, недавно, я нашел сообщение о Размышлении Асинхронного и когда я применил этот код: это действительно устраняло проблему.
Однако после публикации, страница потеряла моделирование. Я не слишком уверен относительно того, что продолжается, потому что код работает, но это - моделирование после загрузки, которая не работает. Ценил бы Вашу справку с этим.Спасибо
2 ответа
Асинхронный CSS, Загружающий Подходы
, существует несколько способов заставить браузер загрузить CSS асинхронно, хотя ни один не вполне так прост, как Вы могли бы ожидать.
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
Использование media="print" и onload="this.media='all'":
группа нити недавно (июль 2019) опубликовала статью , дающую их последнюю рекомендацию для того, как загрузить CSS асинхронно. Даже при том, что они - разработчики популярной библиотеки Javascript loadCSS, они на самом деле рекомендуют это решение, которое не требует библиотеки Javascript:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
Используя media="print" укажет к браузеру для не использования этой таблицы стилей на экранах, но на печати. Браузеры на самом деле загружают эти таблицы стилей печати, но асинхронно, который является тем, что мы хотим. Мы также хотим, чтобы таблица стилей использовалась, после того как она загружается, и для которого мы устанавливаем onload="this.media='all'". Если Вы хотите, можно добавить <noscript> нейтрализация для редких пользователей, которым не включили JavaScript.
исходная статья стоит чтения, поскольку она вдается в большее количество подробностей, чем я здесь. Эта статья о csswizardry.com также стоит чтения.