Cocoonなどで CLS値を改善する方法(コアウェブバイタル対策)いろいろ

「CLSに関する問題:0.25超」「CLSに関する問題:0.1超(パソコン)」に悩む方のために、サーチコンソールのどこから調べればいいのか、から、「Page Speed Insights」のどこを見れば項目が表示されるのか、から解決方法まで覚え書き。

目次

「CLSに関する問題:0.25超」 を改善する方法

「Cocoonの場合はこのパーツを削除してしまえば解決します」……のような事はないです。同じテーマCocoonでもサイトによって違いますし、この問題に関してはコピペでは対策できません。

ただ、どのテーマでもやることはほぼ同じ。

一番簡単な解決方法と、その他、それ以外の方法も作業体験の中からいくつかご紹介いたします。

追記していきますので、拾って読みたい方は目次をお使い下さい。

CLS 値ってそもそも何なのか

CLS値とは、Googleサーチコンソールが2021年から追加したレポート指標の1つで、「Cumulative Layout Shift」の略です。

「Cumulative Layout Shift」 つまり、レイアウトが大きくシフトする値。

ユーザーがページを閲覧した時に意図せぬレイアウトの動きが発生するスコアを数値化したものです。

「閲覧者が何かをクリックしようとした途端にページのレイアウトがガクンと動いて広告を押してしまった」

 

……というような事はよくあると思います。特にスマホで。

意図としては、このようなストレスをユーザーに与えないようにしていこう。という措置ですね。

(もっとも、レイアウトがガクンと動く原因のほとんどは、Googleさんご自身が提供されているアドセンスのせいだと思うんだけど~~……)

CLS値を改善する(コアウェブバイタル対策)方法

この値は「Page Speed Insights」を開けば見ることが出来ます。

数値は小さいほど良く、2021年11月現在、モバイル 0.25未満、パソコン 0.1未満が最適基準です。

 

サイトのCLS値を確認する方法 1(サチコ)

このページに辿り着いた方のほとんどはGoogleサーチコンソール「ページ エクスペリエンス」不良URLに悩んでサーチしてきた方々だと思うので、サーチコンソールからご説明いたします。

1. Googleサーチコンソール 「ページ エクスペリエンス」 を開く

「ページ エクスペリエンス」「ウェブに関する主な指標」を開き、不良URLが出ているグラフ上の「レポートを開く」をクリック。

Googleサーチコンソール 「ページ エクスペリエンス」 を開く

2. 「不良URL」の「詳細」を開く

「不良URL」グラフ下にどういう不良が出ているのか「詳細」が表示されるのでクリック

サイトのCLS値を確認する方法

3. 対象URLを開く

表示された対象URLをクリックすると右側にサイト中の「不良対象URL」が一覧で表示されます。

サイトのCLS値を確認する方法

カーソルを当てると下にそのURLを計測する 「Page Speed Insights」 へのリンクが出て来るので、それをクリックして 「Page Speed Insights」 へ移動します。(クリックすれば新しいウィンドウで開きます)

サイトのCLS値を確認する方法 2( Page Speed Insights )

では Page Speed Insights を見て行きましょう。


ちなみに、Google SearchConsole は使っていない(無料ブログなどで登録できない)けれど、自分のサイト(ページ)の CLS 値 を調べてみたいという方は、ここから参加できます。

Page Speed Insights の検索窓に調べたいご自分のページのURLを入力してGO するだけです。

あわせて読みたい

サイトのCLS値を確認する方法 3( 「CLS」を見る)

診断が開いたら、スクロールで下の方に下ってください。

あまり良くないパフォーマンス値や、インタラクティブに時間が掛かり過ぎる情けない秒数が目に入ったりしてしまうかも知れませんが、今回はそこは関係ないです!

サイトのCLS値を確認する方法
上にも書かせていだきましたが、CLS はページスピードとは関係ないのです。CLSで計測されるのは「レイアウトずれがいかに起きているか」だけです。
 

CLS 値を対策するための内容を確認

どういう問題が起きているから数値が0.25越えをしてまうのか。どこを解決すればいいのか。

それもGoogle先生が全部教えてくれます。

ツリーマップ下に小さく「次に関連する監査を表示: All FCP TBT LCP CLS 」 と表示されている部分の「CLS」をクリックします。

