画像の遅延読み込み「Unveil Lazy Load」がストークと相性が悪かった話

こんにちは、アキです。

このブログに導入している画像の遅延読み込みプラグイン「Unveil Lazy load」がこのブログテーマ「ストーク」との相性が悪く、一部で不具合が発生してしまったので記録しておきます。

画像の遅延読み込みとは

画像の遅延読み込みプラグイン

Unveil Lazy Load – WordPress プラグイン

ページにアクセスした際に、画像ファイルの読み込みを後回しにして表示速度を早めることができるプラグインです。表示されていない部分の画像ファイルは、ページのスクロールに合わせて読み込んでいくシステムです。

ページの読み込み速度を高速化させるには必須なプラグインです。僕のブログも画像ファイルが多いブログなので、画像の遅延読み込み効果はとても大きいものです。

画像の遅延読み込みプラグインの種類は多く、その中でも「Unveil Lazy load」を使用していました。

ストークで発生した不具合について

そもそもストークは公式に遅延読み込み系プラグインとの相性が良くないという説明が出ています。それでも今まで僕のブログでは不具合がなかったので「Unviel Lazy Load」を使用していました。

アイキャッチが表示されない

今回ブログ内で起きたのは「スライダー表示させた一部の記事のアイキャッチが表示されなくなる。」という不具合です。

今まで使用していなかった機能だけど、ちょっと使ってみるかーってスライダー表示させたらアイキャッチが表示されないの。

スライダー表示というのは、ピックアップしたい記事に「pickup」タグを付けるだけでスライダー表示させることができるストークの機能のこと。その記事の一部でアイキャッチが表示されない不具合が発生しました。

ちなみに、スマホ表示だと不具合は無し。PC表示のみの不具合でした。

とりあえず調べてみると、画像の遅延読み込みプラグインの「Unviel Lazy Load」が原因だと発覚します。このプラグインを切ると不具合が直ります。

別の記事一覧とかでは不具合は出たことなかったので、ずっと「Unviel Lazy Load」を使用していました。

「Unviel Lazy Load」を切ればスライダー表示を正常に使用できますが、画像の遅延読み込みがなくなってページの読み込み速度が落ちてしまいます。

でも「Unviel Lazy Load」を使うならスライダー表示を諦めるしかないという。困った。

他のプラグインを試してみた

画像の遅延読み込みプラグイン

Lazy Load – WordPress プラグイン

「Unviel Lazy Load」ではなく別のプラグイン「Lazy Load」を試しにインストールしてみました。類似プラグインです。

一回入れたことあるんだよな、何か不具合があってか「Unviel Lazy Load」に乗り換えたのを覚えているような気がする。

とりあえず遅延読み込みプラグインを「Lazy Load」へと変更すると、なんと直りました！

スライダー表示の記事のアイキャッチは正常に表示されてました。プラグインによって相性も変わるようですね。

と思ったら…

やっぱりアイキャッチが表示されない不具合が発生。

今回の場合、ページを読み込んだ段階では全ての記事のアイキャッチは表示されているんだけど、徐々にスライドされて出てくる記事のアイキャッチが表示されないという不具合。

ただ前回と違ったのが『少しでもスクロールすれば非表示だったアイキャッチが全て復活する』ということ。

すぐに少しでもスクロールしちゃえば不具合が出ない。アイキャッチの消えた記事が出て来てもスクロールするとパッと復活する。

ページにアクセスしてジッとしてる人なんていないよね？

すぐスクロールしちゃうよね？

それを気にしなければ、この組み合わせで使っていこうかなと思う。と言いたいけど気になっちゃうよね。ジッとしているとアイキャッチの無い記事が出てくるんです。気になるよ。

やっぱり公式が言うとおり遅延読み込み系のプラグインとは相性が悪いようですね。

まとめ：共存は無理なのか

今のところ、まったくの不具合無しで両者を共存させられていません。

うーん、どうしよう。せっかくストークを使っているのだからスライダー表示は使いたいんだよな。（これまで使用していなかったくせに）

とりあえず①の少し不具合が残るけど両者を共存させた状態でいようと思うけど、もしどちらかを諦めるとしたら「pickupスライダー」を消すかな。急に消えたらそういうことだと思ってください。

やっぱり読み込み速度は大事だ。このブログは画像ファイルが多いから遅延読み込みさせないとキツい。

不具合なく両方いけるよって方法があるのなら教えて貰えると嬉しいです。

以上が、画像遅延読み込み系プラグインとストークとの相性が悪いというお話でした。