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.7k
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.1k
OSSとコミュニティを支える
masashi
1
920
英語ができなかった自分達が、グローバルチーム立ち上げに挑戦!?
masashi
1
3k
フロントエンド開発のためのセキュリティ入門について
masashi
1
440
フロントエンド開発のためのセキュリティ入門
masashi
49
17k
Node.jsの2022年と未来 / Node.js in 2022 and Future
masashi
1
990
Corepack ~Node.jsに追加されたパッケージマネージャーマネージャー~ / #tng37
masashi
3
12k
Node.js + Web Compatibility
masashi
2
570
サイボウズが行うフロントエンドの品質保証 / Frontend Quality Assurance at Cybozu
masashi
10
2.9k
Other Decks in Programming
See All in Programming
Rustではじめる負荷試験
skanehira
5
1.2k
Appleの新しいプライバシー要件対応: ノーコードアプリ プラットフォームの実践事例
nao_randd
1
510
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
500
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
130
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
140
Desafios e Lições Aprendidas na Migração de Monólitos para Microsserviços em Java
jessilyneh
2
140
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
7
5.1k
Scala アプリケーションのビルドを改善してデプロイ時間を 1/4 にした話 | How I improved the build of my Scala application and reduced deployment time by 4x
nomadblacky
1
130
フロントエンドカンファレンス北海道2024 『小規模サイトでも使えるVite 〜HTMLコーディングをよりスマートに〜』長谷川広武(ハム)
h2ham
1
2.5k
XStateでReactに秩序を与えたい
gizm000
0
520
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
380
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
230
Featured
See All Featured
Designing for humans not robots
tammielis
248
25k
How to Think Like a Performance Engineer
csswizardry
16
930
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Docker and Python
trallard
39
3k
A Philosophy of Restraint
colly
202
16k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
22
1.7k
GitHub's CSS Performance
jonrohan
1029
450k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
166
48k
Faster Mobile Websites
deanohume
304
30k
Designing the Hi-DPI Web
ddemaree
278
34k
Statistics for Hackers
jakevdp
793
220k
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!