ホームページ > 記事 > ウェブフロントエンド > AMP HTML はモバイル web_html/css_WEB-ITnose の高速化に役立ちます
Google は、モバイル Web エクスペリエンスの向上を目的とした制限付き HTML (制限付き HTML) 仕様をオープンソース化しました。
Accelerated Mobile Pages (AMP) は Google によって開始され、間もなく約 30 社のコンテンツ発行者によってサポートされるプロジェクトです。このプロジェクトの目的は、通常の Web ページをモバイル デバイス上でより高速に、あるいは瞬時に読み込めるようにすることです。最近の調査によると、ページの読み込みに 10 秒以上かかる場合、ページの直帰率は次のようになります。 58% という高さです。
AMP の目標は、制限付きの HTML とキャッシュ テクノロジーを使用して、モバイル ウェブ上の静的コンテンツのパフォーマンスを向上させることです。このフレームワークは、新しい Web 開発言語や関連テクノロジーを導入するものではなく、既存のテクノロジーに基づいて構築されています。発行者は、いくつかの制限はありますが、引き続き自由にコンテンツを作成して公開できます。もちろん、Web ページの読み込みを高速化するためにコンテンツ キャッシュを使用することも世界中で推奨されています。 Google は、AMP に関心のあるパブリッシャーに無料のキャッシュ サービスを提供しています。
AMP Web ページでは、制限された HTML タグのセットが使用されます。つまり、既存のブラウザは変更を加えることなく AMP Web ページをレンダリングできます。これらのページを保存するサーバーは、AMP ページを他の HTML ページと同じように扱うことも、ウィンドウ (ビューポート) のサイズに合わせて画像のサイズを変更する、特定の画像や CSS をインライン化する、HTML と CSS を縮小する、ロードするなどの最適化手段を使用することもできます。外部コンポーネントなどを事前に入手できます。
パフォーマンス上の理由から、一部の HTML タグは禁止されています: アプレット、ベース、埋め込み、フォーム、フレーム、フレームセット、オブジェクト、パラメーター。ボタン以外の入力要素は禁止されています。 application/ld+json タイプのスクリプトと、AMP ランタイム環境をロードするために必要なスクリプト タグとページ ヘッダーの最後の要素を除き、スクリプトは禁止されています。 audio、img、video はカスタム要素 (amp-audio、amp-img、amp-video) に置き換えられます。 amp-iframe は iframe を置き換え、amp-iframe 要素は元の iframe に特定の制限を課します。さらに、Google は、amp-anim、amp-ad、amp-pixel、amp-twitter などの他のカスタム要素も設計しました。これらすべての要素の目的は、ページのプリロード、ロード、レンダリング中に特定のルールを適用して、ページのパフォーマンスを最大化することです。
AMP スクリプトに加えて、個人が作成した JavaScript スクリプトも禁止されています。 AMP スクリプト (それ自体は JavasScript で記述されています) は、AMP ランタイム環境を読み込むために使用されます。これにより、AMP のカスタム要素が実装され、リソースの読み込みがスケジュールされ、開発中にページが検証されます。 AMP ランタイム環境は、リソースがロードされるかどうか、いつロードされるかを決定します。
インライン広告や Web 分析スクリプトなどのサードパーティ コンテンツ (サードパーティ JS を含む) は、AMP 要素 (amp-ad、amp-pixel) を使用して含めることができます。これらの要素は iframe サンドボックスで強制的に実行されます。追跡ピクセルは分析に使用されます。
仕様に従って構築された AMP コンポーネントには、ホームページ上で実行される JavaScript が含まれる場合がありますが、優先度は低くなります。これらのコンポーネントは、Instagram、Twitter、YouTube などの特定のアプリケーションによって提供されるサービスを提供するために使用されます。 CSS を含めることもできますが、特定のルールに従う必要があります。
Speed Index は、AMP によって最適化された特定の Web ページを測定するために使用されます。AMP チームによると、最適化後に Web ページのパフォーマンスが 15% から 85% に向上したことがわかりました。 AMP ページの速度を実証するために、Google 検索のデモを構築しました。このデモを実行するには、モバイル デバイスを使用してリンク g.co/ampdemo にアクセスする必要があります。 AMP 仕様は最終的なものではなく、まだ開発中です。
AMP テクノロジーを使用してコンテンツを公開するために、一部のパブリッシャーがこのプロジェクトに参加しています。BBC、フィナンシャル タイムズ、エコノミスト、ハフィントン ポスト、ニューヨーク タイムズ、ワシントン ポスト リポートです。
オールインワンプログラマー交換 QQ グループ 290551701。グループのプログラマーは全員、Baidu、Alibaba、JD.com、Xiaomi、Qunar、Are You Hungry、Linekong などの上級プログラマーであり、豊富な経験を持っています。ダイレクトコミュニケーションテクノロジーの達人、最高の学習環境である私たちに参加して、業界の生の情報を学びましょう。偉い人と友達になりたいなら、参加して偉い人たちにあなたを次のレベルに連れて行ってもらいましょう!