Я намагаюся усунути 2 файли CSS, які блокують зображення на моєму сайті - вони з’являються в Google Page Speed ​​Insights. Я дотримувався різних методів, жоден з яких не мав успіху. Але нещодавно я знайшов допис про Thinking Async і коли я застосував цей код: <script async src="https://third-party.com/resource.js"></script>він усунув проблему.

Однак після публікації сторінка втратила стиль. Я не надто впевнений у тому, що відбувається, тому що код працює, але це стиль після завантаження не працює. Будемо вдячні за вашу допомогу в цьому. Дякую

Фокус у запуску асинхронного завантаження таблиці стилів полягає у використанні <link>елемента та встановленні недійсного значення для атрибута медіа (я використовую media = "none", але будь-яке значення підійде). Коли медіа-запит оцінюється як помилковий, браузер все одно завантажує таблицю стилів, але не буде чекати, поки вміст стане доступним, перш ніж відображати сторінку.

<link rel="stylesheet" href="css.css" media="none">

Після завершення завантаження таблиці стилів атрибуту мультимедіа потрібно встановити дійсне значення, щоб правила стилю застосовувались до документа. Подія onload використовується для перемикання властивості мультимедіа на всі:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'">

Цей спосіб завантаження CSS доставить корисний вміст відвідувачам набагато швидше, ніж стандартний підхід. Критичний CSS все ще може подаватися із звичайним підходом до блокування (або ви можете вбудувати його для остаточної продуктивності), а некритичні стилі можна поступово завантажувати та застосовувати пізніше в процесі аналізу / рендерингу.

Ця техніка використовує JavaScript, але ви можете задовольнити не браузери, що не JavaScript, обернувши еквівалентні блокуючі <link>елементи в <noscript>елемент:

<link rel="stylesheet" href="css.css" media="none" onload="if(media!='all')media='all'"><noscript><link rel="stylesheet" href="css.css"></noscript>

Ви можете побачити операцію на www.itcha.edu.sv

Джерело в http://keithclark.co.uk/

Оновлення 2020 року

Проста відповідь (повна підтримка браузера):

<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

Задокументована відповідь (з необов’язковим попереднім завантаженням та резервною копією відключеного сценарію):

 <!-- Optional, if we want the stylesheet to get preloaded. Note that this line causes stylesheet to get downloaded, but not applied to the page. Use strategically — while preloading will push this resource up the priority list, it may cause more important resources to be pushed down the priority list. This may not be the desired effect for non-critical CSS, depending on other resources your app needs. -->
 <link rel="preload" href="style.css" as="style">

 <!-- Media type (print) doesn't match the current environment, so browser decides it's not that important and loads the stylesheet asynchronously (without delaying page rendering). On load, we change media type so that the stylesheet gets applied to screens. -->
 <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">

 <!-- Fallback that only gets inserted when JavaScript is disabled, in which case we can't load CSS asynchronously. -->
 <noscript><link rel="stylesheet" href="style.css"></noscript>

Попереднє завантаження та асинхронна комбінація:

Якщо вам потрібен попередньо завантажений та асинхронний CSS, це рішення просто поєднує два рядки із задокументованої відповіді вище, роблячи його трохи чистішим. Але це не буде працювати у Firefox, поки вони не підтримають ключове слово попереднього завантаження . І знову ж, як докладно описано у задокументованій відповіді вище, попереднє завантаження може насправді не бути корисним.

<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

Додаткові міркування:

Зауважте, що загалом, якщо ви збираєтеся завантажувати CSS асинхронно, зазвичай рекомендується вбудувати критичний CSS , оскільки CSS є причиною, що блокує рендер .

Кредит групі ниток за їх безліч асинхронних рішень CSS.

Використання media="print"таonload

Нещодавно (в липні 2019 року) група ниток опублікувала статтю, в якій дала свої останні рекомендації щодо асинхронного завантаження CSS. Незважаючи на те, що вони є розробниками популярної бібліотеки Javascript loadCSS , вони насправді рекомендують таке рішення, яке не вимагає бібліотеки Javascript:

<link
  rel="stylesheet"
  href="/path/to/my.css"
  media="print"
  onload="this.media='all'; this.onload = null"
>

Використання media="print"вказує браузеру не на використання цієї таблиці стилів на екранах, а на друку. Браузери насправді завантажують ці таблиці стилів друку, але асинхронно, саме цього ми і хочемо. Ми також хочемо використовувати таблицю стилів після її завантаження, і для цього ми встановили onload="this.media='all'; this.onload = null". (Деякі браузери дзвонять onloadдвічі, щоб обійти це, нам потрібно встановити this.onload = null.) Якщо ви хочете, ви можете додати <noscript>резервний варіант для рідкісних користувачів, у яких не ввімкнено Javascript.

