はてなブログでブログ運営をしていると立ちはだかる大きな壁があります。
それは速度！表示速度の遅さ！
そのため自力でLazy loadを導入するための記事がたくさんあって、みなさんとても努力されているのだなぁと感じていました。
私はやろうかと思ったけど面倒でやめた人間です。
しかしそんな方々に朗報！
- 画像の遅延読み込み（lazy load）
- 貼り付けした画像のサイズ情報の書き込み（レイアウトシフトの回避）
が2021年6月9日、公式に実装されました！
この記事では
- Lazy loadとレイアウトシフト
- 利用の仕方
- はてなブログアプリからの投稿にも対応しているのか検証した結果
- Lazy load非対応のSafariではどうなるのか検証した結果
- 2021年6月9日以前の記事への適用方法
について解説しています。
はてなブログにLazy loadとレイアウトシフト回避機能が実装された
Lazy loadとは？
たくさんの画像を記事内に使用すると、その画像を読み込むためにページの表示速度が遅くなります。
Lazy loadがないページでは、そのページを開いたのと同時に記事内で使用されている全ての画像の読み込みが開始されます。
そうするとページの読み込みに時間がかかり、閲覧しているユーザーはストレスを感じることに。
それを解決する方法がLazy load（画像の遅延読み込み）。
ページを開いたら一斉に画像の読み込みをするのではなく、表示されているページの部分にあわせて徐々に画像を読み込んでいきます。
必要な分だけ少しずつ表示していくことで、必要外な負荷を避けてページの表示速度＆ユーザビリティを向上させるということなんですね。
と偉そうに解説していますが私も詳しいことはよくわかっていないので、詳細が知りたい方は以下の記事が参考になります。
レイアウトシフトとは？
ブログなどWebページを見ているとき、こんな思いをしたことがありませんか？
- いきなり画像があらわれてガクッと文字が下がり、どこまで読んだか分からなくなった。
- スクロールしようとしただけなのに突然出てきた広告をタップしてしまった。
この現象、誰でも1度は経験したことがあるはずです。
レイアウトがズレてしまうこの現象を「レイアウトシフト」と呼びます。
そのままですね。
この現象を回避するには、画像を貼り付けるときにその画像のサイズ情報を書き込んでおくことが必要です。
「この画像はこれだけのスペースを取りますよ」と、画像を表示させる<img>タグにサイズを表すwidth,height属性（横と縦の長さ）を追加しておくと、あらかじめその分のスペースを確保してページが表示されるんですね。
これによりレイアウトのズレが起こることを回避できます。
図で説明すると、
画像にサイズ情報を書き込まない場合
画像にサイズ情報を書き込んだ場合
ページを閲覧するスピードに画像の表示が追いつかなくても、あらかじめ画像の分のスペースを確保しておくことで画面にズレが生じなくなるんですね。
で、何が変わったの？
画像を表示するimgタグに、2つの属性が自動挿入されます。
画像を貼り付けてHTML編集画面を開くと、このようになっていますよね。
今後は画像を貼り付けると、このimgタグに
- loading属性（画像の遅延読み込み）
- width,height属性（画像の横と縦の長さ）
の情報が自動的に書き込まれるようになりました。
この2つが導入されたことによって、ブログの表示速度が遅いと悩むはてなユーザーの悩みと手間が大幅に軽減されます。
今までLazy loadと画像サイズ表記は自力でコードを書くしかありませんでした。
この「1つ1つの画像に対してコードを書く」というのが膨大な手間でした。
私も取り組みたいとは思いつつも、1つの記事にかかる手間があまりに多くなってしまうのでスルーしてきていたんですよね(･･;)
それがこれからは、画像を貼り付けると自動でLazy loadと画像のサイズを表すコードが追加されるのです！
どうやって利用するの？
画像を貼り付けるだけで勝手にコードが挿入されます。
画像を貼り付けてHTML編集画面を見てみると、
コードが自動挿入されています。
かんたんですね！
ブラウザがSafariの人は注意！
※追記
以下にSafariではloading属性が追加されない。と書きましたが、後日確認するとSafariでもしっかりloading属性が挿入されていました。 Safariユーザーの私嬉しい！
Safariでは画像の読み込みを遅らせるloading属性に対応していません。
したがってブラウザから画像を貼り付けても、利用しているのがSafariだと自動で追加される属性はwidthとheight属性のみで、loading属性は書き込まれません。
↓Safariから投稿した画像のimgタグを見ると…
loading属性がない！
私は普段Safariからはてなブログの記事を書いていたのでショック。
Lazy load非対応だとしても、せめて属性コードの自動挿入だけでもされて欲しかった。
今後はChromeかFirefoxを使おうかな。
アプリからの投稿でも自動でタグが挿入されるの？
公式ブログにははてなブログアプリからの投稿についての記載がありませんでしたので、実験してみます。
はてなブログアプリから記事を編集、画像の貼り付けを行います。
↓こちらの画像はアプリで貼り付けしました。
数年前に訪れた積丹の海。また行きたい。
ブラウザからのHTMLページを確認してみます。
loading属性もwidth,height属性も書かれていません。
アプリから画像を貼り付けてしまうと、今回の仕様変更の恩恵が受けられないことがわかりました。
残念ですね。いつか対応されるのでしょうか。
過去に投稿した記事はどうなるの？
そのままではLazy loadもレイアウトシフト回避も適用されません。
投稿した際の編集モードによって対応が分かれます。
- はてな記法：記事の更新ボタンを押すと適用されます。
- Markdown：記事の更新ボタンを押すと適用されます。
- 見たまま：写真の貼り付け直し作業が必要です。
Markdownやはてな記法を利用している方はただ記事の編集ページを開いて更新ボタンを押せばOKなのですが、
見たまま編集を利用している人は写真の貼り付けし直しが必要です！
ガーン！！！！
でも仕方ない、仕様です。
画像を大量に貼り付けしている記事だけ、貼り直しをするのが得策かなというところですね。
全部はムリ！
それでもいちいち自分でLazy loadやサイズ情報を書き込むより、かなりラクです。
たくさん画像を貼り付けるレビュー記事は貼り直し必須というところ。
▼ダイソンでは吸えなかった米粒、日立の掃除機ではどうだったか？
まとめ：はてなブログライフの快適さが向上
ここまでのまとめ
- imgタグにloading属性、width,height属性の2つが自動で挿入されるようになった
- Safariではwidth,height属性のみが挿入される
- はてなブログアプリ版では2つとも挿入されないので注意
はてなブログという場所は好きなんだけど、ページの表示速度がとにかく遅いのがネックでした。
作ったばかりの記事を投稿していないブログでも、Page speed insightsのスコアはかなり低いのです。
だから
「はてなブログ 高速化」
などのキーワードで検索するとたくさん記事がヒットします。
みんな少しでも速度改善のために努力しているんですよね。
そんな中
- Lazy load
- レイアウトシフト回避
が導入されました。
このおかげで、ユーザビリティがかなり向上されるのではと思います。
レイアウトシフトは、速度に関係ないですが…画面表示のズレが回避できるのはとても嬉しい。
運営スタッフさんありがとう！
これからもはてなでブログを書き続けるよ！
最後までお読みくださりありがとうございます。
よろしければこちらの記事もどうぞ♪
▼初心者の失敗。はてなブログアプリで画像を貼り付けるときの注意点。
▼iTunesアフィリエイトの申し込みってむずかしいよね！
▼継続って大事！だらだらとブログ運営しててもアドセンスの報酬ゲットできました！
▼もしものかんたんリンクで困ってないですか？
