テレットブログ

【AMP】 サイトをAMP化するぞ。しかしそもそもAMP化とは。

2019年07月04日
image
 サイトをAMP化してみようとサイトを巡回
やっぱAMP化でしょと実装するまにまとめてみたい。

AMP 「AMP(Accelerated Mobile Pages)」という、Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツです。
 

高速に表示されるしくみ

  • AMP HTML
  • AMP JS
  • AMP Cache
と3つから構成されているという事。


AMP HTML

読み込みが遅くなることは駄目という仕様
 

AMP JS

非同期のJavaScriptのみ許容し カスタムJavascriptは使用できない。
 

AMP Cashe

AMPページを配信する為のCDNによってキャシュtされる。

 

AMP 記載の基本

AMP WEB コンポーネント フレームワーク より

 

See the Pen KOMQRp by terreto (@terreto) on CodePen.

 
<head>コード内の読み込みものの決まり
<amp-geo layout="nodisplay"> の決まり

あといろいろと記載方法の決まりがあるということ
 
 

AMPテストツール

あならのAMPページは有効ですか?
AMP テスト
Google提供のAMPテストツール

 

まとめ

AMP公式ドキュメント

AMP DEV
 

Accelerated Mobile Pages Project – AMP(日本語版)

AMP Project Github

Accelerated Mobile Pages Project – AMP(英語版)




新着記事

image

shopipyのページネーションについて

2023年11月15日
Shopify APIのレスポンスヘッダーには、ページネーションに関す
Read more →
image

Git-ftpを使ったファイルアップロードの方法

2023年04月20日
タイトル: Git-ftpを使ったファイルアップロードの方法 概要
Read more →
image

ChatGPTとjQueryの組み合わせで新しい時代のウェブ開発をリード

2023年04月19日
近年、AI技術がウェブ開発の分野においても急速に浸透しています。特に、ChatG
Read more →
image

ChatGPTで日本語をマスター!次世代AI技術を活用したコミュニケーションの強化

2023年04月18日
ChatGPTは、OpenAIが開発した最先端のAI技術であり、自然言語処理(N
Read more →
image

mysql Joinしたテーブルでsum関数、そしてもう片方のテーブルは最大値で参照する

2023年02月14日
特定のカラムの最大値の行のみでJOINする Aテーブルは金額とコードID Bテ
Read more →
Choose Colour