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

高円寺.dev #1で発表に使った資料です。
https://koenji.connpass.com/event/152640/

11/15のフロントエンドカンファレンス福岡の前夜祭で話した資料を元にした拡張版になっています。
https://fec-fukuoka.connpass.com/event/154737/
https://speakerdeck.com/rukiadia/chi-yan-du-miip-mitofalsezheng-siifu-kihe-ifang

Transcript

1. ஗ԆಡΈࠐΈͱͷ ਖ਼͍͠෇͖߹͍ํ 2019/11/21 ߴԁࣉdev @rukiadia
2. About me • Sho Yamada • @rukiadia (Twitter, Github, etc…) • Frontend Engineer at Omicale.Inc
3. ࠓ೔ͷςʔϚ͸ ஗ԆಡΈࠐΈͰ͢
4. ๻ͷࣦഊஊΛฉ͍͍ͯͩ͘͞
5. ࠓճ࿩͢͜ͱ • ϢʔβମݧΛྑ͘͠Α͏ͱͨ͠Βɺ࣮͸Ϣʔ βʔମݧΛଛͳ͍ͬͯͨ • ྑ͔Εͱࢥͬͯ΍ͬͨ͜ͱ͕SEO໘ͰωΨ ςΟϒͳ݁ՌΛট͍ͨ • ը૾ͷ஗ԆಡΈࠐΈʹ͍ͭͯ • ৼΓฦΓͱ·ͱΊ
6. લஔ͖ • SPAʹؔΘΔ࿩͸΄ͱΜͲग़͖ͯ·ͤΜɻ • ࠓճ͸ը૾ͷΈʹཹ·Βͣɺଞͷཁૉ΋ಈత ʹੜ੒͍ͯ͠·͢ɻ • ࠓճͷࣦഊஊɺ·ͩ׬શʹ͸৐Γӽ͑ΒΕͯ ·ͤΜʢ2019/11/21࣌఺Ͱ͸ʣ
7. 1. ࣮͸ϢʔβମݧΛ ଛͳ͍ͬͯͨέʔε
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. 2. SEOతʹωΨςΟϒͳ݁ՌΛ ট͍ͨέʔε
20. ஗ԆಡΈࠐΈͨ͠ϖʔδ͸ Ϋϩʔϥʔ͔ΒͲ͏ݟ͍͑ͯ Δͷ͔ʁ
21. ࠓճͷ΍Β͔͠ϙΠϯτ ஗ԆಡΈࠐΈͰੜ੒ͨ͠ཁૉ͕Ϋϩʔϥʔʹ ೝࣝ͞Ε͓ͯΒͣɺΠϯσοΫε͞Ε͍ͯͳ ͔ͬͨɻ
22. SEOʹࠨӈ͞ΕΔαʔϏεʹ ͱͬͯ͸ڪාͦͷ΋ͷ
23. Կ͕ىͬͨ͜ͷ͔ʁ • ஗ԆಡΈࠐΈ͕ऴΘΔલʹΫϩʔϥʔ͕ؼͬ ͯ͠·͏έʔε͕͋ͬͨɻ • ্ख͍͍ͬͯ͘Δϖʔδ΋͋ͬͨͷͰɺൃݟ ͕஗Εͨɻ • Ϋϩʔϥʔ͕ͲΕ͘Β͍଴ͬͯ͘ΕΔͷ͔͸ ෼͔Βͳ͍ɻ1෼͘Β͍଴ͬͯͯ΄͍͠ɻ
24. Ξϯνύλʔϯ • JavaScriptͷॲཧʹ͕͔͔࣌ؒΓ͍͗ͯ͢Δɻ • DOMContentLoadedͷλΠϛϯάͰ৭ʑ΍ Γ͗ͯ͢Δύλʔϯͱ͔ • λΠϛϯάΛม͑ͨΓɺworkerʹॲཧΛಀ ͨ͠Γɻ৔߹ʹΑΔ͕खஈ͸৭ʑɻ
25. ࣄલௐࠪ͸େࣄ • ࣮૷ʹ͸Intersection ObserverΛ࢖͍·͠ΐ͏ɻ • https://developers.google.com/search/docs/ guides/lazy-loading • ͜͜ͷղઆΛಡΉ΂͠ɻ • pupperterΛ༻͍࣮ͨ૷ςετ΋Մೳɻ • Ϋϩʔϥʔ͕ೝࣝͯ͘͠ΕΔ͔Ͳ͏͔͸ผ໰୊ɻ
26. ෆ֬ఆཁૉ΋ଟ͍ͷͰ ͱ΋͔͘ݕূ͢Δ͜ͱ͕େࣄ
27. 3. ը૾ͷ஗ԆಡΈࠐΈ
28. ը૾ΛͲ͏දࣔ͢΂͖͔ • imgཁૉͰදࣔ͢Δʁ • background-imageͰഎܠը૾ʹ͢Δʁ
29. Ұ௕Ұ୹͋Γ·͕͢ɺ ࠓճ͸imgཁૉΛਪ঑͠·͢
30. imgཁૉͷϝϦοτ • ಡΈࠐΈʹࣦഊͨ࣌͠ͷaltଐੑ͕࢖͑Δɻ • Ϋϩʔϥʔʹೝࣝ͞ΕΔɻ • decoding=“async”͕࢖͑Δɻ • loading=“lazy”͕࢖͑Δɻ
31. altଐੑ͕࢖͑Δ • ը૾ͷಡΈࠐΈʹࣦഊͨ࣌͠ʹϢʔβ΁ͷઆ ໌͕ग़དྷΔɻ • ύϑΥʔϚϯεʹ͸ؔ܎ͳ͍࿩Ͱ͸͋Δ͕ɺ ΞΫηγϏϦςΟతʹ͸imgཁૉ͕༗རɻ
32. Ϋϩʔϥʔ͔Βೝࣝ͞ΕΔ • divཁૉͳͲͰഎܠը૾Λઃఆͯ͠΋ɺΫϩʔ ϥʔ͔Βը૾ͩͱೝࣝ͞Εͳ͍ɻ • ࢀߟURLɿhttps://twitter.com/konojunya/ status/1194429597309292545
33. decodingଐੑ͕࢖͑Δ • ϒϥ΢βʹը૾ͷσίʔυώϯτΛఏڙ͢Δ ଐੑͰɺͦͷதʹasyncͱ͍͏ଐੑ͕͋Δɻ • ʮଞͷίϯςϯπͷද͕ࣔ஗Εͳ͍Α͏ʹɺ ը૾Λඇಉظతʹσίʔυ͠·͢ɻʯ˞MDN ͔ΒͷҾ༻ • SafariͰ࢖͑ͳ͍ͱ͞Ε͍ͯΔ͕ɺݱࡏ͸
34. loadingଐੑʹ͍ͭͯ • ଐੑΛࢦఆ͓͚ͯ͠͹ɺϒϥ΢β͕ࣗಈͰ஗ ԆಡΈࠐΈΛ΍ͬͯ͘ΕΔɻ • ࢀߟURLɿhttps://blog.jxck.io/entries/ 2019-05-20/lazyloading.html • ͪͳΈʹChromeͰ͔͠࢖͑·ͤΜɻඪ४Խ΋ ·ͩ͞Εͯ·ͤΜɻʢ2019/11/21࣌఺ʣ
35. Կ͕خ͍͠ͷ͔ʁ
36. ը૾ͷlazyloadΛ͠ͳͯ͘ࡁΉ • JavaScriptͰ࣮૷Λ͠ͳ͍͍ͯ͘ɻ • ʮμϛʔը૾Λຊདྷͷը૾ʹࠩ͠ସ͑Δʯͱ ͍ͬͨॲཧ΋ෆཁʹͳΔͷͰɺϒϥ΢βʹ༏͠ ͍ɻ΍Βͳͯ͘ࡁΉ͜ͱ͸΍Βͳ͍͍ͯ͘ɻ • ※ IEΛߟྀ͢Δ৔߹͸JavaScriptͰ࣮૷͓ͯ͠ ͍ͨํ͕ແ೉Ͱ͸͋Δɻ
37. ΍ͬͯΈͯͷৼΓฦΓ
38. ൓লͱৼΓฦΓ • ࣦഊ͸ͨ͠΋ͷͷɺૉૣ͘໭ͤͨͷ͸ෆ޾தͷ޾ ͍ɻࣦഊΛ૝ఆͯ͠ɺ࣮૷ൣғ΋ݶఆ͍ͯͨ͠ɻ • ࣮૷ˠݕূΛૉૣ͘ߦ͍ɺ࣮ੈքʹΠϯύΫτ༩ ͑Δͷ͕େࣄɻ1ճͷࣦഊ͘Β͍Ͱ࠳͚͍ͯΒΕ ͳ͍ɻ • ύϑΥʔϚϯεΛग़͢ͷ͸؆୯Ͱ͸ͳ͍ͱ࠶ೝ ࣝɻ΍Δલ͸গܰ͘͠ߟ͍͑ͯͨઅ͸͋Δɻ
39. Thanks!!