PageSpeed Insightsで何が分かる？

久しぶりにPageSpeed Insightsを見たのだが、以前と比べて表示が随分と変わった。
以前は「ウェブに関する主な指標の評価」という項目は無かった。

PageSpeed Insightsの変更点

新バージョンの PageSpeed Insights は前バージョンと比べてより詳細な情報を提供するようになった。

というものの、これでも良く分からない。

「実際のユーザーの環境で評価する」とは？

「ウェブに関する主な指標の評価」は「合格」「不合格」「該当なし」の3つに分かれるが、その右の「？」をクリックすると、「詳細」リンクがあり、以下のページが表示される。
⇒Web Vitals

しかし、読んでもさっぱりわからない。
「Core Web Vitalsが大事」ということについて記載されているようではあるが。

続けて調べてみると、以下の記事があった。
分かりやすい。
⇒PageSpeed Insightsとは？分析・改善方法を解説！

PageSpeed Insightsのサイト評価分析

上記の記事では、
PageSpeed Insightsでは、以下の5つの項目でサイトを評価分析しているとする。

実際のユーザーの環境で評価する

「実際のユーザーの環境で評価する」の項目は、ユーザーから実際に収集したデータを表しています。GoogleがChromeをもとに独自に収集した世界中のユーザーデータに基づいて、表示スピードの判定を行う。

パフォーマンスの問題を診断する

Googleのシミュレーションテスト環境下において測定されたデータを表している。

改善できる項目

分析ページの読み込み速度改善項目。

診断

③の改善できる項目よりもさらに詳細な情報や、ホームページの開発環境に対する診断結果が表示される。

合格した監査

対象ページにおいて合格が得られた項目。

携帯（モバイル）とデスクトップ（パソコン）で結果が異なる

不思議なのは、携帯（モバイル）とデスクトップ（パソコン）で結果が異なる点。
私の所有するサイトでは、携帯（モバイル）では「合格」だが、デスクトップ（パソコン）では「不合格」というのが多い。
※ネットでは逆の場合も見受けられる。

そして、「不合格」の場合、問題になっている指標はCumulative Layout Shift (CLS)だ。
Cumulative Layout Shift (CLS)とは何なのか？
これについては別記事で詳しく見ていきます。

ウェブに関する主な指標の評価は検索順位に影響ある？

「ウェブに関する主な指標の評価」とは何かについて見てきたが、問題は、この評価が検索順位に影響があるのかないのかという点だ。

さらに、携帯（モバイル）とデスクトップ（パソコン）で結果が異なる場合、どう考えればよいのか？

該当なし（データがありません）

私が所有するサイトには、「ウェブに関する主な指標の評価」が「該当なし（データがありません）」がいくつかある。
これに関しては以下の記事を見つけた。

不合格

上記の記事では「ウェブに関する主な指標の評価」で「データがありません」とあっても気にしなくても良い、とある。
しかし、データがあると「合格」か「不合格」の判定がなされ、「不合格」の場合、SEO的に不利になる。
何だが、釈然としない。

ここで、「ウェブに関する主な指標の評価」について詳しく見ていきたい。

ウェブに関する主な指標の評価とは？

「ウェブに関する主な指標の評価」＝「Core Web Vitals」である。
「ウェブに関する主な指標の評価（Core Web Vitals）」は、、Googleが2020年4月に新たに提唱したebサイトに関する使いやすさの指標であり、2021年5月から検索順位用のページ評価対象に加えられた。

追加された指標

以下の3種類で構成される。

Largest Contentful Paint(以下LCP)

表示画面内最大要素表示完了までの時間
※ページの表示待ち時間を測る指標

First Input Delay(以下FID)

初回ボタン/リンククリック時に反応が遅れる時間
※ページのインタラクティブ性を測る指標

Cumulative Layout Shift(以下CLS)

読み込み中のレイアウト順次変更の有無
※ページの表示安定性を測る指標

その他の重要な指標

First Contentful Paint (FCP)

ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定。
⇒First Contentful Paint (FCP)【web.dev】

Interaction to Next Paint (INP)

応答性を評価する実験的な指標。
以下のページは英語だ。
⇒Interaction to Next Paint (INP)【web.dev】

Time to First Byte (TTFB)

ラボとフィールドの両方で接続セットアップ時間と Web サーバーの応答性を測定するための基本的な指標
以下のページは英語だ。
⇒Time to First Byte (TTFB)【web.dev】

専門的なことは分からないが、結論的に言えるのは、「ウェブに関する主な指標の評価」が「不合格」だとSEO的に不利だということだ。

