カスタマイズ(外観)21項目-Lazy Load

Googleがサイトの評価基準に「軽さ」、つまり読み込みスピードの評価を加えてきてからウェブサイトは全体的に様変わりしました。画像サイズを小さくして軽くしたり、wordPressのテーマもLuxeritasのような軽快なテーマが高評価になってきています。表示スピードをいかに速くするのかネット関連の方々が工夫してきています。モバイルではネット環境がPCほど帯域が広くなくさらに出先で見るのでじっと表示されるのを待つ余裕も無い場合もあるでしょうからね。

表示を速くするには余分な物を削除していくのが一番ですが、Lazy Loadという技術的に表示ファイルを縮小してしまう方法があります。ブラウザが表示している部分は読み込みますが、表示の外にある部分、つまりスクロールやクリックしないとブラウザで表示されていない画像は読み込ませないことで表示させる容量を限定し、表示スピードを速くする技術です。WordPressのプラグインで「lazy load」と検索するとたくさんヒットします。WordPress本体には無いのでプラグイン導入しないとならないわけですが、プラグイン無しで当たり前のように装備されているLuxeritasは凄いですね。

ただし、Lazy Loadはスクロールやクリックをきっかけに非表示から表示に切り替わるのでGoogleのクローラーがインデックスしないと言う懸念があります。

Lazy LoadはSEOに不向き? Lazy Loadで表示する画像をGooglebotは認識できないことがある

反対にすでにこの問題は解決されていて無事、Lazy Load導入されていても画像がインデックスされているとの見解も出ています。

The lazy loading SEO problem, SOLVED!

Lazy Load導入でGoogleクローラーが画像を確実にインデックスしていくのかどうかは私にはわかりません。状況的には大丈夫そうですけどね。ただ個人的には私は無効化しています。あまりはっきりしない事柄について有効化するメリットとして表示のある程度の高速化は私レベルのウェブサイトにはそこまで必要無いと判断しました。ただ、画像がふんだんにサイト一杯にあって、ファイルサイズの大きいウェブサイトですとか無料ホスティングサービスをご利用で回線が細いなどの場合にLazy Load導入は有効なのかもしれません。

Lazy Load 画像の遅延メニューの画像


スポンサーリンク

Lazy Load(画像の遅延読み込み)

「※ この機能は Intersection Observer API を使用しています。」とあります。
Intersection Observer APIという信頼性のあるAPIでLazy LoadされるようにLuxeritas 3.1.4以降に変更がありました。細かく部分ごとにLazy Load(画像の遅延表示)されるように設定が可能です。

各種サムネイル画像の Lazy Load 有効化

各種サムネイル画像の Lazy Load 有効化にチェックを入れた画像
画像をLazy Loadでブラウザに表示されないものは読み込みをしなければそれだけブラウザ領域の表示が速くなります。

投稿コンテンツの Lazy Load 有効化

投稿コンテンツのLazy Load 有効化にチェックを入れた画像
画像以外部分のテキストなど投稿コンテンツ部分のLazy Load有効化チェックボックスです。

サイドバーのLazy Load 有効化

サイドバーのLazy Load 有効化にチェックを入れた画像
サイドバーにウィジェットが多いサイトなどでは効果がありそうです。
※ ウィジェットのスクロール追従領域の動作に異常が出る場合があります。
との但し書きがあるのでスクロール追従動作を有効化しているようならチェックしない方が無難です。

フッターの Lazy Load 有効化にチェック入れた画像
フッター部分は通常は特には必要な情報も無いウェブサイトもあるかと思います。そうした場合にはチェックを入れると表示スピードに寄与します。逆にそれほど情報量が無ければフッター部分のファイルサイズも大して大きくないでしょうから変わらないかもしれません。

 Gravatar の Lazy Load 有効化にチェック入れた画像

Gravatarって何?って思う方もおられますでしょうけど、アバターとか言いましてTwitterとかYoutubeでコメントやツイートしたときに表示させるアイコンの事です。
Gravatarの例として書き込み画像を表示
書き込むとそれぞれにアイコン画像が付きます。もちろん非表示にもできます。このアイコン画像を表示させる際にLazy Loadでブラウザ表示されていない部分については非表示でブラウザに表示されるタイミングで表示させるということができるわけです。

Javascript が無効でも画像を表示する

Javascript が無効でも画像を表示するにチェック入れた画像
これはデフォルトでチェックが入っていると思いますが、どのページでも画像表示しないという特別なウェブサイト設定でも無ければチェックしたままの方が無難です。

エフェクト・効果

エフェクト・効果 Fade-in (フェードイン)Show (エフェクトなし)の画像

Fade-in (フェードイン)

こちらにチェックを入れるとLazy Loadが有効になっている部分がブラウザに表示される際に徐々に表示されるフェードインという表示のされかたになります。

Show (エフェクトなし)

こちらにチェックが入っているとエフェクト無しでブラウザの表示エリアに入った時点で表示に切り替わります。