WordPress

【AFFINGER5】画像遅延読み込みプラグインなら「Lazy Loder」が相性良い

2020年2月21日

AFFINER5にテーマを変更して、画像の遅延読み込みプラグインをいくつか試したみたのですが、なかなかどれも相性が悪い。

例えば「Lazy Load」は遅延読み込みは無いけど、画像がチラつく。

相性がひどく悪いものだと、画像が表示されなかったり、スクロールしたタイミングで画像が消えたりと結構散々なもの。

 

STINGER系テーマ公式のプラグイン「Lazy Load SEO」を導入したら話は早いのでしょうが、いかんせ有料(5,000円)です。

テーマの購入で先行投資がかさんだばかりなので、当面は無料プラグインでしのいでいきます。

 

色々試した結果、私のAFFINER5の現設定で不具合なく動作したのが『Lazy Loder』。

本記事ではLazy Loder の導入方法と設定内容を掲載します。

 

AFFINER5設定の「フェードイン」では遅延読み込みにはなりません!

ちなみに画像遅延読み込みの方法をWebで調べるていると、他所のサイトでAFFINGER5の設定で「画像をスクロールでフェードインする」をONすると、遅延読み込みになるという情報がありました。

この情報は正しくありません。

該当設定が演出設定の中にあることから想像できる通り、見た目上で画像をフェードインさせているだけで実際に画像を遅延で読み込んでるわけではありません。

該当設定箇所は「AFFINGER 管理」⇒「その他」⇒「記事エリアの画像表示をスクロールでフェードインする」と「サイト全体の画像表示をスクロールでフェードインする」

(特に理由が無ければ、「画像の演出をリセットする」の設定で良いかと思います。)

 

画像の遅延読み込みしているか?の確認方法

ブラウザのディベロッパーツールを使用して、画像の表示領域に入ったタイミングでダウンロードされていれば遅延読み込みが正しく動作していることが分かります。

Chrome(Windows端末)の場合、ブラウザを開き「F12」を押します。

ディベロッパーツールが開くので「Network」のタブをクリックします。

この状態でブラウザから確認したいWebページを開くと、通信状況がディベロッパーツール上に表示されるかと思います。

通信の都度ここに表示が追加されていくので、スクロールに応じて画像ファイルのダウンロード処理がリストに追加表示されるようなら遅延読み込みが機能しています。

逆にスクロールする前の状態で、ページ内の全画像ファイルがダウンロードされているようであれば遅延読み込みされていません。

Fillterに「png」「jpg」などを入力して、画像ファイルに一覧表示を絞ると分かりやすいかと思います。

 

Lazy Loder の導入と設定

WordPressの「プラグイン」⇒「新規追加」から「Lazy Loder」で検索します。(下記画像の左上)

 

「今すぐインストール」を実行し、インストールが完了したら「有効化」します。

インストール済みプラグインから「Settings」で設定メニューを開きます。

 

現在本サイトで設定している内容を紹介します。今のところ不都合はでていませんのでご参考までに。

設定変更ポイントは2か所。

使用しているテーマや設定、他のプラグインとの相性によって不具合が出る可能性もあるため、必要に応じて調整を行ってください。

サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)

チェックOFFにします。

理由は他のプラグインでリサイズを行っているため。アップロードした画像のリサイズもLazy Loaderで行いたい場合はチェックONでも問題ありません。

 

Enable lazy loading for iframes

チェックONにします。

iframe内で表示している埋め込みコンテンツ(Google広告とか、YouTubeとか)も画像と同じく、遅延読み込みの対象としておきます。

 

Lazy Loader で遅延読み込みした結果、結構高速化した。

簡易的な測定として下記のブックマークレットを使用しました。

ページ読み込み時のブラウザ処理の時間でざっくり比較します。

 

  • Lazy Load 無し(遅延読み込み無し)の場合

赤枠箇所が画像ダウンロード時間を含んでいる部分のため、ここに着目します。遅延読み込み無しの場合は「1,915ms」です。

画像が多いページなのでページロードでまとめてダウンロードするとそこそこ遅いです。

 

  • Lazy Loader あり(遅延読み込みあり)の場合

同一ページで遅延読み込みありの場合を測定します。

