affingerslider

WordPress

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

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

AFFINGER5(WING)では「ヘッダー記事スライダー」と「カテゴリースライダー」というふたつのスライドショーを表示することが可能です。より多彩なデザイン表現ができるようになるため、ぜひ活用したいとお考えの方も少なくないでしょう。

とはいえ気になるのはその速度。画面に動きを加える機能ですから、当然それなりの負荷が増えると予想されます。

2018年7月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回)の平均値を添え書きしています。

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

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

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

 

ノーマル状態の速度

まず「ヘッダー記事スライダー」も「カテゴリースライダー」も設置していないノーマル状態でのIT-SORAYORIの速度はどうでしょうか。

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

affingerslider03_nma

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

affingerslider31

3回平均値:9.33

 

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

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

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

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

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

Performance(6回平均値):13.8

 

ヘッダー記事スライダーの設定方法

affingerslider07

「ヘッダー記事スライダー」はサイトのヘッダー領域に表示されます。

 

step
1

 

スライダーに表示するカテゴリーを決定します。既存のカテゴリーに適当なものがない場合はメニューに表示しない新たなカテゴリーを設定してもよいでしょう。IT-SORAYORIでは「おすすめ記事一覧」にチョイスした記事を新しいカテゴリー名で登録しました。

「おすすめ記事一覧」を理解するための記事

osusumepost
AFFINGER5のおすすめ記事一覧をサイドバーのもっと上に表示する方法

続きを見る

 

step
2

 

ダッシュボード「AFFINGER5管理」>「ヘッダー」画面の「記事スライドショー設定」項目を表示。

affingerslider06

[1]「ヘッダーに記事をスライドショーで表示する」にチェック。

[2]「スライドショーの表示方法」を選択 ※「フェードイン・アウト」とはその場でゆっくり表示が点滅する表現です。

[3]スライドショーの表示速度を入力。好みの速度が設定できますが、デフォルトでかまわないでしょう。

[4]「表示するカテゴリID」の番号を入力。「カテゴリID」はダッシュボード「投稿」>「カテゴリー」画面で確認できます。

affingerslider01

[5]カテゴリリンクの表示・非表示、投稿日の表示・非表示を選択します。

[6]この部分は不明です。もしかしたら後述する「カテゴリースライダー」を規定するものかもしれません。

[7]スライドショーの左右に表示される矢印アイコンの表示・非表示を選択し、カラーを設定します。スライドショーを手動で操作するためのボタンです。

最後に「save」ボタンをクリックし確定します。

 

ヘッダー記事スライダーの速度

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

affingerslider05_1a

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

affingerslider36

3回平均値:4.33

 

「Test My Site」で「要改善」。「Lighthouse」では平均4.33のレッドゾーン。いずれもノーマルに比べ評価が大きく落ちました。

 

カテゴリースライダーの設定方法

affingerslider09

「カテゴリースライダー」は任意の位置に表示できます。今回は、画面ではその違いを確認することはできませんが、サイトのヘッダー領域の下「ヘッダー画像エリア下のウィジェット」内に表示しています。

 

step
1

 

投稿を「新規追加」し仮の作成画面を表示。任意の位置に文字挿入のポインターを置きます。そしてメニューの「タグ」から「その他パーツ」>「カテゴリ一覧」を選択します。

affingerslider10

 

step
2

 

「カテゴリ一覧」を表示するためのタグが表示されます。このタグをカスタマイズすることでスライダー表示となります。

 

affingerslider02

 

[1]カテゴリーID:ステップ1で選んだID番号に差し替えます。

[2]投稿数:カテゴリーのなかから表示する投稿数を指定します。この範囲でループします。カテゴリーの中の投稿数より指定した投稿数が少ない場合は、おそらくつぎの[3]「order」で規定されている記事IDによって選別されるものと思われます。

[3]記事ID降順:デフォルトで指定されている「desc」は記事IDを降順(大きい数値から)で表示する設定です。昇順(小さい数値)から表示させたい場合は「ask」に差し替えます。

[4]子カテゴリ含む:カテゴリーに親と子を設定している場合、デフォルトでは子カテゴリも含む設定になっています。含まない場合はここを「off」にします。

[5]スライドなし:デフォルトではスライダーを表示する設定にはなっていません。ここを「on」にすることでスライダー表示となります。

[6]表示数:画面に同時表示するスライドの数が設定できます。"PC,タブレット,スマホ"の順で指定します。ここはデフォルトでかまわないでしょう。

[7]日付あり:スライド上での投稿日の表示・非表示が設定できます。デフォルトではブランクとなっており投稿日が表示される設定です。投稿日を表示したくない場合は、この「”」と「”」の間に「off」を挿入します。

[8]記事リンクのタイトル:スライドの下部に表示される投稿記事への誘導のためのタイトルです。デフォルトでは「ReadMore」となっています。IT-SORAYORIでは「続きを読む」に変えてみました。

 

step
3

 

