先日にPageSpeed Insightsを確認したところ、当サイトで最もPVを稼いでいる下記の記事でPageSpeed Insightsのスコアがモバイル = 40, PC = 60という非常に低い値になっていました。
一般にPageSpeed Insightsスコア、つまりページの描画秒数はPVに非常に直結すると言われています。なので、「このままではまずい！」と思い、いろいろと対処をしました！
その対策の結果、PageSpeed Insightsのスコアがモバイル = 40 → 92, PC = 60 → 100 と極めて良い値に劇的に改善することに成功しました！
この記事では自分へのメモも兼ねて、PageSpeed Insghtsのスコアが悪くて困っている方(特に自分と同様にCocoonを使用している方)のために、改善のためにやったことを紹介します！
=== 目次 ===
基本はPageSpeed Insightsの改善提案の内容を実施すれば良い
PageSpeed Insightsではスコアの他に下図のような改善案の提案をしてくれます。基本的にはこの改善提案を順番に行っていけばスコアはおのずと向上します。
この後ではWordPress + Cocoonで特に注意すべきことを紹介していきます。
必要のないプラグインは削除する
インストールしているプラグインを一度見直し、必要のないプラグインは削除しましょう。プラグインの数だけ以下のようなリスクが増加します。
- phpの処理時間がかかりサーバー応答が遅くなる
- Java Scriptの動作時間が増え、描画の時間が伸びる
- Java Scriptによって描画中にコンテンツが移動され、CLSスコアが悪化する
- 無駄なCSS読込時間が増える
また、機能が重複していないかも確認しましょう。
よくある例としてはGoogle Analyticsに加えてアクセス解析プラグインを使用しているケースです。
ほとんどの場合においてはGoogle Analyticsで十分のはずです。よっぽどの理由がなければプラグインは削除し、Google Analyticsに統一しましょう。
JetPackが悪さをすることがある？
筆者のケースですとJetPackを削除したところ、応答時間が1秒程度改善しました。しかし、再度インストールしたところ、応答時間は早いままでした。いまいち原因が不明ですが、JetPackが悪さをすることがあるようです。
筆者のケースですとログインアタックのセキュリティ向上のためだけにJetPackを使用していたので、JetPackを削除して、「SiteGuard」というログインアタックに特化したプラグインに変更しました。
原因が不明ですみませんが、JetPackが悪さをすることもあるようですので、一度JetPackを削除してSiteSpeedスコアが改善するかを確認することをオススメします。
読者にとって意味のないウィジェットは削除する
読者にとって意味のないウィジェットは削除してしまいましょう。特に以下のようなウィジェットは削除を検討すべきです。
管理者のプロフィール
サイドバーなどで管理者のプロフィールを掲載するのはやめましょう。自分がGoogle検索などで調べ物をしているときのことを思い出してみてください。
Google検索でアクセスした先のサイトの管理者のプロフィールで何か有益な情報が得られたことがありますか？はっきり言ってほとんどないでしょう。
よって、プロフィールはそのデータサイズだけPageSpeedスコアを悪化させる一方で、読者に与える情報はほぼゼロで、掲載するメリットが全くもって存在しません。
特にプロフィール画像はデータサイズが大きいため掲載するのは極力避けるべきです。
どうしてもプロフィールを掲載したいのであれば、プロフィール固定ページを作成し、そのページへのリンクを貼る程度にしておきましょう(その場合でもプロフィールに有益な情報などないので、noindexを設定することをオススメします)。
ただし、タレント/アーティストのブログや主婦同士のアクセスを狙ったブログなど、管理者自体をコンテンツとして全面に押し出したい場合は例外です。その場合にはむしろ積極的にプロフィールは掲載すべきでしょう。
そうでなければ一般人のプロフィールに興味のある読者など存在しませんので削除しましょう。
アーカイブウィジェット
下図のようなアーカイブウィジェットも削除すべきです。Google検索で辿り着いた読者がそのサイトの投稿頻度や日時を知りたいことなど、ほとんどありません。
文字ですのでデータサイズは少ないですが、描画中にレイアウトがずれる可能性があり、その場合にはSiteSpeedスコア中のCLSと呼ばれるスコアが悪化するリスクが存在します。
そのようなリスクが存在するのに、読者に与える情報はゼロに近いため、削除を検討すべきでしょう。
もし、「自分が何月に何個の記事を投稿したのか把握しておきたい」と言った場合には「Widget Logic」などのプラグインを使用して、管理者のみにウィジェットを表示するようにしましょう。
実際、この記事の筆者も下図のように「Widget Logic」を使用して、筆者のみにアーカイブを表示するようにしています。
画像をwebp形式に変更する
最も改善効果があった対策のひとつがこの方法です。画像をwebpと呼ばれる次世代の軽量な画像形式に変更することで画像読込時間を高速化させます。
「WebP Converter for Media」というWordPressプラグインを使用することで、既存の画像をwebpに変更することができます(今後追加する画像も自動的にwebpに変換されます)。
詳しくは以下の記事にまとめていますので、まだ画像をwebp形式に変更していない方は実施してみてはいかがでしょうか？
描画中にレイアウトがずれる要素は削除/位置変更を行う
描画中にレイアウトがずれるとCLSと呼ばれるスコアが悪化します。描画中にレイアウトがずれる要素がないかを実際にロードを繰り返して確認しましょう。また、PageSpeed Insightsの改善提案からも確認することができます。
特に以下のようなことに注意して確認してみましょう。
画像のwidthとheightは明示する
画像を掲載する場合はwidthとheightを明記するようにしましょう。Cocoonであれば記事中で使用される画像はwidthとheightが自動で設定されるので気にしなくても良いですが、HTMLコードを直接設定した場合などは注意が必要です。
Adsenseの検索フォームはやめる
Adsenseの広告のひとつに検索フォームがありますが、これはロード中にレイアウトがズレますので削除することをオススメします。
「使用していないJavaScriptの削減」の対策を行う
「使用していないJavaScriptの削減」の対策を行いましょう。使用していないプラグインを削除する
文字通りですが、使用していないJavaScriptの元になっているプラグインは可能であれば削除してしまいましょう。JavaScriptを遅延ロードする
使用していないプラグイン削除後も、残念ながら下図のようにAdsenseなどの削除不能なJavaScriptが「使用していないJavaScriptの削減」の対象になることがあります。
その場合にはJavaScriptの遅延ロードが有効です。
詳しくは以下の記事にまとめていますが、「Flying Scripts」というプラグインを使用すると、ユーザーがスクロールなどの操作を行うまでJavaScriptのロードを遅延させることが可能です。
※Adsenseの規約違反になる可能性がゼロではないので、自己責任で使用してください。
Cocoonに特化した改善
ここからはCocoonに特化した改善案を紹介します。Cocoonの高速化機能の設定を行う
まずはCocoonに標準で搭載されている高速化に関する機能の設定を確認しましょう。Cocoon設定 -> 高速化を選択します。
各縮小化の設定にチェックを入れましょう。もし、チェックを入れて、レイアウトが崩れたり、スクリプトの動作に影響があるようならば、チェックを外しましょう。
※筆者のケースですとJavaScriptの縮小化にチェックを入れたところ、一部のスクリプトの動作に影響があったのでチェックを外しました。
続いて、Lazy Load(遅延読込)に関する設定にチェックを入れましょう。筆者のケースですと全てにチェックを入れています。
必要であれば事前読込設定を変更しましょう。筆者のケースですとデフォルトのまま使用しています。
パンくずリストはページ下部に表示するようにする
Cocoonのパンくずリストはロード中にレイアウトが移動することがあるようです(特にモバイル)。コンテンツ描画への影響を避けるため、ページ下部に表示するようにしましょう。
(Cocoonテーマ)コードのコピーボタンのheightを明記する
記事中のコードの右上に表示される下図のコピーボタンにheightが設定されていないようなので設定しましょう。
CSSに以下を追加すればOKです。
/* コードコピーボタンのheightを明示する */
.clippy {
height: 16px;
}サイトロゴ画像をwebpに変換する
サイトロゴ画像をwebpに変換しておきましょう。こちらのようなサイトを利用すれば簡単にwebpに変換できます。変換後は再度サイトロゴ画像をアップロードしなおしましょう。
ページ上部のSNSボタンはページ下部に持っていく
影響は極めて微量ですが、下図のようにページ上部にあるSNSボタンとページ作成/更新によってCLSが悪化するようです。
もし、ページ上部にSNSボタンを表示しておきたい理由がない場合はページ下部に持っていきましょう。
参考: 「レンダリングを妨げるリソースの除外」にjQueryが対象になっているとき
ここまでの対策を行うと、PageSpeed Insightの改善提案が下図の「レンダリングを妨げるリソースの除外」のみになると思います。
この改善提案もこちらのサイトで紹介されているような方法を用いてjQueryをフッターで読み込めば消すことができます。
しかし、jQueryをフッターで読み込むといろいろなスクリプトの動作に影響がありそうなので、個人的にはオススメしません。
個人的にはモバイルスコア=92 / PCスコア =100まで改善していればこれ以上アグレッシブな対処を行う必要がないと判断しています。
実際、Cocoonには昔はフッターでjQueryを読み込む機能があったのですが、下で引用したようにCocoonの作者さんもスクリプトの影響を考慮してその機能を削除しているようです。
その機能は、不具合が出てしまうプラグインが結構あったので、廃止しました。
やっぱり高速化も大事ですが、正しくコンテンツが表示される方がより大事なので。レンダリングを妨げるリソースの除外について
まとめ
この記事ではWordPress + Cocoonでモバイル=92/PC=100のPageSpeed Insightsスコアを達成するまでにやったことや確認すべきことを紹介しました！少なくとも「コンテンツの削除」と「画像をwebp形式に変更する」だけは簡単にできる割には、スコアへの影響が大きいので、実践することをオススメします。
この記事がPageSpeed Insightsのスコアが低くて困っている方の参考になれば幸いです。