AMPを採用したWebサイトをリリースし、運用してきた雑感
asial-kamo
アシアル鴨田です。
とあるプロジェクトで、AMP(Accelerated Mobile Pages)を使用したWebサイトを作成しており、その中で得た知見を少しお話したいと思います。
AMPに関する基本的な説明は省きますので、「AMPとは」みたいな検索で概要を把握しておいていただければと思います。
CSSのサイズに気をつけろ
AMPでは、CSSのサイズ上限が決まっています。以前は50,000Byteまででしたが、現在は75,000バイトまでと、若干ではありますが緩くなりました。
実際、プロジェクト中に50,000Byteの壁に悩まされたので、75,000Byteまで増えたのは本当にありがたかったです。
もし、CSSサイズでバリデーションが通らなかったときは、以下のような対策はいかがでしょうか。
Vueを使用していて、かつ、Scoped CSSを採用しているようであれば、Scoped CSSを止めてみる
ついつい頼りがちではありますが、Scoped CSSを採用すると、クラス名に[data-v-hash]が割り当てられ、これがCSSサイズを圧迫する一つの要因になります。
逆に、Vueを使用している場合、ページごとに使用しているコンポーネントのCSSだけが組み込まれるように設定しましょう。
Vueを使用していない場合においても、CSSフレームワークなどで規定され、長大になっているクラス名は見直した方がいいかもしれません。
リファクタリングしよう
ものすごく当たり前のことで申し訳ないですが、これは避けて通れません。Minify可は当然のこととして、使用されていないコードは削除し、共通しているコードはうまくまとめ、ショートハンドプロパティを積極的に採用しましょう。
そもそものデザイン(コンセプト)を見直す
AMPを採用する場合、あまり込み入ったデザインを採用すべきではないでしょう。AMPの本来の目的としては、モバイル端末でページを高速に表示させることです。 デザイン性を重視すべきサイトであれば、そもそもAMPを採用すべきではないかもしれません。
Javascriptにも制限があるぞ
AMPでは、2019年後半までJavaScriptが全く使用できませんでした。現在は、<amp-script>が公開されたことによって、制限付きではありますが、一般開発者によるカスタムJavaScriptを使用することができるようになりました。
制限は以下の通り。
・ファイルのサイズは150KB以内
・ゼロMutation: ユーザーの操作なしにDOMの変更は不可
・Mutationは5秒以内とすること
大がかりなことはできませんが、それでも<amp-bind>や<amp-list>でできなかったことができるようになっています。
AMPコンポーネントの制限に気をつけろ
提供されているAMPコンポーネントを使用するときにも、コンポーネントごとの制約がある場合があります。例えば、プロジェクトで引っかかったのは<amp-iframe>を使用したとき。
<amp-iframe>の表示位置には制限があり、ページ最上部から600pxより下の位置、または、ビューポートの75％より下の 位置に置かなければなりません。
ただし、回避する方法もあって、<amp-iframe>内にplaceholder属性が設定された要素を置くことで、上記の表示位置の制限を回避することができます。
AMPコンポーネントのバグに気をつけろ
AMPコンポーネントは正式に提供されているものだからといって、複数端末で完璧に動作するのかと言えばそうでもありません。
<amp-lightbox-gallery>を使った時のことでした。iOS端末では完璧に動作していたのに、一部のAndroid端末では挙動がかなりおかしな感じになったのでした。
修正したいけれども、そんなことはできないので、泣く泣くあきらめ、<amp-lightbox>を採用したのでした。(でもやっぱりちょっと使い勝手が悪い)
Core Web Vitals と AMP
以前は、Googleのモバイル検索でトップニュースに掲載されるには、AMPページであることが要件となっていました。
しかし、今年になって、新しい指標であるCore Web Vitalsが公開されたことで、Core Web VitalsがGoogle検索のランキ ングシグナルに導入されたタイミングに合わせて、トップニュース掲載の必要要件から、AMPページであるという要件が除外されました。ただ、除外はされましたが、AMPページであれば掲載されるということに変わりはありません。
ここまでで、AMPページ化するためのいくつかのTIPSをご紹介し、その中で果たしてAMPを導入するべきかどうかの判断を根本的に見直すきっかけにもなったかと思います。
AMPを一度は導入してみたが、やっぱりいろいろな制限であきらめたという場合においても、その中で行った施策はCore Web Vitalsの改善になっていることも多いと思います。
逆に、頑張ってAMP化したのに、Core Web Vitalsさえよければ、トップニュースに掲載されるなら、制限の中で頑張っていろいろやったのにやっぱりAMPじゃなくてもよかったのでは、と思う人もいることかと思います。(自分もちょっと思いました)
ですが、AMPを導入するという選択肢はCore Web Vitalsを改善するための一つの方法でもあり、中でもかなり有効な方法であるかと思いますので、AMPをあきらめたケースでも、導入したケースでも、メリットは大きいのではないかと考えられます。
以上、AMPサイトを今も運用している筆者からのAMPに関するお話でした。
