高速モバイルページ（AMP）の初心者向けガイド

高速モバイルページ モバイルWebの最大の問題を解決することを目的としたGoogleのイニシアチブです。 - 速度. 私たちが細心の注意を払って設計している素晴らしいユーザーエクスペリエンスは、モバイルでは非常に遅いです。.

遅さは単にUXの問題ではなく、 コンバージョン率を下げる, そして アクセシビリティに害を与える インターネット接続が遅いユーザーを除外することによって. AMP は、出版社がモバイル向けに最適化されたコンテンツを一度作成する それはどこでも即座にロードする.

発売以来、BBC、エコノミスト、ガーディアンニュース、フィナンシャルタイムズなどの多くの出版社がこのイニシアチブを実行してきたので、今では安全にAMPをモバイルで競争力を維持したいすべての人にとって考慮に値するイノベーションとみなします。ウェブ.

AMPインアクション

詳細に飛び込む前に、ここにあります AMPデモ, だからあなたはできる 実際に見る. デモはこのリンクからアクセスできます.

AMPの動作を確認するには、2つのことをする必要があります。

モバイルデバイス上、またはモバイルシミュレータ上などでデモを表示します。 Chrome DevToolsのモバイルデバイスシミュレータ.
検索バーで検索クエリを実行します。 Google AMPは現在ニュースサイトで主に機能しているので、最良の選択は新鮮なニュースストーリーです。.

下のスクリーンショットで、あなたが私が検索語を使ったときに得たものを見ることができますリオオリンピック.

ご覧のとおり、AMPページは次のように表示されます。 Google Rich Cards, ある モバイル最適化画像カルーセル, Googleが2016年5月にリリースしたもの.

GoogleがAMPのページを他のモバイル向けに最適化されたページと区別する方法に注目してください 2種類のラベルを使用して：AMPとモバイルフレンドリー。 AMPウェブページがどのように見えるか、そしてモバイルでどのくらい速く実行されるかを見るためには、結果のいくつかをクリックすることも価値があります。.

技術的背景

AMPは Web標準 既存のWeb技術を基盤とし、静的コンテンツに焦点を当てています。それは持っています 3つの異なる部分：

AMP HTML： HTMLを変更した （1） 特定の通常のHTML / CSS機能の制限 （2） 新しいカスタムタグの導入（コンポーネント）
AMP JS： ページの読み込み時間を短縮するためにベストプラクティスを実施する
AMP CDN： あなたのサイトをさらに最適化する組み込みの検証システムを備えたキャッシュ

AMPページの技術的背景についてもっと知りたい場合は、以下のビデオをご覧ください。GoogleのPaul Bakausが、 紹介トーク AMPで.

さらに深く掘り下げたい場合は、AMPがモバイルでのパフォーマンスを高速化するためにどのような最適化手法を使用するかを理解することも重要です。下のビデオでは、AMP EngineeringのリーダーであるMalte Ubl氏が次のように説明しています。 AMPの解剖学 詳細に.

AMP HTML

高速モバイルページは 通常のHTMLページ それが必要 一連の規則に従う ページの読み込みを速くし、信頼できるパフォーマンスでレンダリングするために.

あなたがそれについて知る必要がある最も重要なことを見てみましょう。 AMP HTMLの完全な仕様もご覧ください。.

個別のAMPページが必要かどうかを決定します

同じ静的コンテンツページには、次のものがあります。 2つの別々の版 - 1つはAMP用、もう1つは非AMPバージョン用です。持っていることも選択できます 1つのバージョンのみ - AMPのページ、そしてどこでもそれを使用してください。について ブラウザサポート, AMPのGithubページはこう主張している。

それでもブラウザのサポートが心配な場合は、Stackoverflowに関するGoogleのPaul Irishの投稿をチェックしてください。.

2つのページ（AMPと非AMP）を持ちたい場合は、 それぞれにリンクする のために の存在について検索エンジンに通知する二バージョン.

次のコードを 非AMPページのセクション：

また、次の行を AMPページのセクション：

AMPページが1つしかない場合でも、 次のようにして自分自身からリンクする：

定型句

AMPプロジェクトは異なる提供しています 開始ボイラープレート あなたは始めるために使うことができます。下記の最も単純なAMP HTMLボイラープレートを見てください。

          こんにちは世界!

ボイラープレートが通常のHTMLページにリンクしていることがわかります。タグ。の > タグを追加します AMP JSライブラリー.

 の   
