Pro Yearly is on sale from $80 to $50! »

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

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

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

5cf7e9533a457726cd51232e06c1da9a?s=128

Masashi Hirano

November 25, 2018
Tweet

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!