Tweet
Tweet

Slide 1

Slide 1 text

஗ԆಡΈࠐΈͱͷ ਖ਼͍͠෇͖߹͍ํ 2019/11/21 ߴԁࣉdev @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/21࣌఺Ͱ͸ʣ

Slide 7

Slide 7 text

1. ࣮͸ϢʔβମݧΛ ଛͳ͍ͬͯͨέʔε

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

2. SEOతʹωΨςΟϒͳ݁ՌΛ ট͍ͨέʔε

Slide 20

Slide 20 text

஗ԆಡΈࠐΈͨ͠ϖʔδ͸ Ϋϩʔϥʔ͔ΒͲ͏ݟ͍͑ͯ Δͷ͔ʁ

Slide 21

Slide 21 text

ࠓճͷ΍Β͔͠ϙΠϯτ ஗ԆಡΈࠐΈͰੜ੒ͨ͠ཁૉ͕Ϋϩʔϥʔʹ ೝࣝ͞Ε͓ͯΒͣɺΠϯσοΫε͞Ε͍ͯͳ ͔ͬͨɻ

Slide 22

Slide 22 text

SEOʹࠨӈ͞ΕΔαʔϏεʹ ͱͬͯ͸ڪාͦͷ΋ͷ

Slide 23

Slide 23 text

Կ͕ىͬͨ͜ͷ͔ʁ • ஗ԆಡΈࠐΈ͕ऴΘΔલʹΫϩʔϥʔ͕ؼͬ ͯ͠·͏έʔε͕͋ͬͨɻ • ্ख͍͍ͬͯ͘Δϖʔδ΋͋ͬͨͷͰɺൃݟ ͕஗Εͨɻ • Ϋϩʔϥʔ͕ͲΕ͘Β͍଴ͬͯ͘ΕΔͷ͔͸ ෼͔Βͳ͍ɻ1෼͘Β͍଴ͬͯͯ΄͍͠ɻ

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

3. ը૾ͷ஗ԆಡΈࠐΈ

Slide 28

Slide 28 text

ը૾ΛͲ͏දࣔ͢΂͖͔ • imgཁૉͰදࣔ͢Δʁ • background-imageͰഎܠը૾ʹ͢Δʁ

Slide 29

Slide 29 text

Ұ௕Ұ୹͋Γ·͕͢ɺ ࠓճ͸imgཁૉΛਪ঑͠·͢

Slide 30

Slide 30 text

imgཁૉͷϝϦοτ • ಡΈࠐΈʹࣦഊͨ࣌͠ͷaltଐੑ͕࢖͑Δɻ • Ϋϩʔϥʔʹೝࣝ͞ΕΔɻ • decoding=“async”͕࢖͑Δɻ • loading=“lazy”͕࢖͑Δɻ

Slide 31

Slide 31 text

altଐੑ͕࢖͑Δ • ը૾ͷಡΈࠐΈʹࣦഊͨ࣌͠ʹϢʔβ΁ͷઆ ໌͕ग़དྷΔɻ • ύϑΥʔϚϯεʹ͸ؔ܎ͳ͍࿩Ͱ͸͋Δ͕ɺ ΞΫηγϏϦςΟతʹ͸imgཁૉ͕༗རɻ

Slide 32

Slide 32 text

Ϋϩʔϥʔ͔Βೝࣝ͞ΕΔ • divཁૉͳͲͰഎܠը૾Λઃఆͯ͠΋ɺΫϩʔ ϥʔ͔Βը૾ͩͱೝࣝ͞Εͳ͍ɻ • ࢀߟURLɿhttps://twitter.com/konojunya/ status/1194429597309292545

Slide 33

Slide 33 text

decodingଐੑ͕࢖͑Δ • ϒϥ΢βʹը૾ͷσίʔυώϯτΛఏڙ͢Δ ଐੑͰɺͦͷதʹasyncͱ͍͏ଐੑ͕͋Δɻ • ʮଞͷίϯςϯπͷද͕ࣔ஗Εͳ͍Α͏ʹɺ ը૾Λඇಉظతʹσίʔυ͠·͢ɻʯ˞MDN ͔ΒͷҾ༻ • SafariͰ࢖͑ͳ͍ͱ͞Ε͍ͯΔ͕ɺݱࡏ͸

Slide 34

Slide 34 text

loadingଐੑʹ͍ͭͯ • ଐੑΛࢦఆ͓͚ͯ͠͹ɺϒϥ΢β͕ࣗಈͰ஗ ԆಡΈࠐΈΛ΍ͬͯ͘ΕΔɻ • ࢀߟURLɿhttps://blog.jxck.io/entries/ 2019-05-20/lazyloading.html • ͪͳΈʹChromeͰ͔͠࢖͑·ͤΜɻඪ४Խ΋ ·ͩ͞Εͯ·ͤΜɻʢ2019/11/21࣌఺ʣ

Slide 35

Slide 35 text

Կ͕خ͍͠ͷ͔ʁ

Slide 36

Slide 36 text

ը૾ͷlazyloadΛ͠ͳͯ͘ࡁΉ • JavaScriptͰ࣮૷Λ͠ͳ͍͍ͯ͘ɻ • ʮμϛʔը૾Λຊདྷͷը૾ʹࠩ͠ସ͑Δʯͱ ͍ͬͨॲཧ΋ෆཁʹͳΔͷͰɺϒϥ΢βʹ༏͠ ͍ɻ΍Βͳͯ͘ࡁΉ͜ͱ͸΍Βͳ͍͍ͯ͘ɻ • ※ IEΛߟྀ͢Δ৔߹͸JavaScriptͰ࣮૷͓ͯ͠ ͍ͨํ͕ແ೉Ͱ͸͋Δɻ

Slide 37

Slide 37 text

΍ͬͯΈͯͷৼΓฦΓ

Slide 38

Slide 38 text

൓লͱৼΓฦΓ • ࣦഊ͸ͨ͠΋ͷͷɺૉૣ͘໭ͤͨͷ͸ෆ޾தͷ޾ ͍ɻࣦഊΛ૝ఆͯ͠ɺ࣮૷ൣғ΋ݶఆ͍ͯͨ͠ɻ • ࣮૷ˠݕূΛૉૣ͘ߦ͍ɺ࣮ੈքʹΠϯύΫτ༩ ͑Δͷ͕େࣄɻ1ճͷࣦഊ͘Β͍Ͱ࠳͚͍ͯΒΕ ͳ͍ɻ • ύϑΥʔϚϯεΛग़͢ͷ͸؆୯Ͱ͸ͳ͍ͱ࠶ೝ ࣝɻ΍Δલ͸গܰ͘͠ߟ͍͑ͯͨઅ͸͋Δɻ

Slide 39

Slide 39 text

Thanks!!