FrontEnd

AMPに対応してモバイルページを高速に表示させる

投稿日:

はじめに

先日参加した「HTML5 Conference 2018」では、AMPに関するセッションがいくつかあり注目度の高さが伺えました。そこで今回はAMPの基礎について紹介します。

AMPとは

AMP(アンプ)はAccelerated Mobile Pagesの略で、2015年10月にGoogleとTwitterが共同で立ち上げたオープンソースプロジェクトです。一般的には、モバイルページを高速で表示させるための手法を指します。

なぜAMPでは高速に表示されるのか

AMPがパフォーマンスを改善する仕組みにはいくつかありますが、その一部を紹介します。

非同期スクリプトのみを許可

今、多くのWebページではUXを向上させるために多くのJavaScriptが動作していることがあります。しかし、これによりレンダリングに時間がかかる場合があります。そこでAMPでは非同期のJavaScriptのみ使用を許可しています。

一方でサードパーティのJavaScriptに関してはiframe内で使用可能です。

リソース読み込みに優先度を付ける

AMPでは読み込むリソースの優先順位付けを行っており、その時点で重要なリソースが最初にダウンロードされるように処理を最適化します。そして、遅延読み込みされるリソースはプリフェッチします。

プリレンダリング

通常のWebページでは、クリック等でアクセスを要求してからHTML等が読み込まれるため、ページが表示されるまでにタイムラグがありました。しかしAMPでは、preconnect APIを活用することにより、ページを開く前に事前にページが読み込まれるようになるため、高速に表示することができます。

AMPの3要素

AMPは大きく分けて3つの要素から構成されています。それぞれについて説明します。

AMP HTML

AMP HTMLは安定したパフォーマンスのためにいくつか制限が課されていますが、基本的にはカスタムAMPプロパティがついたHTMLの拡張版です。

AMP HTMLページのほとんどのタグは通常のHTMLのタグと変わりませんが、一部のタグはAMP固有のタグに置き換えられます(amp-imgなど)

AMP JS

AMP JSライブラリは、AMP HTMLページの高速なレンダリングを可能とします。

AMP JSライブラリには、AMPのパフォーマンスに関する設定が実装されており、リソースの読み込み管理やカスタムタグを提供することで、ページの高速なレンダリングを実現します。

AMP Cache

AMP HTMLページを提供する場合は、Google AMP Cacheを利用することができます。

Google AMP Cacheはプロキシベースのコンテンツ配信ネットワークです。AMP HTMLページをフェッチしてキャッシュし、ページのパフォーマンスを自動的に向上させてくれます。

AMPへの対応方法

では、実際にAMPに対応するための方法を紹介します。

AMP HTMLの宣言

下記のように宣言します。ampの部分はカミナリの絵文字で表現することも可能です。

meta要素の指定

AMPはUTF-8にのみ対応していますので、文字コードにはutf-8を指定します。また、ビューポートの指定も必須で、どちらか一方が欠けてもエラーになります。

構造化マークアップ

JSON-LDを指定して、下記のようにページの構成をクローラーに伝える必要があります。これを省略するとサーチコンソールでエラーになります。

boilerplate

AMP JSが読み込まれるまでコンテンツを非表示にするためのCSSボイラープレートです。以下の通り記述します。

ライブラリの読み込み

AMP JSライブラリを読み込みます。以下の通り記述します。

カノニカルとアノテーション

AMPではcanonicalタグで元のページとの関連性をクローラーに伝える必要があります。AMPページには下記のように記述します。

続いて、AMP元のページにも下記のように記述します。

サンプルコード

最後にこちらに記載されている基本のテンプレートを紹介します。以下のコードは適宜修正することでAMP対応ページを作ることができます。

さいごに

モバイルページを高速で表示するための手法であるAMPについて紹介しました。実際に見てみるとAMPページは本当に高速で表示されるので、モバイル向けのページが有る場合は対応する価値が十分にあると思います。

おすすめ書籍

HTML&CSSとWebデザインが 1冊できちんと身につく本 これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing)) リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue 3とVuex 4とTypeScriptでタイプセーフに開発する

1 はじめに1.1 インストール1.2 Storeの設定2 Storeの作成3 StoreをComponentから使用する4 $storeプロパティに型をつける5 さいごに6 おすすめ書籍 はじめに ...

Next.jsでJSON-LDを実装する

1 はじめに2 リッチリザルトとは3 構造化データとは4 Next.jsでJSON-LDを実装4.1 JSON-LDデータの作成4.2 JSON-LDデータの埋め込み5 リッチリザルトテスト6 さいご ...

Next.js 入門してみた

1 はじめに1.1 なぜNext.jsなのか?2 Next.jsとは何か2.1 Static Site Generation (SSG)2.1.1 Incremental Static Regener ...

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

フォロー

blog-page_side_responsive

2018年12月
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。