CLS 値を対策するための内容を確認

すると、下に「どこを直せば改善するのか」の一覧が表示されるので、その内容に従って作業します。

CLS 値を対策するための内容を確認

「CLSに関する問題」 を改善する一番手軽で簡単な方法

では実践に入ります。

実は、この「CSL 値」を改善する方法で一番簡単なものに、大抵のサイトが引っかかっています。

画像要素で width と height が明示的に指定されていない を解決

「画像要素で width と height が明示的に指定されていない」

大抵のサイトにこの項目が出ていると思うのです。

何のことかというと、画像表示のコード、

<  img src=”https://xxxxxxx.xxxxx/xxxxx.jpg” alt=”” width=”●●” height=”●●”  >

の「width=”●●” height=”●●” 」が記述されていないと、この警告が出てくるのです。

はい。

つまり、これを記入してやるだけで、この問題は解決します。

「CLSに関する問題:0.25超」 は、画像に 「width=”●●” height=”●●” 」 を記述してやるだけで解決する。(ほぼ)

 

これホントの話です。

もちろん、これ以外にも「レイアウトが大きく変わらないようにする」項目はたくさんあるのですが、それがこの「CLSに関する問題:0.25超」に関わる数値は大抵あまりにも低く、ほとんどのページが画像にサイズを指定するだけで解決しています。

 

ご自身で対策作業ができないという方はご相談ください。

どの画像が引っかかっているのかを調べるには、「画像要素で width と height が明示的に指定されていない」の横に表示されている「へ」のような矢印を開けば出てきます。

画像要素で width と height が明示的に指定されていない

ページのどこにこの画像が入っているか分からなかったら、ページの上で右クリックして「ソース」を開き、ソースからURLを探します。

「画像要素で width と height が明示的に指定されていない」

Cocoonのヘッダーロゴ画像の場合

ちなみにCocoonのヘッダーロゴ画像に width=”” height=”” が入っていなかった場合は「Cocoon設定」のヘッダータブから簡単に設定することが出来ました。

「ロゴの設定」項目にサイズを入れるだけで解決です。

サイドバーやフッターの画像はそれぞれのウィジェットから編集できるはずです。そんなこんなで、1ページ分編集するとサイト全体の「CLSに関する問題:0.25超」が一気に解決する例が多い事をご報告しておきます。

THE THORやJINの場合は、カスタマイザーからロゴサイズは指定するようになっています。テーマによってはheader.php を開いて設定しなくてはならないものもあるでしょう。

WordPress以外の静的HTMLサイトでは、ファイル編集は必須だと思われます。

問題の画像がアフィリエイト画像だった場合

先ほどお見せした例がまさにアフィリエイト画像だったわけですが……。

画像要素で width と height が明示的に指定されていない

楽天アフィリエイトの画像なのですね。これ。他にもAmazonアソシエイトの画像もそうでした。

当方が運営するサイトの1つは「CLSに関する問題:0.25超」のページが非常に多く、不良URLばかりだったので何事かと思っていたのですが、調べてみたら多くのページに設置している楽天アフィリエイトの画像だったわけです。

そのサイトはエンタメ関連の投稿サイトなので、画像は肖像権の問題などがあって面倒だからアフィリエイトで表示させているのです。

そして、ほとんどのページが 「ページ エクスペリエンス」 に引っかかるという……。

対策

これに関しては「Search Regex」プラグインを使って一気にタグの画像部分に width=”●●” height=”●●” を追記しました。

その結果、サイト全体のCLS値は一気に改善しました。

ただし、楽天アフィリエイトもAmazon もタグの改変を禁止しています。ですから、この作業によってアフィリエイト報酬が上がらなくなる可能性も、最悪アカバンされる可能性もあります。
楽天さんにはこの事態について2021年12月現在問い合わせ中です。結果はこのページに追記させていただきます。

アフィリエイト画像コードの改変について

楽天さんからアフィリエイト画像コードにサイズを追記することについて返信いただきました。
ご認識の通り、楽天アフィリエイトのサービスを利用する場合はURLの改変・追記や画像の差し替えなどは規約にて禁止させていただいております。

