【Cocoon】一部の画像だけを遅延読み込みから除外する方法

どうもおはようポテト(@ohayoupoteto22)です。

ページ高速化に欠かせない「遅延読み込み」。

文字通り、画像が表示されるところまでスクロールされた時に初めて読み込ませることで、ページ自体の読み込み速度を上げてくれる仕組みです。

本サイトでも利用している神テーマCocoonでは、プラグインなどを使わずとも設定でポチポチするだけで実現することができます。神。

しかし「一部の画像だけ遅延読み込みさせたくない」というケースが発生する可能性があります(›´ω`‹ )

例えばヘッダーに使っている画像が遅延読み込みのせいで最初だけ表示されなくて不格好だから変えたい場合、などなど。

遅延読み込みを除外する手順

手順はいたってシンプルかつ簡単です

Cocoonで一部の画像だけを遅延読み込みから除外する方法

画像のURLを取得する

このような画像を遅延読み込みさせたくない場合、

「メディア」→「ライブラリ」からその画像の「編集」を選択し、

画面右側にあるファイルのURLをコピーしておきます。

「Lazy Load設定」に貼り付ける

そして「Cocoon設定」→「高速化」をクリックし”Lazy Load設定“という項目までいきます。

そして先ほどコピーしたURLをここの「除外文字列を入力」と薄文字で書いてあるところに貼り付けてあげれば完了です。

複数の画像を無効にする方法

「遅延読み込みから除外したい画像が複数ある！」という場合は、このように画像をURLを改行して貼り付けてあげれば可能です。

遅延読み込みが無効化されてるか確認する方法

となった場合に確認する方法をご紹介します。

遅延読み込みされていない場合

ブラウザで「デベロッパーツール」を開き、画像のソースを確認します。

class属性に「lozad」、またloadingという属性に「lazy」という表記が無ければ遅延読み込みされていないことになり、上での作業を問題なく行えたことになります。

遅延読み込みされている場合

しかし逆に、class属性に「lozad」や「lozad-img」、またloadingという属性に「lazy」という表記があれば遅延読み込みされていることになります。ありゃ

上の方法を確認し直し、画像のURLが間違ってないかなど確認してみてください(›´ω`‹ )

まとめ

遅延読み込みを解除すると画像の表示は早くなるものの、ページの読み込み速度は低下してしまう可能性が多いにあるので気を付けたいところですね。

PageSpeed Insightsで引っかかっていないか確認したほうが良さげかも…！

参考になれば幸いです！では⸝⸝- ̫ -⸝⸝