Affinger

アフィンガー5(WING)AMP速度向上効果の実測結果&表示比較

WING(アフィンガー5)AMP

人気のWordpressテンプレート、WING(アフィンガー5)。当ブログでも使用しているテーマです。

様々な便利機能がありますが、他のテンプレートと比較しても特筆すべきものの一つがAMP対応。

  • ボタンクリック一つで
  • 投稿ページ別に

AMP化することが、WINGではできちゃいます。

でも、AMPって

  • どれくらい効果があって
  • なにかデメリットはないの?

というあたりが気になりますよね。

この記事では、実際にWINGを使っている我が家が、AMP対応することでスマホなどのモバイル環境での読み込みはどれくらい速くなるのか?

また、AMPではサイト表示・表現がシンプルとなり、通常仕様ページと差が出るというデメリットもあります。それはどれくらいなの?というあたりをレポートします。

 

AMPとは?

AMPは「Accelarated Mobile Pages」の略です。日本語直訳すると「高速化されたモバイル用ページ」。

その名の通り、ページやサイトをAMP対応仕様にすると、スマホなどのモバイル環境でページを読み込んだ時に爆速で表示されるようになります。

 

検索時のAMP表示はどんな風?

AMP対応しているページは、Googleの検索結果で「雷マーク」の表示が出ます。下のスクショのような感じ。

AMP検索結果

AMP化すれば、他の通常仕様のページと明らかに区別され、一目でAMP対応してる、とわかるようになるのです。

 

AMP化のメリットは?

AMP対応すると、2つの観点からメリットがあると言えます。

 

ユーザビリティの向上

ネット検索で調べものをしてるとします。

おっ、ほしい情報が載ってそうなサイトが見つかった♪

・・あれ?でもクリックしてもなかなかページが開かない・・イライライラ・・!

という経験はないでしょうか?特にスマホでネット検索をしている時は、パソコンより通信速度が遅くなるケースが多く、ユーザビリティが損なわれてしまいます。

「AMP」は、それに対してGoogleが主導して行っている施策の一つという位置づけで、検索結果表示から目的のページに移る時のスピードがものすごく速い。

そのため、通信環境が悪かったとしても、ユーザーにとってのストレスを大幅に軽減することができます。

 

SEO観点からの効果

AMP対応すると、サイトの運営者にとってもメリットが!

上記の通り、ユーザビリティが向上して必要な情報をサクサク得ることができるようになれば

  • 離脱率の減少
  • 購読率の向上

が見込めます。

読み込みが遅いページだと、途中で「もういいや!」と閉じて他のページに移ってしまうかもしれません。ですが、AMP対応ページならその心配が少なくなるということです。

その結果として、サイトの評価が高まり、SEO的にも効果を得られる可能性が高いのです。




 

WING(アフィンガー5)は簡単にサイトをAMP化できる

このようなメリットがあるAMPですが、対応させるにはサイトのページをAMP用のコードで書き直さなくてはいけなかったり、複雑なルールがたくさんあります。

なので専門的な知識がないと、AMP化は極めて困難といえるでしょう。対応させるには大きな労力も・・。

ですが、WordpressテンプレートのWINGなら、簡単にAMP対応させることができるのです。

 

ボタンを1クリックするだけでAMP化

WINGでは記事の編集画面に「AMPに対応する」というボタンがあり、1クリックするだけでAMP化することが可能。

AMP編集画面

 

アドセンスを入れたりするのには多少の設定が他で必要ですが、それも最初にやってしまえばその後の手間はほとんどかかりません。

複雑で面倒なコード書き換え処理を、超簡単に自動でやってくれるという驚きの仕様になっています。

 

AMP化するか?はページ単位で選択可

上記の「AMP化ボタン」は1記事ごとの設置。つまり、ページ別に、AMP対応するかどうか?選択することができるのです。

これによって、AMPに適したページは対応させて、そうでない場合は通常仕様に・・という戦略を取ることも可能。

AMPを有効活用したサイトの運営を行いたい人にとっては至れり尽くせり・・という仕様になっているのがWINGです。

 

AMPの速度向上効果は?

それではAMP化することで、どれくらいモバイルページの読み込みは速くなるのか?

実際に当サイトのページで試した結果になります。

試したページは

  • 文字数:4600文字
  • 画像:JPEG写真15枚

というスペック。Javasprictを利用した装飾もボチボチに行っています。

試したページはこちら

 

通常仕様ページのスコア

通常仕様ページ

Gooogleの速度測定ツール「Page Speed Insights」にて測定した結果。

ページの速度はエラーとなっていますが、最適化判定としては「Medium(中)」の評価。スコアは79です。

