ウェブに関する主な指標『CLS』合格！初心者向けの３つの方法【独自】

CLSを改善してウェブに関する主な指標に合格した３つの方法をメモします。（おまけあり）

いろいろ調べても、画像にサイズを指定するっていうのしか見つけられぬ・・・

そんな私のようなあなたにぜひ読んでいただきたい記事です。
やることは非常に簡単。
触ると怖いところを触ることはありません。
アドセンスはそのままで大丈夫です。
ただ・・・果てしなく続く手作業であり、根気強さが必要です。

特に、小さめの画像を横並びに貼り付けているページがあるとか、複数の記事でTwitterを多数引用している場合に参考になると思います。

こんにちは、野分です。

計測方法が変わったのか、再び不合格になり、どうにもこうにも改善できなかった「ウェブに関する主な指標」のCLS。
調べても目新しい情報がないので、初心者なりにいろいろ考えて対策したところ、見事合格したので、たぶんどこにも書いていない改善方法をあなたにお届けします！！

以前のCLS関連記事。何かは参考になるかも。
≫【合格】「ウェブに関する主な指標」【Luxeritas】

【CLS改善方法】ウェブに関する主な指標に合格！【簡単３つ＋おまけ】
【CLS改善方法】ウェブに関する主な指標に合格！【簡単３つ＋おまけ】まとめ

【CLS改善方法】ウェブに関する主な指標に合格！【簡単３つ＋おまけ】

「ウェブに関する主な指標テストに合格していません。」を解決！

CLSを改善して「ウェブに関する主な指標」に合格するためにしたことは以下です。

CLS改善方法
１、テーマをLuxeritasからCocoonに変更した
２、画像が羅列されているページでTableタグを使った【最重要】
３、Twitterが表示されるスペースをdivであらかじめ確保した
４、全てのページに幅1200pxの画像を設置した（AMPエラー対策）

CLS改善方法１：テーマをLuxeritasからCocoonに変更した

このブログではLuxeritasをずっと使用してきました。
今まで色々と高速化対策もしてきて、今年の2月くらいまではCLSにも合格しており、これからもずっと使っていこうと思っていました。

ところが2021年の2月16日、突然CLSが不合格に。それからいろいろと試してみましたが、いっこうに改善できず、時間ばかり過ぎて行きました。

トップページをバナーだけ貼った固定ページにしてみたり、広告を減らしたり。
いろいろやってみましたが、CLSは「0.34」。真っ赤です。

そこで今回も、Googleの評価が高いと思われる超人気ブログをいくつか、こっそりPagespeedInsightで測ったりなどしました。

すると、以前に少しメモしたことがありましたが、やはり今回も、点数は低いのに「ウェブに関する主な指標テストに合格しています。」となっているブログがけっこうありました。

そのうちのひとつが、Cocoonのわいひらさんの個人ブログ「寝ログ」でした。CLSは「０」。Cocoon公式ブログ（DLサイト）はスキン（デザイン）が違うせいか、合格はしていませんでしたが、CLSは「0.05」でこれ単体では合格ラインです。
はじめは、わいひらさんが独自の工夫をされているのかな？と思いましたが、Cocoonを使っているブログには、CLSが「０」のものがいくつか見つかったのです。もちろんGoogleアドセンスも貼ってあります。

逆に「Luxeritasを使っていてCLSが合格ラインに達しているブログ」は、私の探し方が甘いのか、公式ブログを含めても見つけることができませんでした。

WordPressについてもっと知識があったら、自分でどうにか工夫して改善できたかもしれません。

だけど、私はお手上げヽ(´▽｀)/

自分なりにできることは全部やったけど、どうにもできませんでした。。

なので、一般の利用者の方でもCLS「０」、あるいは合格ラインを再現できているCocoonに変えました。ブログの投稿内容などになんらかの問題があるにしても、そもそもの難易度が低くなるだろうことを期待して・・・。

結果、このブログの現在のCLSはOrigin Summaryで「０」です。
もちろん、「ウェブに関する主な指標テストに合格しています。」！

