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
1000万以上のWebページを AMPにした話 / making_over_10million...
Search
Masashi Hirano
November 25, 2018
Programming
7
3.8k
1000万以上のWebページを AMPにした話 / making_over_10million_amp_pages
HTML5 Conference 2018のLT資料です。
https://events.html5j.org/conference/2018/11/
Masashi Hirano
November 25, 2018
Tweet
Share
More Decks by Masashi Hirano
See All by Masashi Hirano
You may not need XXX in Node.js
masashi
5
1.2k
OSSとコミュニティを支える
masashi
1
1.1k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.2k
フロントエンド開発のためのセキュリティ入門について
masashi
1
470
フロントエンド開発のためのセキュリティ入門
masashi
49
17k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
610
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.9k
Other Decks in Programming
See All in Programming
Azure AI Foundryのご紹介
qt_luigi
1
240
Simple組み合わせ村から大都会Railsにやってきた俺は / Coming to Rails from the Simple
moznion
3
3.3k
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
800
カンファレンス動画鑑賞会のススメ / Osaka.swift #1
hironytic
0
190
QA環境で誰でも自由自在に現在時刻を操って検証できるようにした話
kalibora
1
150
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
130
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
140
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
650
ASP.NET Core の OpenAPIサポート
h455h1
0
140
最近のVS Codeで気になるニュース 2025/01
74th
1
220
「とりあえず動く」コードはよい、「読みやすい」コードはもっとよい / Code that 'just works' is good, but code that is 'readable' is even better.
mkmk884
6
1.5k
ゼロからの、レトロゲームエンジンの作り方
tokujiros
3
1.1k
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
The World Runs on Bad Software
bkeepers
PRO
66
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
BBQ
matthewcrist
85
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bash Introduction
62gerente
610
210k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Transcript
1000ສҎ্ͷWebϖʔδΛ AMPʹͨ͠ HTML5 Conference 2018 ฏ ণ࢜(@shisama)
ฏ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama
Node.js Core Collaborator ؔNodeֶԂOrganizer
͍ͬͯ·͔͢ɾɾɾʁ
None
ࠓͷय़ʹAMPରԠ͠·ͨ͠
Why AMP? • վળ • SEOΛԼ͛ͳ͍ͨΊ • Ϣʔβʔͷ૿Ճ
Why AMP? • վળ ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্ ɹ53%ͷϢʔβ͕அ೦ͯ͠͠·͏ ɾىಈ͕࣌ؒ1ඵ͘ͳΔ ɹίϯόʔδϣϯ͕ 7% ‑Down
վળ DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s
Load: 3.52 s ௨ৗϞόΠϧϖʔδ AMP
SEO
AMPରԠޙ̏ϲ݄ͷϢʔβʔΛൺֱ ΦϨϯδ͕ࡢɺ ੨͕ࠓ Ϣʔβʔ૿Ճ
1088ສޠऩ!
Ͳ͏ͬͯେྔͷϖʔδΛAMPʹ͔ͨ͠ • ஈ֊తʹAMPʹ͍ͯ͘͠ ɾࠂϢʔβʔͷӨڹ͕৺ • ༗ޮͳAMPϖʔδ͔ݕূ͢Δ • ศརͳAMPίϯϙʔωϯτΛ͏
ஈ֊తʹAMPʹ͍ͯ͘͠
ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ
ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ <link>͕ଘࡏ͠ͳ͚Ε ݕग़͞Εͳ͍
// ඇAMPϖʔδଆ if (word.startWith("n")) { <link rel=“amphtml" href=“https://ejje.weblio.jp/…“/> } //
AMPϖʔδଆ if (word.startWith("n")) { <link rel=“canonical" href=“https://ejje.weblio.jp/…“/> } n͔Β࢝·Δ୯ޠͷΈ AMPͱͯ͠ݕग़ͤ͞Δ ஈ֊తʹAMPʹ͍ͯ͘͠
ஈ֊తʹAMPʹ͍ͯ͘͠ Google AnalyticsͰAMPϖʔδͷΞΫηεΛ ܭଌ͠ͳ͕Βɺগͣͭ͠ରԠ୯ޠΛ૿ͨ͠
༗ޮͳAMPϖʔδ͔ݕূ͢Δ
༗ޮͳAMP͔ݕূ͢Δ #development=1 ༗ޮ͔Τϥʔ͔݁ՌΛදࣔ
Τϥʔͷ༰͕දࣔ͞ΕΔ ༗ޮͳAMP͔ݕূ͢Δ
༗ޮͳAMP͔ݕূ͢Δ
༗ޮͳAMP͔ݕূ͢Δ
Promise.all([ amphtmlValidator.getInstance(), getHtml(), ]).then(([validator,html]) => { const result = validator.validateString(html);
for (const error of result.errors) { throw new Error(error.message); } }); CIͰ࣮ߦͯ͠ νΣοΫ͢Δ͜ͱ͕Մೳ ༗ޮͳAMP͔ݕূ͢Δ
ϦϦʔεޙSearch ConsoleͰ֬ೝՄೳ ༗ޮͳAMP͔ݕূ͢Δ
ศརͳAMPίϯϙʔωϯτΛ͏
ศརͳAMPίϯϙʔωϯτΛ͏ https://www.ampproject.org/docs/reference/components छྨͷ".1ίϯϙʔ ωϯτ͕ఏڙ͞Ε͍ͯΔ
ྫ͑͜ΜͳίϯϙʔωϯτΛ͍ͬͯ·͢ BNQBDDFTT ϩάΠϯػೳ BNQJNH ը૾ͷԆಡΈࠐΈΛߦ͏ɻJNHͷΘΓʹ༻ BNQTJEFCBS αΠυόʔϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBDDPSEJPO ΞίʔσΟΦϯϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBVEJP
ԻΛ࠶ੜͰ͖Δɻ୯ޠͷൃԻԻʹ༻ ศརͳAMPίϯϙʔωϯτΛ͏
amp-sidebar amp-accordion amp-img ը૾ͷԆಡΈࠐΈ αΠυόʔϝχϡʔ ΞίʔσΟΦϯϝχϡʔ ศརͳAMPίϯϙʔωϯτΛ͏
• ඇAMPϖʔδʹAMPίϯϙʔωϯτΛར༻ • AMPϖʔδͱͷUI౷Ұ • վળ • ίʔυΛڞ௨Խ ศརͳAMPίϯϙʔωϯτΛ͏
௨ৗϞόΠϧϖʔδ AMP ྫαΠυόʔϝχϡʔͷ6*Λ౷Ұ ྫαΠυόʔϝχϡʔͷ6*Λ౷Ұ ศརͳAMPίϯϙʔωϯτΛ͏
• վળ amp-imgΛͬͯը૾ͷԆಡΈࠐΈ • ίʔυΛڞ௨Խ amp-accessΛͬͯϩάΠϯͷ࣮Λڞ௨Խ • etc… ศརͳAMPίϯϙʔωϯτΛ͏
·ͱΊ • AMPվળʹ༗ޮ • AMPͷͨΊͷपลπʔϧͳͲἧ͍ͬͯΔ • ศརͳίϯϙʔωϯτ͕ଟఏڙ͞Ε͍ͯΔ • ඇAMPϖʔδͰར༻Մೳ
Thanks!