結果「519ms」。ページロード時の画像ダウンロードをしない分、早くなってますね。

画像多めのページだとかなり高速化に貢献しそうです。

 

まとめ

AFFINGER5画像遅延読み込み系プラグインは何かとトラブルがつきもの。

無料のプラグインで対応するなら、今のところ本サイトで不具合なく動作確認できている「Lazy Loader」がおすすすめ。

SEO対策は云々のかたは、Lazy Load SEO へどうぞ。

 

WordPress

2020/6/30

【コスパ最高サーバはどっち?】ロリポップとさくらを徹底比較!

『ロリポップとさくらのレンタルサーバー、どちらがおすすめか?』 ブログを運用するにあたって、高速サーバーも魅力的だけどコストがかかるのがちょっと。。というコスパ重視の人におすすめなのがロリポップとさくらのレンタルサーバー。 低価格帯のプランはとりあえず、小さく始めたいという人には丁度良いコスパの高さが人気です。 今回は500円前後の価格帯で始められる、ロリポップのスタンダードプランとさくらのレンタルサーバーのスタンダードプランを比較していきます。 値段、速度、使いやすさで比較していくよ/st-kaiwa5 ...

ReadMore

WordPress

2020/6/26

オススメはどっち?ConoHa WINGとエックス サーバーを徹底比較

『ConoHa WINGとエックスサーバー、どちらがおすすめか?』 正直、性能については大きな差はないので一般的なブログを運営する上ではどっちを選んでも正解です。両者の比較であればどちらも高速サーバーとして期待するパフォーマンスを十分発揮してくれると思います。 あとで紹介するけど、実際にサーバー速度を比較してみるとほぼ同じだったよ   とはいっても、なかなか選びきれないのが人の性。 本記事ではそんな人に向けてConoHa WING と エックスサーバーをブロガー目線での重要ポイントを比較していき ...

ReadMore

ブログ運営

2020/6/23

【ブログ運営】Googleアップデート被弾からのアクセス激減

今月も月が変わりましたので運営報告をしていきます。サイトの継続期間は10か月目となります。 2020年5月の運営報告。月末ぎりぎりになっての更新となったのはGoogleアップデートを受けてアクセス・収益が低迷しているため多少萎えていたのかもしれません。 個人的メモの記事なので、今月も手短にすませていきます。 それでは2020年5月のトピックスはこちら! トピックス Googleアップデート被弾 アクセス激減 収益も激減の兆し 記事のテコ入れ、リスク分散を検討中 Contents1 2020年5月の記事数と ...

ReadMore

WordPress

2020/6/13

【秒速データ投入】ワードプレスのテストサイトを作ってみよう

テーマユニットテストを使うと、WordPressに様々なパターンを想定したテスト投稿データが簡単に取り込めます。 例えばこういったシーンで非常に便利です。 WordPressテーマの変更前に、色々なデータパターンで表示確認してみたい テストサーバーの動作確認や性能調査用に、ワードプレスサイトを立ち上げたい   Contents 1 テストサイトのデータをダウンロードする 2 ワードプレスのテストサイトにデータをインポートする 3 テストサイトの表示を確認する 4 WordPressのインポートで ...

ReadMore

WordPress

2020/5/29

AFFINGER5の設定保存で「閲覧できません (Forbidden access)」エラー

本サイトではAFFINGER5のテーマを使用しています。 WordPressの設定を変更している際に、掲題のエラー「閲覧できません (Forbidden access)」に遭遇しましたので、対処をメモしておきます。   Contents 1 エラーが発生した操作 2 原因はConoHa WINGサーバーのWAF設定 3 WAFの設定方法(ConHa Wingサーバーの場合) エラーが発生した操作 エラーが発生した際の具体的な操作としては「AFFINGER5 管理」メニューから設定変更を行って「保 ...

ReadMore

  • この記事を書いた人
  • 最新記事

やるログの人

南国在住。30代のSES系エンジニア。 便利なWebサービスやガジェット関連の情報収集を日課としてます。 収集したライフハック術を武器にアウトプット活動と子育てに奔走中! 本ブログで月間20000PV達成しました!

-WordPress
-

Copyright© やるログ , 2020 All Rights Reserved Powered by AFFINGER5.