AMP と PWA を組み合わせて超高速モバイル エクスペリエンスを実現

高速な Web ページの構築や最適化に苦労している場合は、開発者向けの代替ソリューションがあるかもしれません。 Accelerated Mobile Pages (AMP) と呼ばれるオープンソース技術ソリューションを利用してみてはいかがでしょうか? AMP は、モバイル ページのほぼ即時配信 (平均 0.8 秒) を提供するため、ユーザーの Web サイトとの最初のインタラクションに最適な完璧なソリューションとなります。 一方、プログレッシブ Web アプリ (PWA) を使用すると、より多くの対話性とエンゲージメント機能を提供できます。

AMP と PWA は実際には、さまざまな目標を達成するための補完的な方法を提供するテクノロジーまたは Web ページのセットにすぎません。 このガイドでは、この 2 つを組み合わせて、真に魅力的で超高速なモバイル Web エクスペリエンスを作成する方法を説明します。 他のオプションについては、変更を検討してください。 ウェブホスティング サービス。 プロセスの初めに? まともなものを試してください ウェブサイトビルダー.

さらに役立つアドバイスについては、チュートリアルのまとめをご覧ください。 アプリの構築方法、そしてあなたの クラウドストレージ はあなたのために働いています。

• PWA の 9 つの驚くべき秘密

AMP: モバイル ページの高速化

AMP は、非常に高速でスムーズなランディング ページを提供します。 フレームワーク自体はコーディングが非常に簡単で、ほとんどの開発者は完全に実装するのに 1 週​​間もかかりません。 AMP はコンテンツをユーザーの目の前にすばやく表示し、標準のモバイル ページよりも 85% 速く読み込まれます。

ページが「AMP 有効」である限り、コードが破損したりパフォーマンスが犠牲になったりすることはないと確信できます。 で構築されたフレームワークに従って有効な AMP ページを開発できます。 AMP HTML、AMP JS、AMP キャッシュ そして使用して AMP バリデーター 何も見逃していないかを確認するために。 APM の構築方法の詳細については、以下を参照してください。 Google 開発者サイト.

常に重要なことは、 AMP の影響をテストする. AMP がモバイルのパフォーマンスにどのような影響を与えるかについて、トラフィックに対する 50/50 の分割テストで AMP の A/B テストを行うことをお勧めします。 こうすることで、AMP の結果を自分自身で安全に確認できます。

PWA: プログレッシブ Web アプリ

PWA は、オープン Web の範囲とネイティブ Web アプリケーションの機能を組み合わせたものです。 これは本質的に、ネイティブ モバイル アプリとほぼ同じように動作する Web サイトです。 これらは、特にキャッシュされたモバイル訪問や繰り返しのモバイル訪問で素早く読み込まれ、オフラインで安全に利用でき、ホーム画面からアクセスできます。 ただし、サイトのサービス ワーカー (アセットとアプリケーション シェル) は、サイトの後続の読み込みでリピーターへの配信のみを加速するという事実によって、最初の読み込みが妨げられます。

PWA のサービス ワーカーは、ネットワークがない場合、またはネットワーク接続が遅い/断続的な場合でも、信頼性の高いエクスペリエンスを実現します。 PWA の主な利点は、Web テクノロジーを適切なタイミングで使用し、アプリのようなものを置き換えることができることです。 権限、プッシュ通知、支払いリクエスト API、およびより優れたフォーム インタラクション (オートコンプリート、入力) 種類など）。 また、PWA は、外部 JavaScript リクエストを 50% 削減することで、一般にスマートフォンにとって非常に負担となるユーザーのダウンロード リクエストを減らすことにも取り組みます。

PWA は文字通り、（アプリのようなアイコンを使用して）インストールすると、消費者がすぐにビジネスを利用できるようになり、次のようなサービスを提供します。 平均的な Web サイトと比較して、より豊かなエクスペリエンス – プッシュ通知を有効にした場合のより没入型のエクスペリエンス – 訪問。 これは一連のテクノロジー (https、サービス ワーカー、マニフェスト ファイル) を使用して Web サイトを強化し、オフラインでもアクセスできるようにします。

