WING(Affinger5)

WING(アフィンガー5)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を利用した装飾もボチボチに行っています。

試したページはこちら

森のソラニワはプール・遊び場が充実!幼児におすすめの北海道リゾート

2018年4月にリニューアルオープンした、北海道のリゾートホテル「森のソラニワ」。 初夏の7月に子供(6歳、4歳、1歳)、親、じいちゃんばあちゃんの3世代で一泊二日宿泊! 天候はちょっと残念ながらの小 ...

続きを見る

 

通常仕様ページのスコア

通常仕様ページ

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を利用して作られています。
change the world 和訳

オフスプ IXNAY 和訳

2019/4/27

【Change The World和訳】オフスプリング歌詞を徹底考察&解説

THE OFFSPRINGのアルバム「IXNAY ON THE HOMBRE」のラストを飾る「Change The World」。 歌詞の内容は、オフスプリングが所属していたレコード会社を移籍することになった際に、揉めた相手を皮肉った内容と推測されます。 和訳と意味を解説していきます。          「Change The World」歌詞和訳の全文 セールスマンがどうやって 太陽をのぞきこむのかがわかんだよ そこにいて、そいつらが一人ずつ 落ちてくのを目の当た ...

ReadMore

way down the line 和訳

オフスプ IXNAY 和訳

2019/4/11

【Way Down The Line和訳】オフスプリング歌詞を徹底考察&解説

THE OFFSPRINGのアルバム「IXNAY ON THE HOMBRE」の収録曲「Way Down The Line」。 「与える環境によって子どもの人生は決まり、それは連鎖してくんだ」と歌うナンバー。 和訳と意味を解説していきます。          「Way Down The Line」歌詞和訳の全文 いつの時代も変わりゃしない 与えられる環境によって、 住める世界ってのは決まるんだ また全く同じことが起こるのさ ずっと続いてく 永遠に断ち切れない連鎖 悲 ...

ReadMore

pay the man 和訳

オフスプ AMERICANA 和訳

2019/4/7

【Pay The Man和訳】オフスプリングの歌詞を徹底考察&解説

THE OFFSPRINGのアルバム「AMERICANA」のラストナンバー「Pay The Man」。 アラビアンで妖しげなメロディーの中に"静"と"動"の展開を詰め込んだ一曲。歌詞は人は皆、生まれながらにして”政府”に報いてるんだ・・・という現実と、それに反発する葛藤を歌っています。 和訳と意味を解説していきます。       「Pay The Man」歌詞和訳の全文 風がどうやって吹くのか、 見てみろよ 命は絡み合っている 世界の有り様を見てみるんだ ヤツが俺たちに窮状を ...

ReadMore

walla walla 和訳

オフスプ AMERICANA 和訳

2019/6/13

【Walla Walla和訳】オフスプリング歌詞を徹底考察&解説

THE OFFSPRINGのアルバム「AMERICANA」に収録されているナンバー「Walla Walla」。 ノリがいいライブでもよく演奏される曲ですが、歌詞は刑務所へぶち込まれる友人について歌っています。 和訳と意味を解説していきます。       「Walla Walla」歌詞和訳の全文 あばよ友よ、またやっちまったんだな ムショに行くんだ、監獄に向かってる 今までは軽い罪ですんでたのに、 誰もまともな生き方を教えてくれなかったんだろうな 裁判官は前みたいに大目にみてく ...

ReadMore

オフスプリング和訳

2019/4/27

【THE OFFSPRING和訳集】オフスプリング歌詞を徹底解説&まとめ!

  【アルバム別】THE OFFSPRING歌詞リンク集      【ジャンル別】THE OFFSPRING歌詞まとめ シニカル 身近な話題を中心に、痛烈な皮肉を歌ったナンバー 白人のなりたがりの兄ちゃんを痛烈に皮肉った大ヒットナンバー「Pretty Fly(For A White Guy)」。 アメリカの現状をシニカルに歌い、嘆く「Americana」。 若くして子供を産んで、自らは好き放題に遊び回る親を皮肉った「Hit That」。 オフスプリングの真骨頂とも言える、シニ ...

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対応することも簡単にできるという、なんとも贅沢な仕様。

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

 

-WING(Affinger5)
-

Copyright© LeGoon Blog-我が家の忘備録- , 2019 All Rights Reserved Powered by AFFINGER5.