Googleで提供しているウェブサイトの検索パフォーマンス調査ができるPageSpeed Insight。スマホの検索パフォーマンスが悪い方多いですよね。
わたしが運用している複数サイトもパフォーマンス50前後と、高評価とは言えない状況でした。
今回WordPressプラグインの入れ替えを行ったことで、検索パフォーマンスが49 → 68 と 19 もスコアアップしました。
同じようなパフォーマンス結果に不満がある方の改善ができるように、今回の対策記事を準備しました。
PageSpeed Insightsのスマホパフォーマンス改善対策まとめ
PageSpeed Insightsのスマホ検索パフォーマンス向上のために、下の2つのプラグインの入れ替えを行いました。
- 入れ替え前：WP Fastest Cache
- 入れ替え後：Autoptimize
入れ替え後に「Autoptimize」の設定変更を行いました。
変更した内容は下の4点です。
- JavaScript コード最適化
- CSS コードの最適化
- HTML コードの最適化
- 画像読み込みの遅延処理
プラグインの入れ替えを行い、適切に設定変更することで検索パフォーマンスが49→68と19もスコアアップしています。
まず、どのプラグインを具体的に変更したのか確認しましょう。
使用プラグインを変更するだけで、パフォーマンス改善
WordPressの入れ替えしたプラグインは、下の2つのプラグインです。
- 入れ替え前：WP Fastest Cache
- 入れ替え後：Autoptimize
WordPressのプラグインインストール画面で紹介している画像は、下のイメージになります。
この2つのプラグイン使っている方や、もしかしたら両方入れている方もいるかもしれません。
こちらの2つのプラグインは、サイトの表示方法を調整するプラグインです。どちらか一方が入っていれば問題ありません。
2つ入れるとお互いに同じ処理をするので、邪魔をして表示パフォーマンスの低下につながります。
次にプラグイン入れ替え後に、どの程度パフォーマンスが改善したのか確認しましょう。
パフォーマンス改善結果
プラグインを入れ替えて設定変更した後は、下のイメージの通り19もスコアアップに成功しました。
こちらの対策はわたしが運営している2つのサイトで、どちらも同じように改善したので、一定の改善効果があることは確認済みです。
次からは、具体的にスマホパフォーマンス改善対策作業を紹介していきます。
スマホパフォーマンス改善対策作業
WP Fastest Cacheの無効化→削除
先にWordPressプラグインで使用しているWP Fastest Cacheの無効化手順を紹介します。
まずWordPressメニューの[プラグイン] – [インストール済みプラグイン]をクリックしましょう。
WordPressにインストールされているプラグイン一覧の画面が表示されます。一覧の中から「WP Fastest Cache」を見つけてください。
「WP Fastest Cache」の下に「無効化」があるので、そちらをクリックしてください。
無効化が完了すると、プラグイン管理画面に下のメッセージが表示されます。
次に使用しなくなった「WP Fastest Cache」を削除するので、「削除」をクリックしてください。
削除の確認画面が表示されるので、「OK」をクリックしてください。
「WP Fastest Cache」の削除が完了すると、「WP Fastest Cache」が表示されていた項目に、下のメッセージが表示されていることを確認できます。
次に、「Autoptimize」のインストールを行いましょう。
Autoptimizeのインストール→有効化
WordPressプラグインに「Autoptimize」のプラグインを新規追加しましょう。
WordPressメニューの[プラグイン] – [新規追加]をクリックしてください。
プラグイン一覧画面が表示されます。画面右上にプラグインの検索窓があります。
検索窓に「Autoptimize」を入力してください。
入力すると入力文字に関連するプラグイン一覧が表示されます。
一覧の中から下のイメージと同じ「Autoptimize」を探してください。
「Autoptimize」の「今すぐインストール」を選択してください。
インストールが完了すると、下のイメージに変わるので「有効化」をクリックしてください。
有効化が完了すると、プラグイン一覧の画面に下のメッセージが表示されます。
「Autoptimize」のインストールが完了したので、次は「Autoptimize」の設定変更を行いましょう。
Autoptimizeの設定変更
「Autoptimize」の設定変更を行います。プラグイン一覧に「Autoptimize」の表記があります。
「Autoptimize」の[設定]をクリックしてください。
「Autoptimize 設定」画面が表示されるので、詳細な設定項目を変更していきます。
まずは「JavaScriptオプション」の変更から行いましょう。
JavaScriptオプションの変更
「JavaScriptオプション」の設定変更を行ってください。
変更前後のイメージを準備したので、そちらを参考に変更しましょう。
変更箇所は次の通りです。
- JavaScriptコードの最適化（OFF→ON）
- JSファイルの連結（OFF→ON）
- インラインのJSも連結（OFF→ON）
- <head>内のJavaScriptを強制（OFF→ON）
次に環境別に変更が必要になる箇所があるので、そちらを変更しましょう。
＜環境別変更方法＞
環境ごとに設定変更が必要になる箇所があるので、そちらの変更を行います。
この手順ではわたしの運営サイトの環境情報で紹介しているので、あなたの環境に合わせて読み替えて作業してください。
PageSpeed Insightsの分析結果に「レンダリングを妨げるリソースの除外」という項目が表示されています。
「レンダリングを妨げるリソースの除外」の詳細項目に、下のようなURL一覧が表示されます。この表記URLが環境により異なります。
上のイメージ内のURLに「.js」という箇所が2箇所あると思います。これがサイトで使用している「JavaScript」の対象ファイルです。
URL内の「/（スラッシュ）」から「？」までのファイル名「〇〇〇.js」を、メモもしくはコピーして取得してください。
「Autoptimize からスクリプトを除外:」の最後に「,（カンマ）」区切りで、表示されたファイル名を追記しましょう。
実際に追記した変更内容は下の通りです。
変更後のイメージでは、下の内容を追記しました。
追記内容：,jquery.min.js,mobile-detect.min.js
次に、「CSSオプション」の変更を行いましょう。
CSSオプションの変更
「CSSオプション」の設定変更を行ってください。
変更前後のイメージを準備したので、そちらを参考に変更しましょう。
変更箇所は次の通りです。
- CSS コードを最適化（OFF→ON）
- CSS ファイルを連結（OFF→ON）
- インラインのCSSも連結（OFF→ON）
- レンダリングブロックしているCSSを除去（OFF→ON）
次に環境別に変更が必要になる箇所があるので、そちらを変更しましょう。
＜環境別変更方法＞
環境ごとに設定変更が必要になる箇所があるので、そちらの変更を行います。
この手順ではわたしの運営サイトの環境情報で紹介しているので、あなたの環境に合わせて読み替えて作業してください。
PageSpeed Insightsの分析結果に「レンダリングを妨げるリソースの除外」という項目が表示されています。
「レンダリングを妨げるリソースの除外」の詳細項目に、下のようなURL一覧が表示されます。この表記URLが環境により異なります。
上のイメージ内のURLに「.css」という箇所が5箇所あると思います。これがサイトで使用している「CSS」の対象ファイルです。
URL内の「/（スラッシュ）」から「？」までのファイル名「〇〇〇.css」を、メモもしくはコピーして取得してください。
「レンダリングブロックしている CSS を除去」の詳細に、ファイル名ごとに改行してファイル名を追記しましょう。
実際に追記した内容は下の通りです。
追記後のイメージでは、下の内容を追記しました。
＜追記内容＞
rtoc_style.css
style.min.css
style.css
all.css
swiper.min.css
次に、「HTMLオプション」の変更を行いましょう。
HTMLオプションの変更
「HTMLオプション」の設定変更を行ってください。
変更前後のイメージを準備したので、そちらを参考に変更しましょう。
変更箇所は次の通りです。
- HTML コードの最適化（OFF→ON）
一通り設定変更が終わったので、設定内容の反映を行いましょう。
設定変更の反映
「Autoptimize 設定」の設定内容を反映させましょう。
画面下部に下のボタンがあるので「変更の保存とキャッシュの削除」をクリックしてください。
「変更を保存」をクリックすると、変更前のキャッシュが有効になるため、パフォーマンス結果が変わらない場合があります。
次は、画像情報の最適化を行いましょう。
画像情報の最適化
画像情報関連の最適化を行いましょう。
「画像最適化」の設定変更を行ってください。
変更前後のイメージを準備したので、そちらを参考に変更しましょう。
変更箇所は次の通りです。
- 画像の遅延読み込み (Lazy-load) を利用（OFF→ON）
設定変更が完了したので、画面下部にある「変更を保存」をクリックしてください。
以上で一連のプラグイン入れ替え作業は完了です。
まとめ（再確認）
Googleで提供しているウェブサイトの検索パフォーマンスを調査できるPageSpeed Insight。
スマホ検索パフォーマンス向上のために、下の2つのプラグインの入れ替えを行いました。
- 入れ替え前：WP Fastest Cache
- 入れ替え後：Autoptimize
入れ替え後に「Autoptimize」の設定変更を行いました。
変更した内容は下の4点です。
- JavaScript コード最適化
- CSS コードの最適化
- HTML コードの最適化
- 画像読み込みの遅延処理
プラグインの入れ替えを行い適切に設定変更することで、検索パフォーマンスが49 → 68と 19 もスコアアップしています。
こちらの記事を参考に、あなたの環境のパフォーマンスが改善することを願います。
ここまで読んでいただき、ありがとうございました。
