ブログ運営

【実録】アクセス数激減を機にPageSpeed Insightsスコアを71から97に改善しました

2020年1月13日に始まったGoogle January 2020 Core Updateによって、僕のブログの検索流入は激減してしまいました。ようやく検索パフォーマンスが底打ちしたところです。回復の兆しはまったくありません。

そのコアアップデートで、僕のブログの検索パフォーマンスがとんでもない悪影響を受けたことは、納得はできないものの、相手は(人間が作り出した)神のアルゴリズムなので、受け入れるか、諦めるしかありません。でも、ここで諦めるわけには行きません。よって、いずれ回復すると信じて、従来と変わらずコンテンツに集中しています。

で、こういうひどい経験をすると、立ち止まっていろいろ調べたくもなります。Googleのアルゴリズムは何を嫌っているのだろうかと、(想像するしかないことを)考えるわけです。その過程で、これまで放置してきた課題に取り組み始めています。PageSpeed Insightsのスコア改善もそのひとつです。

改善前のスコア

重い腰を上げて、PageSpeed Insightsのスコア改善をする前の数値です。左がモバイル、右がパソコンです。

改善前のスコア

パソコンはまだいいですが、モバイルはひどいですね。

改善後のスコア

改善後です。左のモバイルはベストスコアですが、悪くても50台です。

改善後のスコア

パソコンは見違えるほど改善されました。このスコアに限って言えば、努力が報われました。(これが将来的に検索パフォーマンスの向上に寄与してくれることを願っています。)

PageSpeed Insightsのスコアの基礎知識

PageSpeed Insightsのスコアは、単なる得点ではなくて、偏差値のような指標らしいです。

そして、PageSpeed Insightsはダメなところをこれでもかと言うぐらい指摘しますが、闇雲に取り組んでも効果的ではないようです。あらゆる試験に「対策」が存在するのと同じように、PageSpeed Insightsのスコアを上げるのにも、攻めどころがあるようなのです。

理不尽なモバイルスコア

このブログはレスポンシブテーマで、基本的にパソコンとモバイルで同じコンテンツを表示します。一時期AMPに取り組んだことがあったのですが、AMPの表現力のなさにがっかりしてやめてしまいました。

レスポンシブで、ほぼ同じコンテンツを表示するので、パソコンのスコアを上げれば、モバイルも上がります。が、モバイルスコアはパソコンスコアより大きく劣ります。表示される処理時間がパソコンより異様に長いのです。実際のサイトに、普通のスマホで4Gでアクセスした感覚よりもずっと悪いです。

そのため、僕はパソコンスコアを上げることを目指し、モバイルスコアはあまり上がらなくても気にしないことにしました。

パソコンスコアの目標値は90にしました。次のツイートに刺激を受けたからです。(ハチドリさんのツイートはどれも刺激的です。)

以下は、スコアを改善するのに効果があった、僕が実際に採用した「対策」です。

なお、このブログのテーマはWING (STINGER PRO2)です。

WP Fastest Cacheの設定

僕は以前からWP Fastest Cacheのプレミアム版を利用しています。これまでその設定に真剣ではなかったのですが、今回マジで見直しました。

WP Fastest Cacheの設定

モバイルに関する設定についてはいろんな情報がありますが、公式ヘルプによると、レスポンシブテーマであっても、Lazy Loadを使う場合は両方チェックするのが正解とあります。ただ、そうすると僕のブログでは、レイアウトに関わる編集をした時にモバイル端末での表示で(キャッシュによると思われる)問題が発生します。これはそういう編集を行う時にしか起きない現象なので、これで行くことにしました。

結局ほとんどの設定にチェックを入れましたが、これまでは訳も分からずオンにするのを避けていました。今回はオンにしても悪くはならないことを確認しました。

(以前より)他にはSEO系、キャッシュ系のプラグインは使っていません。画像ファイルは全てPNGで、Compress JPEG & PNG imagesプラグインでアップロード時に最適化しています。

削除したプラグイン

結論として、スコアの改善に関して支配的だったのは「レンダリングを妨げるリソースの除外」です。そのために、次の2つのプラグインを削除しました。

  • Easy FancyBox:画像をタップした時のUIを改善するのに利用
  • Responsive Poll:アンケート用プラグイン、先日有料オプションを購入したばかり(泣)

僕は記事にグラフ、表をたくさんPNGで貼り付けていますが、何もしないとタップした時の動作が最悪なので、その対策のためだけにEasy FancyBoxを使っていました。が、こいつは(全体として)重いので削除することにしました。代わりに、次のアプローチを採りました。

  • Definitely allow mobile zoomingプラグインで、モバイルのブラウザでピンチ操作でズームできるようにしました。
  • こちらにある方法で、画像にあるメディアファイルへのリンクを動的に削除し、タップしても何も起きないようにしました。

