CSSプリロードヒントを使用してWebサイトのパフォーマンスを向上させる方法

HTMLにはpreloadという属性があります これにより、ブラウザにヒントを与えることができます どのように、そしてもっと重要なことに、いつ ページの読み込み時にアセットを読み込みます。

preload 属性は、いくつかのHTML要素で使用できます。たとえば、<link>に追加できます ブラウザがCSSスタイルシートの早期フェッチを開始するようにする要素。

しないでください preloadを使用する <link>の属性 このように（一部のWebサイトが推奨しているように）：

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

上記のコードはスタイルシートをプリロードするだけなので、適用しません。 それ。

代わりに、スタイルシートのプリロードと適用の両方を行うために（プリロードされたらすぐに）、インラインJS onloadを使用できます。 <link>のイベントハンドラー 要素：

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

JSのonload その後、eventhandlerはリンク要素のrel="preload"を変更します rel="stylesheet"の属性 読み込みが完了するとすぐに。

上記の構成では、preloadをサポートするブラウザ 属性を使用しなかった場合よりも早くCSSスタイルシートのダウンロードを開始します。

ブラウザのサポート

preload 属性はFirefoxではまだ（奇妙なことに）サポートされていませんが、他のすべての最新のブラウザでは機能します。 preloadは引き続き使用できます 属性ですが、FirefoxでCSSをプリフェッチしません（正常に読み込まれます）。