あなただけができる 1 埋め込まれたスタイルシート、そしてまたたくさんあります 許可されていないスタイルルール, 例えば、あなたは使うことができません !重要 修飾子、 @インポート ルールと疑似クラス.
 AMPページにCSSを書き始める前に、スタイルシートの制限を確認することを忘れないでください。.
 AMPスタイルのルールについて知っておくべき重要なことがもう1つあります。 あなたが望むレイアウトを使用することはできません - それはブラウザがそれを許可することをAMPの原則の一つであるように 各要素の間隔を計算する ページ上 あらかじめ.
 サポートされているレイアウトとサポートされていないレイアウトを見てください。.
 AMP JS
 AMP文書に含めることができます 作者が書いたものもサードパーティのJavaScriptもない, ただし、これはAccelerated Mobile PagesがJavaScriptをまったく使用しないという意味ではありません。 AMPのJavaScriptライブラリ（AMPランタイム）は、AMPページのロードとレンダリングを迅速に行います。 最高のパフォーマンスプラクティスを実施する.
 AMPコンポーネント
 AMPコンポーネントは AMPランタイムによって定義されます。. 彼らは前述の AMP固有のHTMLタグ 以下のように、通常の対応物の代わりに使用する必要があります。  の代わりに  タグ.
 各AMPコンポーネントには 特定の外部リソース （画像、ビデオ、埋め込みなど）外部リソースはWebサイトを遅くする傾向があります。このソリューションの主な目的は、 外部リソースの読み込みを管理する 実行することによって合理的な方法で サンドボックスの中.
 AMPはあなたに提供します 2種類のコンポーネント：
 内蔵コンポーネント それらはすべてのAMP文書で常に利用可能です。 AMPランタイムに組み込まれています. 現在5つあります。  広告を表示するため
  画像の場合は、  タグ
  ピクセルを追跡するため（ページビューのカウントに使用されます）
  HTML5ビデオファイルを直接埋め込む場合は、  タグ
  埋め込み要素用（の代わりに使用できます  場合によっては）
 
 拡張コンポーネント 追加のコンポーネント それらを明示的に含める あなたのAMP文書に。のような多くの便利なものがあります  そして , 完全なリストを見てください。それらの多くはに使用することができます 第三者サービスからのコンテンツを埋め込む, TwitterやInstagramなどから.
 
次のような外部から読み込まれたすべてのリソースに注意してください。  そして  知られている必要があります  そして  属性 ブラウザを有効にするために 事前にレイアウトを計算する.
 AMP CDN
 の AMP CDN 基本的にはキャッシュです。 Google AMP Cache. 有効なAMPドキュメントを取得し、キャッシュしてロードします。 AMP CDNにも 内蔵検証システム.
 それは価値があります AMPページをテストする 安全にオンラインにする前に バリデーターを渡す. あなたはさまざまな方法でそれを行うことができます.
  画像：AMPプロジェクト
AMP CDNが最高のパフォーマンスを達成するためにHTTP / 2プロトコルを使用していることを知っておくのは良いことです。.
 AMPツール
 Accelerated Mobile Pagesの実装に役立つ優れたツールがいくつかありますので、それらのいくつかを見てみましょう。.
 Googleはウェブマスターに便利な機能を提供しています AMPステータスレポートツール これは、正常に索引付けされたAMPページの数、およびAMP関連のエラーも示しています。.
 子守唄 AMP PHPライブラリ HTMLページをAMP HTMLに変換したり、HTML文書がAMP標準に準拠していることを報告したりできます。.
 WordPressサイトでAMPを使用したい場合は、WordPressをAMP用に設定する方法、およびAMPとYoast SEOプラグインの連携に関するYoastのチュートリアルを読んでください。.
 Automatticをチェックアウトすることもできます。 AMPプラグイン それはあなたがあなたのWordPressサイトの加速されたモバイルページを可能にすることを可能にします.
  画像：WordPress.org
さらなる検討事項
 それでも納得できない場合は、ビデオを見てください。 クイックスピードテスト 以下.
 
 Nuzzelの創設者であるJonathan Abrams氏は、New York Timesのようなモバイル向けに最適化されたサイトでさえ、かなり速くロードすると主張しているので、さらに良い主張をしています。 - 平均的なページをロードするのに3秒かかるのではなく、ページがロードされます。 0.5秒未満 GoogleのAccelerated Mobile Pagesが有効になっている場合.
 Google AMPとFacebookのInstant Articlesの競合についての興味深い記事をVergeで読むこともできます。それでも「何が問題なのか」という答えを探しているのであれば、AMPが基本的に2000年以前のインターネット時代に戻ってきているという恐れについて言及したYoastの投稿を調べてください。.
 .