Pollはアンケート機能を埋め込んだページ以外では不要なので、遅延ロードさせたいところですが、方法が分からなかったので捨てることにしました。アンケート機能は便利なので、また別の利用方法を考えたいです。

削除できなかったプラグイン

人気記事はどうしても欲しい機能なので、WP Popular Postsは削除できませんでした。大切なのは速度と提供するコンテンツのバランスだと思います。また、体感速度とスコアは必ずしも一致しませんから、スコア重視で、気に入っている機能(ここでは人気記事)まで捨てるのは、本末転倒だと考えました。

CSSを遅延ロードした効果

CSSの遅延ロードにはかなり苦労しました。いくつかプラグインも試しましたが気に入らず、こちらのブログにあった方法を採用しました。

次は実際に僕がfunctions.phpに追加したコードです。


/*--------------------------------------------------------------*/
/*  レンダリングを妨げるリソースの除外 CSSのIDを遅延させる処理  */
/*--------------------------------------------------------------*/
function my_dequeue_plugin_files(){
  wp_dequeue_style('contact-form-7');
  wp_dequeue_style('pz-linkcard');
  wp_dequeue_style('sdm-styles');
  wp_dequeue_style('wp-fastest-cache-toolbar');
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_plugin_files', 9999);
add_action('wp_head', 'my_dequeue_plugin_files', 9999);

function my_enqueue_plugin_files(){
  wp_enqueue_style('contact-form-7');
  wp_enqueue_style('pz-linkcard');
  wp_enqueue_style('sdm-styles');
  wp_enqueue_style('wp-fastest-cache-toolbar');
}
add_action('wp_footer', 'my_enqueue_plugin_files');
/*-----------------------------------------------------------------*/

これらCSSを遅延ロードした結果、スコアは劇的に改善されました。

次は改善途中の、レンダリングを妨げているリソース一覧です。

改善途中の、レンダリングを妨げているリソース一覧

次は改善後です。

改善後の、レンダリングを妨げているリソース一覧

リストがずいぶん短くなりました。

取り組んで良かった

めっちゃ苦労しましたが、先達が貴重な情報を公開してくれていたこともあり、目標のスコア90をクリアできました。(作業開始30分後には90なんて絶対無理と思いましたが)取り組んで良かったです。検索パフォーマンスの改善に寄与するかどうかは不明ですが、今より悪くなる要因にはならんでしょう。

やれることはいっぱいある

コアアップデートで理不尽な扱いをされ、心は折れる寸前、それでも諦めていませんが、気を付けないと精神が壊れそうです。が、冷静に考えてみると、これまでうすうす何かしないとな、とは思いつつも、対応できていなかった課題、やるべきこと、やれることはたくさんあることに気付きました。

現在、アクセス数は低迷+足踏み状態なわけですが、もともと何年もかけて取り組む計画のブログなので、数ヶ月の我慢などどうってことはありません。数ヶ月我慢し、努力を継続しても回復しないまま、かも知れませんけどね。

2020年2月1日追記

WP Popular Postsプラグインが遅延ロードされない(レンダリングを妨げるリソースの除外でリストアップされる)のが気に入らなかったので、調べました。いろいろ試した結果、次の設定に変更しました。

まず、WP Fastest Cacheの次の赤枠で囲った機能をオフにしました。これではWP Popular Postsプラグインを遅延ロードしてくれません。

WP Fastest Cacheの設定変更

代わりに、Async JavaScriptプラグインを導入しました。その設定画面です。

Async JavaScriptの設定画面

ほぼデフォルトのままです。また、WP Popular Postsプラグイン用のCSSであるwpp.cssは、前記方法では遅延ロードできなかったので、functions.phpに追加したコードから該当する行を削除しました。(IDは'wordpress-popular-posts'でも'wordpress-popular-posts-css'でもダメでした。)

この変更後の、レンダリングを妨げているリソース一覧です。

この変更後のレンダリングを妨げているリソース一覧

2行減りました。パソコンスコアは頭打ちでしたが、モバイルはベストスコアが更新されました。(数点上がった感覚です。)

さらに改善後のモバイルスコア

なお、WP Popular Postsプラグインを遅延ロードさせている過程では、パソコンでは問題ないのにモバイルでは人気記事が空になる現象が起きました。現在の設定では起きていないようですが、この手の改善を行う場合は注意が必要ですね。

おすすめの関連記事

-ブログ運営

© 2023 河童のインデックス投資 Powered by STINGER