「ウェブに関する主な指標の評価」と「パフォーマンス」の違い

「パフォーマンス」はページの読み込み速度の理論値。
「ウェブに関する主な指標の評価」は、ユーザーが実際にページにアクセスした時のユーザビリティを測る指標と言える。

私の所有するサイトの場合、「ウェブに関する主な指標の評価」が「不合格」の時は、「Cumulative Layout Shift (CLS)」が問題だ。
「Cumulative Layout Shift (CLS)」の改善方法については、別記事で詳しく見ていく。

【「PageSpeed Insights」関連記事】

• ウェブに関する主な指標の評価とは何か？改善するには？【PageSpeed Insights】
• Flying Scriptsプラグインの効果とデメリットとは？ 【WordPress】
• 「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！
• PagespeedInsightのスコアが劇的に改善した方法【28/66から100/100に！】

Flying Scriptsとは？

Flying Scriptsとは、JavaScriptを読み飛ばすプラグインである。
ユーザーによる操作（マウスホバー、スクロールなど）があるまでJavaScriptを実行しない。

JavaScriptの何が問題なのか？

そもそも、JavaScriptの何が問題なのか？

大量のリソースを消費

まず、JavaScriptは非常に大量のリソースを消費する。
その為、JavaScriptが実行されている間、ページの読み込みが遅くなる。

ページの表示が遅い

ページの読み込みが遅い＝ページが表示するまで時間がかかる。
大分前に「3秒ルール」が言われていたことがあった。

ユーザーが離脱

ページにアクセスして、3秒以内にページが表示しないとユーザーは離脱してしまう。
今はもっと短くなっているようだ。

Googleの評価が下がる

ユーザーが離脱する事で、Googleのそのページに対する評価が下がる。結果、検索順位が下がる。

JavaScriptの読込を送らせる方法

そこで、ページにアクセスると一度にJavaScriptが実行するのではなく、ユーザーによる操作（マウスホバー、スクロールなど）あるまでJavaScriptを実行しないことで、ページの表示速度を優先する必要がある。
JavaScriptの読込を送らせるには、以下の方法がある。

非同期化（async）

HTMLとJavaScriptを非同期で処理する。

遅延（defer）

HTML解析後にJavaScriptを実行する

Flying Scripts

JavaScriptを読み飛ばす。

実際のところ、①非同期化（async）や②遅延（defer）ではPageSpeed Insightsで劇的なスコア改善は見込めない。
そこで、「Flying Scripts by WP Speed Matters」だ。

Flying Scriptsの効果

Flying Scriptsは、ユーザーが何らかのアクションを起こすまでJavaScriptが実行されない。

通常、ユーザーがページにアクセスすると、複数のJavaScriptが実行さる。
それがページの表示速度を送らせる原因になっているのだが、Flying Scriptsは、ユーザーが何らかのアクションを起こすまでJavaScriptをなかったことにしてくれる。

従って、その分、ページの表示速度の足をひっぱらない。
PageSpeed Insightsで劇的なスコア改善が可能だ。

但し、Flying Scriptsのデメリットがないこともない。

Flying Scriptsのデメリット

Flying Scriptsのデメリットとしては、画面表示が崩れてしまう可能性があるということだ。

これに対する対策としては、Flying Scriptsの設定画面で遅延時間をサイト毎に調整する。

次にFlying Scriptsの設定方法について。

Flying Scriptsの設定

インストール

プラグインのインストールは「プラグインを追加」画面で「Flying Scripts」と入力。
「Flying Scripts」が見つかったら、「今すぐインストール」→「有効化」の順にクリック。

Flying Scriptsの設定方法

Flying Scriptsの設定はプラグインページの「Flying Scripts by WP Speed Matters」のすぐ下の「settings」をクリック。

設定するのは以下の項目

Include Keywords

Include Keywordsに読み飛ばしたいjs名を入力する。
js名を見つける一番簡単な方法は、PageSpeed Insightsで「使用していないJavaScriptの削減」をクリック。

表示されたURLを右クリック⇒名前をつけてリンク先を保存
URLの「.jp」を含むファイ名を「Include Keywords」に設定。

Timeout

Timeoutで設定した時間が過ぎると、ユーザーが何らのアクションを起こさなくてもJavaScriptが実行される。
通常は「5s」で設定。

先にFlying Scriptsのデメリットで触れたが、JavaScriptを読み飛ばす事で、サイトの画面表示が崩れる可能性がある。

画面表示の状態を見ながら「Timeout」で設定する時間を調整する。

【「PageSpeed Insights」関連記事】

