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

2018/05/11

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によって一部インデックスされないという問題に対してLuxeritasのLazy Load機能では独自に「検索エンジンのクローラーに対してLazy Loadを無効化する」という選択ができるのでGoogleクローラー対策はされているようです。この辺が悩ましく私はLazy Load機能は導入していませんでした。そこまで気にする必要ないからです。スクロールなりクリックを閲覧者がしないと一部しか表示させないというLazy Loadの宿命的な手間と時間も私のようなそこまで深い内容など無いサイトでは「閲覧には面倒かなぁ?」とも思われました。GoogleクローラーとLazy Loadとのインデックスが果たして問題無いのかどうなのか確実に見極めた方が良い気もしましたし。

と言うわけでこのLazy Load導入でGoogleクローラーが画像を確実にインデックスしていくのかどうかは私にはわかりません。状況的には大丈夫そうですけどね。

この記事を書くにあたってLuxeritasのLazy Load機能を改めて眺めて、試してみるうちに閲覧者に不便も無くブラウザ表示されるかなり手前から画像表示させる設定でLazy Load導入してみました。ブラウザで表示しきれないかなり下部の画像をLazy Loadで表示させない設定にはしてあるもののスクロールしてブラウザが表示するかなり手前から表示する設定にしてあります。ほとんど該当する画像もあまりありませんけれど。下に長いページで画像がその下の方に無いと意味が無いですから。それでもそうした場合に少しでも表示スピード上がるのならば意味があるので設定しておきました。また、設定外すかもわかりませんけれど。様子見です。

LazyLoad画像の遅延読み込みメニュー

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

投稿・固定ページのlazy Load 有効化

Luxeritaslazyload有効化するためマウスでチェックボタンをクリックする画像

Luxeritaslazyload有効化チェック画像
導入するだけなら「投稿・固定ページのlazy Load 有効化」の左にあるチェックボックスをクリックしてレ点挿入

 

Luxeritaslazyload公開ボタンをクリックする画像
青に白抜きの「公開」ボタンクリックですぐにLazy Load 有効化されます。

スクロールが必要なくらい長い記事では表示されていない部分を読み込んでいなくてスクロールにつれて読み込まれて表示されていくのが感じられるようになります。導入はこれだけです。

注意書きに「※ 投稿記事内の srcset は無効化されます。」とありますけど、Luxeritasテーマの私のサイトのソースでは投稿記事内ではsrcsetはすでに見当たりません。投稿記事以外の「前の記事」や「次の記事」を示すアイキャッチ画像や「関連記事」に上がっているアイキャッチ画像では「srcset = 」としてソースに出てきてはいます。本文中に出ないのが一度 Lazy Load を有効にしたからなのか、Luxeritasテーマの仕様なのかは不明です。詳しくはわかりませんがこの「srcset = 」は、「=」以下に画像のサイズ違いを並べてレスポンシブでブラウザ表示の大きさで使える画像を並べるというWordPressの仕様です。例えばsrcset=”https://wp.com/100×100.jpg 100w, https://wp.com/300×300.jpg 300w, https://wp.com/150×150.jpg 150w” のように画像の大きさだけ違う3種類の画像が並んでソースに挿入されます。ブラウザに表示されるのはこのうち一つだけです。
コレが無効化されるとの事です。

検索エンジンのクローラーに対して Lazy Load を無効化する

LazyLoadで検索エンジンクローラーに無効化チェック入れた画像
ブラウザに表示されていなくてLazy Load によって非表示化されている画像はGoogleクローラーはインデックスしなかったのが、どうやら最近はGoogleクローラーはインデックスしてくれるとの噂です。この辺は確証が取れないのですけど。さらにLuxeritasのLazy Loadでは独自に検索エンジンのクローラーに対してはLazy Loadを無効化して、つまりはそのページのLazy Loadで非表示になる最深部、最下位の画像もインデックスされるようにできます。割と重要と言うか折角、インデックスされないのはもったいないですからLazy Load導入してクローラーにインデックス漏れが起きないようにしましょう。

こちらも注意書きがありまして「※ 大手検索エンジンのクローラーのみ対応。」となっているのでどの検索エンジンにもインデックスされるわけでは無いようです。Googleは大丈夫でしょうけど。

プレースホルダーの色

LuxeritasではLazy Loadの挙動、デザイン、条件などもいろいろカスタマイズできます。

