AMP(Accelerated Mobile Pages)とは、Googleが中心となって開発したモバイルウェブページの高速表示を実現するためのオープンソースプロジェクトです。従来のモバイルページと比較して、読み込み速度を大幅に向上させることで、ユーザー体験の改善とモバイル検索における優位性を提供します。

このフレームワークは2015年10月に発表され、HTMLの軽量版である独自の仕様を採用することで実装されています。AMP HTMLと呼ばれる制限付きのマークアップ言語、AMP JSライブラリ、そしてAMP CDNという3つの主要コンポーネントから構成され、これらが連携してページの高速化を実現しています。

【PR】プログラミングや生成AIを無料で学べる「コードキャンプフリー」

• 「Pythonマスター講座」

  

• 「ChatGPT基礎講座」

  

AMP HTMLの基本構造と記述方法

AMP HTMLでは通常のHTMLに様々な制限があり、ページを作る際には特定の属性や専用タグを使う必要があります。ドキュメントタイプ宣言の直後に配置するタグには、amp属性(または稲妻マーク⚡でも可)を必ず含める必要があり、

  
  
  
  
  


  
AMPページ

通常のHTMLでは<img>タグを使用しますが、AMPではという専用タグに置き換える必要があります。このタグでは幅と高さの属性指定が必須となっており、レスポンシブ対応のためにlayout属性を活用してレイアウトモードを制御できます。

AMPページの配信とキャッシュの仕組み

AMP CDNはGoogleが提供するコンテンツデリバリーネットワークで、検証済みのAMPページを自動的にキャッシュして配信する役割を担っています。このCDNは世界中に分散配置されたサーバーからコンテンツを提供するため、ユーザーの地理的位置に関わらず高速なページ表示を実現します。

検索エンジンのクローラーがAMPページを発見すると、そのページの検証とキャッシュ処理が自動的に実行されます。キャッシュされたページはプリレンダリング技術によって、即座に表示可能な状態で保持されるため、検索結果からのタップ操作に対して、ほぼ瞬時にコンテンツが表示されるのです。

※上記コンテンツの内容やソースコードはAIで確認・デバッグしておりますが、間違いやエラー、脆弱性などがある場合は、コメントよりご報告いただけますと幸いです。

ITやプログラミングに関するコラム

• 
  【PHP】define関数による定数の使い方や定義方法を解説
• 
  Illustrator(イラストレーター)で様々な図形の作り方を解説
• 
  CSSのstickyプロパティでWebサイトに固定要素を実装する方法
• 
  Dockerfileの基本的な使い方とビルド方法を簡単に解説
• 
  PHPのコメントの書き方とDocCommentの使い方を簡単に解説
• 
  【初心者向け】データベースの基本的な作り方を簡単に解説
• 
  【PHP】PDOでMySQLに接続する方法を簡単に解説
• 
  【WordPress】絞り込み検索機能を自作する方法をサンプルコードと併せて解説
• 
  【PHP】コードの動作確認をローカル・オンラインで行う方法
• 
  MacでWordPressのローカル環境を構築する方法を解説

ITやプログラミングに関するニュース

• 
  平塚信用金庫と寒川町が人材雇用対策セミナーを開催、外国人採用や従業員定着を支援
• 
  株式会社スーツが人事労務向け無料セミナーを開催、プロジェクト管理による生産性向上を解説
• 
  メルテックス株式会社が無料Webセミナーを開催、ドライフィルムかす処理の課題解決策を解説
• 
  株式会社Liquidがパスキー導入ウェビナーを開催、成功のポイントや実装の勘所を解説
• 
  一般社団法人デジタルサロン協会がAI実践セミナーを開催、多忙な経営者の業務効率化を支援
• 
  株式会社エスプールブリッジが無料ウェビナー開催、ミドルシニア社員のキャリア自律を支援
• 
  NECネクサソリューションズが請求業務デジタル化のウェビナーを開催、働き方改革とコスト削減を解説
• 
  株式会社イマジナがインナーブランディングセミナーを開催、Z世代の育成課題解決へ
• 
  アチーブメント株式会社が戦略的経営計画セミナーを開催、3か年計画の策定を支援
• 
  VACANCE VIETNAMが飲食店向けウェビナー開催、ベトナム市場と事業計画の基本を解説