【lazyload】プラグインを使わずに画像遅延を目指す。

山林生活
ウェブ関連
【lazyload】プラグインを使わずに画像遅延を目指す。

【lazyload】プラグインを使わずに画像遅延を目指す。

［更新日］2023/03/16

［著作者］山林生活

構造化データが思うように動いてくれない。
タグの書き方なのか、そもそも当サイトがその域に達していないのか。

画像を指定するもその画像が表示されない。
検索結果のスニペットとして評されているページもあるのですが、私が指定した画像ではなく別の画像を表示している。

一応Googleコンソール上では構造化データがあるということを認識してくれているのですが、それが一切反映されません。

このように画像の部分は反映されていないのですが、パンくずリストと日付に関してはしっかりと反映されています。問題はこの日付に関して。

ページをアップロードした日付がスニペットとして表示されるのですが、ページを更新したとしても日付に変化なし。これでは古いままのページとして検索した人は認識してしまいます。

画像は表示されない。日付は更新されない。

それだったらもうこんなゴミような機能なんて捨ててしまえばいい。

ということで削除しました。一応パンくずリストに関しては使い勝手が良さそうなのでそれを残しております。またメタディスクリプションとタイトルについても残せそうなので残しました。これでまた元に戻ってしまいましたが、日付が更新日になってくれるのであればこちらとしてはその方がよいです。画像はなんだかんだで表示されているページもあります。恐らくアクセスが良く、Google先生が認めてくれているページなのでしょう。

別に構造化データなんて不要。Google先生がどうにかしてくれるわけです。

もう迷わない。ただ記事を量産し続け、記事数で叩く形を選びます。

しかし、PV数を増やすために小さな作業は必要ではあります。サイトが重ければアクセスされたとしても直帰してしまうこともあります。サイト速度が遅ければ離脱率も高くなってしまいます。せっかくアクセスしてくれたのにそのまま取り逃がしてしまうわけです。ここを改善するためにはサーバー移管をするしかないのですが、それ以外にもできることがあるならばやっておいて損はありません。

ブログの基礎は文章です。しかし文字を読むのがだるいって人も一定数います。画像を見に来る人だっているわけです。そのため画像というのもブログにとっては重要なポイントです。しかし画像が多ければその分読み込み速度は遅くなります。とくに画像は年々画質が高くなっており、その分容量も必要となります。

小さな画像では見づらい。かといって大きいと読み込みが遅い。塩梅というのは難しいものです。

ここに関してはサーバーを移管したとしてもずっと続く課題です。
読み込みを早くして、かつ鮮明な画像を提供する。読み込みが遅ければ離脱につながり、画像が粗ければ見栄えも悪くなってしまいます。
見栄えを良くし、読み込みも早くする。それを目指すためには読み込み遅延という形を取るのがよいのでしょう。

読み込み遅延とは画像の読み込みをあとにしてとりあえず文章と見える箇所だけ読み込む形です。とくにスマホで見る場合、ブログは縦長になっています。上からスクロールして読んでいくわけですが、下の方はスクロールしなければ見えないわけです。だったらスクロールするまで見えていない画像は後回しにして、その後回しにした力を見える部分に注力しようというのが遅延読み込みの機能になります。

一応、ワードプレスには画像の遅延読み込みのプラグインが存在します。しかしこの手のプラグインは大体何らかのトラブルの元凶となっております。私は過去、この手のプラグインを利用してサイトがホワイトアウトして冷や汗をかいた経験があり、どうしても使うのに不安があるのです。恐らくワードプレスを触ったことがある人は画像遅延のプラグインとキャッシュ系プラグインには大いに悩まされているのではないでしょうか。キャッシュ系プラグインを使うと読み込みが早くなるんですが色々と問題がありますからね。とくにワードプレスのバージョンをあげた時とかに不具合が生じ、夜通しそれの修正作業を余儀なくされることもあるわけです。

出来ればプラグインを使わずに、画像遅延が出来ないだろうか？

そんなのを探していたところ見つけました。

「lazyload="on"」というタグです。

そうです。ただのタグです。スクリプトでもなんでもありません。タグを打てば画像遅延が出来るという代物です。

とはいっても現在、まだこのタグは試験段階で実装されているブラウザは一部のるChromeだけのようです。
でも今後実装されればプラグインを使わずともこのタグだけで遅延読み込みができるわけです。

lazyloadがonの場合は可視状態になるまで遅延をしない。
つまりスクロールをして見えるところになれば読み込みを開始するというわけです。offの場合は通常通りの読み込みになる形です。

使用方法は簡単でただ単にimgタグの中に「lazyload="on"」を入れていればよいだけです。こういうのを求めていたんですよね。

今後これが発展していけばプラグインを使わずに遅延が出来ます。またデフォルトで遅延となり、それを解除するためのタグという形になるでしょう。とりあえずタグを入れてみて「Google Chrome Canary」ブラウザで確認をしたところ遅延読み込みがされています。一度読み込むとキャッシュとして残るためキャッシュがあれば即座に読み込むような感じになっています。まだまだ実用化まで先になりそうですが、恐らくこの先実装されるのではないでしょうか。そのため入れてみました。

この遅延読み込みにjpegをwebpに代替できるようにすれば画像の読み込みのロスは軽減されるのではないでしょうか。webpの代替についてはサーバー移管をしなければできないため、それはまた別のおはなしということで。