PWAとAMP:正しい決定を下す方法は?

公開: 2019-07-26

目次

最新の統計では、46.8億人のモバイルユーザーが積極的にネットサーフィンやウェブ探索を行っていることが確認されています。 ほぼ3年前、モバイルトラフィックは初めてデスクトップトラフィックを上回り、51.3%のインターネットユーザーをモバイルデバイスユーザーと主張し、その数は絶えず増加しています。 過去10年間からこの用語が浮かんできたのと同じくらい、モバイルファーストの時代が始まったのはまさに今です。

したがって、最初にモバイルユーザーにより良いサービスとエクスペリエンスを提供するために組織が取り組んでいるのを見るのは驚くことではありません。 しかし、Googleは数年前にPWAとAMPが導入されたときにモバイルの時流に飛びつきました。

PWAとAMPはどちらも、モバイルデバイス互換プラットフォームを使用しながらユーザーのWebエクスペリエンスを向上させるように設計されています。 しかし、ユーザーはPWAとAMPの間で混乱することがよくあります。

時間を節約して、PWAとAMPの違いを理解できるようにしましょう。

PWAとは何ですか?

スターバックスプログレッシブウェブアプリの例
スターバックス–最高のPWAの例の1つ

PWAプログレッシブウェブアプリの略で、ブラウザでウェブページにアクセスすることで、ユーザーにモバイルアプリケーションのルックアンドフィールとエクスペリエンスを提供するように設計されています。

つまり、PWAは、アプリのような機能を提供するために最適化されたWebページです。 さらに、PWAは、プラットフォームまたはそのサービスがモバイルWebでアクセスされたときに機能しますが、モバイルアプリはインストールされません。

前述のように、PWAはアプリのような機能の提供に重点を置いています。 これも:

  • ページ間のより速い移行
  • 完全なアプリのようなインターフェース
  • プッシュ通知を送信する機能(ユーザーの許可が必要)
  • オフラインコンテンツのアクセシビリティなど。

「PWA」という用語に慣れていない方のために、あらゆるニーズを満たすPWAの包括的なガイドをここに用意しました。

すでにモバイルアプリケーションがありますが、なぜプログレッシブWebアプリが必要だったのでしょうか。

モバイルデバイスを使用すると、ユーザーがネイティブアプリ(AppStoreまたはGooglePlayからアプリケーション)をダウンロードできることは誰もが知っていますが、PWAの方が優れています。 なぜ、どのように?

Andrew Gazdeckiは、フォーブスの記事でこの質問に答えました。「 PWAはネイティブアプリよりも効率的です。 それらはオンデマンドで動作し、スマートフォンの貴重なメモリやデータを消費することなく、いつでもアクセスできます。 同じアプリケーションのネイティブバージョンではなくPWAを使用することを選択することで、ユーザーはより少ないデータを消費します。 ただし、これは、ユーザーがネイティブアプリの利便性を犠牲にする必要があるという意味ではありません。 PWAは引き続きホーム画面に保存できます。実際にダウンロードする手間をかけずにインストールできます。」

AmazonアプリとPWA

最近、私たちが使用する最も人気のあるネイティブモバイルアプリは、PWA、特にeコマースやソーシャルメディアポータルを使用してプラットフォームにアクセスしやすくしています。

 推奨読書:プログレッシブウェブアプリとネイティブアプリ:どちらが適していますか?

あなたの番:

万能の完璧なプログレッシブウェブアプリソリューションを探しているMagentoの加盟店のために、ここSimiCartではあなたとあなたの店のための完全なパッケージを提供しています。 今すぐ探索!

次に、AMPとは何ですか?

AMP Accelerated Mobile Page

AMPまたはAcceleratedMobilePageは、モバイルデバイス用の高速読み込みウェブページを作成するために2015年にGoogleによって導入されました。 Googleは、開発者がこれらのウェブページを作成できるように「AMPプロジェクト」をオープンソース化しました。

