21年9月頃から、急にGoogleでのサイト評価が低下し始めました。
当サイトや私のブログのみならず、私が手掛けていたお客様のサイトも同じように評価が低下。。。
自分のやり方がダメなのか?
と思って調べてみると、私が手をかけていないサイトも軒並みパフォーマンスが低下していました。
共通事項はWordPress。
どうも今のWordPressと、Googleのbotは相性が悪いようです。
どうも調べてみると、上記のように、8月頃からサイトパフォーマンスが低いということでどんどんページがよろしくないというカウントが増えているようでした。
このパフォーマンスチェックツールでチェックすると、軒並み記事ページが40~70点台。PCの方は80~90点でまだいいのですが、モバイル版にすると90点台など夢の夢みたいな状態です。
なぜパフォーマンス低下をしているのか、見てみました。
根本的な原因は、Javascript。
これは、WordPressを入れると宿命のようなものですね。
様々なプラグインで呼び出されるJavascriptがありますが、それらをロードしようとするので、どうしても使用してない…という項目が出てきます。
ほとんどのWordPressはチューニングしないとこの項目が解消できません。
今回は、プラグインを複数入れて、Javascriptのロードは、必要になった際に初めてロードするという設定を行うことで、短縮できる時間を0までもっていくことに成功しました。
遅延ではGoogleはOKしない!
この種の文献を漁ると、javaのロードをDeferいわゆる遅延読み込みさせることで改善させることができるという文献がたくさん出てきます。
ようは、HPを表示する際にまずはHTML構文を先に読み込んでから、CSSやJavascriptを送れて読み込ませるという技術です。
確かに、そうすることでGoogle的には先に必要なHTMLソースをロードするのでパフォーマンス向上には寄与しますが、この使用していない・・・の横目からすると本当の微妙な向上です。
画像のように1.14sであれば、1.0くらいのまでは改善できますが0票には近づかないケースが多いかなと思います。
なので、私がとったのは、ブラウザスクロールなど閲覧者がアクションをした時に初めてロードするという設定です。
これによって、Googleのようなbotの場合はjavascriptを読むことなくHTMLをロードし、私たちのような人間、ビジュアルブラウザでサイトを見たときに初めて反応するようになりました。
問題は実際に人が見たとき
もっと極端に言えばJavascriptを排除してしまえばパフォーマンスは100点に近づきます。
ただし、これをやると、人間がブラウザで見たときにレイアウト崩れを起こし、画像や動きのあるページが全く動かなくなります。
へたをしたらクリックしても次のページに行かなくなります。
今のWordPressは90%以上、Javascriptを頼って作られているテーマやプラグインがほとんどですから、使わないというのはまずNGでしょう。
だからと言って、ただただ利用すると、Googleの評価が下がりひいてはアクセス数の減少につながります。
なので、人間が感じない程度の遅延というのがなかなかいいのですが、それでもGoogleはOKしません。
だから、アクションをトリガーとしてjavascriptをロードするという設定にしました。
モバイルファーストインデックス
現在のGoogleは、モバイルファーストインデックスと言って、スマホブラウザなどで表示されるHTMLをもって検索エンジンの評価をしていると言われています。
だから、PC版で100点をとっても、モバイル版で10点だと、そのページは10店という評価になってしまいます。
だから、モバイルで100点を取りたいのですがこれはこれでいろいろ難しいのです。
Googleが必ずモバイル版のデザインを見ているとは限らない?
レスポンシブデザインだから、モバイルブラウザで見たらモバイル用のデザインになってるはずだから大丈夫。
それは、人間がスマホのブラウザで見たらほぼ確実にそうなっています。
しかし、Googlebotが見に来たときに必ずスマホ版になっているわけではありません。
要件としてはスマホブラウザだけど、WordPressから見たらPC版と同じという評価をしてしまって、モバイル版の評価にPCばんのHTMLが来てしまうこともあります。
なので、モバイル版の最適化ととともに、PC版をモバイルで見たときのパフォーマンスも気にしなくて位はいけません。
この場合、良く陥るのは、HTML自身の肥大化です。
ウィジェット部分のサイドメニュー、カテゴリやアーカイブリストに気を付けよう
サイドメニューにカテゴリの一覧を出していたり、タグクラウドでタグをたくさん出力していたり、最新の投稿リストを50件だしていたり。。。
様々な要件がありますが、本体より、サイドメニューやフッタメニューが複雑に大量にHTMLを出力していると、HTMLの読み込みそのものが遅くなりパフォーマンスが低下します。
実際私が管理するサイトはこのケースが多かったです。
ある程度のデザイン構築後はお客様に自分で設定してもらうことが多いので、サイドメニューは自分で作っていることが多いのです。
今回一番パフォーマンス向上ができたお客様は、サイドメニューにただただ2021年6月・7月・8月という月ごとのアーカイブリンクが2018年からリンクメニューとして垂れ流している項目があり、そもそも、この月別アーカイブをクリックしてみている人はいるのか?という議論になりました。
サイドメニューはウィジェットで構成されていて、このアーカイブメニューも既存のボックスを入れただけなので、必要ならいつでも戻せます。
だから一回はずしてみましょうかと。
そうしたところ、70点が限界だったモバイルの評価が95点まで上がりました。PC版は100点。
やっと青信号の評価にたどり着きました。
まとめ
WordPressのGoogle向けパフォーマンス向上に必要な項目は以下の通りです。
- JavaScriptの遅延読み込みなどを利用して最初からロードしない
- HTMLソースの肥大化も防ぐ必要があるので無駄なリンクやメニューを極力減らす
- 画像はWebp化する
- ブラウザキャッシュ・サーバーキャッシュ・システムキャッシュのキャッシュ三本立てでパフォーマンス向上を目指す
などです。
画像のWebp化は以前からやっていたので今回はやっていませんが、私のお客様のサイトは基本的に画像はすべてWebp化しています。
さらに、ShortPixelなどを利用して画像のCDN化も進めてぎりぎりまでパフォーマンスを高めています。
最後のキャッシュについてはブラウザ・サーバー・システムキャッシュすべて従前から実装していましたが今回AutOptimizeプラグインと相性がいいと言われるCache Enablerというプラグインを実装しました。
これにより、確実なキャッシュを取得できるようになり、システムCashも安定しました。
結果としてPCは100点、モバイルは85~99というところまでパフォーマンスが向上しました。
どうしてもサーバー自身の付加的な揺らぎがありますのですべて100点は難しいですが、なんとか合格点まで引き上げることができました。
ここまでに要した時間は約5日です。
理由はDefer程度ではGoogleはパフォーマンス向上と認めてくれない。
だからと言って遅延時間を5秒などと設定すると人間が見たときに画像を表示するのに5秒かかるということになりむしろパフォーマンスが悪く見えてしまうため落としどころがつかめなかった。
今回はアクション（スクロールなど）をトリガーとしてJavaScriptをロードするようにしたことで、bot的なパフォーマンスは大幅に向上したうえで、人間が見る際にはほぼ遅延がなく表現されるというやり方にたどり着くのに5日もかかってしまいました。
しかし、なんとか100点にまでもっていけたのでOKとします。Googleの評価が出るのが楽しみですね。