at backyard

Color my life with the chaos of trouble.

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

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

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

shinshin86.com

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

shinshin86.hateblo.jp

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

AMP対応手順

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

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

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

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云々より、自身のサイトの問題のような気もする。。

Google Search ConsoleでAMP対応されているかを確認する

Google Search Console上でURL検査をすることでサイトがAMPに対応しているかどうかを確認することができる

f:id:shinshin86:20200509103002p:plain

AMPテストを使ってAMP対応されているかを確認する

他にも下記のようなツールがあり、こちらに対象サイトのURLを入力することでAMPに対応しているかを確認することが可能。

https://search.google.com/test/amp?hl=JA

結果が有効と出ていれば、対応はできている。
ちなみにプレビューなども確認が可能となっている。

f:id:shinshin86:20200509104130p:plain

上はプレビュー表示したときのキャプチャだが、ちゃんとAMPの雷マークが付いているのが確認できる。

追記: AMP対応してからだいたい1日ほどでGoogleにキャッシュされる

AMP対応して次の日ぐらいにモバイルで検索すると、AMP対応を意味する雷マークがついていた。
AMP対応当日はまだ検索結果を見ると雷なしだったが翌日にはキャッシュが保存されているようだった。
(キャプチャ自体はChromeのモバイル表示で撮っているが、iPhone上でも確認)

f:id:shinshin86:20200510082316p:plain

ためしにサイトのパフォーマンスを図ってみたが、数値自体はなんだか微妙。。こういうものなんだろうか?

AMPキャッシュ時のパフォーマンス

f:id:shinshin86:20200510082548p:plain

AMPキャッシュされていない方( https://shinshin86.com/ )側のパフォーマンス

f:id:shinshin86:20200510082636p:plain

ただしパフォーマンス計測値とは異なり、AMP対応されているほうが表示は爆速だった!!!!
iPhoneから実際にアクセスしてみたが、これはもう明らかに体験が異なっていたので、AMP対応することは意味あるなと思った次第。