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月に幼児含む子供3人、親、じいちゃんばあちゃんの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を利用して作られています。
住信SBIネット銀行 住宅ローン 体験談 流れ

住宅ローン新規借り入れ

2019/8/3

【口コミ・体験談まとめ】住信SBIネット銀行住宅ローンの手順・流れは?

念願のマイホームが、もう手が届きそうなところに・・でも、それと同時にとにかく高く、家計の重荷になってしまうのが住宅ローン。   少しでも月々の支払額を安くしたい・・!   そのための方法の一つとして、金利が割安な「ネット銀行住宅ローン」を利用するというのがあります。 ネット銀行で、住宅ローンの「新規借り入れ」も「借り換え」も経験している我が家。 現在、住信SBIネット銀行で住宅ローンを借りてます。 安いネット銀行の中でも最安水準の金利を提供し続けてる住信SBIネット銀行は、住宅ローンで ...

ReadMore

ネット銀行 住宅ローン 決済場所 司法書士

ネット銀行で住宅ローン

2019/8/2

ネット銀行で住宅ローン、決済場所はどこ?司法書士は2組?決済日の体験談

住宅ローンをネット銀行で検討してる方、   ネット銀行の場合、実店舗ないけど融資実行の決済場所はどこになるんだろう・・? 司法書士は銀行から指定あるみたいだけど、どうなるの?   と不安に思われるかもしれません。 我が家は新規・借り換え共に住宅ローンをネット銀行で運用しています。 結論としては、新規借り入れの場合「決済場所」も「司法書士」も売り主側との調整次第になります。 ですが、通常そのことがネット銀行で住宅ローンを借り入れる障害にはならないので大丈夫! この記事では、我が家や他の方 ...

ReadMore

住信SBIネット銀行 借り換え 司法書士 金消

住宅ローン借り換え

2019/7/20

【住信SBIネット銀行借り換え】金消契約と司法書士手続き、融資実行の流れ

  ネット銀行での住宅ローン借り換えを検討している方・・ 本審査を通過すると、その先はどんな手順を踏む必要があるのか?ご存知でしょうか。 住信SBIネット銀行で実際に住宅ローンを借り換えた我が家が、本審査後の手順、またかかる手間・時間についてわかりやすくご紹介していきます。 ちなみに本審査後の手続きや打ち合わせにかかった時間は、実働で1時間ちょっとくらいでした。     本審査通過後の流れ  現在借り入れてる銀行へ、ローン完済の連絡  借り換え先の住信SBIネット銀行とローン ...

ReadMore

住信SBIネット銀行 住宅ローン 借り換え 本審査

住宅ローン借り換え

2019/8/1

【住信SBIネット銀行借り換え】本審査にかかった時間と面倒だったこと

「住宅ローンの本審査」って、すごく面倒くさそうな響きですよね。 ネット銀行の住宅ローンの場合、果たして   書類はどんなものが必要で 記載する手間はどれくらいかかって 審査にどれくらいの期間が必要   になるのか? 我が家は「住信SBIネット銀行」にて住宅ローンの借り換えを行った経験者です。 実際に本審査はどのような流れで進むのか?どれくらいの時間と手間がかかったのか?また、その他の注意点を紹介します。 本審査には時間も手間も、思ってたよりはかかりませんでしたが、ネット銀行の住宅ローン ...

ReadMore

固定金利 変動金利 比較 住宅ローン

ネット銀行で住宅ローン

2019/8/1

どっちがいいの?固定金利の住宅ローンを、変動金利に借り換えたリアルな理由

  住宅ローンを借りる時に、変動金利にしようか固定金利にしようか・・って悩みますよね。 我が家は、元々は固定90%、変動10%ミックスローンというほぼ固定金利で住宅ローン運用を4年ほどしてました。 が、結局のところ借り換えにて住信SBIネット銀行の変動金利100%へと変更。 この記事では、なぜその結論に至ったのか・・?リアルな理由をお伝えしていきます。 固定金利にすべきか?変動金利にすべきか?迷っている方への参考となれば幸いです。     我が家が、固定金利から変動金利に借り ...

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.