「改善が必要:CLS に関する問題」からSquooshのすごさに気づく

Googleアドセンスはサーバー代ぐらいは何とかなるようになってきたものの、いわゆるSEO対策というのは今ひとつ理解が進んでいません。

はかせ
はかせ

調べていても謎が深まり面倒になり、やっぱり記事を書こうとなり、SEO対策は先送りということにしての現実逃避かもしれません。

2021年は、コアウェブバイタル(CWV:Core Web Vitals)なるものが導入されるらしいのですが、正直なところ何をすればよいのか分かっていません。

Google Search Consoleのウェブに関する主な指標から、「改善が必要:CLS に関する問題」について分からないなりにやってみたことをまとめました。

このブログのウェブに関する主な指標

分からないなりに、Google Search Consoleでウェブに関する主な指標を見ると、

  • モバイル:このデバイスタイプの情報を表示するにはデータが足りません。
  • PC:改善が必要なURLが全数

といった状況です。

PCの方をもう少し調べてみると、

  • 改善が必要:CLS に関する問題: 0.1 超(パソコン)

となっており、さらに知らべてみると(Search Consoleの指示にしたがっていくと)、

  • CLS(Cumulative Layout Shift)のスコアが悪い

ようです。

ここで、

  • CLSはレイアウトのずれに関する指標

なのですが、該当のページにはアイキャッチ等の画像表示をしていないので、Google先生に聞くと出てくるよくある対策の1つ、

  • imgタグにwidth と heightを設定すること

ではどうにもならない。

PageSpeed Insightsの表示される画面キャプチャの図を見ると、

  • 最初の2つは白いので読み込みが遅いのだろう

とは思うのですが、モバイルもPCも同じような様子。

WordPressとCocoonで対策?

対策と言うほどのことではないのですが、とりあえずやってみたことは次の通りです。

  • アイキャッチ画像の圧縮(Squooshが強力、後ほど説明します)
  • Cocoon設定で、ヘッダサイズを空欄から「0」を設定
  • ヘッダー画像は使っていないのですが、こちらも「0」を設定

この後、

  • キャッシュをクリア
  • 何度かテスト

してみると、

PageSpeed Insightsの表示される画面キャプチャの図を見ると、

  • 最初の2つは白い→最初の2つ目に表示される

ように改善した様子。

ホームの上部に表示している画像は、圧縮して18kB程度なのでひとまずここまでとしました。

はかせ
はかせ

「ウェブに関する主な指標」は、対策が難しいのでコツコツ調べながら時々対策?してみます。

画像圧縮ツールはSquoosh

画像圧縮ツールは、Squooshが強力です。

Squoosh
Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your browser.

1例ですが、写真のJPG画像ファイルですが、

509KB > 54 KB

とすごい結果になりました。

しかも、

  • リアルタイムで圧縮や画像編集ができる。
  • アカウント登録不要
  • トリミングはもちろんリサイズ、拡大もできる。
  • アプリもある。

といった具合です。

はかせ
はかせ

私にはSquooshによる圧縮により、どこが変わった(画質が劣化した)かは分かりませんでした。

ただし、Squooshが扱えるファイルは1度に1個なので、

  • 複数ファイルをまとめての一括変換はできない。
  • 1度に1ファイルのみ加工や圧縮ができる。

とり、複数のファイルをまとめて処理できません。

コツコツやる分には、対象ファイルを圧縮、ダウンロードで同じファイル名で圧縮後のファイルが保存できるので、私の場合には特に不満はありません。

ということで、画像サイズを小さくできたので、次はWordPressでの画像の差し替え(置換)です。

画像の差し替え:Enable Media Replace

私はエックスサーバーを使っています。

FTPやエックスサーバーの管理ツールを使って画像ファイルを置換すればよいのでしょうが、今回はWordPressのプラグイン「Enable Media Replace」を使ってみようと思います。

なお、ファイルを入れ替えた後は、サムネイルの作り直しが必要です。私は「Regenerate Thumbnails」を使いサムネイルを作り直しています。

また、キャッシュの削除も忘れずに行います。私は「WP Fastest Cache」を使っています。

WordPressで画像を入れ替える際の注意点

WordPressで画像を入れ替える場合、注意が必要です。

  • WordPressで「画像を完全に削除」をすると画像が使われていたページとのリンクが切れてしまいます。

また、

  • WordPressで同名のファイルを追加すると、末尾に数字が追記され別ファイルとして登録されます。

これは、ファイルを誤って置換したりすることのない安全のための機能(仕様)だとは思うのですが、地味に不便です。

そこで、今回はWordPressのプラグイン「Enable Media Replace」が登場となります。

画像の準備ができたら使ってみようと思います。

まとめ

Googleアドセンス、2021年は、コアウェブバイタル(CWV:Core Web Vitals)なるものが導入されるらしいのですが、正直なところ何をすればよいかは理解していません。

ここでは、Google Search Consoleのウェブに関する主な指標から、「改善が必要:CLS に関する問題」について分からないなりにやってみたことについて、以下の項目で説明しました。

  • このブログのウェブに関する主な指標
  • WordPressとCocoonで対策?
  • 画像圧縮ツールはSquoosh
  • 画像の差し替え:Enable Media
    • ReplaceWordPressで画像を入れ替える際の注意点
はかせ

ISOを学ぶきっかけは、知り合いの社長さんからのISO認証取得の相談からでした。
品質マネジメントは、会社をよくするツールであり、チームやプロジェクトにも使えるよくできた仕組みです。

はかせをフォローする
ブログ運営
スポンサーリンク
はかせをフォローする
ビジョンで回す博士の品質マネジメント
タイトルとURLをコピーしました