Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
ԆಡΈࠐΈͱͷ ਖ਼͍͖͠߹͍ํ 2019/11/15 ϑϩϯτΤϯυΧϯϑΝϨϯεԬɾલࡇ @rukiadia
Slide 2
Slide 2 text
About me • Sho Yamada • @rukiadia (Twitter, Github, etc…) • Frontend Engineer at Omicale.Inc
Slide 3
Slide 3 text
ࠓͷςʔϚ ԆಡΈࠐΈͰ͢
Slide 4
Slide 4 text
ͷࣦഊஊΛɾɾ ͍ͤͯͩ͘͞͞ʂ
Slide 5
Slide 5 text
ࠓճ͢͜ͱ • ϢʔβମݧΛྑ͘͠Α͏ͱͨ͠Βɺ࣮Ϣʔ βʔମݧΛଛͳ͍ͬͯͨέʔε • ྑ͔Εͱࢥͬͯͬͨ͜ͱ͕SEO໘ͰωΨ ςΟϒͳ݁ՌΛট͍ͨέʔε • ͬͯΈͯͷৼΓฦΓ
Slide 6
Slide 6 text
લஔ͖ • SPAʹؔΘΔ΄ͱΜͲग़͖ͯ·ͤΜɻ • ࠓճը૾ͷΈʹཹ·Βͣɺଞͷཁૉಈత ʹੜ͍ͯ͠·͢ɻ • ࠓճͷࣦഊஊɺ·ͩશʹΓӽ͑ΒΕͯ ·ͤΜʢ2019/11/15࣌Ͱʣ
Slide 7
Slide 7 text
࣮ϢʔβମݧΛ ଛͳ͍ͬͯͨέʔε
Slide 8
Slide 8 text
ϖʔδͷදࣔΛ্͛ͯ ϢʔβମݧΛྑ͘͠Α͏ʂ
Slide 9
Slide 9 text
ࠓճࢼͨ͜͠ͱ • ΧʔυUIΛྻڍ͍ͯ͠ΔϖʔδͰը໘දࣔޙʹΧʔ υUIΛੜΛͯ͠ɺը໘ͷॳճදࣔΛૣ͘͢Δɻ • ཁɺϑΝʔετϏϡʔʹऩ·Βͳ͍ͷޙ͔Β ࡞Ε͍͍ͷͰͳ͍͔ʁͱ͍͏ • ࣮ࡍͷURLʢhttps://party-calendar.net/area/ tokyoʣ
Slide 10
Slide 10 text
ˡ͔͜͜ΒԼ ࠷ॳݟ͑ͯͳ͍ɻ ˡ੨͘ͳ͍ͬͯΔ෦ "1*ܦ༝Ͱޙ͔Β࡞Δ
Slide 11
Slide 11 text
ࠓճͷΒ͔͠ϙΠϯτ ϒϥβόοΫͬͨ࣌ɺϖʔδͷεΫϩʔ ϧҐஔ͕ζϨͯ͠·͏ɻ
Slide 12
Slide 12 text
࣍ͷը໘
Slide 13
Slide 13 text
͖ͬ͞ݟͯͨͷ Ͳ͜ʁ ϒϥβόοΫ
Slide 14
Slide 14 text
ΘΓ·ͨ͠ɾɾʁ
Slide 15
Slide 15 text
Ͳ͏͍͏͜ͱͳͷ͔ʁ • ΧʔυUI͕͋Δϖʔδ͔Β࣍ͷϖʔδʹભҠ ͢Δɻ • ભҠઌ͔ΒϒϥβόοΫͰΔɻ • ཁૉͷԆಡΈࠐΈ͕࢝·Δɻ • ಡΈ͜Έ͕ऴΘΔͱɺϖʔδͷ͕͞มԽ͠ ͯ͠·͍εΫϩʔϧҐஔ͕ζϨΔɻ
Slide 16
Slide 16 text
ࠓճͷέʔεͷରࡦ • ϒϥβόοΫͨ࣌͠ɺͦͦԆಡΈ ࠐΈΛΒͳ͍ɻ • ԆಡΈࠐΈ͕ऴΘΔ·ͰμϛʔཁૉΛஔ ͓͖ͯ͠ɺੜͨ͠ཁૉΛஔ͖͑Δ͜ͱͰ ϖʔδͷ͕͞มΘΒͳ͍Α͏ʹ͢Δɻ
Slide 17
Slide 17 text
ࠓճબΜͩରࡦʮμϛʔઓ๏ʯ • ͔͠͠ɺ͜ͷରࡦᘳͰ͋Γ·ͤΜɻ • ޙ͔Βදࣔ͢ΔཁૉͷݸAPIͷϨεϙϯε ࣍ୈͳͷͰɺ༧Ίஔ͓ͯ͘͠μϛʔཁૉͷ ΛඞཁʹԠͯ͡ม͑Δ͜ͱ͕ग़དྷͳ͍ɻ • DOMͷߏΛม͑Δճ͕૿͑ΔͷͰɺϒϥ βͷϦϑϩʔ૿͑Δɻ
Slide 18
Slide 18 text
ͳ͔ͳ͔ʹ՝͕ଟ͍ɾɾ
Slide 19
Slide 19 text
SEOతʹωΨςΟϒͳ݁ՌΛ ট͍ͨέʔε
Slide 20
Slide 20 text
ԆಡΈࠐΈͨ͠ϖʔδ Ϋϩʔϥʔ͔ΒͲ͏ݟ͍͑ͯ Δͷ͔ʁ
Slide 21
Slide 21 text
ࠓճͷΒ͔͠ϙΠϯτ ԆಡΈࠐΈͰੜͨ͠ཁૉ͕Ϋϩʔϥʔʹ ೝࣝ͞Ε͍ͯͳ͔ͬͨ
Slide 22
Slide 22 text
SEOʹࠨӈ͞ΕΔαʔϏεʹ ͱͬͯڪාͱ͔͍͑͠ͳ͍
Slide 23
Slide 23 text
Կ͕ىͬͨ͜ͷ͔ʁ • ԆಡΈࠐΈ͕ऴΘΔલʹΫϩʔϥʔ͕ؼͬ ͯ͠·͏߹͕͋ͬͨɻ্ख͍͍ͬͯ͘Δϖʔ δ͋ͬͨɻ • Ϋϩʔϥʔ͍ͭ·Ͱ͍ͬͯͯ͘Εͳ ͍ɻͦͦɺͲΕ͘Β͍ͬͯ͘ΕΔͷ͔ ͔Βͳ͍ɻ3͘Β͍ͬͯ΄͍͠ɻ
Slide 24
Slide 24 text
Ξϯνύλʔϯ • ࣮ํ๏͕ͦͦؒҧ͍ͬͯΔɻ • JavaScriptͷॲཧʹ͕͔͔࣌ؒΓ͍͗ͯ͢Δɻ • DOMContentLoadedͷλΠϛϯάͰ৭ʑΓ ͗ͯ͢Δύλʔϯͱ͔ • λΠϛϯάΛม͑ͨΓɺworkerʹॲཧΛಀ͠ ͨΓɻ߹ʹΑΔ͕खஈ৭ʑɻ
Slide 25
Slide 25 text
ࣄલௐࠪେࣄ • ࣮ʹIntersection ObserverΛ͏ɻ • https://developers.google.com/search/docs/ guides/lazy-loading • ͜͜ͷղઆΛಡΉ͠ɻ • pupperterΛ༻͍࣮ͨςετՄೳɻ • Ϋϩʔϥʔ͕ೝࣝͯ͘͠ΕΔ͔Ͳ͏͔ผɻ
Slide 26
Slide 26 text
ෆ֬ఆཁૉଟ͍ͷͰ ͱ͔͘ݕূ͢Δ͜ͱ͕େࣄ
Slide 27
Slide 27 text
ͬͯΈͯͷৼΓฦΓ
Slide 28
Slide 28 text
লͱৼΓฦΓ • ࣦഊͨ͠ͷͷɺૉૣͤͨ͘ͷෆதͷ ͍ɻ࣮ൣғݶఆ͍ͯͨ͠ͷͰɺૉૣͤ͘ ͨɻ • ࣮ˠݕূΛૉૣ͘ߦ͍ɺ࣮ੈքʹΠϯύΫτ ༩͑Δͷ͕େࣄɻҰճͷࣦഊ͘Β͍Ͱ࠳͚͍ͯ ΒΕͳ͍ɻ • ύϑΥʔϚϯεΛग़͢ͷ؆୯Ͱͳ͍ͱ࠶ೝࣝɻ
Slide 29
Slide 29 text
Thanks!!