• ウェブに関する主な指標の評価とは何か？改善するには？【PageSpeed Insights】
• Flying Scriptsプラグインの効果とデメリットとは？ 【WordPress】
• 「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！
• PagespeedInsightのスコアが劇的に改善した方法【28/66から100/100に！】

PagespeedInsightのスコアを改善する理由

PagespeedInsightとは？

PagespeedInsightはサイト（ページ）の表示速度（スコア）と改善項目を教えてくれるGoogleのツールです。
サイト（ページ）の表示速度が遅いと、Googleの評価が低くなり、検索結果が上位表示しにくくなります。

スコアの目標

スコアは3段階に分かれており、好ましいのはグリーン（90-100）、NGはレッド（0-49）です。

以下は、モバイル28/PC66からモバイル100/PC100に改善したサイトのスコア。
【モバイル版】

【PC版】

但し、PagespeedInsightのスコアでGoogleの評価が全て決まるわけではありません。

2021年5月からは、モバイル版では「ウェブに関する主な指標」に合格する必要があります。
【関連記事】
Googleページエクスペリエンスとは？レポートの見方・改善方法【徹底解説】

しかしながら、PagespeedInsightのスコア改善は「ウェブに関する主な指標」の改善にもつながります。
※全部ではありません。一部です。

PagespeedInsightのスコアが劇的に改善した方法

私は複数のサイトを所有しており、同じ施策を行ったところ、いずれのサイトもスコアが劇的に改善しました。
その方法をご紹介いたします。

基本的な対策

いつからか不明ですが、Wordpressの管理画面に「サイトヘルスステータス」という項目が表示され、改善が必要な項目を教えてくれます。
一例では以下のものがあります。

項目として見たことはありませんが、投稿一覧に「公開済み」以外の記事がある場合、削除した方がよいそうです。

改善項目

PagespeedInsightの分析結果に表示される改善項目を改善します。

改善項目はサイト（ページ）によって異なります。
下記は一例です。

何から改善するのか？

改善項目が複数ある場合、何から手を付ければよいのでしょうか？
実は改善項目のレベルもスコア同様、レッド・オレンジ・グリーンの3段階に分かれています。

優先すべきは、レッドの改善項目です。

尚、「最初のサーバー応答時間を速くしてください」がレッドの場合、速いレンタルサーバーに変更すれば改善されるかというと、事は簡単ではありません。

「最初のサーバー応答時間を速くしてください」に関しては、私はまだ改善策を持っていないので、現状では対応していません。

以下は実際に、スコアを改善する為に行なった方法です。

プラグイン

プラグインは、少ない方が良いです。
また、プラグイン同士の相性、あるいは設定によって不具合が生じる場合があります。
基本的に複数のプラグインで同じ設定を行わないことです。

例えば、プラグインに「画像遅延」の機能がある場合、チェックを付けるのは1つのプラグインのみです。

EWWW Image Optimizer

画像の最適化プラグイン。
⇒EWWW Image Optimizerの設定方法と使い方

Flying Scripts by WP Speed Matters

改善項目「使用していない JavaScript の削減」に効果を発揮するプラグイン。
実際は「削除」ではなく「遅延」ですが、スコアが劇的に改善しました。
⇒「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！

Autoptimize

Autoptimizeは、HTMLやCSS、Javascriptなどのリソースを簡単に軽量化・圧縮してくれるWordpressプラグイン（ツール）です。
⇒Autoptimizeの設定方法～設定を誤ると不具合の原因に？【2021年】

WP Fastest Cache

WP Fastest Cacheは、Autoptimizeと相性の良いキャッシュ系プラグインです。Autoptimizeと設定がダブらないことが重要です。
⇒WP Fastest Cacheの設定方法と使い方

【「PageSpeed Insights」関連記事】

• ウェブに関する主な指標の評価とは何か？改善するには？【PageSpeed Insights】
• Flying Scriptsプラグインの効果とデメリットとは？ 【WordPress】
• 「使用していない JavaScript の削減」方法～プラグインでスコアが劇的に改善！
• PagespeedInsightのスコアが劇的に改善した方法【28/66から100/100に！】

レンタルサーバーを選ぶポイント

私が考えるレンタルサーバーの選ぶポイントは以下の通り。
※順不同

①料金
②管理画面の使いやすさ
※ワードプレス（WordPress）のインストールを含む
③サポート体制
④パフォーマンス
※サイトの表示速度、アクセスが集中した時の対応

これらに不足があると、後悔することになる。

料金

料金は大きく2つ。

料金については各レンタルサーバー業者のサイトに表示されている。
ただ、料金といっても、容量や機能によっても異なるので一概に安い、高いとはならない。

