既存のWebページ(静的HTMLのペラサイト)をAMP対応してみた

自身の音楽ポートフォリオサイト(静的HTMLのペラサイト)をAMP対応してみた

以前、自身が作ってきた音楽をまとめた音楽ポートフォリオを、HTML5 UPのテンプレートを用いて、１枚だけのペラサイトとして作成した。

その時の詳細は下記に書いたので、もしよければ読んでみてください。

shinshin86.hateblo.jp

今回AMPにちゃんと触れてみようと思い、思い切って自身のポートフォリオサイトをAMP対応してみることにした。
サイト自体は静的なHTMLで構成されている非常にシンプルな構成なので、AMP対応方法の勉強にもうちょうどよいかと考えた次第である。

AMP対応手順

実際にAMP対応のために行った作業だが、まず前提として、今回対応した静的なHTMLのみで構成されたペラサイトとなる。

また、通常のHTMLとAMP対応のHTMLを出し分けるやり方もあるが、今回自分は既存のHTMLをAMP対応版にそのまま差し替え という手法をとった。単純に２つのHTMLを管理するのが面倒だったというのもあるし(というかこれが大きい...)、そもそもそれほど制限されたAMP対応版のHTMLでページの内容的には問題なかったからだ。
またAMP対応自体はWebのベストプラクティスを強制される、という認識なのでAMP対応すれば必然的にサイトパフォーマンス的には良い結果となるのではないかと考えている。
(ここらへんのことを考えると、Next.jsのAMP対応などは管理しやすそうだ)

実際に試したことを箇条書きで書いていくと、ざっくり下記のような作業となった。
(これはまあ、全体的になかなか泥臭い作業だったので、とりあえず求められたのは忍耐、という感じであった。)

こちらのページを参考にAMP対応に必要なマークアップ修正を行う
- AMP HTML ページの作成 - amp.dev
外部から読み込んでいるCSSをインラインに展開させる
- <style amp-custom></style amp-custom> の中に利用しているCSSを泥臭く展開していく作業
AMPでは利用できるJavaScriptに限りがあるので、対応していないJavaScript処理は思い切って削除
Chrom拡張機能のAmp Validatorを見ながら、ひたすらエラーを潰していく
- img タグを amp-img タグに置き換えたりとかそういう作業がほぼほぼだった
Google Analyticsの対応
- こちら( AMP 用に Google アナリティクスセッション統合の初期設定を行う - アナリティクスヘルプ ) を参考にして設定した。
- Google Analytics用のIDは新たに作成しなおして、既存のGoogle Search Consoleに新たに紐付け直す形で対応した(下に補足を追加した)。
ちなみにGoogle Search Consoleの所有権の確認などは、AMPだからといって特別なことはしなくて大丈夫だった。
- 指定された google-site-verification のmetaタグを head タグの一番うしろに配置してGoogle Search Console側で確認させればOK

AMP対応時に実際に設定したGoogle Analyticsに関する内容

参考になるかわからないが、自分の場合は実際に下記のようなHTMLタグでGoogle 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対応前後でのサイト計測の差異

ちなみにAMP対応することで、これらの値がどれぐらい向上できるも検証してみようと思い、実際にAMP対応前後でのサイトパフォーマンスを計測してみた結果が下記となる。

AMP対応前

f:id:shinshin86:20200508222526p:plain

AMP対応後

f:id:shinshin86:20200509085536p:plain

performanceがやや落ちているが、Accessibilityは100になった。
(AMP自体はAMPのキャッシュに載ってから、初めて効力を発揮すると思うので、現時点ではAMPによる影響はまだない？ただ上にも書いたが、AMP対応はイコールWebでのベストプラクティスを強制されるという認識なので、よって Accessibility が100になったのはそういうところに影響があるのかもしれない)

performanceについてはAMP云々より、自身のサイトの問題のような気もする。。