AMPで爆速WEBサイト

AMPの紹介です。

- AMPについて
- AMPの活用事例
- AMPのJekyllテーマの紹介

Transcript

1. AMPͰര଎WEBαΠτ ࢁ࡚উฏ / GMO Perabo, Inc. 2017.07.06 ϗεςοΫMTG #4
2. ࣗݾ঺հ • 2ࣇͷ෕ • ໺ࡊΛҭ͍ͯͯ·͢ http://48n.jp
3. ാ
4. WEB+DB PRESS Vol.99 ൃചதͰ͢ 2017/6/24 ൃച(ൃചத)Ͱ͢ɻ ਓੜͰॳΊͯدߘ͠·ͨ͠ɻ
5. AMPͬͯ஌͍ͬͯ·͔͢ʁ
6. ࠓ೔͓࿩͢͠Δ͜ͱ • AMPʹ͍ͭͯ • AMPͷ׆༻ࣄྫ • AMPͷJekyllςʔϚͷ঺հ
7. AMPʹ͍ͭͯ
8. AMPͱ͸ • AMP(Accelerated Mobile Pages) • ΞϯϓͱݺͿ • ϞόΠϧ୺຤ͷ΢ΣϒϖʔδΛߴ଎දࣔ͢ΔͨΊͷ࢓૊Έ • GoogleͱTwitterͰڞಉ։ൃ
9. AMPͷϝϦοτ • Googleͷݕࡧ݁Ռ͔ΒҰॠͰαΠτΛදࣔ • αΠτͷ௚ؼ཰ͷ௿ԼʹޮՌ͋Γ εϐʔυ
10. AMPͷϝϦοτ • Χϧʔηϧදࣔ • AMPରԠͷϚʔΫ
11. AMPͷσϝϦοτ(੍໿) • AMPͷઐ༻ͷίϯϙʔωϯτ͕͍Ζ͍Ζ༻ҙ͞Ε͍ͯΔ • ༻ҙ͞Ε͍ͯΔػೳҎ֎͸࢖͑ͳ͍ Not JavaScript
12. AMPͷσϝϦοτ(੍໿) • <img>λά͸࢖͑ͳ͍ɻ<amp-img>λάΛ࢖͏ HTMLͷ੍໿
13. AMPͷσϝϦοτ(੍໿) • <style amp-custom>λάͰғΉ ֎෦CSS͸ ಡΈࠐΊͳ͍
14. AMPͷ׆༻ࣄྫ
15. AMPͱ૬ੑͷ͍͍ϓϥοτϑΥʔϜ • χϡʔεαΠτ • ϒϩά • ECαΠτ
16. ۩ମతͳࣄྫ
17. AMPରԠͷJekellςʔϚ
18. Aminima • JekyllςʔϚͷminimaΛAMPରԠͨ͠΋ͷ • https://github.com/shoyan/aminima
19. Ampstart-blog-post • ampstartͷblog-postςϯϓϨʔτΛ Jekyllʹ૊ΈࠐΜͩ • https://github.com/shoyan/ ampstart-blog-post
20. ରԠํ๏ΛϒϩάͰ঺հ͍ͯ͠·͢ JekyllςʔϚͷminimaΛAMPରԠͨ͠ • http://48n.jp/blog/2017/04/14/ aminima-is-minima-with-amp/
21. AMPʹֶ͍ͭͯͿͨΊʹ https://www.ampproject.org/ • AMPͷެࣜαΠτ https://ampbyexample.com/ • AMPͷαϯϓϧ͕ͨ͘͞Μ https://blog.sakurasaku-labo.jp/amp-html/ • AMPͷ೔ຊޠͷ৘ใ