基本的に容量が多いと値段も高い。

月額料金が安いレンタルサーバーはあるが、安いのはそれなりの理由がある。
私の場合は、現在1,000円前後のレンタルサーバーを選んでいる。

初期費用は安い方が良い。
キャンペーンで割引があるレンタルサーバーもあり。

管理画面の使いやすさ

「管理画面の使いやすさ」に関しては実際に使うしかない。
レンタルサーバーは通常、試用期間（無料）があるので、その間に確認すると良い。
※但し、試用期間のないレンタルサーバーもある。⇒ConoHa WING

サポート体制

サポート体制に関しては問題が発生してからしか分からない。（当記事でも私が経験した内容を記載しています。）

土日が休みの業者が多いが、土日も営業しているレンタルサーバーもある。⇒エックスサーバー等。

パフォーマンス

やはり、表示速度が速いと言われるサーバーが良い。
但し、パフォーマンスは額面通りにはいかず、当たりはずれがある。
というのは、共用サーバーの場合、1つのサーバーを複数のユーザーが使うので。アクセスが極端に多いユーザーが同じサーバーにいると、パフォーマンスが落ちる。

これも使ってみないと分からない。

【追記】
レンタルサーバーを複数、使用し、Wordpressサイトの移転を行った経験から、レンタルサーバーを選ぶポイントに以下の2点を付け加えたい。

●ワードプレスの簡単インストール機能
●サイトの移転のしやすさ

ワードプレスの簡単インストール機能

面倒だったのが「さくらインターネット」。
WordPressをインストール時に、いちいちサブディレクトリーを作成しなければならず、ドメイン直下にWordpressをインストールできない。

あと、プランのグレードアップ（プラン変更）も出来ず、一から契約しなければならない。
等など不満があり、サーバー契約は解除した。

レンタルサーバー運営歴は長い老舗なのだが、ユーザー視点に欠けているレンタルサーバーであった。

サイトの移転のしやすさ

サーバーの引っ越しが簡単かどうか。
次に、新しいサーバーに移転してサイトが表示するまでのスピードも重要なポイントだ。

mixhostの場合は、SSL化まで24時間から72時間かかるようで、その間、「このサイトは安全でない」といった表示が出て、みっともない。
※但し、これはどのサーバーでも同じ。
かかる時間はサイトによるようだ。

• WP Fastest Cacheのインストール方法
• WP Fastest Cacheの設定方法
• .htaccessに元々追加コードを記述している場合の注意点

WP Fastest Cacheのインストール方法

WP Fastest Cacheのインストール方法は以下の通りです。

①ワードプレス（WordPress）のメニューの「プラグイン」のプルダウンメニューあるいは、「プラグイン」ページの一番上にある「新規追加」をクリック。

②「プラグインを追加」ページの「プラグインの検索」窓にWP Fastest Cacheと入力。

③候補がいくつか表示されますが、WP Fastest Cacheのすぐ下の「今すぐインストール」をクリック。

④インストールが完了すると、「有効化」という文字が表示されます。
「有効化」をクリック。
文字が「有効」に変わります。

続いて設定に入ります。

WP Fastest Cacheの設定方法

WP Fastest Cacheの設定をするには、インストール済みプラグイン（プラグイン一覧ページ）のWP Fastest Cacheの文字の下の「設定」をクリック。

「設定」ページが開きます。

【設定方法】
他のプラグインに比べると、設定する項目が多いです。
といっても難しくはありません。

①「言語」のプルダウンメニューから「日本語」を選択し「変更を保存」をクリック。

②「設定」タブ
必要な個所にチェックを入れる。
何処にチェックを入れるかについてはネットの情報は様々。
私は以下の項目にチェックを入れていますが、問題は発生していません。

◇Preload
「Preload」にチェックを入れると、ウインドウが開きます。
必要な項目にチェックを入れ「OK」をクリック。
※私は6つの項目にチェックを入れています。

◇新しい投稿
「新しい投稿」にチェックを入れると、ウインドウが開きます。
上下のどちらかのチェックボックスにチェックを入れ「OK」をクリック。
※私デフォルト（Clear All Cache）のままです。

◇Update Post
「Update Post」にチェックを入れると、ウインドウが開きます。
上下のどちらかのチェックボックスにチェックを入れ「OK」をクリック。
※私デフォルト（Clear Cache of Post/Pages）のままです。

③「キャッシュの削除」タブ
「キャッシュの削除」「キャッシュと圧縮されたCSS/JSファイルを削除する」を各々クリック

③「キャッシュの有効期限」タブ
右端にある「Add New Rule」をクリック。

