全ページAMP HTML対応させた感想文〜結局AMPってどうなのさ〜
AMPってすごいよね！AMPっていいよね！ってよく聞くけど、実際どうなの？を試した人柱がここにいます。
さあ、人柱の声を聞くのです！そしてあなたのAMP導入検討の糧にするのです！
結論
最近仕事できる人ムーブをするのにハマっているので、先に結論から書きます。
・AMPすごい！どのくらいすごいかっていうと、めちゃくちゃすごい！
・これからスクラッチでサイト作るって人はコンポーネント含め入れるべし
・中途半端に組み込もうとするとコスパ悪いんでやめた方がいい
・そうでもない（速度だけ目当てとか）なら入れないでもいいや
個人的には、AMPの意義は「速度向上」というよりは、「UX向上」にあると思います。
AMPだけ対応した時の速度はまあいいかな、くらいなんで、SEO頑張りたくない人はそこまで努力する意味ないです。日本語ドキュメント少ないし。
WEBサイトとしてパーフェクトを目指してて技術力があるならしっかり入れたほうがいいです。
WordPressとかでプラグインでパパッとやろうとしてる人は、パパっとやっといて損はないです。
AMPってなんだっけ
じゃなくて
公式を見るのがやっぱり一番！Google翻訳さんありがとう！
短くまとめると：WEBページを高速表示できるようにするフレームワーク
※大抵「モバイルで」という接頭語が付きますが、PCでも十分効果があるので外しています
導入したAMPの概要
ひとえにAMPと言っても導入方法・範囲は様々。まずは自分が何をどこまで導入したかをここに記します。
※この記事の通り、フルスクラッチで作っています。なので基本エンジニア向けです。非エンジニアでも参考にできるよう善処はします
・WEBサイトに導入
・全ページAMP対応
・つまり、全ページAMPキャッシュ対応
・ページはAMP HTMLのみ準備（非AMPコンテンツは作らない）
・AMPコンポーネントを可能な限り利用。フォームとかでも使っちゃう。
どこがすごい
とにかくAMPコンポーネントが優秀。
ぶっちゃけAMPキャッシュはお釣りなんじゃないかってくらい。
AMPコンポーネントが優秀すぎて、ログインが必要な（AMPキャッシュが意味を持たない）WEBサービス作るのにもAMP使っちゃったくらい。
どれくらい優秀かというと、もうBootstrapなんていらないってくらい。
具体的には、
amp-img：勝手にLazyLoadしてくれる。すごい。
amp-video：フレームアウトで勝手に動画止めてくれる。すごい。
amp-lightbox：モーダル自作すると背景スクロールされちゃう問題を勝手に解決してくれる。すごい。
amp-fx-collection：fade-inとか、fly-in-bottomとか、inview系アニメーションがめちゃめちゃ簡単に実装できちゃう。しゅごい！
amp-position-observer：inview処理ができちゃう。スクロールある程度されたらCTAだすとかもお茶の子さいさい。グレート！
amp-analytics：GAだけじゃなく、いろんなところにめちゃめちゃいろんなデータ送れちゃう。マーベラス！
amp-form：なんともうAMPでフォームまで作れちゃうんですよ。しかもバリデーションを正規表現で指定できるんですよ。パーフェクト！！
しかも、全コンポーネントで要素にメディアクエリ がかけられる。これがヤヴァイ。極めれば画面サイズに応じた出し分けで高速化にも貢献できますわよ。
と、書こうとするとキリがないくらい便利なんですねぇ！
各コンポーネントは別に読み込むようになってるという点も、必要最低限のJSサイズで済むからいいですねぇ！
正直、「AMPキャッシュしてくれるおかげで検索からの流入が速い」とか「検索結果でリッチに表示される」とかよりも、AMPコンポーネントによる高いUIのほうが価値があるんじゃないかってレベルですねぇ！
amp-bindとかamp-mustacheとか使い出したらもっとすごいんだろうなぁ
欠点
「外部JSが使えない」これに尽きますね！
amp-scriptを使えばJSも使えるとはいうものの、onloadができない時点で御臨終。
サイト運営してると「JS設置してオプトインするのじゃ！」とかやりたくなるけど、それをいちいちAMPで使える形に置き換えないといけないのがなかなかしょっぱい。
後、ちゃんとコンポーネント使うようにしてサイト作ると疲れます。
やっぱり何かと制約はあるので、しっかり気合入れないと途中で嫌になる。
CSSの上限が50KBも、案外キツい。
逆に、これら以外は特にないです。CSSも普通に当てられるのでレイアウトも普通に組めるし。
導入するのに必要なこと
公式ドキュメント
気合
根性
ドキュメントが英語ばっかりでもやり抜く気概
結論
導入するんだったら、しっかりやるべし。それだけの価値はある。
「amp-imgだけ使おうか」とかだとあんまり意味ない気がする。というかもったいない。
あと正直、AMPキャッシュとかあんまりなぁって気がしてる。だってデフォでページ速度PCで99だもん。キャッシュしなくても99ならキャッシュしてもさして変わらんでしょ？と思ってしまう自分がいる。
AMPの真価を発揮させたいなら、コンポーネントまでしっかり作り込んだほうがコスパはよくなる。
つまり、
・WordPressのプラグインとかで適当にAMP化
・コンポーネント単位でAMPを使ってフルスクラッチ
以外はコスパ合わないからAMP使わなくてもいいんじゃね？って感じです。
あと、AMPを入れたからといって完璧になるわけではないので、気をつける必要があります。画像普通に配信してたらページ速度PCで60とかだったし。
入れなくてもよかったかもなぁ〜っていうページ
・問い合わせ
・インデックスされないアーカイブ
AMP HTMLにすることで制約が増えるんで、これらのページはAMPコンポーネントを使いつつ普通のHTMLとして書いた方がいい気がしてます。
AMP HTMLにするメリットはAMPキャッシュが使える&検索結果がリッチになることなので、オーガニックの窓口にならないページはAMP HTMLにする必要ない節isあるあるなわけですね。
おまけ
今回は普通にAMP HTMLやっただけだけど、次はアップグレードさせてサーバーサイドレンダリングとかAMPストーリーとかやってみたいなって思ってます。ここら辺は特に日本語ドキュメントがないので、やった時はまた記事にするつもりです。
AMP使ってく時につまづいた部分とかも、後々コンテンツに落とし込んでいくので、お礼が欲しいなぁ。
おおっと、なんと、こんなところに賽銭箱がありました！
びっくり。
この記事が気に入ったらサポートをしてみませんか？