AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

AFFINGER LazyLoadの効果を試してみた

2023-01-01 yume-tada

AFFINGER LazyLoadの効果を試してみた

AFFINGER LazyLoadは本当に効果があるの?

findout
お調べさん
ゆめただのり
ゆめただ

そんな疑問にお答えします!

「AFFINGER LazyLoad」は、AFFINGER6の専用の遅延読込プラグイン。

WordPress5.5から遅延読込機能が標準で付くようになったので、

正直、導入するか迷っていました

しかし、新年のキャンペーンでお安くなっていたので投資

さっそく導入して、効果を試してみました

結果は効果あり! 投資してよかったと感じています。

本記事では、その検証結果をまとめました

本記事を読んでわかるコト

「 AFFINGER LazyLoad 」の具体的な導入効果【当サイトを評価】

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=924fa828 48d5 42a5 9231 ddf31ed219a0

ゆめただの環境(参考)

テーマ:AFFINGER6EX

子テーマ:JET

使用専用プラグイン:ABテスト3/AFFINGERタグ管理マネージャー4/PVモニター/Gutenberg 用ブロックプラグイン2/SUGOI MOKUJI(すごいもくじ)[PRO]/データ引継ぎプラグイン/会話ふきだしプラグイン2/記事バックアップ「安心くん」

効果の確認方法

実際に、当サイト(biz-se.com)で、検証を行いました。

AFFINGER LazyLoadプラグインを無効化した場合と、有効化した場合のサイトアクセス速度を計測

速度が速くなっていれば、効果があるということになります。

Fast loading1

Google PageSpeed Insightsで分析

ゆめただのり
ゆめただ

Google PageSpeed Insightsで分析しました。

Google PageSpeed Insights

PageSpeed Insights:Googleが無料で提供している、Webサイトの表示速度を測定して評価する分析ルーツ。

一般的に使用されている。

使い方

PageSpeed Insightsにアクセス

  PageSpeed Insightsにアクセスする。

分析するURLを入力

  分析するURLを入力して、「分析」をクリック。

pagespeed insights
PageSpeed Insights

結果の確認

 結果は色で判別できます。

 緑色:良い

 橙色:要改善

 赤色:不十分

項目意味評価値
パフォーマンス総合評価値90~100:良い
50~89:要改善
0~49:不十分
First Contentful PaintユーザーがURLをクリックしてから
最初にコンテンツが表示されるまでの時間
0~1.8秒:良い
1.8~3.0秒:要改善
3.0秒以上:不十分
Speed IndexユーザーがURLをクリックしてから
目に見えるまでの時間
0~3.4秒:速い
3.4~5.8秒:平均
5.8秒以上:遅い
Largest Contentful PaintユーザーがURLをクリックしてから
メインコンテンツ(最大)表示するまでの時間
0~2.5秒:良い
2.5~4.0秒:要改善
4.0秒以上:不十分
Time to InteractiveユーザーがURLをクリックしてから
ユーザーが操作可能(インタラクティブ)になるまでの時間
0~3.8秒:速い
3.8~7.3秒:平均
7.3秒以上:遅い
Total Blocking Timeユーザー操作(キーボード、クリックやタップ等)
の応答がブロックされている時間の合計
0~200ミリ秒:速い
200~600ミリ秒:中程度
600ミリ秒以上:遅い
Comulative Layout Shiftユーザーが意図しないレイアウトのずれを数値化したもの
(大きいほどずれが大きいことを表す)
0~0.1:良い
0.1~0.25:要改善
0.25以上:不十分

検証結果

結果は、効果がありました!

特に、モバイルの結果が大きく出ていました。

モバイルの使用率が高いことからも、無視できませんよね。

ゆめただは、まだ速度のチューニングは何も対策していなかったので

今後も入れておきたいプラグインになりました。

AFFINGERテーマユーザーには、導入をオススメします。

  評 価 項 目   プラグインOFF
【携帯電話】
プラグインON
【携帯電話】
プラグインOFF
【デスクトップ】
プラグインON
【デスクトップ】
2maru
パフォーマンス
49 62 89 92
2maru
First Contentful Paint
4.3秒 3.0秒 1.0秒 0.7秒
2maru
Speed Index
5.5秒 4.9秒 1.3秒 1.2秒
2maru
Largest Contentful Paint
7.2秒 5.7秒 1.9秒 1.2秒
2maru
Time to Interactive
9.7秒 8.4秒 1.8秒 1.6秒
maru
Total Blocking Time
320ミリ秒 320ミリ秒 40ミリ秒 20ミリ秒
sankaku
Comulative Layout Shift
0.031 0.031 0.002 0.17
AFFINGER LazyLoad効果評価

