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)
   

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. ࠓ೥ͷय़ʹAMPରԠ͠·ͨ͠
   

   View Slide

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

   View Slide

7. Why AMP?
   • ଎౓վળ

   ɾαΠτͷىಈ͕࣌ؒ3ඵҎ্

   ɹ὎53%ͷϢʔβ͕அ೦ͯ͠͠·͏

   ɾىಈ͕࣌ؒ1ඵ஗͘ͳΔ

   ɹ὎ίϯόʔδϣϯ཰͕ 7% ‑Down
   

   View Slide

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

   View Slide

9. SEO
   

   View Slide

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

    View Slide

11. 1088ສޠऩ࿥!
    

    View Slide

12. Ͳ͏΍ͬͯେྔͷϖʔδΛAMPʹ͔ͨ͠
    • ஈ֊తʹAMPʹ͍ͯ͘͠

    ɾ޿ࠂ΍Ϣʔβʔ਺΁ͷӨڹ͕৺഑
    • ༗ޮͳAMPϖʔδ͔ݕূ͢Δ
    • ศརͳAMPίϯϙʔωϯτΛ࢖͏
    

    View Slide

13. ஈ֊తʹAMPʹ͍ͯ͘͠
    

    View Slide

14. ஈ֊తʹAMPʹ͍ͯ͘͠
    Google͕AMPϖʔδΛݕग़͢Δʹ͸

    ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ
    ඇAMPϖʔδ
    AMPϖʔδ
    

    View Slide

15. ஈ֊తʹAMPʹ͍ͯ͘͠
    Google͕AMPϖʔδΛݕग़͢Δʹ͸

    ͰAMPϖʔδͱඇAMPϖʔδΛϦϯΫ͢Δ
    ඇAMPϖʔδ
    AMPϖʔδ
    ͕ଘࡏ͠ͳ͚Ε͹
    ݕग़͞Εͳ͍
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. ༗ޮͳAMP͔ݕূ͢Δ
    

    View Slide

22. ༗ޮͳAMP͔ݕূ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

31. • ଎౓վળ

    amp-imgΛ࢖ͬͯը૾ͷ஗ԆಡΈࠐΈ
    • ίʔυΛڞ௨Խ

    amp-accessΛ࢖ͬͯϩάΠϯͷ࣮૷Λڞ௨Խ
    • etc…
    ศརͳAMPίϯϙʔωϯτΛ࢖͏
    

    View Slide

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

    View Slide

33. Thanks!
    

    View Slide