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_amp_pages
Search
Masashi Hirano
November 25, 2018
Programming
7
3.6k
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
OSSとコミュニティを支える
masashi
1
750
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
2.7k
フロントエンド開発のためのセキュリティ入門について
masashi
1
400
フロントエンド開発のためのセキュリティ入門
masashi
45
16k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
930
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
520
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.8k
実践 OSSことはじめ / First Step for OSS Contribution
masashi
4
9.5k
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
340
What We Can Learn From OSS
inouehi
0
400
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
220
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
470
入門 AWS Amplify Gen2 / Introduction to AWS Amplify Gen2
genkiogasawara
1
310
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
10
5.6k
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
330
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
460
ゆるい個人開発のススメ
kuroppe1819
10
940
雑に思考を整理する技術と効能
konifar
55
25k
ONE WEDGE_company_guide
1wedge_one
0
380
プールにゆこう
irof
2
120
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
Web development in the modern age
philhawksworth
202
10k
Code Review Best Practice
trishagee
54
15k
What the flash - Photography Introduction
edds
64
11k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Ruby is Unlike a Banana
tanoku
96
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
A better future with KSS
kneath
231
16k
How to Ace a Technical Interview
jacobian
272
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
We Have a Design System, Now What?
morganepeng
42
6.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
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!