jQueryプラグイン

FC2ブログでAkira先生のLazyLoad(画像遅延読み込み)が”えぐい”ぞ~♪

0 0

弊記事には先ずは Lazy Load(レイジーロード) の利用効果サンプル画像を最初に載せておりますのでご承知下さい。

【 Lazy Load 利用の効果サンプル画像 】 Lazy Load 利用の効果サンプル画像

弊ブログには エンターページ(表紙)とトップページ があります。

エンターページ : https://oops0011.blog.fc2.com/ 
トップページ : https://oops0011.blog.fc2.com/page-0.html 

このトップページが開くときに、画面内に表示される主な画像(上図サンプル画像で楕円に囲った部位の画像のこと)には、 LazyLoad(画像遅延読み込み) によりふわっと一瞬画像が遅れて表示される仕様に設定されておりますが、弊記事は記事内に表示される個別画像にも LazyLoad を利かせることについての解説記事です。



Lazy Load(レイジーロード=画像遅延読み込み)ってなに?

皆さんがいろいろなブログを閲覧している時、マウスで下へスクロールして行くと、画面下から画像がふわっとした感じで現れるように表示されるものに出会ったことがあると思います。

これ、大抵は Lazy Load(レイジーロード) と言うjQueryプラグインによるWebテクニックが使われていて、システム的に「画面に見える範囲の画像だけ読み込み、画面外の画像は読み込みと表示を遅らせる」ものなんですね。

でもこの方法は、そのようなふわっと現れるエフェクト(効果)を演出する為のテクニックではなくて、本来の目的は「負荷の掛かる画像表示のタイミングを意図的に遅らせて、そのあいだに画像以外のブログ構造全体の表示を先に完成させることにより、結果としてブログ表示の完結をより速める」と言う目的があってのテクニックでして、そのふわっと画像が遅れて表示されるのは副産物的効果であって、けっしてそれがメインではないと言うことです。