モバイルフレンドリーなウェブサイトを作成するために、不要な(インライン)JavaScriptが削除されています。 さらに、CSSはインライン使用のために50KBに制限されており、GoogleはウェブサイトのコンテンツをキャッシュしてCDNのような機能を提供します。 AMP Webコンポーネントは、他の機能の中でも、AMPライブラリの一部として(制限付きの)JavaScript挿入を提供します。これを使用すると、待ち時間のリスクを冒すことなく、モバイルWebページにアニメーションを追加できます。

AMP AcceleratedMobilePageの例

現在のシナリオでは、AMPはWebサイトに限定されなくなりました。 AMP広告、AMPメール、さらにはAMPストーリーもあります。 これらすべてのAMPバージョンは、モバイルデバイスですばやくレンダリングするように構築されています。

画像クレジット:Bannersnack

「最近、それが瞬時でなければ–それは十分に速くありません。 広告が遅く、UXを混乱させている場合、最も印象的なクリエイティブでさえその目的を果たしません。」 AMPサイトについて説明します。

広告から予想されるように、AMP広告はクリック率を向上させることでROIを最大化します。 それらは同じことを提供することが証明されています。 Triplelift –ネイティブの広告技術会社は、AMP広告を使用した広告の読み込みが6倍速くなったため、収益が13%増加しました。

PWAとAMP:違い

AMPとPWAを比較する

AMPとPWAを一緒に使用できますか?

はい、AMPとPWAを一緒に使用して、エレガントなユーザーエクスペリエンスを提供できます。 これはどのように見えるかです:

まず、ユーザーがサービスを検索すると、AMP対応の結果が画面に表示されます。 これは、軽量で事前にキャッシュされたWebサイトが、ユーザーがクリックされるのを待っていることを意味します。 ユーザーがWebサイトをクリックすると、パブリッシャーは、プッシュ通知の送信を要求するアプリのようなWebページ(PWA)をユーザーに提供できます。 このWebページにより、ユーザーは次のような機能を利用できます。

  • コンテンツとサービスのオフラインブラウジング
  • 遅いインターネット接続中でもスムーズな移行
  • アプリのような体験

私たちがこのアイデアを採用するのを妨げているのは何ですか?

さて、最大の課題は開発です。 AMPはHTMLとCSSのみを使用し、JavaScriptを完全に回避するというルールで機能しますが(ほとんどの場合)、PWAページは主にJavaScript対応のサービスワーカーを使用して設計されています。

ただし、これは、SERPに使用される個別のAMPページを作成し、その後トラフィックをPWAページに転送することで対処できます。 つまり、AMPページは検索エンジンでのランク付けに使用でき、ユーザーがクリックしてAMPページを開くと、ブラウザはユーザーの関与と維持のためにPWAページを開始します。

総括する

PWAとAMPは、携帯電話向けの異なるテクノロジーです。 AMPはWebページをより高速にロードするために使用され、PWAはネイティブアプリのルックアンドフィールを提供するために使用されます。これはmコマースサイトに非常に役立ちます。

アドビの調査によると、2018年11月1日から12月31日までの収益の40%はモバイルデバイスからのものでした。コンバージョン率が7.4%だったデスクトップトラフィックとは対照的に、10.5%のモバイルトラフィックがコンバージョンにつながっています。大小を問わず、モバイルユーザーを真剣に受け止め、ニーズに応じてAMP、PWA、またはその両方への投資を開始する必要があります。

最後に、どちらもサイトのパフォーマンスとユーザーエクスペリエンスを向上させる強力なツールです。 2つのテクノロジーのいずれかを選択するか、単に両方を実装して、両方の長所を体験することができます。 選択はあなた次第です。

おすすめの投稿:プログレッシブウェブアプリ(PWA)はSEOにメリットがありますか? (統計と例を含む)

SimiCartPWAを探索する