Web ページ高速化スタント AMP_html/css_WEB-ITnose

統計によると、読み込みに 3 秒以上かかる Web サイトの使用を断念する人は 40% です。読み込みが遅いページを待つ忍耐力はありません。同じタイプの Web サイトがたくさんあるので、読み込みが速く、より良いエクスペリエンスを提供する Web サイトを選択してみてはいかがでしょうか。 Web ページの読み込みが遅いという問題を解決するために、Google は数十の技術機関や企業と協力して Accelerated Mobile Pages (AMP) プロジェクトを立ち上げました。

AMP 公式 Web サイトの統計によると、WordPress、YouTube、Twitter、LinkedIn、BBC など、多くのニュース Web サイトやテクノロジー Web サイトが AMP を使用し始めています。

知らない人のために、AMP の謎を一緒に解き明かしましょう。

1. AMP とは何ですか?

Accelerated Mobile Pages (AMP) とは、文字通り、モバイル デバイスで高速に読み込まれる Web ページを意味します。これは、Google によって開始されたオープンソース プロジェクトであり、その主な目的は、静的コンテンツのレンダリング時間を短縮し、Web サイトの読み込み速度を効果的に向上させることです。

そこで質問は、AMP の読み込み速度はどのくらいかということです。

Googleの公式発表によると、AMPがNexus 5をシミュレートして3Gネットワ​​ークテストをシミュレートした場合、最初の画面の表示速度が15%〜85%向上しました。

それでは、AMP とは何なのかを見てみましょう。 。 。

AMP は主に 3 つの部分で構成されます:

1.AMP HTML

1).AMP HTML 仕様

AMP HTML は HTML に基づいていくつかの使用制限を追加し、AMP カスタム コンポーネントを追加します。

AMP は、、

、 などの一部の HTML タグを無効にします。

一部の HTML タグは、 や

AMP は、 、 、 などの HTML ベースの拡張コンポーネントも提供します。ただし、拡張コンポーネントを使用する場合は、対応する JS ファイルが必要です。紹介された。

簡単な AMP HTML の例:

上記のコードを .html ファイルとして保存すると、ブラウザで通常どおり実行できます。この例からわかるように、AMP HTML の記述方法は HTML と似ています。ただし、独自の仕様要件があります:

• DTD には次のような AMP 属性が含まれている必要があります: HTML;

• 必須 ページの通常バージョンの URL を指定するには、 を配置します。現在の URL を使用します。

• は、HEAD 領域の先頭に配置する必要があります。

• meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui"> する必要があります。 を HEAD 領域の最後の要素として記述します