今の時代は、インターネットスピードもパソコンやスマートフォン等のモバイル機器でも高性能化によって画像もかなりスムースに表示されるようになったんですが、一昔前ですと、画像一枚500kbを超えるようなファイル容量があると、瞬時にパッとは表示されずギコギコギコ(笑)って感じで徐々に表示されていくような感じだったんです (^_^; アハハ…

表示が重たいブログは閲覧者に敬遠され途中で離脱されてしまう

ですから、その1枚の画像が全て表示されるまでは、ブログの記事はもちろん他の部位がまったく表示されなくて「画像の表示が終わるまで暫く待ってね!」って感じになってしまうものだから、それを待ちきれない人はもうその場で閲覧を止めてしまって、さっさと別のブログへ行ってしまったりしてたんです、当時の筆者もでしたが(爆)

そういう、なかなかブログ全体が表示されないのを一般的に「重たいブログ」とも言いますが、実は今の時代でもそのような状態のブログはたくさんあって、一度「このブログは重たいからねぇ (´ヘ`;)ハァ」なんて印象を持たれてしまうと、相互リンク友達であってもやがては閲覧の手が遠のくことも起きてくるものです。

まぁ、常時お互いにコメントなどの交流をしあっているお友達繋がりの心が大きいお相手ブログでしたら「我慢してでも表示されるまで待つ」んでしょうけど、特にそのような間柄ではない場合には、閲覧は断念して他へ行ってしまうものです。(途中離脱率の高いブログになってしまう)

「ブログが重たい」原因はファイル容量の大きな画像ばかりとは限らず、サイドバーや記事欄等にペタペタと貼り付けているアフィリエイト広告やJavaScriptを多用したブログパーツが原因になっていることもあり得ますから、一概に「画像が原因」とも言い切れませんが、でも大抵は画像が主原因になっていることが多いんです。

ブログに貼る画像はファイル容量を軽量化処理してから貼るのが基本ですよ

注) ブログに画像を貼るのは「画像のファイル容量(縦横サイズのことではありません)を軽量化処理してから貼る」ことが当たり前的基本ですからね。
ファイル容量の軽量化をしないままに画像を貼り付けることは、ブログ全体の表示に余分なストレスを掛けるだけでなく「あなたのWeb知識の無知さを露呈する行為」になってしまいますので気をつけましょう。

画像のファイル容量(縦横サイズのことではありません)を軽量化するには、いろいろな画像処理ソフトを使ったり


このような無料サービスを活用する方法もありまして、上記2つのWebサービスは有名で筆者も常用しており、特に Compressor.io の方は、あのピコピコと動くGIFアニメーションまでも軽量化出来てしまうとても優れたサービスです。

さて、そのようにファイル容量の軽量化を図ってブログに貼り付けても、画像はやはり文字列などに比べたら遙かにファイル容量の大きなコンテンツであることには変わりはないですから、弊記事主題である Lazy Load のようなテクニックを利用して、ブログ全体の表示のストレスの軽減を図るのは大変有効な手段なんです。

LazyLoad のふわっと画像が表示される感じは「重たいブログ」に勘違いされる!

LazyLoad を利用しているブログでは、マウスで下にスクロールして現れる画像が「ふわっと表示される」のは副産物的効果と言いましたが、このエフェクト(効果)がカッコイイ(笑)と見る方は「何らしらのWebテクニックを使っていると理解出来る人」でして、そのようなWebテクニックを知らない多くの一般的閲覧者さんの目には単に「重たいブログ」のように映ってしまうことが多いんです (^_^; アハハ…

LazyLoadを利用しても重たいブログと勘違いされない方法

ですから、LazyLoadをブログに取り入れるにしても、その「ふわっ」と感は意図して表現しない方が閲覧者向けになり 『 こ、 このブログって重いの? (^^;; アセアセ 』 って勘違いされない方法になると言うことなんです!

マウスで下にスクロールして行ってモニター画面に現れてくる画像は「もう既に表示されている」ように見せる方が自然で、かつ「重たいブログ」と勘違いされない方法と言うことでして、画面下に現れるそのちょっと前から「さぁ、画像表示を始めましょうね~」的な設定をする方がベターと言うことなんです。

筆者的には、それが LazyLoadの賢い使い方 のように思います d(-_^)good!!

像の画像

こんな重た~い像さんがいても、ストレスなくブログ表示が出来るようにしたいものですね~(笑)

筆者がいつも「Web知識の師」と敬愛しております Akira先生  制作のレスポンシブテンプレートの一つであり弊ブログでも利用させて戴いております 「Axis最新版」  にも、もう既に筆者が望んでいたまさにそのテクニックが組み込まれておりますし、その他のレスポンシブテンプレートにも既に組み込まれているものもあります。

そんな”えぐい”LazyLoadの利用のしかた【初級編】は下記ブログカードのAkira先生の記事をご参照下さいね~。

Lazyloadを使ってみる【初級編】 - カスタマイズ

画像の遅延読み込み、一般的に Lazyload といわれるものですが、こちらを実際に使ってみようの巻 (´・ω・`) 手順及び説明など全て、私が制作したテンプレート上での作業であることが前提で、他製作者様テンプレートに関する言及は一切ありません。 ...

さてさて、記事文末ではありますが、弊記事には画像を2枚貼ってあり記事冒頭の1枚目画像は弊記事を開いた瞬間に表示位置が画面内にあるものですから、LazyLoadによって画像が表示されるのにちょっとタイムラグがあることが分かりますが、その間にブログ全体の表示を済ませてしまっており、それから冒頭画像が表示されている次第で、かつ記事を読み進めてスクロールして行って画面内に現れる2枚目の「像さん画像」は筆者が望むように、もう既に始めから表示されていることに、閲覧者のみなさんはきっと気がついたことでしょうけど、それが自然ですよね!


検索からの方は
トップページへもどうぞ
関連記事

Comments 0

There are no comments yet.

Leave a reply