みんな大好きサーチコンソールに「ページエクスペリエンス」なる項目が登場しました(2021年4月)。なにやらワケが分からない私のようなブロガー・アフィリエイターは「ページエクスペンスレクイエム?」という感じで、ジョジョネタでお茶を濁す程度に留まっている人も多いのでは?
どれくらいのウェートを占めるかは不明ですが、確か2021年5月~6月とかそれくらいの時期に、このページエクスペリエンスという要素がページ評価の1つの要素になるようです。ぶっちゃけ無視しても問題ない程度かも知れませんが、Googleから事前に告知されている宿題のようなものなので、対策しておくに越したことはないでしょう。
というわけで、私なりにページエクスペリエンスの対策としてやったこと、サイトスピードを上げるためにやったことを備忘録の意味でも残しておきたいと思います。
ページエクスペリエンスとは?
ページエクスペリエンスの概要
- ページの読み込みパフォーマンス
- インタラクティブ性
- 視覚的安定性に関する実際のユーザー エクスペリエンスを測定する指標のセット
難しいことやページエクスペリエンスの正確な内容は他サイトに任せるとして、基本的にページエクスペリエンスは「記事の情報以外のページ要素」という解釈で良いと思います。具体例を挙げると、サイトページの表示速度などです。
Googleで上位表示するためにはページの情報量、権威性や網羅性などの様々な要素がトータル的に判断されていると言われていますが、前から散々言われていた「httpからhttpsに移行する」とか「モバイルフレンドリーかどうか」などの要素がサーチコンソールで確認できるようになったというだけの話でしょう。
ただしGoogleがわざわざサイト管理者に確認できるようにした要素と考えると、無視するのはやや危険な賭けになるんじゃないかと思います(知らんけど)。
ページエクスペリエンスを実際に見てみる
では実際にサーチコンソールでパージエクスペリエンスの項目を見てみよう!…と思ったのですが、当ブログはページビューが少なすぎてデータ不足だそうです。
ブログを始めたばかりの人、アフィリエイトサイトを作ったばかりの人は、もしかすると上記画像のようになってしまうかもしれません。
こちらは私が管理している別サイトの1つです。当ブログと似たような時期に運営を開始し、当ブログに比べるとずっとページビューの多いサイトになります。
特に対策はしていませんし、同じCOCOONで使用しているプラグインなどもほとんど一緒です。だから当ブログもデータさえ取れていれば、上記画像のようにほぼ問題ないと判断できる数値が出ると思うんですが…。まぁサンプル数が少ないばかりは仕方ありませんね。
私が管理しているブログサイトにて、もう1つ例を挙げておきます。こちらは一部が良好と判断されていた時期がありながらも、今や良好URLがゼロです。ちなみにこのサイトは今年に入ってから全く手を付けていないのですが、なぜこんな評価になっているのかは分かりません。
私がサーチコンソールに登録しているブログサイトは、少なくとも30くらいはあると思います。2021年4月現在、まだ一切の対策を講じていない状態では、基本的には0か100かで二分される感じです(0と評価されているサイトの方が多い)。なぜか50とか60という中間がなく、100か100に近いか0かという感じ。
ページエクスペリエンスの数値を改善する
まずは現状のページエクスペリエンスを確認
ページエクスペリエンスの項目にて良好URLの下のほうにスクロールしていくと、上記の項目が確認できます。チェックマークは良好(問題なし)という判断なので、ここではウェブに関する主な指標という部分に問題があるという判断です。
ウェブに関する主な指標という項目は、以前からサーチコンソールで確認できる内容でした。詳しくは知りませんが「ページの読み込み速度が遅ければ、それだけ離脱者が増える」みたいなデータから、ページの読み込み速度や視認性についての項目だったと理解しています。
で、実際に見てみるとこんな感じです。このブログには200記事ほど入っていて、改善が必要なURLが183件なので、まぁほぼダメってことですね。
ちなみにページ速度も必死になって上げなければならないほど、ライバル争いがきつくないということもあって、ページの情報量や読みやすい文章には気を遣っていますが、ページ速度に対しては一切考えていません。画像を多く使用しているので、それらは1つずつサイズを下げてから掲載しているってことくらいです。
ページの表示速度を見直す
PageSpeed Insights というサイトを使って、自分のブログサイトの表示速度を確認します。パソコン版とモバイル版の2つの数値が確認できますが、多くの人は「パソコン版は数値が良いんだけど、モバイル版が悪い」という感じじゃないかと思います。
私が所有しているブログサイトの多くは、パソコン版は90点以上なのにモバイル版は50点そこらが多く、中には50点以下のサイトも少なくないという感じでした。
以前に当ブログでも取り扱ったことがありますが、ブログサイトの表示速度を上げるには「画像サイズの縮小、無駄なCSSやプラグインの削除」が効果的です。
▶ブログサイトの表示速度を少しでも上げる方法|表示速度と検索順位アップを狙え!
PageSpeed Insightsには「どうすればサイトページを表示するまでの時間を短縮できるか」という細かい項目も掲載されています。これらを1つ1つ対処していけばOK。
私が取り組んだ範囲では、基本的に赤文字の致命的と思われる部分を対処すれば、スコアが最終的に80より良くなるという感じだったので、現時点ではそれで良しとしました。以下では具体的な取り組みについて書き残しておきます。
PageSpeed Insightsにてサイトの表示速度を上げる具体的な対策
使用していない JavaScript の削除
読んだ通り「使用していないJavaScriptの削除をすればOK」です。人によってどうやってサイトを弄っているかが違うので、この場で具体的な対策を挙げるのは難しいのですが…(まぁ自分で不要なJavaScriptやCSSの判断ができる人はこんなページにこないはずなので)。
私の場合は「Twitterの埋め込み、アドセンスの自動広告」などが該当しました。特に多くの人にチェックして欲しいのが「アドセンスの審査用のコード」です。
Googleアドセンスでは審査を受ける際に審査用のコードが発行されるので、それをヘッドタグ(<head></head>)内に挿入することになります。審査に通ったら新たに発行されるコードをまた挿入することになるのですが、場合によっては記入先が違う場所になるので審査用のコードをそのままにしてしまうことがあるんです。
私が所有しているブログサイトの中には、この審査用のコードを削除するのを忘れていて、これを削除するだけで表示速度の数値が劇的に改善した例もあったので、まずはこれを確認してみてください。
レンダリングを妨げるリソースの除外
これは「スクロールせずに見える部分を早く表示してくれ」という解釈でいいと思います。例えばページの下部(フッターなど)にJavaScript効果があったとして、それを優先的に処理してしまったのではユーザービリティが悪いという意味です。
訪問者は上から順にページを見ていくのでフッターの処理は最後で良く、ページ下部の処理よりもページ上部の処理を優先的にやったほうがいいじゃないですか?これを間違ってしまうと「フッターに力を使っているせいでページ上部のコンテンツが表示されない=読み込みが遅い」という判断になるわけです。
じゃあ具体的にどうすればいいのか。Cocoonを使用しているなら、Cocoon設定から高速化の項目へと進み、一通りチェックを入れればOK。それ以外のテーマ利用者の場合は、プラグイン(Autoptimize)の使用をおすすめします。
- JavaScript コードの最適化
- CSS コードを最適化
プラグインの設定から進み、上記の2項目にチェックを入れればOKです。私の場合はこれで大幅に改善されましたが、これで改善されない場合はAutoptimizeの設定項目の中に「非同期JavaScriptファイル(上級者向け)」という項目があるので、そこにレンダリングを妨げているJavaScriptを入力してください。
レンダリングを妨げているJavaScriptは、PageSpeed Insightsの中で詳細が確認できます。
次世代フォーマットでの画像の配信
私の場合、取り扱っている画像はjpegやpngがほとんどでした。しかし、これらよりもページの表示速度を向上させる画像フォーマットが存在します。例を挙げると「JPEG2000、JPEG XR、WebP」などです。
なので、今までブログに投稿してきたjpeg画像を次世代フォーマットに変換すればOK。これはプラグイン(EWWW Image Optimizer)を使うと簡単に変換できます。
プラグインの検索窓に「EWWW Image Optimizer」と入れて検索し、似たようなのが出てきたらインストール数が大きい方を選びましょう(EWWW Image Optimizer Cloudではありません)。
EWWW Image Optimizerの設定項目を見ていくと、WebP変換という項目があります。2021年4月現在、一部のブラウザはWebPに対応していないので、対応しているブラウザにはWebPで配信して未対応のブラウザには従来の形式で配信するという機能です。
ここにチェックを入れて変更を保存にすると、次のような画面になります。
右側に赤くPNGという表示が確認できるかと思います。これは本来であれば緑色でWebPという表示がされていればOKなのですが、赤いPNGという状態では不完全です。
これ以降は「.htaccessファイルを編集する方法」と「そのままリライトルールを挿入する方法」があります。私も詳しくわからなくて調べながらやったのですが、どうやら「サーバーによってはそのままリライトルールを挿入するだと上手くいかないケースがある」とのこと。
.htaccessファイルを編集する方法を推奨している人の中には「絶対にリライトルールを挿入するというボタンは押さないでください」という人がいましたが、なぜ押しちゃいけないのか、間違って押してしまった場合はどうすればいいかという点が抜けていて、逆に「リライトルールを挿入する方法でもいいよ」という人は、「リライトルールを挿入する方法ならプラグインが勝手にやってくれるし、サーバーによっては上手くいかない場合があるから、その時は.htaccessファイルを編集する方法をやればいい」という感じでした。
ちなみに.htaccessファイルを編集する方法は、以下のコードを.htaccessファイルに書き込めばOK。エックスサーバーなら管理画面から簡単にできます。
<IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png|gif)$ RewriteCond %{REQUEST_FILENAME}\.webp -f RewriteCond %{QUERY_STRING} !type=original RewriteRule (.+)\.(jpe?g|png|gif)$ %{REQUEST_FILENAME}.webp [T=image/webp,L] </IfModule> <IfModule mod_headers.c> <FilesMatch "\.(jpe?g|png|gif)$"> Header append Vary Accept </FilesMatch> </IfModule> AddType image/webp .webp
.htaccessファイルを編集する方法の意味が良くわからない場合は、リライトルールを挿入するというボタンを押すと上記のようになると思います。私はエックスサーバーを利用していますが、その場合は特に問題なく緑色のWEBPに変わりました。
あとはワードプレスのダッシュボード画面からメディア→一括最適化へと進み、画面右側の「最適化を強制」にチェックを入れて画像を最適化すればOK。
すでに圧縮は問題なく、今まで投稿してきた画像をWebPに変換できればいいという場合は、その下のWebPのみという項目にチェックを入れてください。これが完了すれば、WebP対応済みのブラウザにはWebP形式で配信され、それ以外のブラウザには従来の画像形式で配信されるようになったはずです。
最後に
最終的な当ブログの表示速度はこんな感じです。たぶんアドセンス広告を無くすか、Twitterの埋め込みをなくせば90点台には到達できるんじゃないかと思います。しかし元々の数値が70未満だったので、個人的には大満足です。
そしてパソコン版がこちら。パソコン版はもともとこれくらいの数値だったので、特に変わらずといったところ。
私自身もスマホでネットをやっていて、あまりにも表示されないページがあればブラウザバックすることがあるので、サイトの表示速度はスムーズに越したことはないと思います。
私が管理しているブログのほとんどは、今回ご紹介した方法で大幅に表示速度が改善したので、ページエクスペリエンスの数値にお悩みの方はぜひ参考にしてみてください。