Google検索すると「⚡(雷マーク)」が検索結果に表示されるのをよく見かけるようになりました。
私も何かと分からず調査しました。
この「⚡(雷マーク)」は何?ということをまとめたいと思います。
AMP(Accelerated Mobile Pages)によるページに雷マーク
これは、AMP(Accelerated Mobile Pages)という手法で作成されたサイトを示すものです。
AMP(Accelerated Mobile Pages)は、モバイルサイトをより高速快適に表示するために開発された手法で、 Google と Twitter が共同で開発したオープンソースプロジェクトです。
AMPがどのように高速表示を実現するか
AMPがどのように高速表示を実現するかをクライアント側とサーバー側に切り分けて説明します。
クライアント側
■JavaScript の禁止
document.write()を含むJavaScript は、ブラウザのレンダリングを妨げる原因のひとつとなるため、AMP では JavaScript の実行が禁止することで高速化します。
■外部 CSSの 禁止
AMPでは外部 CSS は使えません。CSS は全てインライン化してページに埋め込みます。
外部 CSS の取得には時間がかかります。また外部フォントの取得と外部 CSS の取得が並行には行われず、外部 CSS の取得が終わった後に、外部フォントの取得が行われます。
外部 CSS の取得時間を削減することで高速化します。
■埋め込み要素のサイズ指定
画像、外部コンテンツ。広告などは幅と高さの指定が必須です。
<amp-img> <amp-iframe> <amp-ad>
で指定します。サイズが事前に決まっているので、ブラウザは外部リソースを取得する前に、レイアウトを確定できるため読み込みが早くなります。
■AMP独自の優先度
外部リソースは通常ブラウザが優先度を付けて取得します。AMPはさらに独自の優先をつけて外部リソースの取得を管理しています。
サーバ (AMP Cache)
AMP Cache はコンテンツプロバイダーが作成した Amp ページをキャッシュするサーバです。
AMP Cache がAMPページを配信する場合、クライアントからのリクエストは AMP Cacheのみに到達し、コンテンツプロバイダのサーバはリクエストを受けません。
AMP Cacheは高速なキャッシュサーバとしてコンテンツを配信します。
現在 存在するAMP Cacheは、Google が提供するcdn.ampproject.orgとCloudFlareが提供するamp.cloudflare.comです。
クライアント+サーバ
■AMP Viewer
Google の検索結果にAMPページへのリンクが含まれている場合は、ページの見えないところにiframeが作成され、検索結果最上位のAMPページが読み込まれています。
このiframeはAMP Viewerと呼ばれるものです。検索結果でのAMP Viewerは、AMPページをプリレンダリングモードで読み込んでいます。
プリレンダリングモードでは読み込みを早くするため、画像や広告などの取り組みは行われません。それらの読み込みは実際にページが表示される段階で行われます。
■プリレンダリングとAMP Cache
プリレンダリング可能なページはAMP Cacheから配信されるAMPページのみで、コンテンツプロバイダから配信されるAMPページはプリレンダリングされません。
AMPページがプリレンダリングモードで動作するためには、AMPページが完全なAMP HTMLであることが保証されていなければならないからです。
まとめ
Google検索で出てくる「⚡(雷マーク)」の意味と、「AMP(Accelerated Mobile Pages)」についてお伝えしてきました。
意味がわかっただけでは面白くないということで、ブログの以下のページを、AMPページ化してみました。次の記事に続く・・・