紅蓮ブログ

アフィリエイトのことが全く分からないあなたに超簡単に詳しく、実戦形式でお話していくブログです

記事画像の遅延読み込みについに対応!!【はてなブログ】

f:id:slash1196:20210629224904j:plain

はてなブログで書いているけどこの間、画像の遅延読み込みに関するお
知らせがあったんだけど。あれって何なの?どう対応したらいいのかな?
そもそも遅延読み込みって何?どんないいことがあるの?教えて。

 

こんなお悩みにお答えします。

 

 この記事でわかること

  • 画像の遅延読みとは
  • はてなブログは遅延読み込み対応しました!
  • はてなブログで遅延読み込みをするときの注意点
  • はてなブログで画像の遅延読み込みを使う方法

 

こんにちわ、紅蓮です。

 

はてなブログで書いていて、思うのが画像が多くなってくると非常に重たく感じますよね。でも、画像の遅延読み込みってむつかしそうでなかなか手が出せないというのが、本音じゃないですか?

 

今回ははてなブログがついに画像の遅延読み込みに対応した話ですね。

この記事を読むと、画像の遅延読み込みとは何か、画像遅延読み込みに対応しているかどうかがわかります。

 

ちなみにこの記事を書く僕はアフィリエイトは3年目。

今ではアフィリエイトの収益が月3000円ほどいただいています。

 

そんな僕もはてなブログの画像の使い方には難儀した覚えが…。

そんな僕が画像の遅延読み込みについて懇切丁寧にお話しします。

 

ぜひ最後までお読みくださいね。

 

では行ってみましょう。

Here We Go!!

 

画像の遅延読みとは

f:id:slash1196:20210629224502j:plain


画像の遅延読み込みは、画面の見ている画像を先に読み込んで見えていないところは後に読み込むことによってページの表示速度を高速化させる方法ですね。

 

実はブログというのは、ヘッダーからフッターというところまでを一気にコードを上から順に読み込んでいます。

 

写真などが多い場合には、データ量が多くなってしまい、読み込むのに時間がかかってしまいがちなんですね。

 

下記には図解も用意しました。

f:id:slash1196:20210629170311j:plain

 

画像の遅延読み込みのメリット

ここでは画像遅延読み込みのメリットをお話しします。

 

メリットは、以下の通り。

 

  • メリット①ユーザビリティが上がる
  • メリット②SEO対策にもなる

 

では詳しく見ていきましょう。

 

メリット①ユーザビリティが上がる

ブログに画像遅延読み込みを入れるメリットの1つ目は、ユーザビリティが上がることです。

 

というのも表示速度が速くなるからです。

 

早くなる分じっと待っている時間が無くなりますよね。

 

画像以外のものはすぐに表示されますから、知りたいこともすぐに知ることができます。

 

だから画像の遅延読み込みをしておくと、使いやすさが増すんですよね。

 

>メリット②SEO対策にもなる

ブログに画像遅延読み込みを入れるメリットの2つ目は、SEO対策にもなるということです。

 

というのも実はこの遅延読み込み、Google先生が推奨しているからなんです。

 

というのもGoogle先生は、Googleの掲げる10の事実の中でGoogle先生は以下のように言っていますね。。

 

遅いより速いほうがいい。(Googleの掲げる10の事実より引用)

 

そのために、読者目線で見たときにはやはり画像の遅延読み込みをするほうが読者を待たせなくていいでしょうからいいですね。

 

だから、SEO的にも掲載順位が上がる可能性が高いんです。

 

はてなブログは遅延読み込み対応しました!

f:id:slash1196:20210629225057j:plain

実は、はてなブログさん。

 

2021年6月9日に、遅延読み込み機能を標準装備になったことを発表しました。

参照記事:はてなフォトライフの画像を表示する際に、画面にズレが生じないよう変更しました 

 

このためにメリットがめちゃめちゃ出たんですよね。

 

はてなブログが遅延読み込みに対応したことによるメリット

はてなブログが遅延読み込みに対応したことによるメリットは、以下の通り。

 

  • メリット①遅延読み込みするためのユーザーの対応が大幅に軽減される
  • メリット②初心者の人でも表示速度を改善できる

 