通常仕様ページだともっと遅いかな?と想定していましたが、あと一歩で「Good(良)」というスコア。思っていたよりは悪くありませんでした。

このページをAMP化するとどうなるか?結果は次のようになります。

 

AMP化ページのスコア

WING AMP化ページスコア

最適化判定は「Good(良)」で、スコアは94となりました。通常仕様ページと比べると15ポイント良い評価となっています。

さすがのAMP対応ページ・・といったところでしょうか。次は、AMP化することによってデメリットはないのか?について紹介します。




 

AMPのデメリット【サイト表示・表現の制限】

魅力的なAMP化ですが、一方でデメリットもあります。

それは、AMP対応すると、サイトの表現が限定されてしまうこと。

AMPは基本的に「テキスト情報を高速で配信する」ことを主眼に置いて組まれた仕組み。

なので

  • CSSが制限されて、ページ内の凝った装飾ができなかったり
  • JavaScriptが制限されて、動かす仕掛けができなかったり

ということが発生してしまいます。それはWINGでも例外ではありません。

CSSとは

タグで囲んだ範囲の文字の色・大きさ・背景の色や配置などを指定するためのプログラミング言語。こういう赤字テキストマーカーテキストも基本的にはCSSを用いて表現されています。

JavaScriptとは

プログラミングの補助言語。主に、文字や画像,インターネットのページ等を動かす仕掛けを作るものです。例えばこんな文字や、下のようなスライドされる記事リンクはJavaScriptを利用して作られています。
yeation 評判 レビュー

人間工学椅子

2021/7/16

【YEATIONオフィスチェア評判】人間工学椅子レビュー

テレワークが主流になりつつある今日この頃。 家で仕事するために長時間座ってても、首や肩が疲れない椅子が欲しいですよね。 「YEATIONのオフィスチェアー」は人間工学に基づいて設計された、疲れにくいハイバックチェアー! 我が家では、「YEATION人間工学オフィスチェアー」と同じく人間工学に基づき設計された椅子、「Ticova人間工学オフィスチェアー」を愛用しています。   この記事では「人間工学オフィスチェアー」を使った感想や、他メーカーの椅子との比較などをレビューしていきます。 2~3万円で ...

ReadMore

Umi オフィスチェア 評判

人間工学椅子

2021/5/18

【Umiオフィスチェアの評判】人間工学椅子レビュー

テレワークが主流になりつつある今日この頃。 家で仕事するために長時間座ってても、首や肩が疲れない椅子が欲しいですよね。 「Umiオフィスチェアー」は人間工学に基づいて設計された、疲れにくいハイバックチェアー! 我が家では、「Umi人間工学オフィスチェアー」と同じく人間工学に基づき設計された椅子、「Ticova人間工学オフィスチェアー」を愛用しています。 この記事では「人間工学オフィスチェアー」を使った感想や、他メーカーの椅子との比較などをレビューしていきます。 2万円台の価格で手に入る大きなやすらぎ。長時 ...

ReadMore

洗える 低反発 はっ水ラグ

おすすめグッズ

2021/4/20

洗える低反発はっ水ラグ・カーペットの評判・レビュー!失敗&買い直し体験談

小学校・幼稚園と、遊び盛りの子ども達がいる我が家。 ラグ・カーペットがだいぶへたってきたので新調することになり 夏・冬(ホットカーペット)兼用で使えて  寝心地が良さそうで  汚れがつきにくい という条件で探し、楽天で良さげなものを見つけ購入しました。     ただ、結果的にはすぐに他のラグを買い直しするハメに・・ 商品自体をディスってるわけではないのですが、ラグの色など選択ミスもあり、我が家にとってはミスマッチで残念な結果となってしまいました。 同じような境遇の方の参考になればと、そ ...

ReadMore

AM2120 防水カバン タイトル

おすすめグッズ

2021/4/4

AM2120-3way防水ビジネスバッグの評判・レビュー!通勤にも◎

  雨の通勤・・それはなんとも気が重い一日の始まり。 普通のカバンだと、雨足が強い日には会社についた頃には中までグッショリ。パソコンなどへの影響も心配です。 そんな悩みを解消できるのが「AM2120の3way防水バッグ」! デザインが良くて丈夫かつ機能的、そして何よりタフな防水機能で貴方のツールを雨からしっかり守ってくれるバッグです。 実際購入しての使い勝手を、この記事ではレビューします。       悲惨を極める、雨の日の通勤  気が重い職場への通勤・・。そしてそ ...

ReadMore

テクシーリュクス ゴアテックス 防水 革靴

防水靴

2021/4/4

テクシーリュクスのゴアテックス防水レビュー【幅広革靴の評判】