「If REQUEST_ULI」の右にあるプルダウンメニューから「全て」を選択。
「Then」のの右にあるプルダウンメニューから「Once Every 10 Days」を選択。※これでなくても構いません。

.htaccessに元々追加コードを記述している場合の注意点

「サイトのページ読み込み（表示）速度を改善する方法(2)～スコア85［PageSpeed Insights］に役立つプラグインと.htaccessコード」では、.htaccessにコードを追加することで、PageSpeed Insightsの「最適化についての提案」で表示されることのある以下の項目に対応した。

①圧縮を有効にする
②ブラウザのキャッシュを活用する

しかし、WP-Fastest-Cacheの上記の設定を行うと、.htaccessにコードが追加され、<ifModule mod_deflate.c>～</ifModule>と<IfModule mod_expires.c>～</IfModule>のコードがダブるので、先に追加したコードを削除する必要がある。

この時、誤って以下のコードも削除してしまうと404エラーが発生し記事が表示されなくなるので、注意して欲しい。

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /public_html/
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /public_html/index.php [L]
</IfModule>
# END WordPress

Autoptimizeのインストール方法

Autoptimizeのインストール方法は以下の通りです。

①ワードプレス（WordPress）のメニューの「プラグイン」のプルダウンメニューあるいは、「プラグイン」ページの一番上にある「新規追加」をクリック。

②「プラグインを追加」ページの「プラグインの検索」窓にAutoptimizeと入力。

③候補がいくつか表示されますが、Autoptimizeのすぐ下の「今すぐインストール」をクリック。

④インストールが完了すると、「有効化」という文字が表示されます。
「有効化」をクリック。
文字が「有効」に変わります。

続いて設定に入ります。

Autoptimizeの設定方法

Autoptimizeの設定をするには、インストール済みプラグイン（プラグイン一覧ページ）のAutoptimizeの文字の下の「設定」をクリック。

「設定」ページが開きます。

「設定」ページでは以下の3か所にチェックを入れ、「変更を保存してキャッシュを削除」をクリックします。

尚、「JavaScript コードの最適化」にはチェックを入れない方が良い、という記事もありましたが、私は全てにチェックを入れています。

Autoptimizeの使い方

上記の設定後、することはありません。
【「Autoptimize」関連記事】
Autoptimizeの設定方法～設定を誤ると不具合の原因に？【2021年】

EWWW Image Optimizerのインストール方法

EWWW Image Optimizerのインストール方法は以下の通りです。

①ワードプレス（WordPress）のメニューの「プラグイン」のプルダウンメニューあるいは、「プラグイン」ページの一番上にある「新規追加」をクリック。

②「プラグインを追加」ページの「プラグインの検索」窓にEWWW Image Optimizerと入力。

③候補がいくつか表示されますが、EWWW Image Optimizerのすぐ下の「今すぐインストール」をクリック。

④インストールが完了すると、「有効化」という文字が表示されます。
「有効化」をクリック。
文字が「有効」に変わります。

続いて設定に入ります。

EWWW Image Optimizerの設定方法

EWWW Image Optimizerの設定をするには、インストール済みプラグイン（プラグイン一覧ページ）のEWWW Image Optimizerの文字の下の「設定」をクリック。

「設定」ページが開きます。

EWWW Image Optimizerの設定方法は簡単です。

「Basic」と「Convert」の2箇所にチェックを入れるだけ。
※「Basic」には最初からチェックが入っている場合があります。

EWWW Image Optimizerの使い方

EWWW Image Optimizerは「有効化」してもGooglgeスコアに変化はありません。

それは、このプラグインが今後アップロードされた新しい画像を最適化する為です。

既にアップロードしてある過去の画像の最適化は手動で行なう必要があります。

方法は簡単!
①「メディア」メニューの「一括最適化最適化」をクリック。

②画像がアップされている場合、「最適化されていない画像をスキャンする」をクリック。

③「最適化を開始」をクリック。
ファイル数によって完了する場合まで少し時間がかかります。

• ページ読み込み（表示）速度の改善に効果のあったプラグイン
• プラグインのインストールの仕方及び設定方法
• EWWW Image Optimizerとはどういうプラグイン？
• Autoptimizeとはどういうプラグイン？
• Script to Footerとはどういうプラグイン？
• WP Fastest Cacheとはどういうプラグイン？
• ページ読み込み（表示）速度改善にあると便利なプラグイン
• 設定がそのままだとページ読み込み（表示）速度が遅くなるプラグイン

ページ読み込み（表示）速度の改善に効果のあったプラグイン

