GoogleのAMP：Accelerated MobilePagesの楽しくてユーザーフレンドリーなガイド

公開: 2020-11-25

ビデオを見る。 コピーは無視してください。

これは、新しいAccelerated Mobile Pages（AMP）プロジェクト専用のGoogleのサイトにアクセスした後のアドバイスです。

「AcceleratedMobilePages（AMP）プロジェクトは、パブリッシャーがモバイル向けに最適化されたコンテンツを一度作成すれば、どこにでもすぐにロードできるというビジョンを具現化したオープンソースイニシアチブです。」

開発者ではなく、コピーを読んだ場合、専門用語に生きたまま飲み込まれます。

ただし、ビデオを見ると、AMPが何であるかがすぐにわかります（面白い脊椎穿刺のリファレンスは言うまでもなく、以下を参照してください）。

または、このガイドを読むこともできます。これは、AMPについて、そしてそれがコンテンツマーケティングにどのように影響するかについて、これまで読んだ中で最も楽しいものになるからです。

約束します。

GoogleのAMPプロジェクトとは何ですか？

2011年にGoogleのZeroMoment of Truth哲学が誕生して以来、彼らが「モバイルウェブのパフォーマンスを劇的に向上させたい」ということは周知の事実です。

また、モバイルWebのコンテンツのパフォーマンスに小さな問題があることを言う必要はないでしょう。

たぶん、あなたはモバイルデバイスを持っています。 また、検索結果ページ、ソーシャルメディアサイト、または電子メールの受信トレイ内からそのデバイス上のリンクをクリックした可能性があります…コンテンツを消費したいと思っています。

しかし、それは決して来ません。

まあ、それはやってくるが、ページが読み込まれるにつれて、ぎくしゃくした画像、ビデオ、および広告のけいれん的なパッチワークで。 あなたは恐怖で見つめ、目を拡張し、トイレに行かなければならない誰かのように地下鉄の座席で跳ね回っています。

「これにはどれくらい時間がかかりますか？」 あなたは特に誰にも叫びません。

誰が知っていますが、人口の40％のように、3秒以内に読み込みページで保釈されるので、あなたは決してわかりません。 次に、私の黒猫のアポロモンキーストラップのように、「ため息をつく」と言うでしょう。

グーグルがAMPで排除したいのは、このような耐え難いモバイルの瞬間です。

AMPはどのくらいの速さでページを作成しますか？

1から10までのスケールで、1つは「まったくロードされない」、10つは「1秒でロードされる」で、AMPコンテンツは11のページ速度でロードされます（これは、私が警告したSpinal Tapリファレンスです）。

しかし、真剣に、どのくらいの速さですか？

PinterestのソフトウェアエンジニアであるJonParise氏は、「Accelerated Mobile Pagesは、従来のモバイル向けに最適化されたページの4倍の速度で読み込み、8分の1のデータを使用します」と述べています。

4倍速いのが良いです！ しかし、それはあなたにとってどういう意味ですか、私たちのフレンドリーな地下鉄通勤者は彼の携帯電話にウェブページをダウンロードしようとしていますか？

NiemanLabによると、AMPに最適化されたNew York Timesの記事は、2.99秒でモバイルに完全にダウンロードされました。 比較のために、高速iMacでのChromeのテストでは、そのページのデスクトップバージョンは3.82秒かかりました（モバイルバージョンの方が高速でした）。

ご存じない方もいらっしゃると思いますが、NYTimes.comは、土星のこちら側で最も読み込みが遅いモバイルニュースウェブサイトの1つであることで有名でした。

それ以来、彼らはそれを修正しました。

十分に速いと思いますか？

しかし、待ってください、あなたが言うには、2.99秒はまだ私たちの地下鉄通勤者が待つことをいとわない時間枠の上流にあります。 彼は、人口の40％のように、3秒で救済しました。 2.99秒はそれを切り詰めています！ それはあまり改善されていません。

本当ですが、違いは、デスクトップでの最初の非AMPシナリオでは、ページが3秒後も読み込まれていたことです。 シナリオのAMPバージョンでは、2.99で完全にダウンロードされました。

さらに重要なことに、AMPバージョンは0.857秒で「domContentLoaded— HTMLが完全にダウンロードされ、特定の重要な解析が完了したWebページの読み込みの重要なポイント」に到達しました。

まばたきには約0.33秒かかります。

つまり、AMPのおかげで、目を2回まばたきすると、地下鉄の通勤者であるあなたがコンテンツの有用な部分をほぼ瞬時に読み始めることができます。

従来のモバイルページの読み込みが非常に遅いのはなぜですか？

私は知っていると思いますが、私は開発者、デザイナー、プログラマーではないので（そして、それらが異なる分野であるかどうかさえわかりません）、私は翻訳を手伝うために、ここRainmakerDigitalの開発者の1人であるMikeHaleに電話をかけました。

