tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【amp】amp研究日記① 〜AMPとは〜

今日から仕事での開発の話もブログにしていこうと思います。

今回三つのAMP対応を任せてもらえることになりました!

かくいう私は一回もamp対応したことがなく、、
せっかくなので、ログを残していこうと思います。

AMP日記二日目
okinawanpizza.hatenablog.com

全てのamp対応を終えるまで日記をつけていき、
最後にまとめの記事を書けたらなと思います。

今回、二つのwebサービスのamp化を行います。
使用言語はそれぞれ以下の通りです。
wordpress
ruby + react.js

最初はwordpressのamp開発から始めていくことに。

AMPとは

Googleが推進しているモバイルページを高速に表示させるための手法によって作成されているコンテンツ」

・Accelerated Mobile Page
・2015年10月にスタート
GoogleTwitterの共同開発

なぜAMPページが高速に表示されるのか

ざっくり言うと以下の二点が関係します。

・読み込みの負荷を減らすルールを策定していること    
・本来のページがあるウェブサイトへのアクセスが発生しない

と言うのもAMPページは大きく三つの要素から構成されています。
AMPページの仕様はかなりガチガチで「読み込みに時間がかかることは最初からさせない」
という方針で策定されています。つまり軽量なコードにするために厳しいルールがあります。

AMP HTML(<html amp lang="ja">にはじまる少し特殊なHTML5)  
AMP JS(できるだけ非同期処理に限定したJavascript)   
AMP Cache(キャッシュされたAMP HTML ページが配信される)  
AMP cache

・AMPページを見つけ、googleが提供するCDN(コンテンツ配信システム)という場所に保存してくれる

おしまい!!

今日はampの基本的なおさらいをしていきました。
今日までに色々情報収集しているのですが、
やはり5年前に人気があっただけあって出回ってる記事が少なかったり
情報が古かったりする印象をうけました。

ampのドキュメントにあったように stack overflow などで
質問することも取り入れて新しい知識を身につけつつ進めていこうと思います。

明日

・ampタグの紹介
・wordpreesでのampコンテンツ表示
・記事内のHTMLタグをfunctions.phpで置換していく
・テスト方法

新知識

・サーバーキャッシュとブラウザキャッシュの違いについて (ちなみにAMP cache はサーバーキャッシュ)
https://digitalidentity.co.jp/blog/seo/seo-tech/cash-speed-up.html

参考

顧客のサイトをAMP化するための8つのヒント
https://webmaster-ja.googleblog.com/2016/09/8-tips-to-amplify-your-clients.html

ドキュメント 「AMP HTML ページの作成」
https://amp.dev/ja/documentation/guides-and-tutorials/start/create/basic_markup/?referrer=ampproject.org

AMPページのキャッシュの仕組み
https://amp.dev/ja/documentation/guides-and-tutorials/learn/amp-caches-and-cors/how_amp_pages_are_cached/?referrer=ampproject.org

MAMPを使ってローカルを立ち上げる
okinawanpizza.hatenablog.com