真耶AMP294553557ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。Pages)」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。Pages)」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。JSというJavaScriptのライブラリーを読み込み、表示速度の改善を行っています。JSはPCページ・モバイルページ(非AMPページ)でも利用でき、その高速化の恩恵を受けることができます。JS(amp-imgタグやamp-youtubeタグなど)を導入して1年以上経ちますが、問題なく運用できています。Googleの画像検索にもインデックスされています。Load)とは、画面に表示されていない画像は読み込まず、画面のスクロールに応じてあとから読み込むことでウェブページの表示を高速化する手法です。通常のimgタグの場合、ページアクセス時に画面の表示有無に関係なくすべての画像を読み込もうとします。そのため、ページが最低限の操作を受け付けるようになるまでの時間がかかってしまったり、スクロールしない場合でも通信容量がかさむといったデメリットが発生します。jquery.lazyload.jsなどの遅延ロードを実現するためのライブラリは多々ありますが、src属性にダミーの画像URLを指定し、カスタムデータ属性などに正規の画像URLを指定する方法が一般的でした。data-属性を使うので、無理やり実現している印象ですね。JSでは、カスタムタグのamp-imgタグを利用し、次のように記述できます。ウェブコンポーネント時代の使い勝手ですね。JSライブラリを読み込む必要があります。amp-imgタグはimgタグで指定できる属性は基本的にはそのまま利用できますが、width属性とheight属性は必須で指定する必要がありますのでご注意ください。amp-imgタグには、追加でlayout属性が指定できます。この属性は、CSSで指定する画像表示に関するスタイルをCSSの定義なしで実現できるものです。上記の例では、layout属性にresponsiveと指定しているため、要素の幅はコンテナー要素の幅に等しくなり(100%表示)、高さについては、幅と高さの属性によって決まるアスペクト比になるよう自動的に調整されます。その他のlayout属性に指定できる値については、「公式リファレンス」を参照ください。実際にimgタグとamp-imgタグを使用して画像を20枚表示するページをそれぞれ準備し、ページ表示時のパフォーマンスを計測しました。デモページでスクロールをすると、amp-imgタグのデモでは遅延ロードが行われていることが確認できます。DevToolsのAuditsを使用しました。「主要コンテンツが表示され始める時間」と「ユーザー操作を受けるけるようになるまでの時間」に着目して計測を行いました。Interactive」がページが完全に操作を受け付けるようになるまでの時間になります。計測結果を比較すると「主要コンテンツが表示され始める時間」はさほど変わりませんが、「ユーザー操作を受けるけるようになるまでの時間」がimgタグの場合は4,040ミリ秒かかっていますが、amp-imgタグを利用して遅延ロードを行うことで1,740ミリ秒に短縮されており、約60%の高速化となっています。HTMLのamp-imgタグを利用することで、これだけの大きなパフォーマンス改善が実現できました。サポートブラウザ公式サイトでは、Chrome、Firefox、Edge、Safari、Operaといった主要ブラウザーの最新バージョンとその1つ前のバージョンをサポートしていると明記されています。以降については、「完璧ではないが破損もしていない」という状態でのサポートを維持するとのことです。今回のデモを手元の主要ブラウザー以外の環境で確認したところ、次の環境でも動作することが確認できました。▲IE11(標準モード)でも利用可能amp-imgタグを利用する際のデメリットamp-imgタグは容易に導入できますが、レスポンシブウェブデザインに対応したウェブページなどでは、layout属性の挙動を理解しておかないと、意図した動作にならないことがあります。導入する際には次の点を考慮しつつ実装しましょう。layout属性の値により、width属性、height属性の指定が必須のものと不要なものがある画像サイズが小さい画像に対してlayout属性にresponsiveを指定すると、親のコンテナー要素の幅にあわせて表示されるため、元画像よりも大きく表示されてしまう。JSのライブラリー「v0.js」の容量がGZIPで80KBほどあり、JSファイルの解析時間がわずかにかかってしまう。JSライブラリーの読み込み自体でエラーが発生してしまう。JSにはamp-imgタグ以外にも動画を扱うamp-videoタグやamp-youtubeタグ、amp-iframeタグなどスクロールに連動して読み込みを行うためのタグが用意されています。ページの初期表示時に動画やiframeを読み込むと時間を要するので、スクロール連動にできるのはパフォーマンスの観点で効果が大きいです。性能上だけでなく、画像の拡大表示を行うamp-image-lightboxタグ、テキストのフォントサイズを自動調整するamp-fit-textタグなど、機能性に優れた便利なタグもたくさん用意されています。HTMLの作成とあわせて、これらのタグを利用して手軽にPCページ・モバイルページのパフォーマンス改善を行ってみてはいかがでしょうか。他のカスタムタグも同様の手順で簡単に導入できるため、ぜひお試しください。平成30年7月2日に内容をメンテナンスしています。真耶インタラクティブデベロッパー。Web制作会社でサーバサイドやフロントエンドの制作に携わり、現在は株式会社ICSでインタラクティブコンテンツの制作を担当。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。