web-dev-qa-db-ja.com

AMP HTMLとは何ですか?また、フレームワーク/ツールXにはどのように適合しますか?

OK、だから私たちはおそらく今までにGoogleから AMP HTML について聞いたことがあるでしょう。

私が興味を持っているのは、これが既存のワークフローにどのように適合するかということです。 ReactまたはAngularアプリを作成している場合、AMP HTMLは開発プロセスにどのように適合しますか?これらのフレームワークにはそれぞれ、コンポーネントを定義する方法がありますAMPがスタックに追加されているようです。

私たちのほとんどは、すでにbrowserifyやwebpackなどの他のツールも使用しています。私は、AMPが残りの部分にどのように適合するかを簡単には見ていません。これらのツールの一部により、すでに最適化された方法でサイトを提供することができます。 AMP HTMLはこれらすべてをどの程度変更しますか?

56
user633183

AMP HTMLは基本的に基本に戻り、可能な限り高速なHTMLを提供しています。 WAPおよびNokia 7110

これは、Webページを作成するための厳格なルールのセットであり、他の企業や開発者による拡張に対して開かれ、開かれています。

これがSPA(シングルページアプリ)やその他のJavaScriptフロントエンドの重いフレームワークでどのように機能するかは、現時点では不明です。

低速の接続と小さなビューで可能な限り高速にロードするように設計されたカスタム要素を備えた静的なHTMLページの中核です。 AMP-HTMLを使用するかどうかに関係なく、誰でもサイトをモバイル向けに既に最適化し、数KBに削減することができます。

主な利点は

  1. GoogleはAndroidをサポートします、ChromeとGoogle検索、Google CDN。
  2. ページは非常に高速にロードされ、かなり静かに見えることがあります。

Wordpress や他の出版社による最初の採用は、モバイルフレンドリーなAMPページの別個のセットである可能性があります。これは、通常のWebページをすべてモバイルフレンドリーにするか、SEOヒットに直面させたいGoogleからのものです。

長期的に考えると、パフォーマンスに焦点を当てたモバイルWebの仕様です。採用された場合、5年後には、その接続の品質に関係なく、モバイル接続でWebページが数秒でロードされる場合があります。テクノロジーや通信会社が速度を上げるのを待てないなら、ページのサイズを少なくとも小さくすることができます。

25
kzap

AMPは静的ページ用に設計されています。開発者は、通常バージョンとAMPバージョンの2つの異なるページを作成する必要があります。 AMPページには通常のページへのリンクがあり、逆の場合も同様です。リクエストがモバイルから通常のページに来るたびに、AMPページがロードされ、その逆も同様です。 Googleには独自のAMPキャッシュがあり、高速にロードできます。 AMPページの開発中に、AMPルールを考慮する必要があります。

16
suraj naikwade

これにより、事態はより明確になりました [〜#〜] url [〜#〜]

最大の最適化の1つは、外部リソースからのすべてを非同期にするため、ページ内の何もレンダリングをブロックできないことです。

したがって、CSSをブロックするレンダリングはもうありません。

他のパフォーマンステクニックには、すべてのiframeのサンドボックス化、リソースがロードされる前のページ上のすべての要素のレイアウトの事前計算、遅いCSSセレクターの無効化が含まれます。

この新しいリンクがお役に立てば幸いです。

1
prosti