6-2 AMP（Accelerated Mobile Pages）の活用
はじめに
モバイルデバイスの普及に伴い、ページの読み込み速度がユーザーエクスペリエンスにおいて非常に重要な要素となっています。AMP（Accelerated Mobile Pages）は、ウェブページの読み込み速度を高速化するためのオープンソースプロジェクトであり、特にモバイル環境でのパフォーマンス向上に効果的です。本章では、AMPの概要、利点、実装方法、および活用事例について詳しく説明します。
1. AMPの概要
AMPはGoogleが提唱するオープンソースのフレームワークで、モバイルウェブページの読み込みを高速化することを目的としています。AMPは、HTML、JavaScript、キャッシュの3つの主要なコンポーネントで構成されています。
AMP HTML
AMP専用のHTMLタグを使用し、ページの軽量化を図ります。標準的なHTMLとほぼ同じですが、一部のタグが制限されています。
AMP JavaScript
AMPページのパフォーマンスを最適化するためのJavaScriptフレームワークです。非同期で読み込まれ、ページのレンダリングをブロックしません。
AMP Cache
AMPページをキャッシュし、GoogleのCDNを通じて高速に配信します。これにより、ユーザーがページにアクセスした際の読み込み時間が大幅に短縮されます。
2. AMPの利点
1）ページ読み込み速度の向上
AMPは、軽量なHTMLとJavaScript、効率的なキャッシュを組み合わせることで、ページの読み込み速度を劇的に向上させます。これにより、ユーザーはストレスなくコンテンツにアクセスできます。
2）SEOの向上
GoogleはAMPページを優先的にインデックスし、モバイル検索結果で高く評価します。AMPを導入することで、検索エンジンランキングが向上し、オーガニックトラフィックの増加が期待できます。
3）ユーザーエンゲージメントの向上
高速な読み込み速度と優れたユーザーエクスペリエンスにより、ユーザーの滞在時間が長くなり、離脱率が低下します。これにより、ユーザーエンゲージメントが向上し、コンバージョン率の増加が期待できます。
3. AMPの実装方法
AMPを実装するための基本的な手順を以下に示します。
1）AMP HTMLの作成
AMPページを作成するためには、特定のAMP HTMLタグを使用する必要があります。以下は、基本的なAMPページの構造です。
<!doctype html>
<html amp>
<head>
<title>AMP Example</title>
<link rel="canonical" href="https://www.example.com/amp">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom></style>
<script data-minify="1" async src="https://resonix.co.jp/wp-content/cache/min/1/v0.js?ver=1770126585"></script>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.iti__flag{--wpr-bg-8fa1120f-62b9-436f-936c-0d5bf55c432b: url('https://resonix.co.jp/wp-content/plugins/jupiterx-core/includes/extensions/raven/assets/img/iti-tel-input/flags.png');}.iti__flag{--wpr-bg-c83e5e40-8171-4d86-9cf2-95388026e329: url('https://resonix.co.jp/wp-content/plugins/jupiterx-core/includes/extensions/raven/assets/img/iti-tel-input/flags@2x.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".iti__flag","style":".iti__flag{--wpr-bg-8fa1120f-62b9-436f-936c-0d5bf55c432b: url('https:\/\/resonix.co.jp\/wp-content\/plugins\/jupiterx-core\/includes\/extensions\/raven\/assets\/img\/iti-tel-input\/flags.png');}","hash":"8fa1120f-62b9-436f-936c-0d5bf55c432b","url":"https:\/\/resonix.co.jp\/wp-content\/plugins\/jupiterx-core\/includes\/extensions\/raven\/assets\/img\/iti-tel-input\/flags.png"},{"selector":".iti__flag","style":".iti__flag{--wpr-bg-c83e5e40-8171-4d86-9cf2-95388026e329: url('https:\/\/resonix.co.jp\/wp-content\/plugins\/jupiterx-core\/includes\/extensions\/raven\/assets\/img\/iti-tel-input\/flags@2x.png');}","hash":"c83e5e40-8171-4d86-9cf2-95388026e329","url":"https:\/\/resonix.co.jp\/wp-content\/plugins\/jupiterx-core\/includes\/extensions\/raven\/assets\/img\/iti-tel-input\/flags@2x.png"}]; const rocket_excluded_pairs = [];</script></head>
<body data-rsssl=1>
<h1>Hello, AMP World!</h1>
<p>This is an AMP page example.</p>
<amp-img src="https://www.example.com/image.jpg" width="600" height="400" layout="responsive" alt="Example image"></amp-img>
<script>(()=>{class RocketElementorPreload{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}t(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this.i(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach((t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this.o(t)}catch(t){}}))}o(t){const e=JSON.parse(t.dataset.settings),i=e.m||e.animation_delay||0,n=e[this.animationSettingKeys.find((t=>e[t]))];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let o=setTimeout((()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this.l(t,e)}),i);window.addEventListener("rocket-startLoading",(function(){clearTimeout(o)}))}i(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach((t=>{e.forEach((e=>{i.push(t+e)}))})),i}l(t,e){this.i().forEach((t=>delete e[t])),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorPreload;requestAnimationFrame(t.t.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorPreload.run)})();</script></body>
</html>
2）AMPコンポーネントの使用
AMPには、画像、動画、広告、ソーシャルメディア埋め込みなど、さまざまなコンポーネントが用意されています。これらを使用して、ページをリッチにすることができます。例えば、画像を表示するためには、タグを使用します。
<amp-img src="https://www.example.com/image.jpg" width="600" height="400" layout="responsive" alt="Example image"></amp-img>
3）AMPキャッシュの利用
Google AMP Cacheを利用することで、AMPページを高速に配信できます。AMPページが正しく設定されている場合、Googleは自動的にページをキャッシュし、検索結果でAMPアイコンが表示されるようになります。
4. AMPの活用事例
AMPを効果的に活用して成功している企業の事例を紹介します。
1）The Washington Post
The Washington Postは、AMPを導入することで、ページ読み込み速度を大幅に向上させました。これにより、モバイルユーザーのエンゲージメントが向上し、広告収益も増加しました。
2）eBay
eBayは、AMPを利用して商品ページの読み込み速度を高速化しました。これにより、ユーザー体験が向上し、コンバージョン率が改善されました。