ステップ2でカスタマイズしたコードをコピーし、ウィジェットに挿入します。「新規追加」で表示した仮の作成画面は削除してかまいません。

まずダッシュボード「外観」>「ウィジェット」画面を表示。

affingerslider11

[1]「ヘッダー画像エリア下のウィジェット」に同画面左下から[2]「カスタムHTML」をドラッグ&ドロップ。[3]「内容」のスペースにコピーしたコードをペーストします。

最後に「保存」し「完了」をクリックします。

 

カテゴリースライダーの速度

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

affingerslider05_1-2a

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

affingerslider33

3回平均値:6.00

 

「Test My Site」では「要改善」。ヘッダー記事スライダーと評価は同じです。一方「Lighthouse」では平均6.00。ヘッダー記事スライダーより高い評価です。

 

ふたつ同時の速度

affingerslider08

これまで「ヘッダー記事スライダー」と「カテゴリースライダー」を個別に表示してきましたが、同時に表示するとどうなるでしょう。すべてのスライドが動き、デザイン的にはとてもゴージャスな感じになりました。

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

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

affingerslider34

3回平均値:4.66

 

「Test My Site」では「要改善」。タイムはさらに低下しました。一方「Lighthouse」では平均4.66。「ヘッダー記事スライダー」単独の場合とほぼ同等の評価です。ただ両値を総合すると今回検証したケースで最低の評価となってしまいました。

 

カテゴリースライダーのサイドバーへの設定方法

affingerslider13

最後にスライドショーを表示しても、速度への影響が最も少ない方法を考えてみました。ページの読み込み順から、もしかしたら「カテゴリースライダー」をサイドバーに設定すればよいかもしれません。

手順は「カテゴリースライダーの設定方法」とほぼ同じです。

ダッシュボード「外観」>「ウィジェット」画面を表示し、つぎの[1][2][3]の任意のウィジェットに「カスタムHTML」でタグを挿入します。

osusumepost02

 

カテゴリースライダーのサイドバーの速度

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

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

affingerslider35

3回平均値:12.00

 

「Test My Site」で「普通」。ただしノーマル状態とは1秒の僅差です。一方「Lighthouse」では平均12.00。なぜか最高値が出ました。

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

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

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

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

Performance(6回平均値):16.5

「Test My Site」の評価がワンランク上がりノーマル状態と並びました。また「Lighthouse」の評価は平均16.5とノーマル状態の平均13.8よりもよくなっています。「gzip圧縮」前の計測データと同様の現象が起きています。

 

読込・表示速度を計測してわかったこと

affingerslider21

 

ノーマル状態に比べ、「ヘッダー記事スライダー」をヘッダー領域に、あるいは「カテゴリースライダー」をその直下に、それぞれ単独で置いた場合(「ヘッダーのみ」「ヘッダー下のみ」)、読込速度は低下しました。

また「ヘッダーと下同時」に設置した場合はさらに悪化しました。

ここまでは当然の結果でしょう。

意外だったのは、速度において最もパフォーマンスが高かったのがサイドバーのみに「カテゴリースライダー」を設置したケースだったことです。「Test My Site」では1秒の僅差で第2位のタイムでしたが「Lighthouse」ではぶっちぎりの1位評価となっています。

じつはこれまでスライドショーをひとくくりで速度低下の元凶と決めつけていたのですが、今回じっくり考えてみたことでサイドバーに設置してみるという選択肢に気付くことに。そして理由はわかりませんが、スライドショーを設置していない場合より、速度が改善することを発見しました。

 

【まとめ】スライドショーによる速度のちがいをどう評価するか

スライダーをどう評価し、設置・非設置の判断をするかは、それぞれのサイトの特性によるでしょう。

たとえばコンテンツのオリジナリティが高く競争優位性の高いサイトはそれぞれ単独で設置する程度であればヘッダーでも問題ないと思います。

IT-SORAYORIの場合、ユーザーのデバイス別セッション数は約65%がパソコンです。サイトのブランディングはまだまだでコンテンツも高い競争優位性を持つほどではありませんが、サイドバーに「カテゴリースライダー」を設置してみることにしました。

速度検証の結果、何も設置していない場合とほぼ同等か、それ以上のパフォーマンスが得られると確信できたからです。

さて、あなたのサイトはいかがでしょう。ぜひ速度のチェックをしてみてください。スライドショーを見直す発見があるかもしれませんよ。

というわけでIT-SORAYORIはここでもAFFINGER5をおすすめします。最新版の詳しい情報をこちら(スポンサーリンク)から、ぜひどうぞ。

 

最後までお読みいただきありがとうございました。IT-SORAYORIは、ここでご紹介したスライダーとAFFINGER5ならでは「おすすめ記事一覧」、アドセンス広告の高収益ページを組み合わせ、収益のパフォーマンスを向上させる試みを実施しています。興味のある方は、ぜひつぎの記事も併せてご覧ください。

postandadsense
AFFINGER5でアドセンス広告の高収益ページをおすすめ記事にしてます

続きを見る

 

お役立ち記事

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.