CSSを非同期ロードする最も簡単な方法 - Qiita

CSS読み込みの<link rel="stylesheet">は同期なので、レンダリングブロックします。 どういうことかというと、CSSファイルの読み込み・パースが終わるまで画面描写が止まってしまいます。 これに対策する方法としてpreloadというものが策定されましたが、対応状況が微妙です。 2019年7月時点でもブラウザシェアが8割しかなく、Firefoxは当面対応するつもりがないようです。 とはいえ残り2割のためにloadCSSを突っ込んだりとか始めると本末転倒感に溢れます。 全ブラウザ対応のためには、なんにしろ結局JavaScriptをこりこり書くしかない状況でした。 が、なんかすっごい簡単な対処法があったので紹介してみます。 以下はScott Jehlによる記事、The Simplest Way to Load CSS Asynchronouslyの日本語訳です。 ちなみにSco

[mogami74]

経験的にはこの手の裏技は陳腐化するのが早いからな…

[pixmap]

開発者としては preload のみを積極的に使うのが長期的には正しい。サポートしないブラウザはユーザーからも敬遠されるようになり淘汰されるようになるから。

[zuzu_sion]

CDNから色々とCSS読み込みまくっている環境だと数百ms以上の改善を確認。とはいえ各種ブラウザでの挙動を確認しないとな。

[AyeBee_TY]

直感的じゃない実装は淘汰されるべき。未対応のブラウザ使ってるユーザーは切り捨てよう。

[hapilaki]

“これが、スタイルシートを非同期的に読み込む最も簡単な方法です。 <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">”

[iww]

『onload属性を使って、ロードが完了したらメディアタイプをallに変更します。』 なるほど

[hokkey]

hack感すごいけど面白いテクニック

[otchy210]

よく思いつくな〜、こういうの。

[asiamoth]

そもそもCSSを非同期で読み込むメリットis何やねん？ そこで稼げた数ミリ秒よりも、再レンダリングでガタつくデメリットのほうが多そう。

[rryu]

media="print"はscreenな環境ではロードされないということを利用したハックなのだが、無条件でロードするズボラなブラウザはもうないからできるのか。

[arapro]

CSS非同期ロードはまさにJavaScriptでこりこり書いてた勢。記述がシンプルで良さげだけど、preload対応ブラウザにCSSを2度適用する気持ち悪さは残る？

[renowan]

Vue-cliを使えば一発でできる

[yhachisu]

バッドノウハウやんけ

[deokisikun]

CSSの読み込み遅延を気にするサイズのCSSってどのぐらいなの？と思ってしまう

[sho]

すげぇハックだなぁ。どうせすぐ陳腐化するヤツだから、頻繁にメンテされるサイトじゃないと使えないけど。

[field_combat]

こういうのがあるってことだけ覚えとこ

[hirata_yasuyuki]

高速化の恩恵が得られないだけなので、Firefoxは無視しても良いのでは。

[mayumayu_nimolove]

CSS非同期って、読み込む間は生htmlが表示されるの？

[fashi]

いかがでしたかじゃないけど最後疑問形なのがモヤモヤする

[yarumato]

“CSS読み込みのlinkタグは同期なのでレンダリングブロック（CSSファイルの読み込み・パースが終わるまで画面描写が止まる）。非適合メディアタイプをあえて指定してレンダリングブロックさせない。”

[silverscythe]

面白いけど不毛

[solidstatesociety]

mediaが汚れるのでどうするかなって感じ

[n314]

これめっちゃやりたい。でもインライン展開するcssを切り分けて段階的に読み込む設計するのが大変そうなんだよな…。

[mushus]

ハッキーだけどこれは普通に読めるレベルだし良さそう