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/3/26

【人気調査】トップブロガーが選ぶWordPressテーマ【100サイト分析】

WordPress(ワードプレス)のテーマはどれを選べばいいの? SEO対策?カスタマイズ性?有料/無料? 結局のところなにがおすすめなの? こんな疑問の手助けになるかと思います。   本記事では人気ブロガーが運営している100のブログサイトで、実際に使用されているテンプレートを一挙解析・集計してみました。 『上級ブロガーに人気のテーマを選んでおけば間違いない』というアプローチで、WordPressテーマ・テンプレート選びをご提案します。   本記事では人気ブログに関する次の調査・集計 ...

ReadMore

WordPress

2020/3/19

WordPressで画像をタイル状に並べる2つの方法【プラグイン不要】

WordPressの投稿記事内で画像をタイル状に並べて表示させたいケースがあったので、その際に検討した2つの実現方法をご紹介します。 今回の方法では「プラグイン不要」を前提として、イラストや写真などを並べたギャラリーを作成していきます。   Contents1 方法1:WordPressの標準機能「ギャラリーを作成」を使う2 方法2:HTML + カスタムCSS で画像をタイル表示する3 まとめ 方法1:WordPressの標準機能「ギャラリーを作成」を使う 間違いなく一番楽で早いのは、Word ...

ReadMore

ブログ運営

2020/3/4

ブログ月間1万PVを到達!!記事数とPVの推移を振り返る

2020年2月のアクセス数で月間1万PV(13,552PV)を達成しました。 ブログ運営節目の振り返りとして、1万PVを達成するまでの「記事数とPVの推移」を振り返ってみたいと思います。   Contents1 月間1万PVはどれくらいすごいのか?2 月間1万PVまでの記事数とPVの推移3 月間1万PVに到達するまでの試行錯誤4 月間1万PVの収益はどれくらいか(1PVあたりいくら?)5 まとめ 月間1万PVはどれくらいすごいのか? 初めに、月間1万PVという立ち位置についてブロガー界隈ではどの ...

ReadMore

ブログ運営

2020/3/2

【月報】2020年2月のアクセスとWeb収入

2020年度2月の活動結果報告としてサイトのアクセス状況とWeb収入を記しておきたいと思います。サイトの継続期間は7か月目となります。   今月も結論から言うと、  アクセス数は「13,552PV」  ブログ収入は「10,795円」     ついでに、LINEの収入は「6,384円」 でした。 前月比でいうとPVは1.6倍、ブログ収入は1.97倍 となりました。一言でいうと上出来です。 Contents1 「WING(AFFINGER5)」導入でPV・収入ブースト2 記事数3 ...

ReadMore

WordPress

2020/3/2

【ロリポップ×WordPress】最速10分でできる!!ホームページの作り方

ホームページを「簡単に」そして「時間をかけずに」作成する方法の一つとして、ロリポップ!レンタルサーバーにWordPress(ワードプレス)をインストールしてブログやウェブサイトを作成し、公開するまでの手順をご紹介したいと思います。 『小難しい事は後回し。まずはレンタルサーバーとWordPress(ワードプレス)を使ってホームページを構築する感触を確かめたい』という方に向けた手順です。SSLや独自ドメインに関する細かい設定は記事後半で必要に応じて実施する流れとしています。 Contents 1 ホームページ ...

ReadMore

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

やるログの人

南国出身/在住のミドル世代。 Web技術やガジェット関連の情報を日々収集しつつ、アウトプットと子育てとライフハックに奔走中。 月間13000PV達成しました!!

-WordPress
-

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