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
Protocol Buffers and Connect for Frontend Development
masashi
0
84
You may not need XXX in Node.js
masashi
5
1.4k
OSSとコミュニティを支える
masashi
1
1.2k
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3.3k
フロントエンド開発のためのセキュリティ入門について
masashi
1
510
フロントエンド開発のためのセキュリティ入門
masashi
49
18k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
1.1k
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
13k
Node.js + Web Compatibility
masashi
2
650
Other Decks in Programming
See All in Programming
AWS CDKの推しポイント 〜CloudFormationと比較してみた〜
akihisaikeda
3
300
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
150
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
970
関数型まつりレポート for JuliaTokai #22
antimon2
0
140
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
530
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
360
XP, Testing and ninja testing
m_seki
2
140
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
1
360
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
830
Webからモバイルへ Vue.js × Capacitor 活用事例
naokihaba
0
750
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
240
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
120
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
BBQ
matthewcrist
89
9.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Music & Morning Musume
bryan
46
6.6k
The Invisible Side of Design
smashingmag
299
51k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Speed Design
sergeychernyshev
31
1k
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!