1. ホーム
  3. 【PageSpeed】「レンダリングを妨げるリソースの除外」対策でpreloadを導入する

【PageSpeed】「レンダリングを妨げるリソースの除外」対策でpreloadを導入する

本ページはプロモーションが含まれています

 


SEO対策の一つにサイトの軽量化があると思います。Googleが提供している、PageSpeed Insightsではページの読み込み速度をもとにスコア化してくれるので使ったことがある方も多いと思います。今回、私がスコア向上につながったものとして、CSSのpreloadがありましたので紹介したいと思います。

どのようなケースで効果がある？

外部のCSSを読み込んでいるケースでは効果があると思います。当ブログで配布しているBFBというテンプレートはCDNでcssを読み込みにいっているので、効果がありました。Bloggerではテンプレートの中に直接CSSを記述するケースがほとんどだと思うので、同様の悩みを抱えている方は少ないかもしれません。

本当にざっくりいうと、BootstrapとかBulmaなどを利用している人が主に効果が出ると思われる対象です。

実装方法

非常に簡単です。Bootstrapの場合では以下のように「preload」という記述を追加してあげるだけでスコア改善に繋がりました。
他の場合でも「rel="preload"」と追記してあげるだけでOKです。


■変更前

■変更後

スコアの変化





こんなに簡単なことでスコアが7ポイントも上昇しました。早く対応しておけばよかったです。他にも結構遅くてもっと改善すべきところはありますが、まずは1つ軽量化に繋がりました。また「改善できる項目」という箇所にも「レンダリングを妨げるリソースの除外」が表示されなくなりましたので、効果はあったようです。

まとめ

今回は「レンダリングを妨げるリソースの除外」対策でpreloadを導入する方法を紹介しました。非常に簡単にも関わらず効果はそれなりに大きいのでまだ未実装の方は試してみてくださいね。