マイクは、デスクトップサイトがモバイルブラウザに引​​き込まれると、多くの場合異なるホストからモバイルブラウザに「呼び出される」情報のパケットが数十個あると述べました。

上記の古くて遅いニューヨークタイムズの例では、1つの記事に「192のリクエストがあり、一部はタイムズのホストに、ほとんどは多数のスクリプトをホストしている他のサーバーに大量に送信されています」。

最も便利な部分は、クリックしてから5秒でダウンロードされますが、残りの部分はまだ入っています。そのため、ブラウザが設定してからリセットすると、画面がバウンスします。

まだ迷っていたので、マイクに「でも、どんなことが求められているの？！ 何と呼ばれているの？！」

マイクは、あなたの携帯電話がソーシャルプラグイン、画像カルーセル、SlideShares、およびビデオのスクリプトを呼び出す可能性があると私に言いました。 そして、おそらく分析ソフトウェア、広告、追跡スクリプトがバックグラウンドで実行されています。

賢明な日常のことですが、それらは合計されます。 そして速い。

問題は、モバイルデバイスに、これをすばやく実行するための処理機能がないことです。

この図は、モバイルコンテンツの問題を説明しています

銀行に行って、窓口に行き、100ドルを要求したと想像してみてください。ただし、1ドル紙幣15枚、5ドル紙幣3枚、10ドル紙幣5枚、20ドル紙幣1枚という独特の順序でした。

銀行が現在モバイルウェブのように運営されている場合、出納係は複数の出張を行って、各請求書を個別に受け取ります。

それらの旅行のそれぞれは「呼び出し」です。

ただし、銀行がAMPで最適化されている場合、出納係はすべての請求書を一度に提供します。 さらに、彼はおそらく特定の請求書に対するあなたの特定の要求を無視し、100ドルの請求書を配達するでしょう。

AMPは、ブラウザが行う必要のある要求を簡素化することを目的としています。

「呼び出すことができる唯一のスクリプトはAMPjavascriptです」とMike氏は述べています。 「すべてが1つのバンドルに包まれています。 一度にすべてをお渡しします。」

そして、YoastがAMPモバイルコンテンツをどのように説明したかを次に示します。

「これをレースカーと比較してみましょう。 レースカーをもっと速くしたいのなら、もっと速いエンジンを与えて、すべての重量を取り除きます。 このウェイトストリッピングでは、後部座席やエアコンなども取り外します。AMPもそれと同じです。 グーグルは気の利いた機能よりもスピードを重視しているので、これは通常のウェブの縮小版です。」

最後の行でその苦味の刺し傷を感じますか？ それはあなたの想像力ではありません。 これについては、すぐに説明します。 まず、私が何を意味するのかを理解するのに役立つAMPエクスペリエンスを見てみましょう。

AMPに最適化されたモバイルコンテンツはどのように見えますか？

幸い、AMPニュースコンテンツのデモをテストできます。

  1. あなたのスマートフォンを取り出してください。
  2. ブラウザ（任意のブラウザ）を開きます。
  3. g.co/ampdemoと入力します。
  4. Googleの検索ボックスに、「ジャスティンビーバーの誕生日」、「ジェニファーローレンス」、「オノヨーコ」などの人気のあるキーワードフレーズを入力します。
  5. 「送信」をクリックします。

これは、結果がどのように表示されるかの例です。

ご覧のとおり、AMPコンテンツの請求額が最も高くなっています。 スクロールせずに見える範囲にあるのはカルーセルです。 標準エントリはその下にあります。

そのカルーセルをスクロールして、気に入ったAMPを利用した記事を見つけたら、それをクリックします。 これはどのように見えるかです：

楽しい読書、えっ！

なぜグーグルはこれをしているのですか、そしてあなたは気にする必要がありますか？ （の並べ替え）

これはそれが奇妙になるところです。

上で述べたように、Googleは過去5年間、モバイルWebパフォーマンスの最適化に夢中になっています。そのため、非常に高速なWebサイト速度の重要性について書いています（この記事では、サイトの速度をテストするための6つのツールがあります。ちなみに）同じくらい長い間。

そのため、昨年、Googleのモバイルアップデート「Mobilegeddon」について警告しました。

したがって、現時点では、AMPはGoogleがモバイルウェブの最適化に重点を置いていることの集大成ですが、パブリッシャーにはどのように役立ちますか？

単純に聞こえますが、Googleは次のように考えています。ユーザーはコンテンツが大好きです。 彼らは速いコンテンツが大好きです。 速いコンテンツを早く出すことができるほど、より多くのコンテンツを消費することができます。

しかし、この動きには他にも何かがあります。Googleはニュース消費戦争に勝とうとしています。

