Cocoonの画像遅延読み込みから特定画像をタグで除外する

WordPressテーマ「Cocoon」の高速化を行うと、サイトが表示されたとき一瞬だけガクッと動くようになります。ここではガクッとなってしまう原因とその対処法を解説します。

Cocoonでサイト表示がガクッとなる原因

Cocoonでサイトを表示した瞬間にガクッとなる原因は、Cocoon設定「高速化」から行った画像のLazy Load設定「遅延読み込み」が原因です。

高速化の設定は「WordPress管理画面→Cocoon設定→高速化」から行います。

画像の遅延読み込みを設定すると、一瞬画像なしのサイトが表示され、あとから遅れて画像が表示されるようになります。

容量の少ないテキストを最初に読み込んで、容量の大きい画像ファイルを遅れて読み込むことでサイト表示を高速化させるのがLazy Load「画像の遅延読み込み」です。

遅れて表示された画像の高さ分、サイト表示が動いてしまうのがガクッとなる原因です。

特に影響が大きいのがサイトを開いた瞬間、つまりファーストビューに表示される可能性の高いサイトロゴ、エントリーカードのサムネイルなど、サイドバーに表示したプロフィールのアバター画像などです。

ファーストビューとは、ユーザーがページにアクセスした時に最初に表示される部分、スクロールせずに画面に表示される部分のことです。

ガクッとならないようにするためには画像の遅延読み込みをやめることです。

しかし、ガクッとなって気になるのはサイトや記事を開いた瞬間、つまりファーストビューがほとんどなので、記事途中の画像は遅延読み込みでも問題ありません。

そこでオススメなのが画像のタグを指定して遅延読み込みから除外する方法です。

この設定を行えば特定の画像だけを遅延読み込みから除外することができます。

また画像名を指定して特定の1枚だけを除外することも可能です。

タグで指定する場合は一枚一枚指定するのではなく、アイキャッチ画像や記事カードのサムネイルなど、表示箇所を一括で指定することになります。

画像名を指定すれば、その画像1枚だけを遅延読み込みから除外することもできます。

遅延読み込みから除外するにはCocoonの「高速化」設定の「Lazy Load設定→遅延読み込み」から除外したい画像のタグまたは画像名を指定します。

「Lazy Loadを行いたくない場合は、該当するimgタグに含まれている文字列を改行区切りで入力してください。」とあるように、タグごとに改行することで複数のタグを指定できます。

主なファーストビューに表示される画像のタグを載せておくので除外する場合に使用してください。

トップページはサイトロゴ、記事一覧のサムネイル、プロフィールのアバター画像があります。

特定画像1枚だけ除外する場合はタグの代わりに「logo.png」など画像名を記入します。

自分で除外したい画像のタグを調べたい場合は以下を参考にしてください。

まずGoogle Chromeで目的のサイトを開いてから「F12」を押してデベロッパーツールを起動します。

ここでは例としてアイキャッチ画像のタグを調べてみます。

手順

STEP.1
要素選択ボタン
要素選択ボタンをクリックします。
STEP.2
画像をクリック
タグを調べたい画像をクリックします。
STEP.3
imgタグ
imgタグを探します。
STEP.4
classタグ
imgタグの中にあるclassタグを探して、その中にある画像の固有クラス名を探します。
STEP.5
固有のクラス
「eye-catch-image」がアイキャッチ画像固有のクラス名です。更にあとにある「loding=”lazy”」の記述で遅延読み込みが設定されていることが確認できます。

今回紹介したタグは私が自サイトで気になった部分のものです。

他にもヘッダー周りに追加する「アピールエリア」や「おすすめカード」などもあるので、この部分の画像のタグを知りたいという場合はコメントにサイトURLと除外箇所を記入してコメントください。