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
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
88
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
Implementation Patterns
denyspoltorak
0
280
コマンドとリード間の連携に対する脅威分析フレームワーク
pandayumi
1
450
CSC307 Lecture 03
javiergs
PRO
1
490
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
450
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
tosuri13
4
270
OCaml 5でモダンな並列プログラミングを Enjoyしよう!
haochenx
0
140
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
190
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
400
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
180
AgentCoreとHuman in the Loop
har1101
5
230
Patterns of Patterns
denyspoltorak
0
1.4k
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
Featured
See All Featured
How To Speak Unicorn (iThemes Webinar)
marktimemedia
1
380
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
mfonobong
2
280
Agile that works and the tools we love
rasmusluckow
331
21k
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Faster Mobile Websites
deanohume
310
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.9k
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
170
KATA
mclloyd
PRO
34
15k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
750
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 のアルゴリズムはモバイル版のコンテンツを主に使用す るようになります。つまり、ページのランキングを決定したり、構造化データ を理解したり、検索結果にスニペットを表示する際も、モバイル版のコンテン
ツが使用されるようになります。