web

サイトのAMP化を検討している方へ、導入前の注意点をまとめました

AMPとは、googleが牽引する、webページを爆速で表示させる 為の取り組みです。

ぼくはこのAMP、素晴らしいと思っています。

なぜなら、スマホとかでページが表示されなくて、イライラすることがあるからです。
検索でとても気になるサイトを見つけても、表示される前に読むのを諦めちゃいます。

できたら、サクッと読みたいじゃないですか・・・

  1. 爆速がなぜ重要か
  2. AMPにしたらアクセスや収益性が向上するか?
  3. AMPじゃなくても同等の成果を得ることはできる
  4. AMP化の注意点
  5. まとめ:表示を早くして、サイトを見てもらおう

もし、導入を検討されているであれば、ユーザー視点で考えつつ、以下を読み進めてみてください。
具体的にどんなメリットがあるのか、分かっていただけるかと思います。

爆速がなぜ重要か

AMPはユーザーにコンテンツを見てもらうために、表示速度を爆速にする必要性を

ページがなかなか表示されない 👉 離脱

インターネットでサイトを閲覧するデバイスは、「モバイルがメインとなっている」という現状は、よく知られていますね。
モバイルということは、外出時での4G回線など、ナローな通信環境で閲覧されることが多くなるということでもあります。

もし、そんな環境で、表示が非常に遅いサイトに出くわすとどうなるか。
ユーザーは待ってくれません。
表示されなければ、読む前に元のページに戻るか、別のアプリを立ち上げるでしょう。

なぜ表示が遅くなるのか?

現代のインターネット上のコンテンツは、非常にリッチになっています。
画像、インタラクションを表現するためのスクリプト、動画など。

それもこれも、ユーザーを楽しませるため。
より楽しかったり、より分かりやすく、使いやすくなることを実現するためです。

しかし、リッチなコンテンツは、通信回線のリソースを多く必要とする要素で構成 されています。
そのデータが、ナローな回線を使って大量にデバイスに送られるわけです。
だから、コンテンツの読み込みが完了するまでに、時間がかかる ことになるんですね。

よりよいユーザー体験を提供するために、素晴らしいコンテンツを用意したのに、そのせいでなかなかページが表示されないという マイナスのユーザー体験 を生む原因になってしまった。
どんなに素晴らしいコンテンツでも、見てもらえなければ意味がありません。

AMPにしたらアクセスや収益性が向上するか?

さて、こんな中で注意するポイントがあります。

「AMPを導入したら、アクセス数が爆増するんでしょ?」
という期待感を持っている方、多いんじゃないでしょうか。

また、その他にも、こんなイメージで期待している人。

  • 普通のサイトよりもAMPサイトは優れている
  • SEO的に有利になる
  • 収益化につながる

AMPはこれらを約束するものでは、ありません。

AMPは爆速化の為。それ以上でも以下でもない。

あくまで、AMPは表示を高速化する為の取り組み です。
上述した要素を向上させる為の取り組みではないのです。

上記のような成果に繋がるのは、結果論。
表示の高速化がもたらす、ユーザーへの良い影響が、結果的に、上記の要素にも良い影響を与えるのです。

つまり、AMPでなくても「表示速度が早ければ、AMPである必要性はない」とも言えます。

AMPじゃなくても同等の成果を得ることはできる

先に挙げている通り、AMPは表示速度改善が目的です。
まずは、ご自身のサイトの表示速度改善を、徹底的に行うことから始めましょう。

サイトのパフォーマンスを測定するLighthouse

Google Chromeのdeveloper toolの機能の一つである、Audits。
その中にLighthouseという、ページを解析するツールがあります。

まずは、こちらを使って自身のサイトの問題点をチェックしてください。
Performanceだけ見れば良いと思います。

コンテンツ以外に問題がある場合があります。
例えば、サイトが置かれているサーバーの影響なんかもありえます。

その場合は、サーバーを変えるだけで、十分なパフォーマンスに達する可能性もあります。

AMPを導入するかの判断は、どうしたらいい?

lighthouseで出た結果に対して、対応はしっかり行いましたか?
行っていれば、かなりの速度改善がなされたと思います。

もしも、できる限りのスピードハックが完了して、まだ「納得行く表示速度になっていない」と感じた場合。
そんな方は、AMPへの移行を、本格的に検討すると良いでしょう。

ちょっと遠回りに感じるかもしれませんが、おそらくこれが一番効率的な判断方法だと思います。
作業コストがバカにならないので、中途半端に導入すると、あとが大変ということですね。

AMP化の注意点

AMPは仕様が厳格です。
よって、準拠したサイトの構築に、手間がかかる場合があります。

特に既存のサイトをAMP化したい場合は、それなりに手間がかかると思ったほうが良いです。

準拠するのは結構メンドい

既存のサイトをAMPに対応していくのは、それなりに労力が😅

HTMLをAMP HTMLに書き換えていく必要があります。
また、リッチコンテンツの導入は、AMPに準拠した書き方に変更しなくてはなりません。

ゼロからの作成であれば良いのですが、すでに作り込まれたサイトだとすると・・・導入のコストは、低いとは言えないでしょう。

なので、スピード改善とAMP化のコストを見極め、実装する価値があるかをしっかり検討しましょう。

仕様から外れていると、AMPとして認めてもらえない

AMP化を実装をしたあとには、注意が必要です。

外部のjavascriptを読み込んでいるだけで、エラーが出ちゃうんですよね・・・
新しい機能の導入などの際に、仕様から外れないように注意を払う必要があります。

仕様から外れていると、googleからは「AMPとして成立していないページ」として、判断されます。

最初の段階から、AMPのルールを意識して、仕様を考えましょう。

まとめ:表示を早くして、サイトを見てもらおう

AMPの重要なコンセプトは、「サイトの爆速表示 = 最も重要なUX」 なのだと理解しています。

なぜなら、見てもらえないことには、作る意味さえ見えなくなってしまうからです。
まずは何より、コンテンツを見てもらうこと。

そして、当たり前に安定した速度と、優良なコンテンツを提供すること。
そこで初めて、ユーザーからの信頼を獲得できると考えています。

AMPにしたからといって、一朝一夕に結果が出るものではありませんが、いずれ必ずプラスに働くことでしょう。

next...
#lighthouse,#ux,#amp,#blog

CircleCIを導入してシンプルなワークフローを実現!デプロイの効率化にチャレンジ

3分でOK!AMPサイトにfacebookプラグインでコメント欄を設置する

AMPで「ページトップへ遷移する」ボタンを設置する方法とNuxt.jsでハマったところを解決

AMPでfadeやparallaxを簡単に実現できるamp-fx-collectionの使い方

ブログサービスの選び方。静的サイトという選択肢はいかがでしょう?

構造化データ(JSON-LD)をAMPブログに設置する方法

ウェブ系の人こそブログを作った方がいいと思う理由

Google Fonts+日本語をAMPサイトに導入する

ブログを作ってるうちに、マネタイズとUXの関係性を学んで活かせそうな気がしてきた

AMPサイトでgoogle analyticsを設置する方法

レスポンシブとアダプティブの違いを調べる

UXとUIについて