【2021年】はてなブログがレイアウトシフト&遅延読み込みに対応!注意点も!

f:id:hibinomatome:20210620090129p:plain

2021年6月9日に、はてなブログでとても嬉しい変更がありました!

その変更とは、

・はてなフォトライフの画像をはてなブログに張り付けたとき、画像表示時に画面にズレ(レイアウトシフト)が生じない

・画像の遅延読み込み(lazyload)の対応

 です。
≫ はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ 


「何がすごいの?」と思われる方がいるかもしれませんが、今回の変更は、はてなブログを利用している人に恩恵があるのです

それでは、どんな変更やメリットがあるのか、具体的に紹介します。

◆この記事はこんな人におすすめ◆ ✔ 今回のはてなブログの変更内容を詳しく知りたい
✔ はてなブログでのレイアウトシフトについて知りたい
✔ はてなブログでの画像遅延について知りたい

 

【目次】

スポンサーリンク  

 

はてなブログがレイアウトシフト&遅延読み込みに対応!

f:id:hibinomatome:20210619185445j:plain

今回、レイアウトシフトと画像の遅延読み込みの変更がありました。

 

<変更内容>

レイアウトシフトの対応

レイアウトシフトの対応はてなフォトライフの画像をはてなブログに貼り付けた場合に、画像表示時に画面にズレ(レイアウトシフト)が生じないよう変更

 

画像の遅延読み込みの対応

画像の遅延読み込み(lazy load)にも対応し、画像をたくさん掲載したブログでも快適に閲覧できるように変更

 

この2つの変更にどのような効果があるかというと、

・サイトの評価がよくなる

・これまで個人対応だった対策の手間が減る

この2点だと、個人的に考えています。

具体的にどういうことか、それぞれの対策を詳しく見ていきましょう。

 

画面表示時のレイアウトシフト対応


はてなブログにて、画像貼り付け時にレイアウトシフトに対応する変更がありました。

レイアウトシフトとは ページ読み込み時などに、レイアウトがシフトする(ズレる)こと

 

f:id:hibinomatome:20210618131247p:plain

引用元:はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ

URL:https://staff.hatenablog.com/entry/2021/06/09/162329


読みたい記事のリンクをクリックしようとしたら、レイアウトが突然移動して広告が表示され、見るつもりのなかった広告をクリックした経験はありませんか?

ページ上のその突然の動きがレイアウトシフトなのです。

利用しているユーザーからすると、ページのズレはとても迷惑ですよね?

今回は、そのページのズレをなくすという変更なので、見やすいページになる変更がされたというわけですね。

ちなみに、Googleではレイアウトシフトをブログ評価の指標の1つ(CLS)として扱っています

具体的にどういうことなのか次でお話します。

 

レイアウトシフトの指標となるCLSについて


レイアウトシフトに関する指標は、視覚要素の安定性:CLS (Cumulative Layout Shift)と呼ばれています。

ページのズレを減らしてCLSの値がよくなると、「見ている人に優しい」と判断されて、サイトとしての評価も上がると考えられています。

より多くの人に自分のサイトを見てもらいたいなら、CLSの値をよくする必要があるわけですね。

※基本的には記事の情報・内容が優れているかが評価で優先されます


肝心のCLSの確認方法ですが、下記のページから確認することができます。
≫ PageSpeed Insights

活用方法
・評価してもらいたいWebページのURLを入力し、分析を押す
・分析後のOrigin SummaryにあるCumulative Layout ShiftがCLSの評価(画像青枠)

f:id:hibinomatome:20210619185441p:plain

※値は0(ゼロ)に近いほど良い


CLSの値が高くなる原因として、

・画像や広告といったページに埋め込まれる要素について、サイズが指定されていない

・JavaScriptによって動的に埋め込まれるコンテンツがある

・フォールバックフォントから置き換わる際にズレが生じる 

などがあり、この中でも画像によってCLSが発生することが多いです。

ところが、今回の変更によって、

画像については、はてなフォトライフから画像を貼るだけで、ズレに対応するようになりました

この変更により、

・今まで対策をしていなかった人は、調べなくても一部CLS対策がされる

・個人で画像の対策をしていた人は、手間が減る

といった恩恵があります。

はてなブログを利用している人なら、とても嬉しい変更ですよね。
非常にありがたい変更ですが、一部注意点もあるので、そちらについてものちほど確認しましょう。

 

画像の遅延読み込み(lazyload)の対応

f:id:hibinomatome:20210619185508j:plain


レイアウトシフトと一緒に、画像の遅延読み込みに対応するようになりました。

画像の遅延読み込みとは 開いているWebページの中で、表示されている画面内の画像だけを先に読み込むこと