この「プレースホルダーの色」項目の最初にプレースホルダーについての説明があります。
プレースホルダーについての説明
「※ プレースホルダーとは画像が表示される前に仮表示する背景のことです。」
と注意書きにあるように非表示化されている画像はブラウザがスクロールしていくと表示されていきますが、その非表示から表示までの切り替わる間の時間に画像部分に背景色として着色ができます。それがプレースホルダーです。ただ最近は光回線速度が速いので、表示までの時間も高速でチラついているように見えて閲覧者にはありがた迷惑に感じさせることもあります。比較的大きな画像を表示させないとならないサイトなど必要なサイト以外は逆効果にならないようにする必要がありそうです。

プレースホルダーの色を選択した画像
サイトで使用する画像を軽くするのが最近は標準化されていますから、プレースホルダーじたい表示されても画像表示までの時間が一瞬すぎてあまり派手な色だとチラついてうるさく感じられます。ですから赤系統とかしないほうがいいのですが説明のために画像では「プレースホルダーの色を赤系統にした場合」として赤系統の色を選択してあります。「プレースホルダーの色」をクリックするとカラーピッカーが表示されるのでそこでプレースホルダーが必要な場合、サイトに合う色を選択してください。巨大な画像を挿入する必要な場合がたくさんあるサイトでは有効なのかもしれません。

プレースホルダーにスピナーを付ける

プレースホルダーにスピナーをつけるチェックボックス画像
スピナーについても説明書きが親切にも添えられてあります。
「※ スピナーとは画像がロードされるまでに、くるくる回転するイメージ画像のことです。」
ロードされるまで動きがあるので時間を感じさせない効果がありますが、これも光回線が普及して画像でスピナーが表示されるほど時間を待つことはあまりないでしょうし、そんなに画像表示で時間がかかるのなら画像の容量を減らす努力が必要でしょう。それでもサイトによっては巨大画像を載せていくサイトもあるのかもしれませんからそうしたサイトの閲覧者にとってイライラ軽減には役立ちそうです。

threshold (閾値:単位px)

thresholdの値を挿入するボックスを赤くマーキングした画像
「※ ブラウザの表示領域に入る何 px 前に画像の読込を開始するかです。」
と説明が親切にもあります。thresholdは「しきい値」の事でつまりは「境目」ということです。数値を挿入してその数値に応じて画像の読み込みを開始する境目が決まります。ゼロだと画像表示にブラウザにその画像領域がさしかかったその時です。大きな数値だとその数字分離れていてその数値px以内から画像表示されます。

デフォルトだと0になっていているので表示領域に入ると画像表示が始まりますがここに数値を入れてスクロールしてその数値の手前から表示を開始させれば閲覧者がLazy Loadに気づくことなくスムースにブラウジングしていくようにもできるので画像が多めで、閲覧者にはLazy Loadの動作より利便性を大事にしたいし、同時に表示スピードをわずかでも上げたいという場合には使えそうです。

エフェクト・効果

Lazyloadエフェクト設定
Lazy Loadで読み込ませるその時に見せ方がかわります。画像がジワジワかすかに見え始めて次第に全体がハッキリ見えるようになるのが「Fade in(フェードイン)」です。
エフェクトの無い通常の読み込ませ方なら「Show(エフェクトなし)」を選択します。

「threshold (閾値:単位px)」の設定で大きな数値を入れると「スクロール」で表示領域手前で表示開始される場合はエフェクトがまだ表示される前に始まり表示しきってからブラウザがその画像の位置を表示させるわけでエフェクトの意味が無くなります。「プレースホルダー」「スピナー」についても同じです。

イベント

Luxeritaslazyload設定でイベントをScrollにした画像
画像を読み込ませるきっかけ(イベント)を変更できます。
通常はブラウザ表示になったら読み込ませる設定でScroll選択ですが、閲覧者のマウスポインタが画像上に来たら画像読み込みを始めるMouseover、クリックで画像読み込みを始めるClick。

Lazy Load導入で通常は「Scroll」です。

LuxeritasのLazy Load機能は設定項目もあるので閲覧者には画像の遅延表示を感じさせないようにしながらも「threshold」設定で画像表示の手前○○ピクセルにスクロールしてきたら画像表示させることで、サイトアクセスした時にはブラウザに表示されない画像を読み込ませない軽量化でスピードアップとスクロールの利便性を損なわないLazy Load機能という使い方もできます。

Posted by クチコミ探し