雨の徒歩通勤・・それはなんとも気が重い一日の始まり。 普通の靴だと、雨足が強い日には会社についた頃には靴の中までグッショリ。中の靴下まで濡れてしまいます。 ただでさえ憂鬱な仕事を、湿ってしかも臭いも気になる靴下を履きながらこなさなくてはなりません。 そんな悩みを解消するためにオススメなのが「テクシーリュクスの防水ビジネスシューズ」! タフかつ機能的な防水機能で、貴方の足を雨からしっかり守ってくれる革靴です。 実際に私はTU-8002と比較の結果、テクシーリュクスTU-8005を購入しました。 その使い勝手 ...

ReadMore

AMP化したページはスマホ画面で見た時の表示に差が出てきます。

WINGの通常仕様ページとAMP化したページで、スマホで見た時の表示がどのように変わるのか?詳しく紹介してみます。

 

AMPページと通常ページの表示比較

<表示比較1>ページ冒頭

WING AMP通常ページ比較

まずはページの冒頭部分。左側が通常仕様、右側がAMPページです。

パッと見でわかりますように、AMPページだと色がグレー基調になって鮮やかな表現ができなくなっています。左上のメニューは使えなくなり、カテゴリーの表示も出ていません。

ちなみにWINGのAMPページでは「完全版を表示する」というボタンを設置することができます(赤枠で囲った部分)

これをクリックするとAMPページから通常仕様のページにユーザーを遷移させることが可能。

なので、キレイな表示で見たい人には「完全版を表示する」をクリックしてもらうなど、うまく使えばユーザビリティーを向上させられます。

 

<表示比較2>プラグイン、ページ内表現

WING AMP通常仕様表示比較

赤のマーカー部はAMP化しても同じように表示されていますね。

ですが、テキストの調整が解除されていて、AMPページだと少し文字が小さくなっています。また、赤で囲った部分で、チェックマークの色がグレーに変わってます。

JavaScriptを使ったプラグインにも制限が。緑枠部分を見てもらえばわかるように、プラグインを使った目次の表示がAMPページだとできなくなっています。

 

<表示比較3>CSSボタン、ページ内表現

AMP通常仕様表示比較3

AMPページでは赤枠で囲った部分の吹き出し付ボックスの色が抜けてしまって、アイコンも小さく。

青枠で囲った「ページ上部へ戻る」ボタンはAMPページだと表示されません。

また、緑枠のボタンは

今すぐクリック

のようにキラリと光るボタン。WINGだと簡単に設置できますが、これもAMPページだとすごくシンプルな表現になってしまっています。

 

WING(アフィンガー5)のAMP化まとめ

AMP化まとめ

  1. WINGは1クリックでページをAMP化できるという優れたテンプレート
  2. AMP化すると、スマホ表示が速くなる
  3. 一方、AMP化するとサイトの表示がすごくシンプルになってしまう

まとめると、AMPには上記のようなメリット・デメリットがあります。

ちなみに我が家は最初このAMPに魅かれてWINGを購入したのですが、結果的に当サイトではAMP化はしてません(苦笑)

なぜかというと、やっぱり表示がシンプルになってしまうとWINGで可能な多彩な表現ができなくなってもったいないし、なにより通常仕様でもモバイルの速度スコアがいいからです。

先ほどは評価「Medium(中)」のページをサンプルとして出しましたが、ほぼ「Good(良)」に近いスコア。

他の画像を多く使っているページでもテストをしてみましたが、ほとんどが通常仕様で90スコア超えの「Good(良)」評価になりました。

WING通常仕様スコア

通常仕様AMPスコア

 

WING(アフィンガー5)はテンプレート自体がすごく高速表示されると評判ですが、試してみてもそれが納得できる結果になりました。

 

表示が速いWINGはオススメテンプレート

WING(アフィンガー5)はこのようにモバイル環境でもデフォルトで高速表示される仕様になっています。

それに加え、さらに速度を上げたい場合AMP対応することも簡単にできるという、なんとも贅沢な仕様。

その他の部分でも使い勝手が抜群で、オススメできるテンプレートです。

マストツール!な商品紹介リンク

あなたのサイトで商品を紹介するのに、こんなリンクを作成して使ってみたくありませんか?

手間なくカンタンに、無料ツールで作れる方法を下記のページで解説しています!

必須!
amazon 楽天 yahoo 商品リンク ブログ
ブログにアマゾン・楽天・ヤフーの商品紹介リンクを貼る一番ラクな方法

この記事は 「Amazonや楽天、Yahooショッピングの商品リンクを、自分のブログやサイトに、手軽かつスマートに設置したい!」方向けのまとめになります。 リンク一つ作るのにも、使うツールが良くないと ...

続きを見る

-Affinger
-