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

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

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

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

でも、AMPって

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

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

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

 

AMPとは？

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

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

 

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

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

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

 

AMP化のメリットは？

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

 

ユーザビリティの向上

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

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

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

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

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

 

SEO観点からの効果

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

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

が見込めます。

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

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

 

WING（アフィンガー５）は簡単にサイトをAMP化できる

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

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

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

 

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

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

 

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

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

 

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

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

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

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

 

AMPの速度向上効果は？

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

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

試したページは

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

 

通常仕様ページのスコア

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

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

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

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

 

AMP化ページのスコア

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

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

 

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

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

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

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

なので

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

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

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

 

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

＜表示比較１＞ページ冒頭

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

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

 

＜表示比較２＞プラグイン、ページ内表現

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

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

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

 

＜表示比較３＞CSSボタン、ページ内表現

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

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

また、緑枠のボタンは

今すぐクリック

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

 

WING（アフィンガー５）のAMP化まとめ

AMP化まとめ

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

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

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

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

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

 

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

 

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

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

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

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