現段階では、以前やっていたTwitterやアドセンスの遅延などはひとつも実行していません。
なので、点数は低いです。
でもFCPもFIDもLCPもCLSも全部緑！
体感的な遅さも、Twitter表示以外は、自分ではあまり感じません。
Twitter遅延だけはまた時間のある時にやろうと思っていますが、他はそのままかもしれません。

Twitterの遅延の施策でほぼ全ページのTwitterの特定のスクリプトを消したため、再度通常の状態に戻すには、全ページにスクリプトを入れ直す必要があります。・・・しかし、現実的にそれは無理すぎるので、現在は簡易的にウィジェットにスクリプトを入れていて、表示はとても遅くなっていると思います。

Twitterの表示速度の低下によって発生するレイアウトシフトは、「CLS改善方法３：Twitterが表示される大きさをdivで指定した」で解決済みです。

PagespeedInsightでサーバーの応答速度が遅いと言われたら、エックスサーバーおすすめです。管理画面が直感的に理解できるところがいいです。また、サポートも親切で対応が早い。
≫エックスサーバー

CLS改善方法２：画像が羅列されているページでTableタグを使った【最重要】

これが最も効果的でした。

CLSというのは、ページ内の表示のズレを計測するものです。
たくさんの画像が自由に動き回る状態（ただ単純に並べた状態）にしていると、ズレが生じやすくなるんじゃないか、それが測定されて評価が下がるんじゃないか・・・と考えました。

これは、AndroidとiPhoneで見たときの画像の位置の違いです。
画面の幅によって表示される画像の数が変わっています。
スマホを横向きにしたら、どちらの場合もレイアウトシフト（位置変更）が起こって、かなりストレスになると思われます。
特にこのページはたくさんの画像があるので、スマホを傾けるたびにものすごくガチャガチャしていたことでしょう。

それはうすうすわかっていたのですが、私にはLuxeritasで綺麗にテーブルを書くことができませんでした。。何が悪いのかよくわからないのですが、何をどうしても意図通りにできず、あきらめていました。
テーブルを画像にすることも考えましたが、アイテムを追加しづらいし、SEO的にもイマイチかな〜と思って放置していたのです。

けれどテーマをCocoonに変えたので、テーブルを設置することができたわけです。

テーブルできちんと場所を決めてやると、そこから大きく場所を変える（レイアウトシフトが起こる）こともほぼなくなりました。
画面の幅がどうなっても、横５列というのは固定なので、ズレは軽減されます。
おまけで、本当はずっと文字で表示したかったアイテムの名前も書き入れることができました。

膨大な数の画像をテーブルのセルの中にひとつひとつ収めるのは、結構骨が折れる作業でしたが、やればやるだけ合格のパーセンテージが上がったので、やりがいがありました。

これをやることにより、30％ほど合格の割合が伸びました。

「過去 28 日間の収集期間についてのフィールドデータによれば、」という文言があるので、即時反映はないと思われがちですが、そんなことはないようです。何かを変えるとすぐに数値に反映されました。モチベが上がる。

CLS改善方法３：Twitterが表示されるスペースをdivであらかじめ確保した

Twitterが表示されるときの、あの「がくっ」と来る感じもかなりシフト感ありませんか。
私は常々気になっていたので、今回ついでに、それをなんとかすることにしました。

やることはわりと簡単ですが、かなりコツコツ粘り強くやらねばなりません。
方法は以下です。

Twitterをブログに貼り付けるときに、何か別のページに飛びますよね。

こういう画面です。
ここで実際の貼り付けサイズが分かるので、Macのスクショの機能を使って、ひとつひとつ測るのです・・・・。

右下に注目。
Twitterの貼り付けは幅570pxくらい固定なので、高さだけわかればOKです。

【グランブルーファンタジー】4/15(木)よりイベント「ビストロ・フェードラッヘ」が復刻開催！王都で祭りを楽しむランスロット達は、「ビストロ・フェードラッヘ」の店長でヴェインの元同期であるジャックと出会う。美食家サヴァランに閉店を迫られる彼を救うため、一行の奮闘が始まる！ #グラブル pic.twitter.com/ekptWGjpkA

— グランブルーファンタジー (@granbluefantasy) April 13, 2021

