web-dev-qa-db-ja.com

CSSを非同期でロードする方法

サイトでレンダリングをブロックしている2つのCSSファイルを削除しようとしています-それらはGoogle Page Speed Insightsに表示されます。私はさまざまな方法に従いましたが、どれも成功しませんでした。しかし、最近、 Thinking Async に関する投稿を見つけました。このコードを適用したとき、<script async src="https://third-party.com/resource.js"></script>itは問題を解決しました。

ただし、公開後、ページのスタイルが失われました。コードは機能しますが、アップロード後のスタイリングが機能しないため、何が起こっているのかはわかりません。これであなたの助けに感謝します。ありがとう

htmlcssasynchronous
59
Paulina

非同期スタイルシートのダウンロードをトリガーするコツは、<link>要素を使用し、media属性に無効な値を設定することです（media = "none"を使用していますが、どの値でも使用できます）。メディアクエリの評価がfalseの場合、ブラウザーは引き続きスタイルシートをダウンロードしますが、ページをレンダリングする前にコンテンツが利用可能になるのを待ちません。

<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を使用しますが、<link>要素で同等のブロッキング<noscript>要素をラップすることにより、非JavaScriptブラウザーに対応できます。

<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 で確認できます

enter image description here

http://keithclark.co.uk/ のソース

103
Vladimir Salguero

プリロード

preload要素に linkキーワード を使用できるようになりました。

同期バージョン：

<link href="style.css" rel="stylesheet">

非同期バージョン：

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

注意

この機能は、最近のブラウザーで 広くサポートされている になりました。古いブラウザにフォールバックが必要な場合は、 loadCSS を使用します。

更新（07/18）

Firefoxでは、この機能はデフォルトで無効になっています。 Firefoxがソリューションを実装するまで、loadCSS（上記）が最善の策です。 この議論 から取られた以下のコメント：

Rel = preloadには別のアプローチを採用することにしました。いつ実装されるかわかりません。

50
jabacchetta

あなたは多くの方法でそれを取得しようとすることができます：

1. media="bogus"と<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>
7
kamus

以下の関数は、非同期にロードするすべてのスタイルシートを作成し、ドキュメントに追加します。 （ただし、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);
5
Rounin

上記のすべてがGoogleのpagespeedの洞察を今すぐ印象づけることができないので、答えを更新してください。

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>
0
kaushik gandhi

media="print"およびonload="this.media='all'"の使用：

フィラメントグループは最近（2019年7月）記事を公開しました CSSを非同期に読み込む方法に関する最新の推奨事項を示しています。彼らは人気のあるJavaScriptライブラリ loadCSS の開発者ですが、実際にはJavascriptライブラリを必要としないこのソリューションを推奨しています。

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

media="print"を使用すると、ブラウザではこのスタイルシートを画面ではなく印刷で使用するように指示されます。ブラウザは実際にこれらの印刷スタイルシートをダウンロードしますが、非同期にダウンロードします。また、スタイルシートをダウンロードしたらすぐに使用したいので、onload="this.media='all'"を設定します。必要に応じて、Javascriptが有効になっていないまれなユーザーに<noscript>フォールバックを追加できます。

元の記事 は、ここにいるよりも詳細に説明しているので、読む価値があります。 csswizardry.comのこの記事 も読む価値があります。

0
Flimm

@ vladimir-salguero の answer を許可しない厳格なコンテンツセキュリティポリシーがある場合は、これを使用できます（スクリプト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>
0
Bradley