プログラミング学習

【JIN】でアイキャッチ画像が表示されないときの対処法

小一時間くらいかかってやっと解決したので、備忘録として残しておきますネ。

 

ちなみに私が陥ってしまったのはこんな感じです☟スマホ画面なので縦長です。

トップページのアイキャッチ画像がずっとクルクル回っていて表示されない。

スマホ画面のみで、PC画面上では問題なく表示されている。

 

解決策:

プラグイン「Lazy Load」を停止せよ。

 

プラグインを見てみよう

JIN公式サイトの見解では、「Jetpack」というプラグインが原因だよって書いてあったけど、私はその「Jetpack」を入れていなかったので全く解決にならなかった。

 

他にもいくつか検索にヒットしたページを読んでみたけど、どれも解決しませんでした。

ヒントになったのは「サルワカ」の一文

そもそもこのエラーになってしまう10分前くらいには普通にアイキャッチが表示されていたので、何かしら設定を誤ったんだろうなと思っていました。

しかも、表示速度を上げるために画像圧縮系のプラグイン設定をいじりまくっていたので。

 

そんななか、ちょうど見ていたサルワカさんページの一文にピンと来た。

 

遅延ロード(英名:Lazy Load)という手法を使えば、画像を効率的に読み込むことができ、表示速度を上げることができます。

遅延ロードとは、「最初に全ての画像を読み込む」のではなく「スクロールにより画像に近づいたときに読み込み」を行います。つまり、はじめに読み込まれるのは前半の一部の画像だけになるので、ページの表示速度が上がるのです。

WordPressの高速化〜表示速度を上げる12の技〜:サルワカ

 

あぁ、Lazy Loadというプラグインは何だか見覚えがあるな。

しかもスクロールによって近づいたときに画像を読み込むってことは、トップページの画像ってそもそも近づいてるわけだし、なんかそこでエラー起きてるっぽい?

 

ポチ(Lazy Load停止)

 

というわけで解決いたしました。

 

その後の処理について

Lazy Loadというプラグインを使うことによって、必要な時だけ画像を読み込ませることにより表示速度を速めたかったわけですが、今回の件で使えなくなってしまいました。

アイキャッチは表示されても、表示速度の問題が出てきてしまったので、表示速度については別のプラグイン「EWWW Image Optimizer」を使うことにしました。

この「EWWW Image Optimizer」は画像圧縮してくれるプラグインで、すでにアップ済みの画像もまとめて圧縮してくれるので楽ちんです。

こちらもサルワカさんページにまとめられています。

 

こちらでひとまず様子を見てみようと思います。

以上、現場からでした。