では詳しく見ていきましょう。

 

メリット①遅延読み込みするためのユーザーの対応が大幅に軽減される

はてなブログが遅延読み込みに対応したことによるメリットの1つ目は、遅延読み込みするためのはてなユーザーの対応が大幅に軽減されることです。

 

今までは、以下のようなことをしないといけなかったんです。

  • やること①:jqueryを読み込ませる
  • やること②:javascriptコードを書き加える
  • やること②:loading属性を各記事の写真の中に追加する

 

それが画像を貼った時点で、遅延読み込みができる状態になっているので、超簡単ですよね。

 

大幅な手間の削減です。

非常にメリットですよね。

 

メリット②初心者でも表示速度を改善できる

はてなブログが遅延読み込みに対応したことによるメリットの2つ目は、初心者でも表示速度を改善できることです。

 

今までは表示速度を改善するときに、画像の遅延読み込みに対する解説があってもむつかしそうという理由で、あきらめる人も少なくなかったんじゃないかなと思います。

 

というのもjavascriptが絡むと本も高いですし、むつかしいコードを書くのはハードルが高いですよね。

 

でも今回画像の遅延読み込みについに対応したことによって、むつかしいコードを覚えることなく、ブログの記事により専念することができますね。

 

これは、大きなメリットですね。

 

はてなブログで遅延読み込みをするときの注意点

f:id:slash1196:20210622210430j:plain

ここでは、はてなブログで遅延読み込みを使うときの注意点をお話しします。

 

注意点は、以下の通り。

 

  • 注意点①ブラウザにより非対応のものがある
  • 注意点②過去の記事には注意が必要
  • 注意点③アプリの場合は自動化できない

 

詳しく見ていきましょう。

 

注意点①ブラウザにより非対応のものがある

はてなブログで遅延読み込みを使うときの注意点の1つ目は、ブラウザにより非対応のものがあることです。

 

この画像遅延読み込みの方法は、loading属性を書き込むことによって画像の読み込みを遅らせるものなんです。

 

ブラウザが対応していないと話にならないんですよね。

 

でもloading属性に対応していないブラウザもあるんです。

 

例えば、iPhoneユーザー御用達のSafariがそうですね。

 

そのためにブラウザーから画像を貼り付けても、Safariで確認すると自動で追加されている属性がないので、結果一気に読み込まれることになります。

 

だから見るときには、Firefoxchromeで見るのがいいですね。

 

注意点②過去の記事には注意が必要

はてなブログで遅延読み込みを使うときの注意点の2つ目は、過去の記事には注意が必要です。

 

実はこの変更なんですが、記法によって過去記事に適用されるかされないかというのが変わってくるんです。

 

はてなブログには以下の3つの記法があります。

 

  • はてな記法
  • Markdown記法
  • そのまま記法

 

はてな記法やMarkdown記法の場合は、そのままブログの過去の記事にも反映されます。

 

というのも、はてな記法やMarkdown記法の場合は、書いた記号や文字自体をHTMLに変換する記法だからです。

 

そのまま記法を使っている場合は、HTMLでの変更が適用されません。

 

そのために、以下の二種類のどちらかを選んで処理をしないといけません。

 

  • 処理法①同じ画像をもう一度貼りなおす
  • 処理法②HTML編集で、画像のタグの中にwidth,height属性とともに入力する

 

処理法①同じ画像をもう一度貼りなおす

まず1つ目の処理法は一度画像を消して、もう一度画像を入れなおす方法ですね。

 

これは結構簡単なんです。

というのも、感覚で処理ができるから。

 

画像を変える一番簡単な方法ですね。

 

処理法②HTML編集で、画像のタグの中にwidth,height属性とともに入力する

2つ目の処理方法は、HTML編集で、画像のタグの中にwidth,height属性とともに入力する方法ですね。

 

以下の文字列をご覧ください。

上が変更前で、下が変更後です。

 

<!--変更前-->

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/slash1196/20210628/20210628232717.jpg" alt="" title="" class="hatena-fotolife" itemprop="image" />