先に書いた記事では、サイトのページ読み込み（表示）速度に役立つ2つのプラグインと.htaccessの追記コードを紹介しました。
サイトのページ読み込み（表示）速度を改善する方法(2)～スコア85［PageSpeed Insights］に役立つプラグインと.htaccessコード
「PageSpeed Insights」の使い方～ページの表示速度を改善する方法(1)

プラグインは以下のものです。
・EWWW Image Optimizer
・Autoptimize

ただ、.htaccessの編集はFTPソフトの立ち上げや、サーバーのファイルマネージャを使う必要があり、面倒。

他に方法がないか探していたら、見つけたのが次のプラグインです。
・Script to Footer
・WP Fastest Cache

これらはワードプレスのプラグインなので、設定がそこで完結します。
さらに、.htaccessの編集をした時より、スコアがアップしました。

ページ読み込み（表示）速度の改善に効果のあったプラグインは以下の4つです。

・EWWW Image Optimizer
・Autoptimize
・Script to Footer
・WP Fastest Cache

プラグインのインストールの仕方及び設定方法

●プラグインのインストールの仕方
「プラグイン」メニュー「新規追加」をクリック。
インストールしたいプラグイン名を入力。
候補が表示されるので、「今すぐインストール」をクリック。
インストールが終わると「有効化」をクリックして”第1段階”は終了です。

“第1段階”と言ったのは、その後「設定」をしないと機能しないプラグインがある為です。

●プラグインの設定
「インストールしたプラグイン一覧表」にあるプラグイン名の下の「設定」をクリックするか、「設定」メニューから設定したいプラグイン名をクリックすると、「設定」ページが開きます。

それでは、ページ読み込み（表示）速度の改善に効果のあった4つプラグインの設定方法と使い方を以下に説明していきます。

EWWW Image Optimizerとはどういうプラグイン？

EWWW Image Optimizer は画像を最適化することでページのロード速度を向上させてくれます。

“画像を最適化する”は、GoogleのPageSpeed Insightsの「最適化についての提案」で示されることのある項目の1つです。

但し、このプラグインは今後アップロードをした画像を最適化するので、既にアップした過去の画像の最適化は手動で行う必要があります。

EWWW Image Optimizerのインストール、設定及び過去の画像の最適化は手動で行う方法についげはこちらで解説しています。⇒EWWW Image Optimizerの設定方法と使い方

Autoptimizeとはどういうプラグイン？

Autoptimizeは”ウェブサイトを最適化し、CSS コードと JavaScript コードを連結し圧縮”するワードプレス（WordPress）のプラグインです。

※Autoptimizeの設定方法と使い方

Script to Footerとはどういうプラグイン？

JavaScriptをフッターに移動することで読み込みが後でも問題のないJavaScriptの読み込みを後にまわすことで、ページの読み込み（表示速度）を改善してくれるプラグインです。

PageSpeed Insightの「最適化の提案」の「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」に対応しています。

WP Fastest Cacheとはどういうプラグイン？

WP Fastest CacheはWordPressのキャッシュを管理・削除できるプラグインです。

PageSpeed Insightの「最適化の提案」の「ブラウザのキャッシュを活用する」に対応しています。

WP Fastest Cacheを使うにはインストール（有効化）の後に設定が必要です。⇒WP Fastest Cacheの設定方法と使い方

あると便利なプラグイン

あると便利なプラグインは「P3 (Plugin Performance Profiler)」です。

このプラグイン自体では、ページの読み取り（表示）速度の改善に直接は繋がりませんが、負荷をかけているプラグインを教えてくれるので、そういったプラグインが見つかった場合、設定を変更したり、他のプラグインに変更したり、停止と言った対策が取れます。

「P3 (Plugin Performance Profiler)」はスキャンする時だけ、「有効化」すれば良いので、スキャンが終わったら「停止」をクリックしましょう。

【使い方】
使い方は簡単です。
①「有効化」をクリック。
②「Scan Now」をクリック。
③上部の「StartScan」をクリック
④真ん中に「Scan Name」というウインドウが表示されていますが、右のバーを下げると「Auto Scan」と「Manual Scan」という文字があるので、「Auto Scan」をクリック。

⑤スキャンが終了すると、「View Results」という文字が表示されるのでクリック。結果が表示されます。

WordPress Popular Postsの設定方法と使い方

「WordPress Popular Posts」人気記事を表示してくれるプラグインですが、「有効化」しただけではページの読み込みが遅くなるようです。

【設定方法】
「設定」から上部の「ツール」をクリック。
私は以下の設定をしています。

