ICS MEDIA – Webのインタラクションデザインに関する最新情報が満載

ウェブページの表示速度は、離脱率やコンバージョン率に最も影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から7秒に落ちると、直帰率は114%上昇する」というデータが出ているようです。

表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。

AMPとはウェブページの読み込みを高速化させる技術

「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。

本サイト（ICS MEDIA）では以前「モバイルページの高速化！ AMPの利点と対応HTMLの作り方」で導入方法を紹介していますが、AMPでは表示速度を高速化するためにAMP JSというJavaScriptのライブラリーを読み込み、表示速度の改善を行っています。

AMP JSはPCページ・モバイルページ（非AMPページ）でも利用でき、その高速化の恩恵を受けることができます。ICS MEDIAでは非AMPページでAMP JS（amp-imgタグやamp-youtubeタグ、amp-twitterタグ）を導入して1年以上経ちますが、問題なく運用できています。

amp-imgタグを使って遅延ロード(Lazy Load)を行う

遅延ロード（Lazy Load）とは、画面に表示されていない画像は読み込まず、画面のスクロールに応じてあとから読み込むことでウェブページの表示を高速化する手法です。通常のimgタグの場合、ページアクセス時に画面の表示有無に関係なくすべての画像を読み込もうとします。そのため、ページが最低限の操作を受け付けるようになるまでの時間がかかってしまったり、スクロールしない場合でも通信容量がかさむといったデメリットが発生します。

jquery.lazyload.jsなどの遅延ロードを実現するためのライブラリは多々ありますが、src属性にダミーの画像URLを指定し、カスタムデータ属性などに正規の画像URLを指定する方法が一般的でした。

▼一般的な遅延ロードの記述方法（jquery.lazyload.jsを使った場合）

AMP JSでは、カスタムタグのamp-imgタグを利用しているため、カスタム属性の記載は不要で次のように記述できます。

▼amp-imgタグの記述方法

amp-imgタグはimgタグで指定できる属性はそのまま利用でき、デフォルトで遅延ロードが行われる仕様となっているため、タグ名をimgからamp-imgに変更するだけで遅延ロードが実現できます。ただし、amp-imgタグを有効にするために非同期でAMP JSライブラリを読み込む必要があります。

imgタグとamp-imgタグのパフォーマンスを計測

実際にimgタグとamp-imgタグを使用して画像を20枚表示するページをそれぞれ準備し、ページ表示時のパフォーマンスを計測しました。デモページでスクロールをすると、amp-imgタグのデモでは遅延ロードが行われていることが確認できます。

• imgタグを利用したデモページ
• amp-imgタグを利用したデモページ

パフォーマンス計測には、Chrome DevToolsのAuditsを使用しました。「主要コンテンツが表示され始める時間」と「ユーザー操作を受けるけるようになるまでの時間」に着目して計測を行いました。

▼imgタグを使用した場合の計測結果

▼amp-imgタグを使用した場合の計測結果

「First Meaningful Paint」がページの主要なコンテンツがスクリーンに表示されるまでの時間、「First Interactive」がページが最低限の操作を受け付けるようになるまでの時間、「Consistently Interactive」がページが完全に操作を受け付けるようになるまでの時間になります。

計測結果を比較すると「主要コンテンツが表示され始める時間」はさほど変わりませんが、「ユーザー操作を受けるけるようになるまでの時間」がimgタグの場合は4,040ミリ秒かかっていますが、amp-imgタグを利用して遅延ロードを行うことで1,740ミリ秒に短縮されており、約60%の高速化となっています。

HTMLのimgタグをamp-imgタグに書き換えるだけで、これだけの大きなパフォーマンス改善が実現できました。

サポートブラウザ

公式サイトでは、Chrome、Firefox、Edge、Safari、Operaといった主要ブラウザーの最新バージョンとその1つ前のバージョンをサポートしていると明記されています。スマートフォンに搭載されている Android 4.0 システムブラウザーと Chrome 28 以降については、「完璧ではないが破損もしていない」という状態でのサポートを維持するとのことです。

また、今回のデモを手元の主要ブラウザー以外の環境で確認したところ、次の環境でも動作することが確認できました。

• Internet Explorer １０
• Internet Explorer 11
• Android 4.2 システムブラウザー

おわりに

AMP JSにはamp-imgタグ以外にも動画を扱うamp-videoタグやamp-youtubeタグ、amp-iframeタグなどスクロールに連動して読み込みを行うためのタグが用意されています。ページの初期表示時に動画やiframeを読み込むと時間を要するので、スクロール連動にできるのはパフォーマンスの観点で効果が大きいです。また、性能上だけでなく、画像の拡大表示を行うamp-image-lightboxタグ、テキストのフォントサイズを自動調整するamp-fit-textタグなど、機能性に優れた便利なタグもたくさん用意されています。

※公式リファレンス「コンポーネント / タグ – AMP」

AMP HTMLの作成とあわせて、これらのタグを利用して手軽にPCページ・モバイルページのパフォーマンス改善を行ってみてはいかがでしょうか。他のカスタムタグも同様の手順で簡単に導入できるため、ぜひお試しください。