AFFINGER5

【遅延読み込み】アフィンガー5専用プラグイン「LazyLoad SEO」で表示速度UP!

AFFINGER5専用プラグインの「LazyLoad SEO」を導入しようか悩んでいます。サイトの表示速度が改善されると聞いたのですが、実際に使った感じはどうなんでしょうか?

といった悩みにお答えします。

 本記事の内容

  • アフィンガー5専用プラグイン「LazyLoad SEO」とは?
  • 「LazyLoad SEO」を導入した結果…【オフスクリーン画像の遅延読み込み改善】
  • 「LazyLoad SEO」の基本的な使い方
  • 「LazyLoad SEO」なら各記事で設定が可能
  • Youtube動画の埋め込みならアフィンガー5の機能も活用しよう!

 本記事の信頼性


Ryota(@ryotablogger

AFFINGER5の専用プラグインである、「LazyLoad SEO」はサイトの表示速度改善に効果的なプラグインです。

とはいえ、「LazyLoad SEOはどういったプラグインなの?」「LazyLoad SEOを導入するとどうなるの?」と思っている方は多いのではないでしょうか?

今回は、アフィンガー5専用プラグインである「LazyLoad SEO」について解説していきます。

本記事を読むことにより、LazyLoad SEOを導入するべきかどうかがわかります。

そうすることで、表示速度が速いAFFINGER5を最大限活用することができます。

お値段は税込5,000円とちょっとお高めですが、SEO対策として購入する価値ありです!
りょーた

AFFINGER5の導入を検討している方は、AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説もチェックしてみてください。

アフィンガー5について知りたい方は
【限定特典付き】AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

アフィンガー5専用プラグイン「LazyLoad SEO」とは?

アフィンガー5専用プラグイン「Lazy Load SEO」とは?

アフィンガー5専用プラグイン「LazyLoad SEO」とは、画像や動画の読み込みを遅らせてくれるプラグインです。

例えば、動画や画像を多く使っている場合には、読み込みに時間がかかり、表示速度が遅くなってしまってしまいますが、アフィンガー5専用プラグインである「LazyLoad SEO」を使うことで読み込みを遅延してくれるため、表示速度を早くすることができます。

分かりやすく図にすると、以下のような仕組みです。

 遅延読込と通常読込の違い

STINGER STOREより引用

また、LazyLoad SEOは他のプラグインと比べて、SEOを考慮した仕組みとなっています。

通常のLazyLoadでは画像がスクロールされるまで表示されないため、Googleのロボットには「画像が無い」と判断されています。このプラグインでは<noscript>を付与することで遅延読込を行いつつ、画像の有無も認識させることができます。

STINGER STOREより引用

上記のように、表示速度を上げてさらにSEO対策をしたいという方には超おすすめのプラグインとなっています。

「LazyLoad SEO」を導入した結果…【オフスクリーン画像の遅延読み込み改善】

「Lazy Load SEO」を導入した結果…【オフスクリーン画像の遅延読み込み改善】

「LazyLoad SEO」を導入した結果、サイトの表示速度が上がりました。

結果は以下の通りです。

 LazyLoad SEO導入後

【モバイル】

【PC】

 LazyLoad SEO導入前

【モバイル】

【PC】

もちろん環境や設定、デザインにもよりますが、上記のような感じで表示速度は間違いなく上がります。

また、PageSpeed Insightの「オフスクリーン画像の遅延読み込み」を改善することができました。

 PageSpeed Insightの「オフスクリーン画像の遅延読み込み」

【Lazy Load SEO導入後】

【Lazy Load SEO導入前】

上記の通りです。

オフスクリーン画像の遅延読み込みを行うことで、読者のスクロールに合わせて、画像の読み込みを行うため表示速度を上げることができ、離脱率を減少させることができます。

僕もそうですが、サイトの読み込みに時間がかかるページはストレスがかかります。
りょーた

表示速度に関しては、アフィンガー5で表示速度を爆速にする方法【5つの項目をチェック】で詳しく解説しているので併せてチェックしてみてください。

表示速度を速くしたい方必見
アフィンガー5で表示速度を爆速にする方法【5つの項目をチェック】

続きを見る

「LazyLoad SEO」の基本的な使い方

「Lazy Load SEO」の基本的な使い方

「LazyLoad SEO」の基本的な使い方は以下の手順となります。

  1. インストール→有効化
  2. 設定

順番に1つずつ解説していきます。

手順➀:インストール→有効化

まずは、LazyLoad SEOをインストールして有効化していきます。

WordPress管理画面より、「プラグイン」「新規追加」「プラグインのアップロード」「ファイルを選択」をクリックしてください。

ダウンロードした「st-lazy-load.zip」を選択し、「今すぐインストール」をクリックしましょう。

インストールできたら、「有効化」をクリックしてください。

手順②:設定

LazyLoad SEOを有効化できたら、次は設定をしていきます。

WordPress管理画面より、「AFFINGER 管理」「その他」「遅延読込」をクリックしてください。

遅延読込の設定画面に移動するので「遅延読み込みする」にチェックを入れ、

  • 画像とiframeを遅延読み込みする
  • 画像のみを遅延読み込みする
  • iframeのみを遅延読み込みする
  • <script>にも対応させる(※defer属性を追加)

上記のいずれかにチェックを入れてください。

画像と動画の両方を遅延読み込みさせるのであれば、「画像とiframeを遅延読み込みする」にチェックを入れればOKです。

また、子テーマである「JET」や「すごいもくじ」を使っている場合、表示に影響が出る場合があるので「画像の自動調整機能を有効化する」にチェックを入れましょう。

チェックを入れ終えたら「Save」をクリックすれば完了です。

お疲れ様です!これで「LazyLoad SEO」の設定が完了です!
りょーた

「LazyLoad SEO」なら各記事で設定が可能

「LazyLoad SEO」なら各記事で設定が可能

LazyLoad SEOは、「投稿記事」「固定記事」ごとに遅延読込をするかどうかを設定することができます。

例えば、「この記事は特に表示速度に問題がないから通常の表示方法で表示させたい」といった場合でも、個別で遅延読込をオフにすることができます。

上記のように、個別で設定することができます。

設定方法も簡単で、各記事の右下にある、「遅延読み込みする」のチェックを外して「更新」すれば完了です。

Youtube動画の埋め込みならアフィンガー5の機能も活用しよう!

Youtube動画の埋め込みならアフィンガー5の機能も活用しよう!

アフィンガー5には、Youtube動画を埋め込む際に画像として表示させ、クリックしたらYoutubeの画面に飛ぶ(外部リンク)といったこともできます。

そうすることで、自分のブログ内で動画を読み込むことがないので、ブログやサーバーに負荷をかけることがなくなり、表示速度に悪影響を与えることがなくなります。

実際のやり方は以下の手順です。

  1. Youtube IDを取得
  2. Youtubeを埋め込む

順番に解説していきます。

手順➀:Youtube IDを取得

まずは、ブログに埋め込みたいYoutubeのIDを取得していきましょう。

Youtubeにアクセスし、ブログに埋め込みたい動画を探してください。(今回は、大好きな映画「ワイルド・スピード」で解説していきます。)

埋め込みたい動画を表示したら、右下にある「共有」をクリックしましょう。

すると、上記のような表示が出るので赤枠で囲ったYoutube IDをメモしておきましょう。(この場合は「RmSEsDaxF8U」がYoutube IDとなります。)

手順②:Youtubeを埋め込む

 

先ほどのYoutubeをブログに埋め込んでいきます。

 

埋め込みたい記事を選択し、「タグ」→「その他パーツ」→「Youtube」をクリックしましょう。

 

すると、以下のショートコードが挿入されます。

 

 shortcode
[youtube id=]

 

先ほどメモしたYoutube IDを=のあとに挿入してください。

 

 shortcode
[youtube id=RmSEsDaxF8U]

 

以下のように表示されればOKです。

 

クリックされればYoutubeに移動するYoutube動画の埋め込みが完成です。

 

 

まとめ:アフィンガー5の「LazyLoad SEO」なら遅延読み込み対策が完璧!

今回は、【遅延読み込み】アフィンガー5専用プラグイン「LazyLoad SEO」で表示速度UP!といった内容を解説しました。

もう一度おさらいをすると、アフィンガー5専用プラグイン「LazyLoad SEO」を導入すると、以下のメリットがあります。

  • 画像や動画を遅延読込してくれる
  • 通常の遅延読込とは違い、Googleのロボットに画像の有無を認識させることができるのでSEOに効果的
  • PageSpeed Insightの「オフスクリーン画像の遅延読み込み」を改善することができる

上記の通りです。

唯一のデメリットといえば、価格が税込5,000円とちょっとお高めということです。

とはいえ、表示速度はSEOにも影響されますが「LazyLoad SEO」なら改善することができるので、画像や動画を多く使っている方は導入する価値ありです。

これからAFFINGER5の導入を検討している方は、AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説もチェックしてみてください。

アフィンガー5について知りたい方は
【限定特典付き】AFFINGER5をガチレビュー!2年間使い続けた理由をデメリット含め解説

続きを見る

-AFFINGER5