「レンダリングを妨げるリソースの除外」とは？改善方法も解説【PageSpeed Insights】
Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「レンダリングを妨げるリソースの除外」とはどういう意味か、また診断結果を改善する方法についても解説します。
「レンダリングを妨げるリソースの除外」とは？
PageSpeed Insightsで自社サイトの速度を計測すると「レンダリングを妨げるリソースの除外」が指摘されることがあります。レンダリングを妨げるリソースとはjava Scriptや各種スタイルシートのことで、除外した場合の改善予測時間も表示されます。
キーワード検索された際の自社サイトの表示順位を少しでも向上させるため、SEO対策に取り組んでいることと思いますが、モバイルフレンドリーであることはサイトの評価を上げ、ひいては有効なSEO対策となります。
モバイルフレンドリーであるためには表示速度も大切ですから、この点においても有効な対策を取らなくてはなりません。
「レンダリングを妨げるリソースの除外」の改善方法
「レンダリングを妨げるリソースを除外する」といっても、すでに実装されている JavaScript やCSSを完全に削除することはあまり現実的ではありません。
サイト全体のデザインも崩れてしまいますし、いくら表示速度が上がっても装飾の全くないサイトではビジュアル的にも魅力半減となってしまいます。見た目の美しさを保持しつつ、表示速度を上げるためにとる手段を確認していきます。
JavaScriptの最適化
まずJavaScriptのブロッキングを回避するためには、asyncかdeferをつけてJavaScriptをロードします。asyncをつけた場合はJavaScriptをロードしている最中でもレンダリングを停止させません。そしてJavaScriptのロードが終わるとすぐにそのスクリプトの実行に移ります。
またdeferをつけた場合もJavaScriptのロード中にレンダリングを妨げることはありません。ただしJavaScriptのロード終了後のスクリプト実行はHTMLレンダリングのあとに順次行われるという違いがあります。判断材料としては複数のJavaScriptを実装している場合はdeferをつけ、それ以外の場合はasyncをつけるということになります。
つまり「レンダリングを妨げるリソースを除外する」方法としては、トップページに記述してあるJavaScript の部分にasyncやdeferをつけていくだけです。なおHTML5 では、scriptタグで type=’text/javascript’ を省略することが可能ですので、同時に削除すると速度改善に有効です。
CSSの最適化
またCSSの配置を最適化することは技術的に大変難しい問題です。エンジニアのスキルと知識によっては下手にいじってしまうと元に状態に戻すこともできなくなるのでプラグインを利用するほうが安全です。
いくつかのプラグインが公開されていますので自分で使用しやすいと思うものを選んでインストールし実行します。設定画面で指示にしたがって「CSSのオプション」項目を設定していきます。
内容は「CSSコードの最適化」「インラインのCSSを凍結」「全てのCSSをインライン化」の3点を実行するようにします。これでレンダリングを妨げる状態を回避することができます。
ただしCSSをいじってしまうとサイトのデザインが崩れる可能性があるので、実行前にサイトの表示や動作に不具合が出ないかを確認します。
