PageSpeed で「レンダリングを妨げるリソースの除外」対策でCSS速度改善

Posted on by pugiemonn

PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの対策です。

レンダリングを妨げるリソース

CSS がレンダリングを妨げているようなので、CSS の読み込みを送らせます。

link タグに preload と style を追加

PageSpeed で指摘された CSS を読み込んでいるタグを修正します。

元のタグ

以下のように外部 CSS を読み込んでいた箇所が PageSpeed の指摘です。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

改善したタグ

rel=”preload” と as=”style” を足します。

<link rel="stylesheet" rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" as="style">

rel 属性に preload して欲しいという記述と、リソースを style と指定しました。この指定、以前はブラウザごとに実装に差があったようなのですが、最近は概ね対応してきているようです。

パフォーマンスの確認

PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述が消えていれば OK です。

パフォーマンスへの影響

CSS のプリロードの影響はモバイルでは少し改善し、
デスクトップは大きなポイント改善となりました。

preload 設定前の点数

preload 設定なしでは、モバイル65点でした😇

モバイル CSS の preload なし

デスクトップは79点

デスクトップ CSS の preload なし

preload 設定ありの点数

preload ありでは点数が改善しました。
モバイルで+3点、デスクトップで+15点です。

モバイル CSS の preload あり
デスクトップ CSS の preload あり

モバイルで+3点、デスクトップで+15点改善されました。
レンダリングを妨げるリソース部分が改善されたようでよかったです😁

しっかり改善したようなので、preload は対応する価値がありそうですね。

WordPress の wp_head() の場合は？

当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される style.css などに preload 属性を付与するには、functions.php で wp_head() の出力を変更します。

以下の記事も合わせてご覧ください。

wp_head() の使い方

参考

Eliminate render-blocking resources

rel=”preload” によるコンテンツの先読み – HTML: HyperText Markup Language | MDN