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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Kaneko Takeshi
February 10, 2017
Programming
0
88
AMP
Kaneko Takeshi
February 10, 2017
Tweet
Share
More Decks by Kaneko Takeshi
See All by Kaneko Takeshi
オープンソースライセンスについて勉強する定期
tkckaneko
0
31
Eye Tracking on the Browser
tkckaneko
0
87
IEEE754を完全に理解した
tkckaneko
1
76
CSSのトレンドをみんなで見よう -2021年-
tkckaneko
0
93
多分これが一番早いと思います
tkckaneko
0
27
暗黒面の話
tkckaneko
0
24
CSR / SSR / SSG / JAMstack
tkckaneko
0
73
BOLT
tkckaneko
0
31
CSS Logical Properties and Values
tkckaneko
0
36
Other Decks in Programming
See All in Programming
HTTPプロトコル正しく理解していますか? 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ニャ〜
hekuchan
2
680
Patterns of Patterns
denyspoltorak
0
1.4k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
370
Apache Iceberg V3 and migration to V3
tomtanaka
0
150
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2k
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
590
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6k
Vibe codingでおすすめの言語と開発手法
uyuki234
0
220
Oxlint JS plugins
kazupon
1
730
CSC307 Lecture 08
javiergs
PRO
0
670
AI巻き込み型コードレビューのススメ
nealle
0
120
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
20
6.8k
Featured
See All Featured
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
ryanjones
0
55
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
130k
A Modern Web Designer's Workflow
chriscoyier
698
190k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
220
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
300
The Mindset for Success: Future Career Progression
greggifford
PRO
0
230
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
910
16th Malabo Montpellier Forum Presentation
akademiya2063
PRO
0
47
First, design no harm
axbom
PRO
2
1.1k
Design in an AI World
tapps
0
140
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 のアルゴリズムはモバイル版のコンテンツを主に使用す るようになります。つまり、ページのランキングを決定したり、構造化データ を理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテン
ツが使用されるようになります。