PageSpeed Insightsの改善項目に「レンダリングを妨げるリソースの除外」と出てきたことはないでしょうか?
「改善項目が分かったことは良いものの、具体的にどう解決すれば良いのか分からない・・・」
心配はいりません。
WordPressをお使いの方であれば、上記の悩みはプラグイン「Autoptimize」で解決できます。
今回は、Wordpressのプラグインを使って「レンダリングを妨げるリソースの除外」に対応する方法について解説していきます。
「レンダリングを妨げるリソースの除外」とは?
レンダリング(rendering)とは、コードやプログラムを人が見やすい形に整形して表示することです。
一方リソース(resource)とは、HTMLやCSS、画像などのWebページを構成するデータのことを指します。
まとめると、「レンダリングを妨げるリソース」とは、Webページの表示を遅延させてしまうデータと理解しておくと良いでしょう。
PageSpeed Insigtsでは、レンダリングを妨げるリソースの除外という改善項目が表示されますが、右側のタブをクリックするとページの表示を遅らせているデータの詳細を見ることができます。
ページの表示遅延はSEO(検索順位)に対して悪影響を及ぼしたり、ユーザーの途中離脱につながったりする可能性があるため、注意が必要です。
「レンダリングを妨げるリソース」が改善項目の上部に表示されている場合は、早急に対策しましょう。
「レンダリングを妨げるリソースの除外」の対策
「レンダリングを妨げるリソースの除外」が表示される要因は様々です。
使用しているデータを確認して一つ一つ対応すれば良いのですが、WordPress初心者の方には難しいですよね。
今回は、WordPressで使える「Autoptimize」というプラグインを活用して、レンダリングを妨げるリソースの除外に対応する方法を解説します。
Autoptimizeをインストールして有効化する
まずは、WordPressにAutoptimizeをインストールしましょう。
WordPressにログインしたら、ホーム画面左のメニューバー「プラグイン」にカーソルを合わせ、「新規追加」をクリック。
画面右下の検索窓に「Autoptimize」と入力すると該当のプラグインが出てくるので、「今すぐインストール」をクリックし、インストールが完了したら「有効化」をクリックします。
Autoptimizeの設定
プラグインのインストールと有効化が完了したら、Autoptimizeの左下に表示されている「設定」をクリックして設定画面に移りましょう。(設定を行う前に必ずバックアップを取っておきましょう)
JavaScript オプション
下記の2つにチェックを入れてください。
- JavaScriptコードの最適化
- JSファイルを連結
CSSオプション
下記の4つにチェックを入れてください。
- CSSコードを最適化
- CSSファイルを連結
- インラインのCSSも連結
- レンダリングをブロックしているCSSを除去
レンダリングをブロックしているCSSを除去にチェックを入れるとテキストボックスが開きます。
ここにはファーストビューで使われているCSSコードを入れる必要があるため、Critical Path CSS GeneratorでCSSコードを抽出しましょう。
【Critical Path CSS Generatorの使い方】
1.ブログのトップページのURLをコピペする
2.Wordpressの親テーマ・子テーマで追加したstyle.cssに記載のCSSを入れる
3.Create Critical Path CSSボタンをクリック
4.抽出されたCSSが表示される
5.上記のCSSを「レンダリングをブロックしているCSSを除去」のテキストボックスにコピペする
HTMLオプション
「HTMLコードを最適化」をチェックしましょう。
その他オプション
下記2つにチェックを入れましょう。
- 連結されたスクリプト / CSS を静的ファイルとして保存
- ログイン状態の編集者、管理者にも最適化を行う
全ての設定が完了したら「変更の保存」を押して終了です。
改善されたかPageSpeed Insightsで確認する
プラグインの設定も完了したら、PageSpeed Insightsで「レンダリングを妨げるリソースの除外」の項目が改善されたか確認しましょう。
PageSpeed Insightsは同じサイトでも診断ごとでスコアが変動することがあるため、複数回診断をして結果を確認した方が良いでしょう。
まとめ
いかがだったでしょうか。
今回は、PageSpeed Insightsの改善項目である「レンダリングを妨げるリソースの除外」を解決するプラグインの設定方法について解説していきました。
PageSpeed Insightsの使い方やその他の改善項目については下記の記事で解説していますので、あわせてチェックしてみてくださいね。
コメント