「改善が必要: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
Compress and compare images with different codecs, right 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をコピーしました