はじめに
AMP対応のページ（恐竜に肉食と草食がいたのはなぜ？：朝日新聞）を開いたら空白ページが8秒間表示された後でページが表示された。
そこでJavaScriptを動かしてdocument.styleSheetsのそれぞれに対してdisabledをtrueにしてからfalseに戻したら空白ページが8秒間表示された後でページが表示された。
なぜモバイルでのウェブサイト閲覧を高速化させるためのAMPのページが常に8秒遅れて表示されるのか？その原因を調べた。
原因
原因はズバリ広告ブロッカーでサードパーティースクリプトをブロックしたことだった。広告ブロッカーがブロックしたのはhttps://cdn.ampproject.org/v0.jsなどのスクリプトだった。ampproject.orgのスクリプトのブロックを解除したら遅れて表示されなくなった。
スタイルシートに次の記述があることも原因だった。
<style amp-boilerplate="">
body{ animation:-amp-start 8s steps(1,end) 0s 1 normal both }
@keyframes -amp-start{ from {visibility:hidden} to {visibility:visible} }
</style>
<noscript>
<style amp-boilerplate>
body{ animation:none }
</style>
</noscript>
このスタイルシートはbodyを非表示にして8秒後に表示するアニメーションを指定する。JavaScriptが無効化されていたらそのアニメーションを無効化する。
デベロッパーツールでこの記述を削除したところdocument.styleSheetsのdisabledを変えても遅れて表示されくなった。
ampprojectのスクリプト
AMPはbodyを非表示にしてampprojectのスクリプトがその非表示をやめてページを表示するようになっている。ampprojectのスクリプトをブロックしたかネットワークの状態が悪いために8秒以内に読み込まなかったら8秒後にフォールバックしてページを表示するようになっているようだ。
AMPとは何か？ウィキペディア(Accelerated Mobile Pages)によれば、Googleにより運用されているAMP Cacheを通すことなどでパフォーマンスを改善するものだ。ampprojectのスクリプトがパフォーマンス改善の動作を担っていると思う。
ampprojectのスクリプトを読み込むことでGoogleにページの閲覧履歴などの個人情報が漏れないかを心配する。同ウィキペディアによれば、AMPの設立者はGoogleであり、AMPは、Googleなどによるウェブに対するコントロールをさらに強める可能性があるとして批判されてきた。
さいごに
AMPページが常に8秒遅れて表示される原因を調べたら広告ブロッカーのブロックが原因だった。原因を調べたといっても、調べようと思って調べられるものではない。偶然HTMLの該当部分を見たことで原因が判明した。
AMPページが常に8秒遅れて表示され何かがおかしいと思いながら調査を後回しにしてきたが原因がわかって良かった。原因を調べることでAMPが少しわかって良かった。
↧