そういえば、6月9日のはてなフォトライフの画像にlazyloadingが設定されたのでした。 忘れていたので確認しておきます
そもそもなんなん
この記事で報告されているように、はてなブログにアップデートが入りました。
簡単にいうと、フォトライフにアップロードした画像を表示するときに、<img>タグの書き方を変えました。という内容です。
はてなブログでの画像の記載方法
はてなブログの記事作成時に、はてなフォトライフの画像を埋め込むと以下のような形式になります。
hatena記法 [f:id:kanaxx43:20210718165643p:plain]
▼
このままだとHTMLで画像を表示することはできず、上の記号を画像表示用のタグ<img>に変換しています（はてなブログが勝手にやってます）。
上を変換すると出てくるタグ <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20210718/20210718165643.png">
この書き換えの方法が変わったという話です。
なんで書き換えたのか？
ウェブサイトを見ていて、クリックしようと思ったらページ内の部品の位置がずれて、別のものをクリックした経験はあると思います。かなりイラっとするやつですね。
ブラウザでHTML（ウェブページ）を表示するときは、
- まずは文字を表示し、
- そのあとに画像を表示する
という順序になっています。
何も気にせずにHTMLを作ると、画像のスペースが無い状態（つめつめの状態）が初期表示の状態で、画像が読み込まれたら順にその分だけ下にずれていく動きになってます。画像が多ければ、上がずれ、さらにずれ、という感じで最下部のほうは結構な滑りが発生します。
この現象をCLS（Cumulative Layout Shift）と呼んでいます。CLSが発生したときのすべった幅が大きいとCLSのスコアが高くなります。スコアが高いのは悪いことです。
最近のGoogleは、画面が表示された後にどれだけすべったのかを測定していて、すべりが多いページは評価を下げるようなトレンドになっています。
で、はてなさんは、はてなブログの記事全般に対し、画像を埋め込んでもすべらない対応をしたということです。
詳しくは「CLS、コアバイタル、SEO」などのキーワード検索して調べてもらうのがいいです。参考になるページのリンクは置いておきます。*1
気になる一文
はてな公式の記事の中に気になる一文がありました。これです。
過去に貼り付けたフォトライフの画像について
編集モード「はてな記法」「Markdown」をご利用の記事については、記事を更新していただくと、自動的に本変更が適用されます。 （はてなスタッフブログより引用）
うちは、Markdown形式を使っているので、記事を更新しないといけない変わらないということか。
過去記事を確認してみる
とりあえず、記事の更新をしないと適用されないということだったので、まずは自分の手で更新をして更新前／更新後に何が起きるのか、試して確認しておきます。
2021年6月9日以前に書いて放置している記事はたくさんありますので、1つ選んで確認してみましょう。
- テスト対象：https://kanaxx.hatenablog.jp/entry/screenpresso-about-workspace
- 最終更新日：2020-04-27 22:05:38
- 変更前のHTML：全体は長いので、画像が3つくらい書いてある部分だけ切り取ります
<p><b>新規</b>ボタンを押して、 <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314230832.png" alt="f:id:kanaxx43:20200314230832p:plain" title="f:id:kanaxx43:20200314230832p:plain" class="hatena-fotolife" itemprop="image"> </span></p> <p>「あいうえお」<a class="keyword" href="http://d.hatena.ne.jp/keyword/%A5%EF%A1%BC%A5%AF%A5%B9%A5%DA%A1%BC%A5%B9">ワークスペース</a>を追加すると、<br /> <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314231440.png" alt="f:id:kanaxx43:20200314231440p:plain" title="f:id:kanaxx43:20200314231440p:plain" class="hatena-fotolife" itemprop="image"> </span></p> <p>ピクチャ＞Screenpresso＞あいうえお フォルダができます。ここにファイルが保存されていきます。<br /> <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314231449.png" alt="f:id:kanaxx43:20200314231449p:plain" title="f:id:kanaxx43:20200314231449p:plain" class="hatena-fotolife" itemprop="image"> </span></p>
（適度に改行をいれています。）
imgタグに、loadingの指定や、width,heightの指定はないですね。
更新日が古いものは、古い形式のままであるということは確認できました。
ブログ管理画面で記事を更新（変更なしでボタン押すだけ）
同じ記事をブログの管理画面で探して空更新して、もういちどページを表示してHTMLを確認します。
同じ部分のHTMLを取り出してみました。
<p><b>新規</b>ボタンを押して、 <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314230832.png" alt="f:id:kanaxx43:20200314230832p:plain" width="527" ★ここ height="502" ★ここ loading="lazy" ★ここ title="" class="hatena-fotolife" itemprop="image"> </span></p> <p>「あいうえお」ワークスペースを追加すると、<br /> <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314231440.png" alt="f:id:kanaxx43:20200314231440p:plain" width="527" ★ここ height="502" ★ここ loading="lazy" ★ここ title="" class="hatena-fotolife" itemprop="image"> </span></p> <p>ピクチャ＞Screenpresso＞あいうえお フォルダができます。ここにファイルが保存されていきます。<br /> <span itemscope itemtype="http://schema.org/Photograph"> <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200314/20200314231449.png" alt="f:id:kanaxx43:20200314231449p:plain" width="824" ★ここ height="482" ★ここ loading="lazy" ★ここ title="" class="hatena-fotolife" itemprop="image"> </span> </p>
「★ここ」ってつけた1画像につき3つ、合計9個が変わってますね。
widthとheightとloadingが3つセットで指定されるようになりました。
この3つを足すのは、CLS値の改善とページスピードの改善で使われる基本的な方法なので、やっておくことはとてもいいことです。
さて、これで
- はてなブログでHTMLがすべらない対応ができていること
- 自分で更新をしないといけないこと
の確認がおわりました。
2021年6月9日以前の記事は何個あるんだろうか。。。
過去記事を数えてみる
記事のカウントをするのは面倒ですね。しかも、記事の作成日ではなく記事の更新日で数えないといけません。
記事の更新日はサイトマップファイルに載っているので、サイトマップ経由で一括で調べるのがよさそうです。ちょっと前に作った「はてなスター集計するGoogle Spread Sheet」が役に立ちそうです。 kanaxx.hatenablog.jp
このスクリプトがやっているのは
- サイトマップインデックスから、サイトマップを探し、
- サイトマップから記事URLと最終更新日を探し、
- 記事URLからはてなスターの数を数える
というものです。2番目までできればOKですね。
実行してみる
では、昔作ったスクリプトを実行してみます。
出力されたスプレッドシートの一部
ちゃんとできているっぽいです。 B列の最終更新日を古い順に並べて数えてみたところ、2021年6月10日以前が最終更新日になっている記事は、208個もありました。
208回ぽちぽちするんか。。サブブログも合わせると500個くらいあるじゃん。
気が遠くなりそうなので、いったんPVが上位の記事だけを対象に、ブログの管理画面からポチポチ手作業で空更新をしておきました。パレートの法則的には、「全体のPVの80％は20％の記事で生まれている」ということなので、手作業でやって意味のある範囲だけをまずはポチポチしておくのがいいですね。
それにしても、残りはどうすっかな。
ということで次回に続きます。（たぶん）
続きをかきました。
kanaxx.hatenablog.jp
さいごに
はてなブログのすべらない対応の内容を詳しく見てみました。 特にはてなブログは、無駄なリソースを読み込みすぎてページスピードが遅いので有名なので、これはこれで喜ばしい対応です。
悩みは全部の記事を自分で更新するという点ですね。PRO版を契約してるんだから勝手にやってくれよっと思うところですけど。その辺で有料と無料の差を出してこないんですよね、はてなさんは。
参考資料
【重要】コアウェブバイタルとは? LCP/FID/CLSをわかりやすく解説【SEO情報まとめ】
https://webtan.impress.co.jp/e/2020/06/05/36210
