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

https://fec-fukuoka.connpass.com/event/154737/
フロントエンドカンファレンス福岡の前夜祭で発表に使った資料です。

資料に載せたURLは以下です。
・https://party-calendar.net/area/tokyo
・https://developers.google.com/search/docs/guides/lazy-loading

この資料のもとになった自分のブログです。
https://rukiadia.hatenablog.jp/entry/2019/11/10/201757

Transcript

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