◇ログ上限：「データ保存期間」を選択
※期間はデフォルト「180」日のままです。
◇WPPキャッシュ期限ポリシー：「キャッシュする」を選択
◇キャッシュ更新間隔：「1時間」以上を指定
◇データサンプリング：「有効」を選択
最後に「適用」をクリック。

【使い方】
ウィジェットから細かい設定が出来ます。

• サイトのページの読み込み（表示）速度の計り方
• 圧縮を有効にする
• ブラウザのキャッシュを活用する
• スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
• サーバーの応答時間を短縮する
• 画像を最適化する
• HTML、CSS、JavaScriptを縮小する
• 修正の結果

「PageSpeed Insights」の使い方

「PageSpeed Insights」の使い方は簡単。
PageSpeed Insightsにアクセスして調べたいサイトのURLを入力後、「分析」をクリック。

すると、モバイル、パソコン別にスコアが出る。

↓モバイルページ↓

↓パソコンページ↓

私の場合、「ページの速度」が「Unavailable（取得不可）」。
※これについては、調べて後日、記事にアップの予定。

スコアは以下の3段階のようだ。
Good（緑）:80～
Medium（オレンジ）:60～80未満
Low（赤）:60未満

今回のアップデートでは、モバイルページはLowだと評価を下げることになる。
対策は、モバイル、パソコン別に「最適化についての提案」として「修正方法」が示されている。

↓パソコンページ↓

だが、この「修正方法」を見ても具体的に何をするのかがさっぱり分からない。
そこで、ネットで情報を調べ修正することにした。

圧縮を有効にする

『「PageSpeed Insights」で100点を目指せ！その1「圧縮を有効にする」』によると、以下のコードを.htaccess に追記することでファイルが圧縮され、通信速度が改善されるという。

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</ifModule>


ローカルで「.htacess」に上記のコードを追加し、FTPソフトを使ってWEBにアップ。
※問題が発生した場合、元に戻すために、元のファイルは.txt等で残しておくと良い。

FTPソフトのWeb上に「.htacess」のファイルはない。→隠しファイルを表示に変えたら「.htacess」が現れた。
しかし、スコアは改善された。

モバイル：49→65（15ポイントUP！）
PC:57→64（7ポイントUP！）

ブラウザのキャッシュを活用する

「PageSpeed Insights」で100点を目指せ！その2「ブラウザのキャッシュを活用する」

『「圧縮を有効にする」の時と同じように「.htaccess」ファイルを編集します。
この方法は、サーバーが「Apacheモジュール mod_expires」を使えることが前提なので、編集する前にサーバーの仕様を確認しておいてくださいね。』

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
</IfModule>


上記の設定では、「画像ファイルとjavascriptの有効期限は1週間。
CSSファイルは、変更があった場合に早めに反映させたいので1日にし」た模様。

しかし、思ったほどスコアは改善されなかったらしい。

そこで、いじれも1週間にしてみる。
上記のソースの「 1 days」を「1 weeks」に変更すると以下になる。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
</IfModule


ところが、モバイルのスコアは65から52に下がってしまった。
パソコンに関しては64→78とさらに14点アップ。

そこで、有効期限を全て、さらに伸ばしてみる。
「1 weeks→2 weeks」

パソコンのスコアは変わらなかったが、モバイルはダウンする前の65から68と若干アップ。

ただ、cssの有効期限を長くするとcssを変更してもデザインに反映するまで日にちがかかり不便。
これは改善の余地あり。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

『【PageSpeed Insights】レンダリングをブロックしている JavaScript/CSS を排除したら99点になったので方法をご紹介』から引用する。

実はこの二つ、WordPressがwp_headに自動で呼び出すJavaScript。まずはこれから解決します。解決方法はとても簡単で、function.phpに以下を追記するだけ。

if (!(is_admin() )) {
function add_async_to_enqueue_script( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url; //.js以外は対象外
if ( strpos( $url, ‘jquery.min.js’ ) ) return $url; //’jquery.min.js’は、asyc対象外
return “$url’ async charset=’UTF-8”; // async属性を付与
}
add_filter( ‘clean_url’, ‘add_async_to_enqueue_script’, 11, 1 );
}

パソコンは78から80にアップして「Good」となったが、モバイルは68
から36とスコアを32も落としてしまった。
何が問題なのだろうか？

一度、書き加えたソースを削除し元に戻す。
モバイル：68
パソコン：80

モバイルは前とスコアが同じだが、パソコンは何故かスコアが2点アップし「Good」になった。

前述の参照記事の方法ではうまくいかなった。
別の方法があるようだが、とりあえず、次の項目に進むことにする。

