WordPress

AFFINGERの「設定に関わらずアイキャッチ挿入」でページの読込・表示速度はどう変わるか?

投稿日:2018年7月29日 更新日:

AFFINGERでは記事のトップに「設定に関わらずアイキャッチ挿入」を指定することができます。

アイキャッチのためにアップロードした画像を自動的に挿入するもので、ページデザイン上のインパクトだけでなく、デザインの色味、見やすさも評価するとされるGoogle対策にも有効と思われ、大いに活用したいところです。

「新規投稿を追加」「新規投稿の編集」画面のサイドメニュー下「アイキャッチ関連」の項で指定できます。

ただ、あたまの隅にひとつだけ晴れない疑問が残っていました。

それは「アイキャッチ画像をわざわざ読み込みに行くというタイムラグがページの読込・表示速度に悪影響を与えているのではないか」というものです。

そこで今回もGoogleが提供するお馴染みのモバイルサイトの速度テスト「Test My Site」とGoogleクローム拡張機能「Lighthouse」で読込・表示速度をチェックしてみました。

2018年7月30日追記:

「gzip圧縮」によるスピードアップ処理を加えていないデータです。「トップ画像なしの速度」と「トップ画像自動挿入の速度」のみ「gzip圧縮」後の計測データも添えています。

「gzip圧縮」についてはこちらのサイト「Fukuro Press」さんのコードが最も効果的でした。「mod_rewrite」形式のため「php.ini」ファイルへの記述も必要とのことですが、IT-SORAYORIの使用しているエックスサーバーでは高速処理を設定しているため原則変更不可となっていました。怖いのでこちらの処理はしていません。ただ確認サイトで「gzip圧縮」は有効となっていたので、スルーしています。ここのところ詳しい方がいらっしゃいましたらコメントいただければ幸いです。

「Test My Site」は読込速度、「Lighthouse」は表示速度を計測します。いずれも3Gでのテストです。日本国内はより速い4Gが標準となっています。

「Lighthouse」は「Nexus5X」のエミュレート値と表記されています。計測過程を見るとパソコン表示も現れますが、パソコンへの評価がどれほど反映されているのかは不明です。

「Lighthouse」の表示速度を評価する「Performance」は計測ごとに値が大きく変化します。そこで計測3回(「gzip圧縮」後のふたつのデータは6回)の平均値を添え書きしています。

今回は主なコンテンツが判別できるまでの表示速度とされる「Lighthouse」のFMPも併せて計測しています。

「PageSpeed Insights」は、スピードに関しほとんどのページで「Unavailable」と表示されてしまいます。そのため今回のテストツールからは除外しました。

読込・表示速度についてはあくまでIT-SORAYORIのケースであり、各サイトごとに異なることをご確認ください。

この記事はAFFINGER5(WING)ver20180621で解説しています。

 

今回サンプルとしたのは、こちらのページです。

adsense_linkad
Googleアドセンスのリンク広告の広告スタイルを好みの配色でカラー設定する方法

続きを見る

ヒゲ兄さんの画像の利用法により三つのケースをテストしました。

 

トップ画像なしの速度

まずアイキャッチ画像は設定してあるものの、ページトップには画像を一切設置していない場合の速度を計測してみました。

モバイルサイトの速度テスト「Test My Site」/読込速度

読込時間5秒/良好 離脱率19%

 

Googleクローム拡張機能「「Lighthouse」/表示速度

Performance3回平均値:10 FMP3回平均値:7.42

 

「Test My Site」では「良好」。一方「Lighthouse」では「Performance」が平均10.00となりました。レッドゾーンの低い評価です。お恥ずかしい限りですが、とりあえず、この数値を比較の出発点とします。

「gzip圧縮」後の計測データ:

モバイルサイトの速度テスト「Test My Site」/読込速度

読込時間7秒/普通 離脱率26%

Googleクローム拡張機能「「Lighthouse」/表示速度

Performance(6回平均値):14.17 FMP(6回平均値):6.81

「Performance」の平均が「gzip圧縮」前と比べ若干伸びています。

 

トップ画像個別設置の速度

つぎはアイキャッチ画像の設置とは別に、ページトップに同じ画像を設置した場合です。

モバイルサイトの速度テスト「Test My Site」/読込速度

読込時間6秒/普通 離脱率24%

 

Googleクローム拡張機能「「Lighthouse」/表示速度

Performance3回平均値:10 FMP3回平均値:7.52

 

「Test My Site」では「普通」。一段階低下しました。一方「Lighthouse」では「Performance」が平均10.00。トップ画像なしの場合と評価は同じです。FMPは0.1秒遅くなりました。

 

トップ画像自動挿入の速度

最後に「設定に関わらずアイキャッチ挿入」を選択し、アイキャッチ画像と同じ画像をページトップに自動設置する場合です。

モバイルサイトの速度テスト「Test My Site」/読込速度

読込時間7秒/普通 離脱率26%

 

Googleクローム拡張機能「「Lighthouse」/表示速度

Performance3回平均値:10 FMP3回平均値:7.32

 

「Test My Site」では「普通」。速度は1秒低下しましたが、評価は個別設置の場合と同じランクにとどまりました。一方「Lighthouse」では「Performance」が平均10.00。3回とも評価は同じです。FMPはなぜかトップ画像なしの場合より0.1秒早くなりました。

「gzip圧縮」後の計測データ:

モバイルサイトの速度テスト「Test My Site」/読込速度

読込時間7秒/普通 離脱率26%

Googleクローム拡張機能「「Lighthouse」/表示速度

Performance(6回平均値):15.17 FMP(6回平均値):6.78

「gzip圧縮」後の値でも「トップ画像なし」の評価と大きな差異は見られません。

 

【まとめ】どれも大差ないので自動挿入を実行

「Test My Site」で最も評価が高かったのは「トップ画像なし」の場合でした。「トップ画像自動挿入」との差はタイムで2秒、評価で1段階のアドバンテージです。

一方「Lighthouse」の「Performance」において差はなし。FMPの速度は「トップ画像自動挿入」が0.1秒の差でトップでした。

概ね大きな差はなく、トップ画像を設けたいと思ったら躊躇なく自動挿入を選択してかなわないという結論を得ました。

あなたのサイトの場合はいかがでしょう? ぜひチェックしてみることをおすすめします。

 

こちらの記事もぜひどうぞ

affingerslider
AFFINGER5(WING)のスライダーの設置方法!読込・表示速度も比べてみた!

続きを見る

 

お役立ち記事

pdfedit 1
ipodアイキャッチ 2
Twitterスパムアイキャッチ 3
spotify_sf_size01 4
171106twittertsuchi2 5
photo_gallery10 6
spotify_1807 7
pokego161214_2 8
cdrive_partition 9
無線LAN04-2 10
mercari 11
Evernote新機能01 12
twitter_list 13
hub02 14
no image 15

-WordPress
-

Copyright© IT-SORAYORI , 2018 All Rights Reserved.