<!--変更後-->

<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/slash1196/20210628/20210628232717.jpg" alt="" width="640" height="470" loading="lazy" title="" class="hatena-fotolife" itemprop="image" />

 

この赤くなっている場所が、実は入力するべき場所ですね。

 

 width,height属性が必要な理由

実はこんな経験ありませんか?

 

スクロールしていたら、いきなり画像があらわれてガクッと文字が下がり、どこまで読んだか分からなくなったこと。

 

このレイアウトがずれてしまう現象、「レイアウトシフト」っていうんですよね。

 

原因は、ブログ自体が画像の大きさを知らないからなんです。

 

家に家具を買うときにも入るかどうか確認しますよね。

あれと同じような感覚。

 

で、この現象を回避するためには、画像を貼り付けるときに画像サイズをあらかじめ指定して、場所をあけておいてあげる必要があるんです。

 

だからwidth,height属性の指定が必要なんです。

 

注意点③アプリの場合は自動化できない

3つ目の注意点は、アプリの場合は変更の自動化ができないことです。

 

というのもスマホの場合には、はてなフォトライフにある画像を使わないからですね。

 

パソコンの場合ってはてなフォトライフにアップロードするんですけど、スマホの場合は写真に簡易的な画像の番号を入れて後に処理するという順番になるためですね。

 

するとフォトライフを使わずに入れるので、はてなブログが処理をできないのからですね。

 

だから、処理をしないといけませんね。

 

やり方に関しては、注意点②過去の記事には注意が必要の対処法をお読みいただければわかりますね。

 

はてなブログで画像の遅延読み込みを使う方法

f:id:slash1196:20210621022519j:plain

はてなブログで画像の遅延読み込みを使う方法は以下の通り。

 

  • ①記事の好きなところにカーソルを置く
  • ②画像を入れる

 

たったこれだけです。

 

普通に記事を書いて画像を入れるときと同じ感じです。

 

ですから実質何もすることはないですね。

 

まとめ|遅延読み込みに対応することで表示速度に改善の兆しが…

お疲れさまでした。

ここまで遅延読み込みに関するお話をしてきました。

 

まとめると以下の通りですね。

 

まとめ
  • 画像の遅延読み込みとは、画面の見ている画像を先に読み込んで見えていないところは後に読み込むことによってページの表示速度を高速化させる方法。
  • 画像の遅延読み込みには、以下のメリットがある。
    • メリット①ユーザビリティが上がる
    • メリット②SEO対策にもなる
    • はてなブログは遅延読み込み対応しました
    • 遅延読み込みを対応したことでユーザーにかかるメリットは以下の通り。
    • メリット①遅延読み込みするためのユーザーの対応が大幅に軽減される
    • メリット②初心者の人でも表示速度を改善できる
  • でも注意点もあり、以下の通り。
    • 注意点①ブラウザにより非対応のものがある
    • 注意点②過去の記事には注意が必要
    • 注意点③アプリの場合は自動化できない
  • 使い方は簡単今までの画像の使い方と同じで、画像を貼るだけ。
  • アプリの場合は、PCから書き込むのがいいですね。

 

画像の遅延読み込みに対応したことによってより、記事に集中していくことができますね。

 

うれしい限りです。

 

これからも記事を書くのを頑張っていきましょう。

 

最後にちょっと宣伝を!!

当ブログでは、現在月3000円というアフィリエイト収益を得る僕が、アフィリエイトをしたことがないあなたにアフィリエイトに関する考え方ややり方をわかりやすく解説する記事を毎日更新中です。

 

コメントや読者登録をしていただけると嬉しく思います。

→読者登録をする

 

またこのほかにも以下のような記事を書いています。

ぜひお読みになってくださいね。

 

【あなたにおすすめ記事】

 

はてなブログは、記事を書くことだけに集中できるプラットフォームです。

そのために非常に、おススメです。

 

いい記事を書くのには適しているので、是非とも下記よりお申し込みくださいね。

はてなブログPro

 

 

ってことで今回はこの辺で。

また次回に。