サーバーの応答時間を短縮する

『「サーバーの応答時間を短縮する」を修正する方法：PageSpeed Insights』と言う記事を参照。

「この修正が表示されるのは、自分のブログがサーバーから読み込むのに0.2秒以上かかる場合に表示されます。」

『「サーバーの応答時間を短縮する」についての修正方法は、Googleから「ここがおかしいからここを修正してくれ！」みたいに教えてくれないので、応答時間を遅らせている原因を自分で探す必要があります。』

結局、修正方法は分からず。

そこで、「Sentry高速化：サーバーの応答時間を激減させるWordPress Popular Postsの設定方法」と言う記事により、、「WordPress Popular Posts」というプラグインの設定をあれこれ変えてみたが、スコアは全く変わらなかった。

画像を最適化する

「EWWW Image Optimizer」はCMS上で使っている画像を一括で最適化してくれるプラグインだ。

インストール後、「有効化」をクリック。

「プラグイン」のリストを見ると、上部に以下の表示がでた。

「EWWW Image Optimizer は PHP 5.4 かそれ以上を要求します。より新しいバージョンの PHP 5.6 や 7.0, 7.1 は、それまでのバージョンと比べはるかにパフォーマンスが良く安全なものになっています。このプラグインのサポートするバージョンの PHP へアップグレードする方法がわからない場合は、サーバー会社へお尋ねください。」

これはサーバーで実施するしかない。
レンタルサーバーでバージョンアップすると上記の表示が消えた。

ところが、スコアは以下の通り。
モバイル：68→79（+11）
パソコン：80→78（-2）

モバイルのスコアは11上がったが、パソコンは-2とスコアダウン。
同じ施策にも関わらず、モバイルとパソコンではスコアが異なる。

せめて85以上（Good）にしたいのだが。

ただ、反映時間に若干時間がかかるようだ。

記事を書いている途中で、再度スコアをチェックしたら以下の結果になった。
モバイル：72
パソコン：82

おやおや、パソコンはスコアが+2で「Good」になったが、モバイルは逆に-7の72になった。

次に進もう。

ここで作業を中断し、翌日、「ページの速度」を改めて計ったら、スコアが変わっていた。

モバイル：60（←72）
パソコン：87（←82）

パソコンは85をクリアしたが、モバイルは12もスコアがダウン。
同じ条件でもスコアが異なるのはサーバーの状態が影響しているのだろうか？

とりあえず、PageSpeed Insightsが提案する「最適化」を進めることにしようと思ったが、再度、ページの再読み込みを行うとまたもやスコアが変わった。

モバイル：80
パソコン：79

いずれにしても「最適化についての提案」項目は表示されている。
しかも、「修正」を行った項目まで表示されている。
行なった「修正」で逆にスコアを落とす場合もあり、「修正方法」が間違っているのかもしれない。

とりあえず、先に進むべし。

HTML、CSS、JavaScriptを縮小する

「CSSを縮小する」方法を調べていたら、「HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法（Autoptimizeプラグイン）」という記事があった。

「最適化についての提案」について、「縮小する」対象はHTML、CSS、JavaScript、画像の4つがあるが、Autoptimizeというプラグインを使うと、その内、HTML、CSS、JavaScriptの3つ項目が「縮小する」らしい。

ただ、プラグインをあまり入れ過ぎると、プラグイン同士が干渉し合って重くなることもあるが、とりあえず試してみる。

やり方は簡単。
Autoptimizeをインストール。
「有効化」をクリック。
「設定」メニューにあるAutoptimizeをクリック。
HTML、JavaScript、CSSの各々の「コードの最適化」にチャックを入れた後、「変更を保存してキャッシュを削除」をクリック。

モバイル：76（←80）-4
パソコン：84（←79）+5

修正の結果

さて、修正を一通り行った。

ただ、修正を行ったことで逆にスコアを落とした方法もあり、その場合、修正をしない状態に戻した。

しかし、他の修正を加えた項目で、まだ修正項目に挙がっているものがある。
さらに、不思議なことにモバイルとパソコンでは評価が異なる。

↓モバイルページ↓

↓パソコンページ↓

そして、同じ条件でも、PageSpeed Insightsを読み込む度にスコアが変わる。
これはサーバーの環境が影響しているのか？
※GoodがMedium、MediumがLowになる時がある。モバイルページがLowだとまずい。

ただ、修正は十分ではないが、スコアは改善された。

いずれにしても、「最適化についての提案」が表示されており、修正は十分でない。

又、「ページの速度」が「Unavailable」となっている問題も何も改善されていない。

これららについては後日、記事にアップの予定です。