Оригінал статті варто читати, як вона йде більш детально , ніж я тут. Цю статтю на csswizardry.com також варто прочитати.

Ви можете спробувати отримати його різними способами:

1.Використання media="bogus"та a <link>біля стопи

<head>
    <!-- unimportant nonsense -->
    <link rel="stylesheet" href="style.css" media="bogus">
</head>
<body>
    <!-- other unimportant nonsense, such as content -->
    <link rel="stylesheet" href="style.css">
</body>

2.Вставлення DOM по-старому

<script type="text/javascript">
(function(){
  var bsa = document.createElement('script');
     bsa.type = 'text/javascript';
     bsa.async = true;
     bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
  (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>

3.Якщо ви можете спробувати плагіни, ви можете спробувати loadCSS

<script>
  // include loadCSS here...
  function loadCSS( href, before, media ){ ... }
  // load a file
  loadCSS( "path/to/mystylesheet.css" );
</script>

Функція нижче створить і додасть до документа всі таблиці стилів, які ви хочете завантажити асинхронно. (Але, завдяки Event Listener, він зробить це лише після завантаження всіх інших ресурсів вікна.)

Дивіться наступне:

function loadAsyncStyleSheets() {

    var asyncStyleSheets = [
    '/stylesheets/async-stylesheet-1.css',
    '/stylesheets/async-stylesheet-2.css'
    ];

    for (var i = 0; i < asyncStyleSheets.length; i++) {
        var link = document.createElement('link');
        link.setAttribute('rel', 'stylesheet');
        link.setAttribute('href', asyncStyleSheets[i]);
        document.head.appendChild(link);
    }
}

window.addEventListener('load', loadAsyncStyleSheets, false);

Підходи до завантаження асинхронного CSS

Є кілька способів змусити браузер завантажувати CSS асинхронно, хоча жоден не настільки простий, як можна було б очікувати.

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

Якщо вам потрібно програмно та асинхронно завантажити посилання CSS:

// https://www.filamentgroup.com/lab/load-css-simpler/
function loadCSS(href, position) {
  const link = document.createElement('link');
  link.media = 'print';
  link.rel = 'stylesheet';
  link.href = href;
  link.onload = () => { link.media = 'all'; };
  position.parentNode.insertBefore(link, position);
}

Якщо у вас є сувора політика захисту контенту , яка не дозволяє @ володимир-Салгуеро «s відповідь , ви можете використовувати це (будь ласка , зверніть увагу на сценарій nonce):

<script nonce="(your nonce)" async>
$(document).ready(function() {
    $('link[media="none"]').each(function(a, t) {
        var n = $(this).attr("data-async"),
            i = $(this);
        void 0 !== n && !1 !== n && ("true" == n || n) && i.attr("media", "all")
    })
});
</script>

Просто додайте наступні рядки в якості посилання таблиці стилів: media="none" data-async="true". Ось приклад:

<link rel="stylesheet" href="../path/script.js" media="none" data-async="true" />

Приклад для jQuery:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" media="none" data-async="true" crossorigin="anonymous" /><noscript><link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" type="text/css" /></noscript>

Будь ласка, оновіть відповідь, оскільки все вищезазначене не справляє враження на сторінку швидкості Google.

На думку Google, саме так слід реалізувати асинхронне завантаження Css

 < noscript id="deferred-styles" >
        < link rel="stylesheet" type="text/css" href="small.css"/ >
    < /noscript >

<script>
  var loadDeferredStyles = function() {
    var addStylesNode = document.getElementById("deferred-styles");
    var replacement = document.createElement("div");
    replacement.innerHTML = addStylesNode.textContent;
    document.body.appendChild(replacement)
    addStylesNode.parentElement.removeChild(addStylesNode);
  };
  var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
      window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
  else window.addEventListener('load', loadDeferredStyles);
</script>

Я намагався використовувати:

<link rel="preload stylesheet" href="mystyles.css" as="style">

Це працює штрафи, але це також викликає сукупний зсув макета, тому що коли ми використовуємо rel = "preload", він просто завантажує css, а не застосовує негайно.

Приклад, коли список завантажень DOM містить теги ul, li, за замовчуванням перед тегами li є маркер, тоді CSS застосував, щоб я видалив ці маркери до власних стилів для переліку. Отже, тут відбувається сукупна зміна макета.

Чи є якесь рішення для цього?

Використовуйте rel="preload"для самостійного завантаження, потім використовуйте, onload="this.rel='stylesheet'"щоб застосувати його до таблиці стилів ( as="style"необхідно застосувати її до таблиці стилів, інакше це onloadне буде працювати)

<link rel="preload" as="style" type="text/css" href="mystyles.css" onload="this.rel='stylesheet'">