WordPressテーマSANGOの質問

CLSが1.01と非常に大きくなってしまう

アバター
Sara

サイトのスピード改善の記事と話題がずれていたら申し訳ないですが、PageSpeed Insightsに関する内容ですので、こちらで質問いたします。

現在PageSpeed Insightsでチェックを行うと、時間帯にも寄りもますが、デスクトップ90/モバイル70程度で、点数は特に悪くありませんでした。
しかし、

ウェブに関する主な指標の評価: 不合格

と表示されています。
詳細を見ると、デスクトップのみ、CLSが1.01と非常に大きくなっています。

CLSの項目をクリックすると、ページによっては改善項目が出る場合がありますが、全ての数字を足してもとても1.01には届きません。また、長い記事・短い記事色々とありますが、幾つかで試したところ全てが1.01という結果です。

これを改善するにはどうすれば良いでしょうか。

なお、Chromのデベロッパーツールにて、Layout Shift Regionsにチェックを入れて、何度かF5を押して確認したところ、ページ全体が一瞬だけ青色になっていたので、ほぼ全体がシフトしているという判定を受けているのかもしれません。

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

SANGOでCSSやJavaScriptの読み込みリソースを減らす方法
コメントへの回答
サルワカくん
サルワカくん
2022/01/30

いつもお世話になっております。
以下がCLSに影響しているようです。

– 新着記事一覧の画像にwidth, heightの指定がないこと
– ヘッダー画像をlazyロードで読み込んでいること

一度ご確認いただけますでしょうか?
よろしくお願いします。

アバター
Sara
2022/02/01

CLSに関する説明をありがとうございました。
新着記事一覧とlazyロードの設定で解決しました。
スコアは28 日間の収集期間ということなので、約1か月後に解決すると思われます。

ただ、1点気が付いたのですが、

[say]文[/say]

にて、吹き出しを入れた際にも、

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

という、CLSの警告が発生するようです。

確かに、出力された記事のソースを見てみると、吹き出しアイコンの画像には、width=”110″は指定されているものの、heightに関する記述がありませんでした。

使用環境としては、カスタマイズの詳細設定で登録したアイコンを、クラシックエディタにて上記のコードで呼び出しています。

詳細設定にはアイコンサイズに関する設定が無いですが、[say]使用時に警告を回避するには、何処に何を記述すれば良いか教えて頂きたく。

サルワカくん
サルワカくん
2022/02/02

お世話になっております。
確かにショートコードのsayにheightの指定がないですね。
こちらheightが設定されるように調整しますのでアップデートをお待ちいただけますでしょうか?
よろしくお願いします。

アバター
Sara
2022/02/11

遅くなりましたが、回答ありがとうございました。
アップデートを待ちます。