アフィリエイトリンク自体は無効にはなりませんが、リンクコードの改変により正しく成果計測ができなかった場合、パートナー様の自己責任となります。

ということで、ビミョーな結論でした。

「改変は禁止」でも「コードは無効にならない」でも「正しく計測されない(成果にならない)」ということでしょうか。

よく分かりませんが当方のサイトは実験的にサイズを追記させていただいております。ASPの方で全て画像にサイズ指定してくれる日を待つばかりです。

「 レイアウトが大きく変わらないようにする 」各種対策方法覚え書き

では、「画像要素で width と height が明示的に指定されていない」の下を開くと現れる「レイアウトが大きく変わらないようにする ● 件の要素が見つかりました」について作業経験から書かせていただきます。

「画像要素で width と height が明示的に指定されていない」 に比べると大変手のかかる作業になります。

その上、この部分は作業してもほとんど数値が上がりません。なぜなら、元々、大して影響しない数値しか持っていない部分だからです。

項目の右に表示されている「CLS への影響」の数値をご覧ください。

「 レイアウトが大きく変わらないようにする 」

こんなにわずかな数値を改善するためにかける時間がもったいないです。(しかも、どうやって何を改善すればいいの?と思うような要素ばかりなので……。)

 

当方としましては、ここの数値がよほど大きかった場合のみ対策すれば良いと考えます。

では、覚書のために例を挙げていきます。

記事上タグ一覧表示 Luxeritas

作業したのは「Luxeritas」の例ですが、他のテーマでも同じだと思います。 「Luxeritas」 では記事上(下にも表示できるし非表示にもできる)に記事に付けたタグの一覧を表示できるのですが……

これがこれだったわけです……。

「レイアウトが大きく変わらないようにする ● 件の要素が見つかりました」1
「レイアウトが大きく変わらないようにする ● 件の要素が見つかりました」2

このサイトでは、タグ表示はどうしても必要だったので非表示にはできず、タグの間の「, カンマ」は、CSSで消しました。

「レイアウトが大きく変わらないようにする ● 件の要素が見つかりました」3
.meta span.break {
font-size: 0px;
}

です。

このサイトは、上に書いた楽天アフィリエイト画像にサイズ指定を付ける作業と、この 「, カンマ」 非表示作業で不良URLがゼロになりました。

コメントプラグイン「wpDiscuz」のアイコンフォント

これも WordPressテーマ「Luxeritas」 のサイトですが、テーマは関係なく、コメント拡張プラグイン 「wpDiscuz」 の要素で、「PageSpeed Insights」の表示が小さすぎて何だかさっぱり分からず苦労したものです。

コメントプラグイン「wpDiscuz」のアイコンフォント

拡大してみたら、informationのアイコンフォントだと分かり。

どこに使われているのかソースを検索したら 「wpDiscuz」 に表示されているものだと判明。

何かというと、「このコメントフォームは wpDiscuz で作成されているということを宣伝してくれたらありがたいです」という設定をオンしていたら表示されていたので、申しわけないけれどオフにさせていただきました。

これだけで解決です。 「wpDiscuz」 の「設定」からオフにできます。

 

THE THOR の「ピックアップ3記事設定」

これは当方のここのサイトで計測し、非常に数値が高い(悪い)ことが分りました。

 

 THE THOR の「ピックアップ3記事設定はCLSの数値を悪くする

これは、ちょっとひどいですね(苦笑)ここだけで 「CLSに関する問題:0.25超」 のほとんどを持って行っているではないですか。

当方は、このサイトのテーマを近々 THE THOR から変更するつもりなので(そういう事に関しては別記事でまた書かせていただきます)放置しているのですが、恐らく画像のサイズが明示されていないのでしょう。あるいは、マウスオーバーで動く装飾をしてあるからかも。

ここに関してはテーマ変更前に解決して、ここに追記させていただきます。

ご自身で対策できない方はご相談ください。

お問い合わせとご依頼はこちらから
 
よかったらシェアしてね!

profile

主にWordpress中心のサイト・ブログ制作&コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ&Wordpressカスタマイズ案件実績360件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

 

カスタマイズのご依頼は「一木堂」へ

follow us in feedly 映画@見取り八段 | 映画感想ブログ coconara ss

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は 「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

aa a
よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントする

目次
閉じる