静的HTMLペラサイトのAMP対応
HTML5 UPにIdentityというテンプレートがあります。
HTML5 UP - Identity(Live DEMO)
今回AMPのことを理解するべく、こちらのテンプレートをAMP対応してみました。
実際に試してみたリポジトリは下記になります。
shinshin86 / html5up-identity-with-amp(GitHub)
ちなみに実際に挙動を試してみたい場合は下記の手順を踏めば確認が可能です。
(ここではPythonでローカルサーバを立ち上げていますが、ローカルサーバが立ち上がれば何でも良いです)
git clone https://github.com/shinshin86/html5up-identity-with-amp.git
cd html5up-identity-with-amp
vim index.html
上のリポジトリにはGoogle Analytics設定用のタグが追加されていますので、ローカルアクセス時にconsoleでエラーが表示されます。もし気になる方はそちらを削除してください。
(エラーが気にならなければ、そのままでも挙動自体に問題はないかと思います)
diff --git a/index.html b/index.html
index 2245fd5..40e7f2c 100644
--- a/index.html
+++ b/index.html
@@ -813,21 +813,6 @@
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
- <!-- reference: https://support.google.com/analytics/answer/7486764?hl=en -->
- <amp-analytics type="gtag" data-credentials="include">
- <script type="application/json">
- {
- "vars": {
- "gtag_id": "{Google Analytics ID}",
- "config": {
- "{Google Analytics ID}": {
- "groups": "default"
- }
- }
- }
- }
- </script>
- </amp-analytics>
<!-- Wrapper -->
<div id="wrapper">
@@ -856,4 +841,4 @@
</div>
</body>
-</html>
\ No newline at end of file
+</html>^M
こんな感じで削除すればよいかと思います。
あとはローカルサーバを立ち上げてアクセスするのみ
python -m http.server 3000
もしChrome拡張機能である AMP Validator を入れていない場合は追加していただき、こちらを有効にした状態でアクセスすると、AMPが有効になっているのが確認できるかと思います。
HTML5 UPのIdentityというテンプレート自体は静的なHTMLページとなるので、これらをAMP対応していく中で、AMP対応というのは具体的にどのようなことをするべきなのか？自分なりに理解した部分をこちらに書き残していこうと思います。
AMP対応する上で参考にするべきサイト
AMP対応していく上での基本的な作業手順ですが、下記のページを参考にしていきながら、既存のHTMLを書き換えたり、外部から読み込んでいるCSSをインラインに展開させたり、対応していないJavaScrip処理を削除、もしくはAMPに対応していく処理に置き換えていく、などなどの作業になるかと思います。
先程書いたAMP Validatorでエラー箇所を確認しながらこれらの対応をコツコツと行っていくので、個人的にはかなり泥臭い作業といった印象でした。
AMP対応する上で実際に行った、具体的な作業を下記に記載していきます
静的HTMLのページをAMP対応する上で行ったこと
- 下記のページを参考にしながら、AMP対応に必要なタグを追加
- 初めての AMP ページを作成する(AMP)
- 例えば
imgタグなどはamp-imgタグに差し替えるなど、既存のタグを差し替えるパターンもある
- 外部ファイルでCSSを読み込んでいる場合などはインラインに展開させる
- CSSの量が多いとソースコードがだいぶ見づらくはなります。
- あと、インライン展開させるCSSには限界があり、
75000bytes超えるとエラーになります。そのためもし限界突破した場合は削除することになります。 - (ちなみに上のリポジトリでは、元から定義されていたform関連のCSSを削除しています。)
- AMPではJavaScriptの処理には制限があり、処理の内容によってはAMPに対応できないものもあります。
- 自分はここについてはあまり調べていませんでしたが、 Use custom JavaScript in AMP pages - AMPなどを参考にしてみると良いかもしれません。
- HTML5 UPのテンプレートにもとからあったわけではないのですが、サイトを構築する上で
Google Analyticsの設定は必須のため、そちらの対応も併せて行いました。- こちらを参考にしています → AMP 用に Google アナリティクス セッション統合の初期設定を行う
- また、Google AnalyticsのIDは新たに生成してそちらを設定するようにしています。
- ケースバイケースかとは思いますが、自分の場合は下記のように
amp-analyticsタグを用いて対応しています。
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "Google Analytics用のID",
"config": {
"Google Analytics用のID": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
実際にAMP対応してどうなったのか？
実はこのHTML5 UPのidentityを元にして、個人的にサイトを作成しています。
(私は音楽を日々作っているのですが、内容的にはそちらのポートフォリオサイトとなります)
今回こちらのサイトのAMP対応をまず行ってみたのですが、実際に対応した際のパフォーマンスは下記のようになります。
Performanceが向上していないのはそもそも自身のサイトの問題のような気がしていますが、Accessibilityが満点になっています。
これはAMP対応する上で、必然的にWebのベストプラクティスを実施せざるおえなくなるため、それによる効果なのかなと感じています(正直、ここらへんの要因はちゃんと追ってはいません。推測です)。
ちなみに上に貼ったサイトについては、通常のHTMLとAMPのHTMLを分けるのではなく、AMP HTMLのみという形で対応しています。
HTMLを分けて管理するほどの必要性を感じなかったゆえの判断です。
なお、AMP対応してリリース後、だいたい１日ほどでAMP対応のサイトとしてGoogle側にキャッシュされるようでした。
PCからのアクセスだと、たしかに早くなったかなー？ぐらいの感じですが、ためしに自身のiPhnoeからアクセスしてみると、爆速表示で明らかにユーザ体験が向上していました。
以下、アクセス時のGIF映像です。
(なお、GIF撮影時はChromeのモバイル表示で撮影しています)
最後に
内容については以上となります。
あくまで自分が試した範囲でしかAMP対応について書いてはいませんが、AMP対応することでユーザ体験が向上することを身を以て今回体験できたので、今後更にAMP周りのことを調べてみるモチベーションにもなりました。
また、昨今ではあまりペラの静的HTMLサイトを扱うシーンはそれほど多くはないかもしれませんが、地道に対応していく中で具体的にどういう作業が必要になるかを身を以て体験できたのも良かったかなと思います。
これから新たにAMP対応を視野に入れたサイトを構築するなら、個人的にはNext.jsのAMP Support周りが気になっているので、AMP Support(Next.js)あたりを見ながら、Next.jsを使ってAMPサイトを構築していくのが良さそうかもーなどと感じたりしています。近々試してみよう！🚀