太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログの野良カスタマイズを一掃してGoogle Search Console の「CLSに関する問題」を解消する

f:id:bulldra:20210408204546j:plain

CLSに関する問題が起こっていた

 はてなブログのテーマについて継ぎ足し継ぎ足しで拡張したJavascript / CSSや広告ウィジットなどのせいか、Google Search Console の「CLSに関する問題」が0.25を超えて不良と判定されていた。

CLS(Cumulative Layout Shift): CLS は、ページのライフスパン全体で発生した予期せぬレイアウト シフトを対象として、個々のレイアウト シフトの合計スコアを測定します。スコアは 0 から正数の間で変動します。0 の場合はレイアウト シフトがなかったことを示し、数値が大きいほど、ページ上のレイアウト シフトが大きかったことを示します。この指標が重要なのは、ユーザーが操作しようとしたときにページ要素が移動すると、ユーザー エクスペリエンスが低下するためです。数値が高い理由を見つけられない場合は、ページを操作してみて、実際の挙動がスコアにどのように影響しているかを確認してください

 CLS とは「Cumulative Layout Shift」の略でぺージを読み込んでいるときにレイアウトが動いた量を意味する。後からサイズのある要素が追加されたり、画像が追加されることによって表示がかくついたりして誤タップを誘発するため、Googleとしても検索結果を下げる対応をするとのこと。

 SEOを考えるようなブログでもないが、ユーザービリティがあまりに下がってしまうのも本末転倒なので改善する方法を調べて実施していた。過去のブログデザインと大きく変わっているのはそのような経緯がある。

レイアウトが動的に変わるような効果を削除

 まず実施したのはレイアウトが動的に変わるような効果を削除すること。はてなブログは JavaScript を比較的柔軟に挿入できたため、サーバーサイドではいじれないようなレイアウト変更や動的効果もクライアントサイドで実現できていたのだけど、それがよくなかった。

確かにデザイン的な影響による回遊効果も多少はありそうだけど、公式やそれに準ずる組織が提供しているデフォルト設定の方がモバイルフレンドリーだし、重くてレガシーな JavaScript が読み込まれていない方が Google の評価も高くなるだろう。

 まだまだ公式の機能が貧弱だった頃には一定の意味があったし、こんなことも実現できると考えていくのは楽しかったが、今となってはむしろ良くないものを作ってしまったという反省がある。

軽くて要素の少ないデザインテーマを利用する

 できる限りシンプルで読みやすくてレスポンシブに対応しているデザインテーマに模様替えしようとテーマストアを確認。

 利用させてもらったのはこちらのデザインテーマ。自分の求めるものが揃っていた。

f:id:bulldra:20210408213250j:plain

 カスタマイズも最小限。こだわりは書影が見切れにくいサイドバー画像サイズと丸画像ぐらい。

広告をGoogleの自動広告に任せる

 他にCLSに悪影響を及ぼしていたと思えるのが楽天アフィリエイトのウィジットだ。確かにあとから表示されてレイアウトを変えてしまっていた。その他の広告についても人為的に入れていた部分が問題になっていた可能性がある。

 このため、広告表示は固定的なAmazonリンクを除いて Google Adsense の自動広告に任せることとした。ただしアンカー広告や全画面広告は自分としても読みづらいので無効化。広告付きの関連記事表示も Google Adsense のものを利用している。

Page Speed Insight で変更の成果を確認

 CLSに限らないページの読み込み速度やユーザー体験は Google Page Speed Insight で確認する事ができる。

f:id:bulldra:20210408211418j:plain

 ラボデータが現在の数字。Origin Summary は過去28日間の数字。一時的によくしてもダメで、Origin Summary 側が下がっていかないと不良とみなされるようだ。

f:id:bulldra:20210408204540j:plain

Google Search Console で修正を検証

 ラボデータが良くなっていることが確認できたので、「修正を検証」を実施。スクリーンショットを取っていなかったが赤色の段階でも「修正を検証」を実施している。

f:id:bulldra:20210408204543j:plain

 徐々にCLSの集計値が下がっていくことに病気が治っていくかのような安心感がある。

f:id:bulldra:20210408204546j:plain

 ついにオールグリーンで「良好」まできた。ただし、これはPCの集計値。モバイルについてはもうちょっとなんとかする必要がありそうだったが時間の問題だったようだ。

 継ぎ足し継ぎ足しで拡張したJavascript / CSSや広告ウィジットにも愛着がなかったわけでもないが、今となっては悪影響の方が大きい。実際、シンプルなテーマにして読み込みも早くなったし、現在のデザインテーマが気に入っているので結果として良かった。

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログ Perfect GuideBook [改訂第2版]

  • 作者:JOE AOTO
  • 発売日: 2020/07/18
  • メディア: 単行本