アフィンガーを使っているような人はブログの収益化を目指している人が多いのではないだろうか。
そしてそうした人たちはきっと自分のサイトのSEOについても日々、頭を悩ませ対策を講じているのだろう。そうした人たちにはCLS (Cumulative Layout Shift) という単語には馴染みがあると思う。
今回は表のサイトのCLS評価があまりに分かるかったので改善をすることにした顛末を記録として残しておくことにする。アフィンガー、特にアフィンガー6 「Action」を使っていてCLSの評価が低い人は参考にしてみて欲しい。
CLSとは何なのか
CLS (Cumulative Layout Shift) とは最近になってGoogleが評価基準として提唱し始めた、コアウェブバイタル（Core Web Vitals) における3つのコアの1つ。
ユーザーの「ページコンテンツの視覚的な安定性」を測るための指標とされており、具体的にはサイトを表示するに生じる画像や広告の読み込みによって予期しないレイアウトのズレがどれだけ発生したのかを示している。
おそらくどこかしらのサイトを視ている時にページを開いた瞬間に文字ベースのレイアウトが表示され、そこから画像が表示されることで文字列が下にずれたりするのを見たことがある人は多いだろう。
CLSはこのズレの頻度を測定している。
ちなみにGoogleは現時点においてはまだこのコアウェブバイタルを検索順位の設定には利用していないとしているが、2021年5月からは検索順位の要因に新しく組み込まれる予定となっている。
CLSやコアウェブバイタルについては詳しく解説している記事がいくらでもあるので、知りたい人はググってみるといいだろう。
CLSの一般的な改善方法
さて、CLSの改善だ。
適当にググってみると、CLSの低評価は主に写真の読み込み時に生じるので予め掲載する写真の幅と高さをimgタグにwidthとheightを使って規定しておけばよいらしいことが分かる。
で、やってみたが改善されない。
この時点でどうも記事中に掲載している写真が原因でCSLの評価が悪くなっているわけではないらしいことが分かった。
一方で、ではなにが原因なのかは分からない。
そこでまずはCLSが低評価になる原因を調べてみることにした。
CLSが低評価になる原因を究明する
原因が分からないのに改善など出来るわけがない。そこでまずはCLSが低評価になる理由を調べる必要がある。
人によってはGoogleのPageSpeedInsightsでの読み込み過程を参考にしている人もいるようだが、私の場合には別の方法を試してみた。それが、Chrome DevToolsを利用した方法だ。
詳しいことはこちらの記事に書かれているので参考にして欲しい。
https://techblog.yahoo.co.jp/entry/2020120330052925/
Chrome DevToolsを使うとレイアウトのシフトが起きている部分を着色したうえで視覚的に確認することが出来るので非常に分かりやすい。なお、シフト部分の着色はレイアウトのシフトが生じている間しか表示されないので、該当ページを何度も更新しながら確認することになる。
そうして確認することができたレイアウトのシフトの発生個所は、次の部位だった。
- ヘッダー内のサイトロゴ
- サイドバー全般。ただし、特にTwitter APIと追随型目次
- Google Adsense
CLSを改善する最も簡単な方法
上記のシフト部位に直接含まれているわけではないのだが、今回作業をしていく中で、CLSを改善するもっとも簡単な方法が分かった。クラシックエディターで書かれた記事をブロックに変換することだ。
アフィンガーではWINGまで原則としてブロックタイプエディターであるGutenbergを使用せず、クラシックエディターを使って記事を書くことを推奨していた。しかしActionでは標準エディターがGutenbergに変わっている。
このためクラシックエディター時期に書いた記事をAction上で編集しようとすると、「ブロックに変換する」かどうかを聞かれるようになった。そして今回の作業で、この「ブロックへの変換」をするとそれだけでほとんどの記事でCLSが改善された。もしCLSの評価が低く、かつサイト上にクラシックエディターで書いた記事が多くある人は、一度それらの記事をAction上で編集として開き、様式をブロックエディターのものに変更して保存する作業をしてみたらいいだろう。
ヘッダーを統合してウィジットを無効にする
今回のCLSの低評価中でもっとも悪影響を及ぼしていたように思えるのが、ヘッダー内のサイトロゴの表示だ。
実際にサイト内のページを読み込ませてみると、サイトのロゴが来る部分のレイアウトが一度大きく取られ、それからロゴのサイズに合わせてシフトする現象が確認できた。全ページでこれをやられたらそれはもう、CLSの評価はどん底まで落ちることだろう。納得だ。
今回とった対策は、ヘッダーの分割をやめることだ。これはaffinger管理のヘッダーの項目から簡単に設定できる。
ヘッダーの分割を停止するとヘッダー内のウィジットが自動で停止される。これを設定したところ、サイトを読み込ませてもロゴサイズ分のレイアウトが最初からしっかりと予約され、その後のレイアウトシフトは生じなくなった。
ヘッダーのウィジットを使ってヘッダー部分に電話番号を表示したりしている場合には実行は簡単ではないかもしれないが、効果的はありそうだ。
投稿記事中でのサイドバー非表示
続いてサイドバー内でのレイアウトのシフトだ。
この部位で端的にシフトが確認できたのが、サイドバーのウィジット内に埋め込んでいたTwitterのAPIと、やはりウィジットを利用して実現していた追随型の目次だった。
改善前のサイドバーにはサイト管理者ウィジット、サイトメニュー、ウィジットを利用した検索バー、RSSなどを表示させていたのだが、このほとんどでレイアウトのシフトが出る。さらに前述の2つは端的にその度合いが大きくなる傾向にあった。TwitterのAPIなどは表示サイズをwidthとheightで指定していたのだが、タイムライン下に表示させていたフォローのボタンなどがレイアウトのシフトを生じていたようだった。
ここで改善方法に少し悩んだのだが、今回は思い切ってトップページや固定記事を除く投稿記事内で表示のレイアウトを1カラムにしてしまってサイドバー自体を表示させないようにすることにした。ちなみに1カラムを指定しているだけでLP化しているわけではない。
TwitterのAPIなどは重く読み込み速度にも影響を及ぼしていたようだったので、この機会に投稿記事の表示速度改善の一環としても表示をやめることにした。
なお最初はサイドバーが表示されなくなることで投稿記事内からは見えなくなるサイト管理者 兼 ライターの掲載に、Affinger管理の機能内に搭載されている「この記事を書いた人」機能を利用している。
ちなみにもう一つのレイアウトシフトの原因であるGoogle Adsenseは掲載をやめるわけにもいかないので、そのまま放置した。