AMPはInstantArticlesやAppleNewsとどう違うのですか？

昨年、AppleとFacebookの両方が、ユーザーがニュース記事を利用できるようにするアプリケーション、AppleNewsとInstantArticlesを立ち上げました。

これらのアプリケーションは両方ともスタンドアロン製品です。

AdobeのXDチームのシニアエクスペリエンス開発エンジニアであるChristianCantrellは、Smashing Magazineに次のように書いています。「彼らは本質的に、独自のシンジケーション形式の上に構築されたカスタムレンダラーを備えた豪華なニュースアグリゲーターです。」

言い換えれば、InstantArticlesとAppleNewsはRSSから生まれ変わりました。

一方、Googleは、パブリッシャーに直接アクセスして、オープンWebで消費するためにモバイルコンテンツを最適化するように努めています。これにより、アプリでは得られない、簡単な入力と簡単な配布が可能になります。

これまでのところ、いくつかの有名なニュース出版社が参加しています。

  • タイム株式会社
  • アトランティック
  • Vox
  • BBC
  • ハフィントンポスト

WordPress、Twitter、Adobe Analytics、Chartbeat、LinkedIn、Pinterestなどの多くのテクノロジー企業も参加しました。

AMPに関する2つの一般的な苦情

苦情には少なくとも2つの種類があります。

  1. 中傷者は、モバイルコンテンツができることに対する制限を嫌います。
  2. 中傷者は、小さな出版社が罰せられることを嘆きます。

Yoastは最初のカテゴリに分類されます。 Joost de Valkは、次のように述べています。「AMPは、HTMLページで実行できることを制限します。 派手なデザインはスピードを優先して取り除かれています。 AMPは、フォームプロジェクトを超える機能です。」

影響を受けるのは見た目だけではないことに注意してください。そのままでは、AMPはフォームをサポートしていません。つまり、AMPページはメーリングリストの拡大に​​役立ちません。 利用可能な技術的な回避策はありますが、状況はまだ新しいため、それらがどのように進化するかを確認することはできません。

大部分の大規模なパブリッシャーがAMPを使用していることに気付くでしょうが、それはAMPが小規模なパブリッシャーを傷つけようとしていることを意味しますか？

Search EngineLandのPaulShapiroは、次のように述べています。

「経験豊富な開発者は、集中的なパフォーマンスの最適化を通じて同様の結果を達成できることがよくありますが、パブリッシャーはリソースの制約のためにこれを無視することがよくあります。 AMPを使用すると、主要なモバイルWebエクスペリエンスを変更することなく、これらの最適化を簡単に実現できます。」

AMPは、モバイルエクスペリエンスを最適化するための確かなツールになる可能性があります。 だからあなたはAMPするべきですか？

誰がAMPについて心配する必要がありますか？

場合によります。

  • あなたはニュースの巨大な出版社ですか？ 次に、モバイルユーザーエクスペリエンスのための確かな戦略がすでにない限り、パニックに陥ります。 数ヶ月前にすでに設置されているはずですが、ちょっと。
  • モバイルから重要なトラフィックソースを取得していますか？ 繰り返しになりますが、モバイルエクスペリエンスの戦略がしっかりしていることを確認する必要があります。 AMPがどのように開発されるかを見てみたいと思うかもしれませんが、実験する価値があるかもしれません。
  • あなたはあまり競争のない新しい市場にいますか？ 今後30日以内にモバイルコンテンツを最適化することを重要視しますが、慌てる必要はありません。
  • 上記のカテゴリのいずれにも当てはまりませんか？ 次に、あなたの手に座って、何が起こるかを監視します。

「間違いなく出版社の注目を集める何かです」と、当社の最高製品責任者でありStudioPressの創設者であるBrianGardnerは私に語りました。 「しかし、私の推測では、それはしばらくの間流動的な取引になるでしょう。」

知るか？ これらすべてを将来的に行うためのより簡単な方法があるかもしれません—WordPressコンテンツ管理コンサルティングエージェンシーである10upの社長兼創設者であるJakeGoldmanも提案しました：

「時間が経つと、AMPは最終的に「無制限」のHTMLと同じくらい複雑になるか、モバイルハードウェア、ブロードバンド速度、標準化されたプライバシー機能の進歩によって無意味になると思われます。これは、もはや問題の解決策です。

しかし、AMPをいじってみたいとしましょう。

最初のAMPページを作成する方法

AMPを使い始めるには基本的なマークアップが必要なため、ここで大きな男の子/女の子の開発者パンツを引き上げることができます。

この基本的なチュートリアルを実行することをお勧めします。 それはあなたに方法を教えます：

  • ボイラープレートコードを使用して、最初のAMPページを作成します。
  • ステージングします。
  • Googleのバリデーターを使用して、 AMPに準拠していることを検証します（これは非常に重要な手順です）。
  • 出版と配布の準備をします。

