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

HTML5 Conference 2018のLT資料です。
https://events.html5j.org/conference/2018/11/

Transcript

1. 1000ສҎ্ͷWebϖʔδΛ AMPʹͨ͠࿩ HTML5 Conference 2018 ฏ໺ ণ࢜(@shisama)
2. ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama Node.js Core Collaborator ؔ੢NodeֶԂOrganizer
3. ஌͍ͬͯ·͔͢ɾɾɾʁ
5. ࠓ೥ͷय़ʹAMPରԠ͠·ͨ͠
6. Why AMP? • ଎౓վળ • SEOΛԼ͛ͳ͍ͨΊ • Ϣʔβʔ਺ͷ૿Ճ
7. Why AMP? • ଎౓վળ
 ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্
 ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏
 ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ
 ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down
8. ଎౓վળ DOMContentLoaded: 633 ms Load: 1.45 s DOMContentLoaded: 1.15 s Load: 3.52 s ௨ৗϞόΠϧϖʔδ AMP
9. SEO
10. AMPରԠޙ̏ϲ݄ͷϢʔβʔ਺Λൺֱ ΦϨϯδ͕ࡢ೥ɺ ੨͕ࠓ೥ Ϣʔβʔ਺૿Ճ
11. 1088ສޠऩ࿥!
12. Ͳ͏΍ͬͯେྔͷϖʔδΛAMPʹ͔ͨ͠ • ஈ֊తʹAMPʹ͍ͯ͘͠
 ɾ޿ࠂ΍Ϣʔβʔ਺΁ͷӨڹ͕৺഑ • ༗ޮͳAMPϖʔδ͔ݕূ͢Δ • ศརͳAMPίϯϙʔωϯτΛ࢖͏
13. ஈ֊తʹAMPʹ͍ͯ͘͠
14. ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸
 <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ
15. ஈ֊తʹAMPʹ͍ͯ͘͠ Google͕AMPϖʔδΛݕग़͢Δʹ͸
 <link>ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ ඇAMPϖʔδ AMPϖʔδ <link>͕ଘࡏ͠ͳ͚Ε͹ ݕग़͞Εͳ͍
16. // ඇ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ʹ͍ͯ͘͠
17. ஈ֊తʹAMPʹ͍ͯ͘͠ Google AnalyticsͰAMPϖʔδ΁ͷΞΫηε਺Λ ܭଌ͠ͳ͕Βɺগͣͭ͠ରԠ୯ޠΛ૿΍ͨ͠
18. ༗ޮͳAMPϖʔδ͔ݕূ͢Δ
19. ༗ޮͳAMP͔ݕূ͢Δ #development=1 ༗ޮ͔Τϥʔ͔݁ՌΛදࣔ
20. Τϥʔͷ಺༰͕දࣔ͞ΕΔ ༗ޮͳAMP͔ݕূ͢Δ
21. ༗ޮͳAMP͔ݕূ͢Δ
22. ༗ޮͳAMP͔ݕূ͢Δ
23. 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͔ݕূ͢Δ
24. ϦϦʔεޙ͸Search ConsoleͰ֬ೝՄೳ ༗ޮͳAMP͔ݕূ͢Δ
25. ศརͳAMPίϯϙʔωϯτΛ࢖͏
26. ศརͳAMPίϯϙʔωϯτΛ࢖͏ https://www.ampproject.org/docs/reference/components ໿छྨͷ".1ίϯϙʔ ωϯτ͕ఏڙ͞Ε͍ͯΔ
27. ྫ͑͹͜ΜͳίϯϙʔωϯτΛ࢖͍ͬͯ·͢ BNQBDDFTT ϩάΠϯػೳ BNQJNH ը૾ͷ஗ԆಡΈࠐΈΛߦ͏ɻJNHͷ୅ΘΓʹ࢖༻ BNQTJEFCBS αΠυόʔϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBDDPSEJPO ΞίʔσΟΦϯϝχϡʔΛ؆୯ʹ࡞ΕΔ BNQBVEJP Ի੠Λ࠶ੜͰ͖Δɻ୯ޠͷൃԻԻ੠ʹ࢖༻ ศརͳAMPίϯϙʔωϯτΛ࢖͏
28. amp-sidebar amp-accordion amp-img ը૾ͷ஗ԆಡΈࠐΈ αΠυόʔϝχϡʔ ΞίʔσΟΦϯϝχϡʔ ศརͳAMPίϯϙʔωϯτΛ࢖͏
29. • ඇAMPϖʔδʹ΋AMPίϯϙʔωϯτΛར༻ • AMPϖʔδͱͷUI౷Ұ • ଎౓վળ • ίʔυΛڞ௨Խ ศརͳAMPίϯϙʔωϯτΛ࢖͏
30. ௨ৗϞόΠϧϖʔδ AMP ྫ
    αΠυόʔϝχϡʔͷ6*Λ౷Ұ ྫ
    αΠυόʔϝχϡʔͷ6*Λ౷Ұ ศརͳAMPίϯϙʔωϯτΛ࢖͏
31. • ଎౓վળ
 amp-imgΛ࢖ͬͯը૾ͷ஗ԆಡΈࠐΈ • ίʔυΛڞ௨Խ
 amp-accessΛ࢖ͬͯϩάΠϯͷ࣮૷Λڞ௨Խ • etc… ศརͳAMPίϯϙʔωϯτΛ࢖͏
32. ·ͱΊ • AMP͸଎౓վળʹ༗ޮ • AMPͷͨΊͷपลπʔϧͳͲ΋ἧ͍ͬͯΔ • ศརͳίϯϙʔωϯτ͕ଟ਺ఏڙ͞Ε͍ͯΔ • ඇAMPϖʔδͰ΋ར༻Մೳ
33. Thanks!