1000万以上のWebページを AMPにした話 / making_over_10million_amp_pages

by Masashi Hirano

Slide 1

Slide 1 text

1000ສҎ্ͷWebϖʔδΛ AMPʹͨ͠࿩ HTML5 Conference 2018 ฏ໺ ণ࢜(@shisama)

Slide 2

Slide 2 text

ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto ofﬁce @shisama_ @shisama Node.js Core Collaborator ؔ੢NodeֶԂOrganizer

Slide 3

Slide 3 text

஌͍ͬͯ·͔͢ɾɾɾʁ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

ࠓ೥ͷय़ʹAMPରԠ͠·ͨ͠

Slide 6

Slide 6 text

Why AMP? • ଎౓վળ • SEOΛԼ͛ͳ͍ͨΊ • Ϣʔβʔ਺ͷ૿Ճ

Slide 7

Slide 7 text

Why AMP? • ଎౓վળ  ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্  ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏  ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ  ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down

Slide 8

Slide 8 text

଎౓վળ DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s Load: 3.52 s ௨ৗϞόΠϧϖʔδ AMP

Slide 9

Slide 9 text

SEO

Slide 10

Slide 10 text

AMPରԠޙ̏ϲ݄ͷϢʔβʔ਺Λൺֱ ΦϨϯδ͕ࡢ೥ɺ ੨͕ࠓ೥ Ϣʔβʔ਺૿Ճ

Slide 11

Slide 11 text

1088ສޠऩ࿥!

Slide 12

Slide 12 text

Ͳ͏΍ͬͯେྔͷϖʔδΛAMPʹ͔ͨ͠ • ஈ֊తʹAMPʹ͍ͯ͘͠  ɾ޿ࠂ΍Ϣʔβʔ਺΁ͷӨڹ͕৺഑ • ༗ޮͳAMPϖʔδ͔ݕূ͢Δ • ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 13

Slide 13 text

ஈ֊తʹAMPʹ͍ͯ͘͠

Slide 14

Slide 14 text

ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸  ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ

Slide 15

Slide 15 text

ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸  ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ ͕ଘࡏ͠ͳ͚Ε͹ ݕग़͞Εͳ͍

Slide 16

Slide 16 text

// ඇAMPϖʔδଆ if (word.startWith("n")) { } // AMPϖʔδଆ if (word.startWith("n")) { } n͔Β࢝·Δ୯ޠͷΈ AMPͱͯ͠ݕग़ͤ͞Δ ஈ֊తʹAMPʹ͍ͯ͘͠

Slide 17

Slide 17 text

ஈ֊తʹAMPʹ͍ͯ͘͠ Google AnalyticsͰAMPϖʔδ΁ͷΞΫηε਺Λ ܭଌ͠ͳ͕Βɺগͣͭ͠ରԠ୯ޠΛ૿΍ͨ͠

Slide 18

Slide 18 text

༗ޮͳAMPϖʔδ͔ݕূ͢Δ

Slide 19

Slide 19 text

༗ޮͳAMP͔ݕূ͢Δ #development=1 ༗ޮ͔Τϥʔ͔݁ՌΛදࣔ

Slide 20

Slide 20 text

Τϥʔͷ಺༰͕දࣔ͞ΕΔ ༗ޮͳAMP͔ݕূ͢Δ

Slide 21

Slide 21 text

༗ޮͳAMP͔ݕূ͢Δ

Slide 22

Slide 22 text

༗ޮͳAMP͔ݕূ͢Δ

Slide 23

Slide 23 text

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͔ݕূ͢Δ

Slide 24

Slide 24 text

ϦϦʔεޙ͸Search ConsoleͰ֬ೝՄೳ ༗ޮͳAMP͔ݕূ͢Δ

Slide 25

Slide 25 text

ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 26

Slide 26 text

ศརͳAMPίϯϙʔωϯτΛ࢖͏ https://www.ampproject.org/docs/reference/components ໿छྨͷ".1ίϯϙʔ ωϯτ͕ఏڙ͞Ε͍ͯΔ

Slide 27

Slide 27 text

ྫ͑͹͜ΜͳίϯϙʔωϯτΛ࢖͍ͬͯ·͢ BNQBDDFTT ϩάΠϯػೳ BNQJNH ը૾ͷ஗ԆಡΈࠐΈΛߦ͏ɻJNHͷ୅ΘΓʹ࢖༻ BNQTJEFCBS αΠυόʔϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBDDPSEJPO ΞίʔσΟΦϯϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBVEJP Ի੠Λ࠶ੜͰ͖Δɻ୯ޠͷൃԻԻ੠ʹ࢖༻ ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 28

Slide 28 text

amp-sidebar amp-accordion amp-img ը૾ͷ஗ԆಡΈࠐΈ αΠυόʔϝχϡʔ ΞίʔσΟΦϯϝχϡʔ ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 29

Slide 29 text

• ඇAMPϖʔδʹ΋AMPίϯϙʔωϯτΛར༻ • AMPϖʔδͱͷUI౷Ұ • ଎౓վળ • ίʔυΛڞ௨Խ ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 30

Slide 30 text

௨ৗϞόΠϧϖʔδ AMP ྫαΠυόʔϝχϡʔͷ6*Λ౷Ұ ྫαΠυόʔϝχϡʔͷ6*Λ౷Ұ ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 31

Slide 31 text

• ଎౓վળ  amp-imgΛ࢖ͬͯը૾ͷ஗ԆಡΈࠐΈ • ίʔυΛڞ௨Խ  amp-accessΛ࢖ͬͯϩάΠϯͷ࣮૷Λڞ௨Խ • etc… ศརͳAMPίϯϙʔωϯτΛ࢖͏

Slide 32

Slide 32 text

·ͱΊ • AMP͸଎౓վળʹ༗ޮ • AMPͷͨΊͷपลπʔϧͳͲ΋ἧ͍ͬͯΔ • ศརͳίϯϙʔωϯτ͕ଟ਺ఏڙ͞Ε͍ͯΔ • ඇAMPϖʔδͰ΋ར༻Մೳ

Slide 33

Slide 33 text

Thanks!