検証結果【携帯電話】

Mobile_Setting

AFFINGER LazyLoad OFF

test_reslut_mob_off

AFFINGER LazyLoad ON

test_reslut_mob_on

検証結果【デスクトップ】

PC_setting

AFFINGER LazyLoad OFF

test_reslut_pc_off

AFFINGER LazyLoad ON

test_reslut_pc_on

AFFINGER LazyLoadの導入方法

インストール

購入してダウンロードしたファイルを指定してプラグインをインストールします。

管理画面

【プラグイン】

 管理画面の「プラグイン」ー「新規追加」をクリックします。

AF_lazyLoad_1

「プラグインのアップロード」をクリック。

「ファイルを選択」をクリック。

AF_lazyLoad_2

購入してダウンロードしたAFFINGER LazyLoadのファイルを選択します。

AF_lazyLoad_3

「今すぐインストール」をクリックします。

AF_lazyLoad_4

プラグインを有効化

プラグインの「インストール済みプラグイン」を選択して、AFFINGER LazyLoadを有効化します。

管理画面

【プラグイン】

 管理画面の「プラグイン」ー「インストール済みプラグイン」をクリックします。

AF_lazyLoad_5
AF_lazyLoad_6

設定を行う

管理画面

【AFFINGRE管理】

 管理画面の「AFFINGER管理」ー「AFFINGER管理」をクリックします。

AF_lazyLoad_7

その他を選択します。

AF_lazyLoad_8

「遅延読み込み(サイト全体)」が追加されています。

設定は、このように行います。

AF_lazyLoad_9

「Save」をクリックして設定を保存します。

AF_lazyLoad_10

\【遅延読み込み(サイト全体)】の設定項目についてはこちら/

設定項目意味
遅延読み込みする遅延読み込み機能をON/OFF(チェックでON)
 画像とiframeを遅延読み込みするページ上の画像とiframeの両方について遅延読み込みする
 画像のみを遅延読み込みするページ上の画像のみ遅延読み込みする
 iframeのみを遅延読み込みするページ上のiframeのみ遅延読み込みする
 <script>にも対応させる(※defer属性を追加)<script>について遅延読み込みを有効化する
 <script>を遅延読み込みする
(※Google Adsense,Twitter,Instagram)
Google Adsense、Twitter、Instagramの<script>について、
ページ読み込み後に遅延読み込み開始する
画像の自動調整機能を有効化するすごいもくじやJET子テーマを使用している場合は
チェックすることが推奨されている(公式ページより)
【遅延読み込み(サイト全体)

iframeとは

iframe【インラインフレーム】とはHTMLタグで、ページ内に別のページやコンテンツを表示するために、四角い別のエリアを設定して表示できます。

youtube動画をページ内に埋め込んで表示する場合もこのiframeを使用します。

AFFINGER LazyLoadのおすすめポイント

ページ毎に有効・無効が設定できる!

AFFINGER LazyLoadは、サイト全体の遅延読み込みを設定できるだけではなく、

「記事ページ」毎に機能を有効・無効に設定できます!

Page_ON_OFF
ブロックエディタで設定可能

例えば、

Worried
お悩みさん

このページだけは、動画を速くロードさせたいので、

遅延読み込みを無効にしたいなあ。

なんてことも、簡単にできちゃいます!

画像単位で有効・無効が設定できる!

さらに、こんなお悩みも解決。

Worried
お悩みさん

ページ内の特定の画像だけ、無効にしたい!

特定の画像だけ、遅延読み込みを無効にできちゃいます。

【 特定画像の遅延読み込みを無効にするコード例 】

<img src="https://hogehoge.com/hogehoge.jpg" data-st-lazy-load="false">

詳細は、公式サイトで。

AFFINGER6は、ブロガーが欲しい細かい機能や」専用プラグインが満載のテーマです。

\AFFINGER6をおすすめする5つの理由をまとめた記事はこちらから/

AFFINGER6おすすめの記事はこちら
reason-why-I-recommended-affinger_new2
AFFINGER6(アフィンガー6)を初心者におすすめする5つの理由【後悔しないテーマ選び】

続きを見る

ゆめただのり
ゆめただ

あなたも、AFFINGER LazyLoadを導入して

サイトを高速化し、内部SEO対策をしましょう!

-AFFINGER