レンダリングを妨げるリソースの除外〜PageSpeed Insights〜

新しい記事を公開するたびに PageSpeed Insights でサイトのスピードを測定していますが、「改善できる項目」には必ず「適切なサイズの画像」項目が表示されて、「アイキャッチ画像」のサイズをこの記事の通り修正しておきますが、

その中、時々「改善できる項目」に別の指摘事項が現れる場合もあったりします。今日は「レンダリングを妨げるリソースの除外」について、修正した内容を共有します。

eliminate-render-blocking-01 — ▲ この画像の右上の「詳細」リンクに紹介されている内容に沿って、改善していきます。

条件
一般的な除外方法
リソースをどのタイミンングで読み込めば良い？
該当リソースを除外する
PageSpeed Insightsで確認する

条件

Cocoon テーマに設定を追加します。

一般的な除外方法

これから進めるには、
上図のようにレンダリングを妨げるリソースの URL が必要です。ご自身のサイトを PageSeed Insights で測定してその URL をメモって置いてください。

HTML の一般的な構造は▼の通りです。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
   
</body>
</html>

▲ の <head> </head> の間に <script> や <link> タグを使用する三つの方法があります。
PageSeed Insights では下記のような書き方をしないリソースをブロックしてしまいます。

<link rel="preload" href="" as="script">
<script src="" async></script>
<script src="" defer></script>

※ <link> タグの詳細は rel=”preload” によるコンテンツの先読みをご参考ください。
※ <script> タグの詳細は <script>:スクリプト要素 をご参考ください。

ウェブページが正常に表示されるためには、様々なリソース ( 例：スタイルシートや Javascrip など ) が必要です。そのリソースをウェブページのコンテンツ ( 例：ブログ記事など ) を表示する前に読み込む (preload) のか、コンテンツを表示してから読み込む (async defer) のか、を決める必要があります。( 基本的に先読み )

リソースをどのタイミンングで読み込めば良い？

それは、Chrome DevTools を利用することで確認できます。
ご自身のレンダリングを妨げるリソースの URL が先読みすべきか、後でも良いのかみて行きます。

Chrome ブラウザでご自身のサイトにアクセスした状態で、⌘ ⌥ I を押すと DevTools が立ち上がります。(もしくは、Chrome「表示」＞「開発/管理」＞「デベロッパーツール」をクリック )

下記のような順番にしたがって、Coverage タブを開きます。

▼ Coverage タブが表示されたら、下図の矢印のところにあるリロードボタンをクリックしてみてください。

▼ のような画面に変わります。
ご自身のレンダリングを妨げるリソースの URL を見つけましょう。

▼ 見つかったら、右側の「Unused Bytes」と赤色、緑色部分に注目してください。

eliminate-render-blocking-05 — ▲ リソースの未使用率：1番目 59.8%、2番目 56.7%

右側に表示されているカラーの意味は以下の通りです。

緑 ( 重要 )：最初のペイントに必要なスタイル。ページのコア機能にとって重要なコード。
赤 ( 重要ではない )：すぐに表示されないコンテンツに適用されるスタイル。ページのコア機能で使用されていないコード。

そうですね。

すなわち、ここではリソースの未使用率は 1番目のファイル 59.8%、2番目のファイル 56.7% なのでブログ記事が表示された後でこれらのリソースを読み込めば良い！とのことがわかりました。

後で読み込むには <script> タグに async か defer を利用します。

該当リソースを除外する

最初にメモっていたご自身のレンダリングを妨げるリソースのURLをそれぞれsrc=""の中にコピぺして、HTML に挿入するスクリプトを ▼ のように作成します。

ここでは defer を適用してみます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.4.1/jquery-migrate.min.js?ver=1.4.1" defer></script>

ちなみに、DevTools の Caverage タブに表示された他の URL も除外したい時には下記の順番で該当 URL をコピーして上のようなスクリプトを作成することで除外できます。