Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AMP
Search
Kaneko Takeshi
February 10, 2017
Programming
0
80
AMP
Kaneko Takeshi
February 10, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
10
Eye Tracking on the Browser
tkckaneko
0
71
IEEE754を完全に理解した
tkckaneko
1
50
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
69
多分これが一番早いと思います
tkckaneko
0
23
暗黒面の話
tkckaneko
0
14
CSR / SSR / SSG / JAMstack
tkckaneko
0
50
BOLT
tkckaneko
0
10
CSS Logical Properties and Values
tkckaneko
0
24
Other Decks in Programming
See All in Programming
What We Can Learn From OSS
inouehi
0
420
Elm Form Validation
bkuhlmann
0
510
Front-end application development, Symfony-style(s)
dunglas
2
2k
Snowflakeで眠ったデータを起こそう!
estie
0
110
AWS Application Composerで始める、 サーバーレスなデータ基盤構築 / 20240406-jawsug-hokuriku-shinkansen
kasacchiful
1
260
エンターテイメント業界で利用されるAWS
demuyan
0
210
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
260
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
190
Milestoner
bkuhlmann
1
410
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
120
チーム力を高めるスクラム実践法:カンバン公開と課題攻略について - ニフティのスクラムトーク Vol. 2 - NIFTY Tech Talk #18
niftycorp
PRO
1
110
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
98
5.7k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
4 Signs Your Business is Dying
shpigford
175
21k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Building Adaptive Systems
keathley
30
1.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
39k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Making Projects Easy
brettharned
108
5.5k
Raft: Consensus for Rubyists
vanstee
132
6.3k
How to Ace a Technical Interview
jacobian
272
22k
Transcript
AMP Accelerated Mobile Pages
AMPってなに? Accelerated Mobile Pages コンテンツをほぼ瞬時に読み込めるようにしたHTML ページ Googleが主導のオープンソースプロジェクト
AMPはどうして早い? いくつか理由がある
1. 遅延読み込み リソースを「ユーザが見ようとしてるとき」または 「アイドル状態」に読み込みをする リソースのダウンロードの優先順位をユーザが必要として いる順に (画面外の画像の優先順位を下げてるとか)
2. JavaScriptは非同期 普通のJavaScriptは読み込めない AMP JSってライブラリを使う事はできる
3. スタイルはインラインのみ HTMLと同時に読み込ませて、HTTPリクエスト を減らす ちなみに最大サイズがある(50KB?) 注意!)<style amp-custom>は複数使用は不可
4. 外部リソースはサイズ指定 画像、インラインフレームなどにはサイズ指 定が必須 ダウンロードしなくても最初にレイアウトをレンダリングで きるから再計算が必要なくなる layout='responsive'を指定すれば、幅100%の画像も配置 できる
5. 解析ツールはAMPで実施 AMP analyticsというものがある AMP analyticsを使うと複数の解析ツールを読み込みは1 つになるからリクエストも減るし、余計なことをしない
6. すべての文書はCDN Google AMP Cacheから配信される プロキシベースのコンテンツ デリバリ ネットワークだから 早い ↑↑↑
! 何のことだかわからない !
#広告にも対応 表示に影響が出ないようにされたAMP対応 の広告のみ インラインフレームで表示できる コンテンツより表示の優先順位は低いなど、表示への影 響も少ない仕様
どのページをAMPにするか? 静的なウェブコンテンツのみ有効 * ニュース * レシピ * 製品ページ * 動画
* ブログ など
AMPの導入方法 1. 通常ページを用意 2. AMPページを用意 3. AMPを検証 4. クローラーにAMPの存在を知らせる
実 例
1. 通常ページを用意 http://dev2.xtone.co.jp/kaneko/a mp/simple.html
2. AMPページを用意 http://dev2.xtone.co.jp/kaneko/a mp/simple.amp.html
見た目同じ
3. AMPを検証 Chromeで#development=1を付けて開くと consoleで確認できる AMP validation successful.
4. AMPの存在を知らせる 通常ページ meta="amphtml" href="(AMPページURL)" AMPページ meta="canonical" href="(通常ページURL)"
表示速度の測定 通常ページ ・・・ 1.327s AMPページ・・・ 2.039s
表示速度の測定 通常ページ ・・・ 1.327s AMPページ・・・ 2.039s ???
CDN HTTPS https://cdn.ampproject.org/c/s/www.example.com/blog /amp/hoge.html HTTP https://cdn.ampproject.org/c/www.example.com/blog/a mp/hoge.html
表示速度の測定 通常ページ ・・・ 1.327s AMPページ・・・ 0.740s
できること
動画 ・Youtube ・Hulu ・Dailymotion ・Vimeo など
シェアボタン ・Facebook ・Twitter ・Vine ・Reddit など
カルーセル ・ライトボックス ・アコーディオン など
他にもたくさん ※ 多すぎて用意できませんでした
アクセスが増える? 増えるかもしれない・・・ ニュース記事であればGoogle検索でカルーセル表示され たり、表示が早いのでユーザ満足度があがったりとかが 期待される (SEOには直接影響しないとGoogleは言ってます) 今すぐに対応しなくても可
おまけ モバイル ファースト インデックスに向けて https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html 将来的に Google のアルゴリズムはモバイル版のコンテンツを主に使用す るようになります。つまり、ページのランキングを決定したり、構造化データ を理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテン
ツが使用されるようになります。