じつは、何も対策しない状態だと、Webページに貼りつけられている画像の全てが一度に読み込まれます

どんなに長いページでも、ユーザーがほとんど閲覧しない下部の画像でも、読み込んでしまうのです。

対策しないとWebページの表示に時間がかかる原因になり、ユーザーの離脱につながってしまいます。

この対策が「画像の遅延読み込み」という方法で、遅延読み込みの設定をすると、画面のスクロールに合わせて、見えている画面上の画像だけを読み込みます。


本来なら画像をブログに載せる際に、個人で遅延読み込みの対策をする必要がありましたが、今回の変更によって、画像を貼り付け時に遅延読み込みするようになったので、個人で対策する必要がなくなりました!


このおかげで、Webページの表示速度が上がり、ユーザーが快適にWebページを見られるようになります。

こちらの変更も、はてなブログユーザーなら嬉しいですよね。

ちなみに、この画像の遅延対策もブログの評価に関係してきます。
詳細については、こちらの記事で紹介されているので、よければ参考にしてください。
≫ Lazy Loadで画像を遅延ロードする方法 | クロール対策 | テクニカルSEO BLOG

スポンサーリンク  

 

変更にあたっての注意点

f:id:hibinomatome:20210619185503j:plain

今回の変更にあたって注意点もあります。

それは、本変更が適用されるのは、本機能リリース後に投稿されたエントリだけだということです。

つまり、2021年の6月9日より前に投稿したものは適用されていないのです。

そのため、過去の記事で適用させたい場合は、このあとに紹介する方法を行う必要があります。

 

過去に貼り付けたフォトライフ画像について


今回の変更より前に貼り付けたフォトライフ画像ですが、そのままでは適用されません。

適用させるには、編集モードごとに対応が変わるので、確認していきましょう。

 

編集モード「はてな記法」「Markdown」で投稿した記事


編集モード「はてな記法」「Markdown」で投稿した記事については、記事を更新すると、自動的に今回の変更が適用されます

そのため、画像を貼りなおしたり、「HTML編集」で数値を入力するなどの必要はありません。

 

編集モード「見たまま」で投稿した記事


編集モード「見たまま」で投稿した記事は、記事を再投稿しても、今回の変更は適用されません

そのため、 

・同じ画像を編集サイドバーから貼り付け直す

・「HTML編集」タブを開き、imgタグのwidth,height属性に画像のサイズ情報を入力する

上記のどちらかをする必要があります。

基本的には、画像を貼り付け直すのが簡単です。

画像のサイズ情報を入力して変更したい場合は、以下のように「HTML編集」で情報を入力しましょう。

「HTML編集」での画像サイズ情報の入力

 引用元:はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました - はてなブログ開発ブログ

 URL:https://staff.hatenablog.com/entry/2021/06/09/162329


赤くなっている部分をコピーして、定型文貼り付けで定型文を作っておけば、少しラクに修正できますね。

数字については、ご自身が望む画像サイズの値を入力しましょう。

 

画像が誤った縦横比で表示されてしまうことがある


はてなブログ公式のお知らせによると、ユーザーが作成したテーマを利用している場合、画像が誤った縦横比で表示されてしまう可能性があるようです。

そのような問題が発生した場合、下記の窓口より、問題が発生したテーマの情報と一緒に連絡して欲しいとのことです。
≫ お問い合わせ

もし、表示がおかしいようなら、一時的に別のテーマを変更することも検討しましょう。

 

遅延読み込みを利用できないブラウザがある


遅延読み込みですが、
Safariなどloading属性による遅延読み込みに対応していないブラウザでは利用できません。

対応していないブラウザを使用している人は、個人で対策したり、ブラウザの変更を検討してみましょう。

スポンサーリンク  

 

まとめ


今回のはてなブログの変更ですが、
レイアウトシフトと画像の遅延読み込み対策が画像貼り付け時にされるようになる
という嬉しい変更でしたね。

この変更のおかげで、

・画像による表示のズレがなくなる
・必要な画像だけ読み込み、Webページの表示速度を上げる
・個人で対策する手間が減る

 といった恩恵を受けられることがわかりました。

注意点として、

・過去の記事は適用されない
・テーマによっては間違った縦横比で表示される可能性がある
・Safariなど遅延読み込みで対応しないブラウザがある 

 が挙げられるので、その点に気をつけましょう。

今回の変更で、一段と使いやすくなったはてなブログ。

過去記事の修正が大変ですが、いつも見てくれる人のためにも、わたしも少しずつ修正していく予定です。

今回の記事が参考になったと感じたら、よければシェアよろしくお願いします!