いつも読んで頂きありがとうございます。
今回、はてなブログも画像の遅延読み込み（lazy load）が対応になりました。
画像表示の画面ズレに関しても対応されています。
はてなブログが表示速度改善
画像の表示時の画面のズレ
Google Search ConsolでCLSに関する問題：0.25超（モバイル）の不良URLが出る場合が
あります。URLに数字が入っていれば不良URLがあるということです。
CLSとは簡単に言えばページを読み込んだ読み込んだ時にレイアウトが移動した量につ
いて数値化したもので、画像や広告などが表示されていくうちに最初に表示されてた場
所から動く量が多いと数値が大きくなります。
移動量が多いと読み込みも遅くなるので読者にとってはマイナスです。
CLSの確認方法
CLSの数値を確認するにはPageSpeed lnsghtsを使用します。
サイトへ：PageSpeed lnsghts
自分のブログのURLを入れて分析をクリックすると結果が表示されます。
ページごとの分析も出来ます。
パソコンとモバイルの切り替えがあるので、モバイルにしてCLSを確認します。
ここで0.25以上あると不良URLがあるということになります。実際はGoogle Search
ConsolでCLSに関する問題：0.25超（モバイル）の不良URLが出ても分析するとそこまで
の数値は出ていないことが多いです。
CLSの対処方法
CLSの対処法は画像の幅（width）と高さ（height）を指定することで、画像が読み込ま
れるスペースを確保できます。
今までは、はてなブログで画像を記事内に入れても幅と高さは指定されませんでしたの
で自分でHTML上で指定するしかありませんでした。
オフスクリーン画像の遅延読み込みにも対応
PageSpeed lnsghtsで改善できる項目に「オフスクリーン画像の遅延読み込み」が出てく
る人がいると思います。これは画像が沢山あるページの場合、全ての画像を一気に読み
込まれて表示に時間がかかっているので改善が必要ということです。
これを改善するには開いているページの中で表示されている画面内の画像だけを先に読
み込み、スクロールに合わせて画像を表示させていくことです。
今回はこれも対応されました。
画像サイズや画像量によって違います。
はてなブログユーザーへの注意事項
今回の変更は6月9日からなので、適用後は画像を挿入すると適用になりますが、過去に
投稿した記事に関しては編集モードによって違います。
「はてな記法」及び「Markdown」を使用している人は過去記事を更新するだけで自動
的に適用になります。
編集モード「見たまま」を使用している場合は、同じ画像を編集サイドバーから
貼り直すか、ＨTML編集で幅（width）と高さ（height）及びlazy laodを指定し
なければなりません。
画像を貼り直すのが一番早いと思います。
最後に
今回の変更で私の場合は「見たまま」モードだったので、過去の記事画像は全て貼り直
しました。貼り直すだけで結構時間がかかりましたが表示速度は上がりました。
「見たまま」モードで画像が多い人は少しづつ貼り直していった方が良いかもしれませ
んね。気にしない人は何もしないと思いますが読者のことを考えれば対応した方がいい
と思います。
