公開日: 2018 年 8 月 17 日
このガイドでは、PageSpeed Insights のルールを状況に応じて検討します。つまり、クリティカル レンダリング パスを最適化する際に注意すべき点と、その理由を説明します。
レンダリングをブロックする JavaScript と CSS を排除する
最初のレンダリングまでの時間をできるだけ短縮するには、ページ上のクリティカル リソース数の最小化（可能な場合はリソースの除去）、ダウンロードするクリティカル バイト数の最小化、クリティカル パス長の最適化を行います。
JavaScript の使用を最適化する
JavaScript リソースは、async とマークされているか、特別な JavaScript スニペットを使用して追加されている場合を除き、デフォルトでパーサー ブロックです。パーサー ブロック JavaScript は、ブラウザを強制的に CSSOM で待機させ、DOM の構築を一時停止します。その結果、最初のレンダリングまでの時間が大幅に遅れる可能性があります。
非同期 JavaScript リソースを優先する
非同期リソースの場合、ドキュメント パーサーはブロックされず、ブラウザでは、スクリプトを実行する前の CSSOM ブロックを回避できます。多くの場合、スクリプトで async 属性を使用できるということは、それが最初のレンダリングに必須ではないことも意味します。最初のレンダリング後に非同期でスクリプトを読み込むことを検討してください。
同期サーバー呼び出しを避ける
navigator.sendBeacon() メソッドを使用して、XMLHttpRequests によって送信されるデータを制限します。
unload ハンドラ。多くのブラウザではこのようなリクエストは同期している必要があるため、ページの遷移が遅れることがあり、ときには目立つほどの遅延が生じます。次の
次のコードは、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() メソッドを使用すると、データ リクエストを非同期で行うことができます。fetch() は、複数のイベント ハンドラではなく Promise を使用してレスポンスを処理します。XMLHttpRequest に対するレスポンスとは異なり、fetch() レスポンスはストリーム オブジェクトです。つまり、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（print その他のメディアクエリなど）はすべて非クリティカルとして指定し、クリティカル CSS の量とその配信時間をできる限り削減する必要があります。
CSS をドキュメント ヘッドに含める
すべての CSS リソースを HTML ドキュメント内でできるだけ早く指定すると、ブラウザで <link> タグを検出して CSS のリクエストをディスパッチするまでの時間を短縮することができます。
CSS のインポートを避ける
CSS のインポート（@import）ディレクティブを使用すると、あるスタイルシート ファイルから別のスタイルシートにルールをインポートできます。ただし、このようなディレクティブは、クリティカル パスにラウンド トリップが発生するため、使用は避けてください。インポートされた CSS リソースが検出されるのは、@import ルール自体を含む CSS スタイルシートが受信され、解析された後のみです。
レンダリングをブロックする CSS をインライン化する
最大のパフォーマンスを得るには、クリティカル CSS を、HTML ドキュメントに直接インライン化することをおすすめします。これにより、クリティカル パスから余計なラウンドトリップを排除できます。また、適切に実施すれば、HTML 以外のブロック リソースがない「1 ラウンドトリップ」のクリティカル パス長を実現できます。