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

Transcript

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

2. ฏ໺ ণ࢜ / Masashi Hirano ɹɹɹɹ Kyoto office @shisama_ @shisama

   Node.js Core Collaborator ؔ੢NodeֶԂOrganizer

3. ஌͍ͬͯ·͔͢ɾɾɾʁ

4. None

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!