AMP

AMP (Accelerated Mobile Pages) is an open-source project led by Google to speed up the loading of web pages on mobile devices.

AMP

　AMP(Accelerated Mobile Pages) とは、AMP Open Source Projectにより開発が行われているオープンソースの HTMLフレームワークです。AMPはモバイルでのウェブサイトの閲覧を高速化するために最適化されている。

　AMPを使用することで、特にモバイルデバイス上でのページ表示が劇的に速くなり、ユーザーの離脱率を減少させ、SEO（検索エンジン最適化）にも好影響を与えることが期待されます。

　この技術は主にニュースサイトやブログ、eコマースサイトなどで利用されており、ユーザーに素早くコンテンツを提供するための重要なツールとなっています。

必要最小限の AMP HTML

HTML source


<!DOCTYPE html>
<html amp lang="ja">
<head>
	<meta charset="utf-8">
	<link rel="canonical" href="index.html">
	<meta name="viewport" content="width=device-width,minimum-scale=1">
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
	
</body>
</html>

　このコードを「The AMP Validator

」で検証してみると問題ありませんでした。

AMPにおけるCSS

　AMPにおけるCSSは、通常のHTMLページとは異なり、別ファイルにすることができません。すべてのCSSはインラインで記述する必要があります。これは、ページの読み込み速度を最大限に高めるためのAMPの設計上の制約です。具体的には、以下のような制約があります。

　これらの制約は、CSSの処理を迅速化し、ページのレンダリングを最適化するために設けられています。

Web Programming

必要最小限の AMP HTML

AMPにおけるCSS