結構前にAMP 対応しようと思ったけどやめたときのメモを掘り起こしてポストしておく。



AMP のチュートリアル的なやつ数回眺めて「なんか(標準として)イマイチだなー」と感じつつ、 Google がサポートするなら一回試すぐらいはしようと思いやってみましたが、対応を見送りました。

AMP のスコープ

  • ページリフローの低減
    • 画像サイズ指定の厳密化とか
  • ブロッキングスクリプトを強制的に不許可
  • 遅くなりそうな機能はとにかくナシ

https://www.ampproject.org/docs/get_started/technical_overview.html 見ると、別に AMP だからできるのだ!っていう機能はない。

AMPには2つの要素が同居している

  1. コンテンツ自体の表示の高速化 (レンダリング負荷の軽減など)
  2. コンテンツをダウンロードしはじめるまでの高速化 (CDN配信とか)

後者はつまり AMP を使っている限り悪意のあるスクリプトのあるページにはなりませんよという保証。

AMP のメリット

  • 検索流入からの表示が早くなる
    • Google (など) にキャッシュされてCDN経由で配信される

AMP のデメリット

  • 普通にロードする限りではたいして早くならない
    • ないし真の static コンテンツに対して AMP JSの実行時間分損をする
  • 専用のHTML・CSSを書く必要がある
    • かなり制約が多い。CSS にも !important はダメとか細かい制約がある
  • マークアップ側にレイアウトという概念がある
    • は?
  • AMP JS で提供される以外の機能は使えない

AMPのメリットはメリットなのか?

検索流入に特化するならメリットになる。Google の CDN 経由で配信されるのが大きい。

しかし、似たような構成 (特にいえばJS無効の) のページのロード時間ってそもそも遅くない。コネクションにかかる時間分の速度向上のために、わざわざ特殊なマークアップで書くメリットはあるだろうか。

AMP は標準になりえるか?

結局 AMP がやってることって「JSなしのページのキャッシュ・プリロード」+「オレサマのJSなら特別に実行してやっても良いぞ」みたいな感じなので、そのために変なカスタムエレメントとか入れてんの? レイアウトまわりにCSS以外の概念入れんの?? という疑念が晴れない。

元々 Cache-Control: public という便利なのがあるのだから、その場合はキャッシュ済みのを CDN から配信するのを優先したらいいだけじゃないか? 既存技術の延長でなんとかできる範囲ではなかったのだろうか? 任意スクリプトってのが最大の問題だけど、AMPならオッケーってのはどうなのか?

ベンダープリフィックスつきのボイラープレートをいちいち書かされるのも意味不明。新しいベンダー出てきたらどうすんの?

カスタムエレメントも、amp-twitter とか amp-facebook とか、どういうつもりで追加してるのかわからないエレメントがたくさんある。いろんなサービスが「カスタムエレメントを定義してくれ」といったら対応コードが無限に増えていくんでしょうか。amp-ad も、メジャーな広告ネットワークをサポートしているけど、そもそもサポートする広告ネットワークを指定されてるのが気にくわない。いろんな無限のアドネットワークがが「ウチにも対応してくれ」といったら対応コードが無限に増えていくんでしょうか。

と、だんだんイライラしてきたのでやめて、別の見方をしてみることにします。

JS フレームワーク AMP

  • Google でインデックスされることが保証されてる
  • 画像の遅延ロードとかはSEO的にどうなの?という不安があったがAMPでは保証される
  • なんとなく便利なインターフェイスがついてて、パフォーマンスが良いことが保証されている

あたりを考えると、変なJSライブラリを使うよりはマシそうな雰囲気があります。この捉えかたで多少心が落ち着きました。

「AMP とは準 static ページを作るためのJSフレームワーク」であって、Google が対応済みという大きなメリットがある! 万歳!!! Google が対応済みってのがとにかく最高!!!

  1. トップ
  2. tech
  3. AMP に対するモヤモヤ