はじめに
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が少しわかって良かった。