遅延読み込みとの正しい付き合い方

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!!