なにをしているのかわかりやすいように、<div>で作ったTwitter表示用の箱を線で囲いました。
こんな感じで、Twitterが表示されるためのスペースをあらかじめ確保しておくことによってレイアウトシフトを起こさないようにできてる・・・はず。

実際のタグはこんな感じ。

<div style=”width: 570px; height: 600px;”>
<blockquote
class=”twitter-tweet” data-lang=”en”>
・
（ツイートの内容）
・
</blockquote>
<script async src=”https://platform.twitter.com/widgets.js”
charset=”utf-8″></script>
</div>

黄色いハイライト部分が囲いのタグです。

これのつらいところは、ひとつひとつを囲わないといけないところ・・・。
とても地道な作業です。
このブログはTwitterの埋め込みがかなり多いです。
既に投稿済みの記事の中にある埋め込みを、全部いちいち測ってタグを書き込むとなると、かなりの精神力と膨大な時間が必要。（現在進行形）
大きさが同じだったらclassを設定してコピペしまくればいいのですが、画像や動画の大きさ、そもそも文章の長さもまちまちなので、ひとつひとつやってます。。

大変ですが、これをすることによりCLSの評価はけっこう上がりました。
Twitterの埋め込みばかりのページをやり終えた段階で、15％くらいは改善したと思います。
全部のページをやり終えたらどうなるか楽しみです。

（そうでも思わないとくじけそう・・・あと何個だろ・・・）

Cocoonのウィジェットは、テキストと広告に関して、PC表示用とモバイル表示用でわけることができます。つまり、その二つをレスポンシブにせず、サイズを指定して設置することも可能になるということです。

問題点としては、モバイルなど画面幅が570px以下の端末でページを閲覧すると、横移動のシークバーが出てしまうことです。あんまりカッコよくもないですが、個人的には気になるほどではないです。

どうしても気になる場合は、width=380pxなどと幅を小さくして囲ってもOKです。Twitterはレスポンシブなので、囲われた中に綺麗に表示されます（表示崩れなどは起きません）。PCで閲覧したとき小さいなーとは感じるかもですが。

CLS改善方法４（おまけ）：全てのページに幅1200pxの画像を設置した（AMPエラー対策）

最後の方法はおまけです。

おまけというか、CLSが改善されるとは思ってなかったけど、やったら改善されたものです

CocoonにしてからAMPにも対応しました。
AMP対応にチェックを入れるだけで実装できて、簡単だったからです。

でも、AMPも一筋縄ではいかないシステム。
サーチコンソールで確認してみると、主に２種類のエラーを吐いていました。

すぐになんとかできそうなのが、この「推奨サイズより大きい画像を指定してください」という問題。

AMP の構造化データが、推奨サイズより小さい画像を参照しています。これにより、Google 検索で AMP 関連の機能がページに表示されなくなる可能性があります。また、サイズの大きい画像が Discover カードに表示されなくなり、ウェブページのトラフィックやユーザーのエンゲージメントを低下させる原因となることもあります。修正するには、ガイドラインに沿って大きな画像を使用してください。

？？？？

とりあえず、「修正するには、ガイドラインに沿って大きな画像を使用してください。」という文章に従います。

ガイドラインの「image」という項目を確認すると、色々書いてあるんですが、以下が自力でなんとかできそうです。

・画像の幅は 1,200 ピクセル以上にする必要があります。
・すべてのページに画像を少なくとも 1 つ含める必要があります。（以下略）
・適切な画像が選択されるようにするために、アスペクト比が 16×9、4×3、1×1 の高解像度画像（幅と高さをかけて 800,000 ピクセル以上の画像）を複数指定してください。

このうち一番最後の「高解像度の画像」というのはちょっと現実的じゃないので、様子見することにしました。そんなの設置したら重すぎます。

とにかく記事内に一つは画像を貼ること、そのうちひとつの画像の幅が1,200ピクセルならいいのだろうと解釈。

文末にカテゴリー一覧へのリンクを貼りたいとずっと思っていたので、それ用の画像を幅1,200ピクセルになるように作りました。

ガイドラインにあったアスペクト比は無視です。だって重すぎるから。

WordPress関連の記事にはこういった画像に一覧へのリンクを貼って、文末に置くようにしました。