このガイドでは、コンテキストを踏まえて PageSpeed Insights のルールについて説明します。クリティカル レンダリング パスを最適化する際に注意すべきこととその理由についても説明します。
レンダリングを妨げる JavaScript や CSS を排除する
最初のレンダリングまでの時間を最短にするには、ページ上のクリティカル リソースの数を最小限に抑え、(可能な場合は)排除し、ダウンロードされるクリティカル バイト数を最小限に抑え、クリティカル パス長を最適化します。
JavaScript の使用を最適化する
JavaScript リソースは、async
としてマークされているか、特別な JavaScript スニペットで追加されていない限り、デフォルトでパーサー ブロックです。パーサーをブロックする JavaScript があると、ブラウザは CSSOM を待機させ、DOM の構築を一時停止します。その結果、最初のレンダリングまでの時間が大幅に長くなる可能性があります。
非同期の JavaScript リソースを優先する
非同期リソースによってドキュメント パーサーのブロックが解除され、ブラウザがスクリプトの実行前に CSSOM をブロックしないようにできます。多くの場合、スクリプトで async
属性を使用できる場合は、最初のレンダリングで必須ではないことも意味します。最初のレンダリング後にスクリプトを非同期で読み込むことを検討してください。
同期サーバー呼び出しを避ける
navigator.sendBeacon()
メソッドを使用して、unload
ハンドラで XMLHttpRequests によって送信されるデータを制限します。多くのブラウザではこのようなリクエストを同期する必要があるため、ページの遷移が著しく遅くなることがあります。次のコードは、navigator.sendBeacon()
を使用して、unload
ハンドラではなく pagehide
ハンドラでサーバーにデータを送信する方法を示しています。
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
新しい fetch()
メソッドを使用すると、データを非同期で簡単にリクエストできます。まだどこでも利用できるわけではないため、使用する前に機能検出を使用してその存在をテストする必要があります。このメソッドは、複数のイベント ハンドラではなく Promise を使用してレスポンスを処理します。XMLHttpRequest に対するレスポンスとは異なり、フェッチ レスポンスは Chrome 43 以降のストリーム オブジェクトです。つまり、json()
を呼び出すと Promise も返されます。
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch()
メソッドは POST リクエストを処理することもできます。
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
JavaScript の解析を延期する
ブラウザがページをレンダリングするために実行する作業量を最小限に抑えるには、最初のレンダリング用の表示コンテンツの構築に必須ではない、必須ではないスクリプトを遅延させます。
JavaScript の長時間実行を避ける
JavaScript が長時間実行されると、ブラウザによる DOM の構築、CSSOM の構築、ページのレンダリングが妨げられるため、最初のレンダリングで重要でない初期化のロジックや機能は、後で実行してください。長い初期化シーケンスを実行する必要がある場合は、いくつかのステージに分割して、その間にブラウザが他のイベントを処理できるようにすることをご検討ください。
CSS の使用を最適化する
CSS はレンダリング ツリーの構築に必要であり、多くの場合、ページの最初の構築時に JavaScript が CSS でブロックします。重要でない CSS(印刷クエリやその他のメディアクエリなど)は重要ではないとマークし、重要な CSS の数とその配信にかかる時間をできるだけ短くします。
CSS をドキュメント ヘッドに含める
ブラウザが <link>
タグを検出して CSS へのリクエストをできるだけ早く送信できるように、HTML ドキュメント内ですべての CSS リソースをできるだけ早く指定してください。
CSS のインポートを避ける
CSS のインポート(@import
)ディレクティブを使用すると、あるスタイルシート ファイルからルールをインポートできます。ただし、これらのディレクティブを使用するとクリティカル パスに追加のラウンドトリップが発生するため、使用しないでください。インポートされる CSS リソースは、@import
ルールを含む CSS スタイルシート自体が受信されて解析されてから検出されます。
レンダリングをブロックする CSS をインライン化する
最高のパフォーマンスを得るには、重要な CSS を HTML ドキュメントに直接インライン化することを検討してください。これにより、クリティカル パスでの余分なラウンドトリップがなくなります。正しく行えば、HTML のみがブロック リソースである「1 ラウンドトリップ」のクリティカル パス長を実現できます。