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.9k
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
フロントエンド開発のためのブラウザ組み込みAI入門
masashi
6
3.2k
Protocol Buffers and Connect for Frontend Development
masashi
0
110
You may not need XXX in Node.js
masashi
5
1.5k
OSSとコミュニティを支える
masashi
1
1.4k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.5k
フロントエンド開発のためのセキュリティ入門について
masashi
1
540
フロントエンド開発のためのセキュリティ入門
masashi
50
18k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
13k
Other Decks in Programming
See All in Programming
Software Architecture
hschwentner
6
2.3k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
510
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
870
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
300
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
310
Developer Joy - The New Paradigm
hollycummins
1
280
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
ALL CODE BASE ARE BELONG TO STUDY
uzulla
25
6.5k
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
990
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Mobile First: as difficult as doing things right
swwweet
225
10k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Producing Creativity
orderedlist
PRO
347
40k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
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!