[cocoon]PageSpeed Insights WEBサイトのパフォーマンス改善(高速化オプション)

cocoonCocoon
cocoon

PageSpeed Insightsとは

PageSpeed InsightsはGoogleさんが提供しているツールで、WEBサイトの速度スコアと改善方法のアドバイスが提供されます。ここでは、現状のスコア確認と、WordPressテーマのcocoonが標準で持っている高速化オプションを設定して、その後のスコアを確認します。

PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。

https://developers.google.com/speed/docs/insights/about?hl=ja

Googleさんに詳しく説明がありますので、ここでは割愛いたします。(引用元をクリックしてください)
ただ、速度改善のアドバイスはなかなか高度(よくわからない)ですし、実際、パソコンや携帯でアクセスしてそんなにもたもた表示されないのであれば、それほど気にすることもないかもしれません。
まず、現場のスコアを確認します。
PageSpeed Insights

PageSpeed Insights 分析開始
PageSpeed Insights 分析開始

スコアを出したいURLを入力して、分析をクリックします。

PageSpeed Insights 分析中
PageSpeed Insights 分析中

分析に少し時間がかかりますが、バーで案内されますので、実行中であることを確認できます。

PageSpeed Insights 最初のスコア
PageSpeed Insights 最初のスコア

分析が完了するとスコアが表示されます。左上に「モバイル」「パソコン」とあり、それぞれのスコアを確認できます。上記はモバイルのスコアです。
スコアの下に速度改善のアドバイスが出ますが、今回はcocoonの高速化オプションで済ませてしまうので割愛です。
一つのサーバーで複数のWordPressと通常のWEBサイト(HTMLでゴリゴリ)、一つのWEBアプリケーションが動作しているにしては良いスコアだと思います。

cocoon高速化オプション設定

cocoon サブメニューから高速化
cocoon サブメニューから高速化
cocoon メニューから高速化
cocoon メニューから高速化

Cocoon設定から高速化をクリックします

cocoon高速化設定、ブラウザキャッシュ
cocoon高速化設定、ブラウザキャッシュ

ブラウザキャッシュの有効化にチェックを入れます。
テーマを入れ替えたり、大きな変更を加える時は一度チェックを外したほうが無難です。

cocoon高HTML,CSS,JavaScript速化設定、
cocoon高HTML,CSS,JavaScript速化設定、

HTML,CSS,JavaScriptの縮小化にチェックを入れます。
改行や余白の削除です。ソースコードが減ると通信にかかる時間が短縮されます。

Cocoon高速化、遅延読み込み、Googleフォント
Cocoon高速化、遅延読み込み、Googleフォント

画像の遅延読み込み(Lazy Load表示)は、画面に表示されていない画像は読み込まず、画面のスクロールに応じてあとから読み込むことでウェブページの表示を高速化する手法です。
1ページが非常に大きなページで、且つ画像サイズが大きなサイトですと、ページが表示されるのに時間がかかったりします。そこまで極端ではないにしても、キチンと遅延読み込みがされていればユーザーレスポンスが快適になります。
Googleフォントについてはよくわかりません、Googleフォントってあるんだって感じです。とりあえずチェックを入れておきます。

Coccon高速化、設定保存
Coccon高速化、設定保存

事前読み込みについては、デフォルト値のままにしておきます。よくわかっていないので。
最後に変更を保存をクリックすると、設定が保存されて次のユーザーリクエストから機能します。

PageSpeed Insights 高速化後のスコア
PageSpeed Insights 高速化後のスコア

再度、PageSpeed Insightsを実行したところ、スコアが上昇しました。
後は、不具合がなければ、このまま運用いたします。

コメント

タイトルとURLをコピーしました