AMPとは何か、そしてAMPを使ってウェブページのパフォーマンスを最適化する方法
- 1429単語
- 7分
- 17 Aug, 2024
モバイルデバイスの普及に伴い、ページの読み込み速度はユーザー体験とSEOの最適化において特に重要になっています。AMP(Accelerated Mobile Pages、加速モバイルページ)は、Google主導のオープンソース技術で、特定のフレームワークと制限を通じてウェブページのパフォーマンスを最適化し、読み込み時間を短縮することを目的としています。この記事では、AMPの概念とその利点を紹介し、具体的な実践コードを通じて標準ウェブページをAMPページに変換する方法を示し、AMPページのデプロイ時に直面する可能性のある問題について議論します。
AMPとは何か?
AMPは、モバイルデバイスでのウェブページの読み込み速度を向上させるための軽量フレームワークです。HTML、CSS、JavaScriptに対する厳格な規範を通じて、ページのレンダリング時間を短縮し、ユーザー体験を向上させます。AMPの主な特徴には以下があります:
- 高性能:ページ内容を制限し、不要なリソースの読み込みを減らすことで、より速いページ表示を実現します。
- モバイルファースト:AMPはモバイルデバイス専用に設計されていますが、デスクトップデバイスにも適用可能です。
- SEOの利点:AMPページはGoogleの検索結果で優先的に表示される可能性があり、露出度が向上します。
AMPの利点
- 読み込み速度の向上:AMPは外部JavaScriptの制限やCSSのインライン化などの手法を用いて、ページの読み込み時間を大幅に短縮します。
- ユーザー体験の最適化:ページの読み込みが速くなることで、ユーザーはコンテンツにより迅速にアクセスでき、ページの離脱率が減少します。
- SEOに優しい:AMPページは検索エンジン結果ページ(SERP)でより高い表示優先度を享受し、特にモバイル検索で効果を発揮します。
AMPページの変換例
AMPの実際の応用を理解するために、普通のHTMLページをAMPページに変換する方法をコードで示します。
元のHTMLページ
これは標準的なHTMLページの例です:
1<!doctype html>2<html lang="en">3 <head>4 <meta charset="UTF-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />6 <title>私の普通のウェブページ</title>7 <link rel="stylesheet" href="styles.css" />8 </head>9 <body>10 <h1>私のウェブサイトへようこそ</h1>11 <img src="example.jpg" alt="サンプル画像" />12 <script src="script.js"></script>13 </body>14</html>
AMP変換後のページ
AMPページは通常のHTMLページとは異なり、AMP規範に従い、AMPコアスクリプトを導入し、AMPコンポーネントを使って標準のHTMLタグを置き換え、CSSをインライン化する必要があります。以下は変換後のAMPページです:
1<!doctype html>2<html ⚡>3 <head>4 <meta charset="utf-8" />5 <link rel="canonical" href="self.html" />6 <meta name="viewport" content="width=device-width,minimum-scale=1" />7 <style amp-boilerplate>8 body {9 -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;10 -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;11 -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;12 animation: -amp-start 8s steps(1, end) 0s 1 normal both;13 }14 @-webkit-keyframes -amp-start {15 from {16 visibility: hidden;17 }18 to {19 visibility: visible;20 }21 }22 @-moz-keyframes -amp-start {23 from {24 visibility: hidden;25 }26 to {27 visibility: visible;28 }29 }30 @-ms-keyframes -amp-start {31 from {32 visibility: hidden;33 }34 to {35 visibility: visible;36 }37 }38 @-o-keyframes -amp-start {39 from {40 visibility: hidden;41 }42 to {43 visibility: visible;44 }45 }46 @keyframes -amp-start {47 from {48 visibility: hidden;49 }50 to {51 visibility: visible;52 }53 }54 </style>55 <noscript56 ><style amp-boilerplate>57 body {58 -webkit-animation: none;59 -moz-animation: none;60 -ms-animation: none;61 animation: none;62 }63 </style></noscript64 >65 <script async src="https://cdn.ampproject.org/v0.js"></script>66 </head>67 <body>68 <h1>私のウェブサイトへようこそ</h1>69 <amp-img70 src="example.jpg"71 width="800"72 height="600"73 layout="responsive"74 alt="サンプル画像"75 ></amp-img>76 </body>77</html>
重要な変換ステップ
- DOCTYPE宣言:
<html ⚡>
を使用してAMPページであることを示します。 - AMPスクリプト:
<head>
内にAMPコアスクリプト<script async src="https://cdn.ampproject.org/v0.js"></script>
を追加します。 - 画像タグの置き換え:標準の
<img>
タグを<amp-img>
タグに置き換え、幅、高さ、およびレイアウト属性を指定してAMP規範に適合させます。 - CSSのインライン化:AMPページのCSSはインラインであり、50KB以内でなければなりません。
AMPページのデプロイと検証
AMPページをオンラインでデプロイする前に、ページがAMP標準に適合していることを確認する必要があります。
AMPページの検証
AMP Validatorツールを使用して、AMPページが規範に適合しているかを迅速に検証できます。ページのURLまたはHTMLを検証器に貼り付けて、AMP標準に合わないコードがないかを確認します。
AMPページのデプロイ時の注意事項
- SEOとAMP:AMPページには
<link rel="canonical" href="URL">
を含め、元の非AMPバージョンのページを指し示す必要があります。これがSEO最適化には重要です。 - AMPキャッシュ:AMPページはGoogleのAMPキャッシュサービスを通じてキャッシュされ、ページの読み込み速度がさらに向上します。AMPキャッシュの設定については公式ドキュメントを参照できます。
一般的なデプロイの問題と解決策
- CSSが制限を超える:AMPはCSSのサイズを50KB以内に制限しているため、CSSを簡素化する必要があるか、ページを複数のサブページに分割する必要があります。
- カスタムJavaScriptの禁止:AMPは直接のJavaScriptスクリプトの使用を禁止しており、すべてのインタラクション機能はAMPの組み込みコンポーネントを通じて実装する必要があります。例えば、動的なコンテンツバインディングには
<amp-bind>
を使用します。 - ページ更新の遅延:AMPキャッシュを使用する場合、ページの更新がすぐに反映されないことがあります。AMPキャッシュの更新要求を送信してキャッシュを強制的に更新できます。
まとめ
AMPはウェブページのパフォーマンスを最適化するツールとして、モバイルデバイスでのユーザー体験を大幅に向上させることができます。ページの厳格な規範と最適化を通じて、AMPはページの読み込み速度を速めるだけでなく、SEOのパフォーマンスも向上させます。この記事ではAMPの