...

【Cocoon】一部の画像だけを遅延読み込みさせずに除外する方法

Cocoonの遅延読み込みを除外する方法

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

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

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

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

 

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

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

まあぶっちゃけレアなケースだけど

ということで今回はCocoonで「一部の画像だけ遅延読み込みさせない・除外する方法」をご紹介したいと思います

ブログ主

早速いってみよう!

 

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

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

手順
step1
画像のURLを取得する
step2
「Lazy Load設定」に貼り付ける

 

Cocoonで遅延読み込みをさせない方法

画像のURLを取得する

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

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

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

 

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

 

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

 

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

お疲れ様!

ソロモン

 

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

 

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

 

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

これで本当に遅延読み込みされてないのかな…?

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

 

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

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

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

 

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

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

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

 

最後に

以上となります。

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

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

ブログ主

ページ読み込み速度が落ちたら本末転倒だからね

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

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA