レンダリングをブロックするリソース

Silktide は、ブラウザーがページ上に何かを表示する前に完全にダウンロードする必要があるスタイルシートとスクリプトをチェックします。これらがあると、訪問者は空白の画面を少し長く見続けることになります。

デフォルトでは、ページ上部付近で参照されているスタイルシートやスクリプトはレンダリングをブロックします。ファイルが到着するまでブラウザーは何も描画しません。ファイルによってページ全体の見た目や動作が変わる可能性があるためです。

なぜ重要なのか

ページが最初に表示されるまでの空白の時間に、訪問者は待つかどうかを判断します。レンダリングをブロックするファイルが1つ増えるたびに、その空白の時間にネットワーク往復が追加されるため、遅延はすぐに積み重なります。モバイル接続では、ブロックするファイルが数個あるだけで、本来は高速なページの表示が数秒間遅れることがあります。

このブロックの大部分は不要です。通常、ページの最初の画面を描画するために必要なはページ全体のごく一部だけであり、ほとんどのはページが表示される前に実行する必要がありません。

修正方法

defer を追加してスクリプトをブロックせずに読み込みます（アナリティクスなど、独立したスクリプトには async を使用します）。

<!-- 問題: ダウンロードと実行が完了するまでレンダリングをブロックします -->
<script src="app.js"></script>

<!-- 修正後: 並行してダウンロードし、ページの解析後に実行します -->
<script src="app.js" defer></script>

最初の画面に必要な少量の CSS をページに直接インライン化し、完全なスタイルシートはブロックせずに読み込みます。
特定の状況でのみ適用されるスタイルシートには media 属性（media="print" など）を指定し、それ以外の状況ではレンダリングをブロックしないようにします。
ブロックする対象を減らします。未使用のスタイルとスクリプトを削除し、残りを小さく保ちます。CSS の圧縮と圧縮された JavaScript を参照してください。

Silktide によるテスト方法

速度テスト用に設定されたデバイスの種類、接続速度、テスト場所を使用して、実際のブラウザーでページを読み込みます。
ページの最初の描画をブロックした各スタイルシートとスクリプトを特定します。
それぞれがレンダリングを遅らせた時間を推定し、推定できる短縮時間とともに各ファイルを報告します。
短縮できる合計時間に基づいてページを評価します。約100ミリ秒で評価が下がり、200ミリ秒以上では低い評価になります。

トラブルシューティング

CSS はレンダリングをブロックする必要があるのでは？

最初の画面を表示するスタイルシートはレンダリングをブロックします。これは意図された動作であり、訪問者にスタイルが適用されていないコンテンツを見せないためです。解決策は CSS を削除することではなく、ブロックする量を減らすことです。重要な部分をインライン化し、残りをブロックしない方法で読み込みます。

ブロックしているファイルがサードパーティのスクリプトです

タグマネージャー、フォント、チャットウィジェットは、よく原因になります。ほとんどの場合、defer または async で正しく動作します。提供元の最新の埋め込み手順を確認してください。すでにこれらが含まれていることもよくあります。