さらに、ユーザーは、要求されたときに PWA をダウンロードする可能性がはるかに高いため、簡単に発見できます。 アプリ ストアにアクセスして検索するのではなく、Web を閲覧しているときに「ホーム画面に追加」します。 アプリケーション。

AMPとPWAを組み合わせる方法

AMP と PWA は実際には、補完的な方法を提供するテクノロジーまたは Web ページのセットにすぎないため、 さまざまな目標を達成するには、少し時間をかけて、その独自の強みを認識する必要があります。 それぞれ。 さらに、両方のテクノロジーには、個別に実装する場合に考慮する必要がある独自の欠点もあります。

AMP は、比較的少ない労力で済む高速読み込みのすぐに使えるコンテンツを提供しますが、いくつかの機能が欠けています。 一方、PWA は、より高度なプラットフォーム機能を提供し、繰り返しアクセスできるように高速に読み込み、オフライン モードでもコンテンツの信頼性を備えています。 ただし、PWA は AMP ほど高速ではないため、コンテンツの最初の読み込み時には AMP ほど強力ではありません。

AMP と PWA を組み合わせて、魅力的で超高速なモバイル Web エクスペリエンスを作成できます。 完璧なテクノロジーの組み合わせと考えてください。 従う必要がある簡単な 2 段階のプロセスは次のとおりです。

01. AMP を使用してサイトを構築する

それは必ずしも Web サイト全体を意味する必要はありません。「エントリ ポイント」またはランディング ページに焦点を当てることができます。 AMP の速度による最大の増加が見込まれる場所を決定します。 AMP が正しく実装されている場合、Google キャッシュから提供されるときの読み込み時間は非常に速く、関心を維持できるはずです。

PWA ロジックを AMP と統合するには、すべて amp-install-service worker と呼ばれる AMP コンポーネントから始まります。このコンポーネントは、任意の AMP ページから Service Worker をインストールできます。

これにより魔法が起こります。 これにより、AMP キャッシュから Service Worker をインストールできるため、ユーザーが元のサイトにアクセスするまでに Service Worker がインストールされます。 ユーザー エクスペリエンスは中断されず、AMP ファイルが公開されているオリジンから AMP ファイルが提供されるたびに Service Worker が実行されます。 PWA 機能を統合する前に、この方法で AMP を「リーフ」経由のエントリ ポイントとして提供することをお勧めします。 ページ」をサイトに追加し、ユーザーをスムーズな次のページに切り替える前に、PWA を「舞台裏」でウォームアップします。 旅。

02. PWA 機能による段階的な強化

AMP と Service Worker を実装したら、ビジネス目標に最も適した PWA 機能を使用してサイトを段階的に強化します。 PWA を完全に統合すると、さまざまなメリットが得られ、より多くのユーザーを喜ばせ、エンゲージメントを高め、コンバージョンを増やすことが容易になります。 がここにあります 便利なチェックリスト これは、ベースライン PWA を作成し、それを模範的な PWA に開発するために何が必要かを説明しています。

優れたチームとは、消費者の新たな期待に積極的に適応するチームです。 AMP と PWA はうまく連携しており、Web サイトがユーザーの注目を集め、より魅力的なものになります。 1 つ確かなことは、私たちは Web サイトが高速であることを好み、コンテンツがすぐに到着して簡単に完了できることを望んでいます。 ほとんどすべてがスキップ可能で、参加を中止することも選択できる現代の世界では、興味を維持することに重点を置く必要があります。 覚えておいてください: 最小の画面が最大のチャンスを表します。

この記事は最初に公開されました ネットは、Web デザイナーと開発者向けの世界で最も売れている雑誌です。 買う 318号 または 購読する.

続きを読む：

• プログラミングに最適なモニター 2019
• モバイルアプリを開発する 5 つの方法
• 最高のウェブホスティングサービス