マークアップでは、いくつかの要素にAMPタグが付いていることがわかります。 したがって、<img>タグは<amp-img>になります。 <anim>タグは<amp-anim>になります。 <video>タグは<amp-video>になります。

等々。

WordPressユーザーは何をすべきですか？

AMPを試してみたい場合は、幸運です。

2016年2月24日、Automatticは公式のAMPプラグインをリリースしました。 したがって、WordPressユーザーは、AMPに最適化されたコンテンツから離れたダウンロード可能なプラグインにすぎません。

ただし、これに注意してください。公式のAMPプラグインページによると、プラグインはページやアーカイブをサポートしていません。 投稿するだけです。

ただし、プラグイン（bam）をアクティブにすると、すべての投稿が自動的に増幅されます。

プラグインをアクティブにすると、サイト上のすべての投稿に動的に生成されたAMP互換バージョンが含まれます。

URLの末尾に「/ amp」を付けると、ウェブ投稿のAMPバージョンを確認できます。 たとえば、 yourwebsite.com / amp-wicked-fastのAMPバージョンはyourwebsite.com/amp-wicked-fast/ampになります。

また、Rainmaker Platformをご利用の場合は、レーダー画面にAMPが搭載されています。 グーグルの劇的な180度のターンアラウンドの歴史を考えると、私たちは何にも突入するつもりはありません。 しかし、AMPが将来重要であることが判明した場合は、ユーザーに簡単なAMPソリューションを提供します。

AMPは検索ランキング要素ですか？

番号。

グーグルのジョンミューラーは、AMPはランキング要素ではないと述べました。 彼は、「ページをAMP形式に変換することで、モバイル対応のランキングシグナルを満足させることができますが、AMPのみに関連するランキングシグナルはありません」と述べています。

検索エンジンジャーナルのスタッフライター、マットサザンは次のように指摘しています。

「私の質問は、AMPコンテンツがすでに最初のページの上部への片道チケットを持っている場合、AMPがランキングシグナルであるかどうかはどうでしょうか。 ほとんどの場合、AMPコンテンツはすでにオーガニック検索結果を上回っています。これは、求めることができる最大のランキングブーストの1つです。」

したがって、モバイルコンテンツゲームで競合他社に先んじることには利点があります。このホワイトボードの金曜日のビデオでは、蒸留された人々があなたの顔に手を振るスティック上のニンジンです。

ホワイトボードの金曜日のビデオをご覧になることをお勧めするもう1つの理由は、蒸留所の人々がAMPが提供するもう1つの重要な違いであるキャッシングサーバーを介した超高速配信に取り組んだことです。

DistilledのR＆D責任者であるTom Anthonyは、次のように述べています。

「そして、これらすべては、Googleがこれらのページをホストし、実際のコンテンツをその場でホストできるように、非常に大量にキャッシュされるように設計されているため、ユーザーからコンテンツを取得する必要さえありません。」

ニヤリと言うだけで、これはGoogleブログがキャッシュへの新しいアプローチについて言わなければならなかったことです：

「そのため、この取り組みの一環として、Googleの高性能グローバルキャッシュを介した効率的な配信を可能にしながら、サイト運営者がコンテンツを引き続きホストできるようにする、キャッシュへの新しいアプローチを設計しました。 キャッシュサーバーを開いて、誰でも無料で使用できるようにするつもりです。」

私は無料が好きです。

AMPは広告に影響しますか？

すべきではありません。

Googleによると、「私たちは、包括的な範囲の広告フォーマット、広告ネットワーク、テクノロジーをサポートしたいと考えています。 AMP HTMLを使用しているサイトは、ユーザーエクスペリエンスを損なうことのない形式だけでなく、広告ネットワークの選択も保持します。」

ご参考までに、GoogleAMPプロジェクトの公式サイトでサポートされている広告ネットワークのリストを以下に示します。

  • A9
  • Adform
  • AdReactor
  • AdSense
  • AdTech
  • ドットとメディア
  • ダブルクリック
  • フライト
  • プリスタ
  • スマートAdServer
  • Yieldmo
  • Revcontent

ちなみに、AMPは、広告ブロッカーの採用が拡大しているというパブリッシャーの不安を和らげることも目的としていると思います。 しかし、それはまた別の話です。 おそらくこれをまとめる時です。

あなたに…

ワオ。 ここでは多くのことをカバーしました。

頑張ってくれてありがとう。 これがお役に立てば幸いです。GoogleAMPプロジェクトに関するすべての質問にお答えしました。

そうでない場合は、下のコメントに私に連絡してください。 さらに、私が書いたものに追加するものがある場合、または何かを見逃した場合は、コメントを残してください。

いずれにせよ、ご連絡をお待ちしております。