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

高円寺.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
   

   View Slide

2. About me
   • Sho Yamada
   • @rukiadia (Twitter, Github, etc…)
   • Frontend Engineer at Omicale.Inc
   

   View Slide

3. ࠓ೔ͷςʔϚ͸
   ஗ԆಡΈࠐΈͰ͢
   

   View Slide

4. ๻ͷࣦഊஊΛฉ͍͍ͯͩ͘͞
   

   View Slide

5. ࠓճ࿩͢͜ͱ
   • ϢʔβମݧΛྑ͘͠Α͏ͱͨ͠Βɺ࣮͸Ϣʔ
   βʔମݧΛଛͳ͍ͬͯͨ
   • ྑ͔Εͱࢥͬͯ΍ͬͨ͜ͱ͕SEO໘ͰωΨ
   ςΟϒͳ݁ՌΛট͍ͨ
   • ը૾ͷ஗ԆಡΈࠐΈʹ͍ͭͯ
   • ৼΓฦΓͱ·ͱΊ
   

   View Slide

6. લஔ͖
   • SPAʹؔΘΔ࿩͸΄ͱΜͲग़͖ͯ·ͤΜɻ
   • ࠓճ͸ը૾ͷΈʹཹ·Βͣɺଞͷཁૉ΋ಈత
   ʹੜ੒͍ͯ͠·͢ɻ
   • ࠓճͷࣦഊஊɺ·ͩ׬શʹ͸৐Γӽ͑ΒΕͯ
   ·ͤΜʢ2019/11/21࣌఺Ͱ͸ʣ
   

   View Slide

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

   View Slide

8. ϖʔδͷදࣔ଎౓Λ্͛ͯ
   ϢʔβମݧΛྑ͘͠Α͏ʂ
   

   View Slide

9. ࠓճࢼͨ͜͠ͱ
   • ΧʔυUIΛྻڍ͍ͯ͠ΔϖʔδͰը໘දࣔޙʹΧʔ
   υUIΛੜ੒Λͯ͠ɺը໘ͷॳճදࣔΛૣ͘͢Δɻ
   • ཁ͸ɺϑΝʔετϏϡʔʹऩ·Βͳ͍΋ͷ͸ޙ͔Β
   ࡞Ε͹͍͍ͷͰ͸ͳ͍͔ʁͱ͍͏࿩
   • ࣮ࡍͷURLʢhttps://party-calendar.net/area/
   tokyoʣ
   

   View Slide

10. 
    
    
    
    ˡ͔͜͜ΒԼ͸
    ࠷ॳ͸ݟ͑ͯͳ͍ɻ
    ˡ੨͘ͳ͍ͬͯΔ෦෼͸
    "1*ܦ༝Ͱޙ͔Β࡞Δ
    

    View Slide

11. ࠓճͷ΍Β͔͠ϙΠϯτ
    ϒϥ΢βόοΫ໭ͬͨ࣌ɺϖʔδͷεΫϩʔ
    ϧҐஔ͕ζϨͯ͠·͏ɻ
    

    View Slide

12. 
    
    
    
    ࣍ͷը໘΁
    

    View Slide

13. 
    
    
    
    ͖ͬ͞ݟͯͨ΋ͷ͸
    Ͳ͜ʁ
    ϒϥ΢βόοΫ
    

    View Slide

14. ఻ΘΓ·ͨ͠ɾɾʁ
    

    View Slide

15. Ͳ͏͍͏͜ͱͳͷ͔ʁ
    • ΧʔυUI͕͋Δϖʔδ͔Β࣍ͷϖʔδʹભҠ
    ͢Δɻ
    • ભҠઌ͔Βϒϥ΢βόοΫͰ໭Δɻ
    • ཁૉͷ஗ԆಡΈࠐΈ͕࢝·Δɻ
    • ಡΈ͜Έ͕ऴΘΔͱɺϖʔδͷ௕͕͞มԽ͠
    ͯ͠·͍εΫϩʔϧҐஔ͕ζϨΔɻ
    

    View Slide

16. ࠓճͷέʔε΁ͷରࡦ
    • ϒϥ΢βόοΫͨ࣌͠͸ɺͦ΋ͦ΋஗ԆಡΈ
    ࠐΈΛ΍Βͳ͍ɻ
    • ஗ԆಡΈࠐΈ͕ऴΘΔ·ͰμϛʔཁૉΛ഑ஔ
    ͓͖ͯ͠ɺੜ੒ͨ͠ཁૉΛஔ͖׵͑Δ͜ͱͰ
    ϖʔδͷ௕͕͞มΘΒͳ͍Α͏ʹ͢Δɻ
    

    View Slide

17. ࠓճબΜͩରࡦ͸ʮμϛʔઓ
    ๏ʯ
    • ͔͠͠ɺ͜ͷରࡦ΋׬ᘳͰ͸͋Γ·ͤΜɻ
    • ޙ͔Βදࣔ͢Δཁૉͷݸ਺͸APIͷϨεϙϯε
    ࣍ୈͳͷͰɺ༧Ί഑ஔ͓ͯ͘͠μϛʔཁૉͷ
    ਺ΛඞཁʹԠͯ͡ม͑Δ͜ͱ͕ग़དྷ·ͤΜɻ
    • DOMͷߏ଄Λม͑Δճ਺͕૿͑ΔͷͰɺϒϥ
    ΢βͷϦϑϩʔ΋૿͑ͯ͠·͍·͢ɻ
    

    View Slide

18. ݱ࣮͸ݫ͍͠
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. Ξϯνύλʔϯ
    • JavaScriptͷॲཧʹ͕͔͔࣌ؒΓ͍͗ͯ͢Δɻ
    • DOMContentLoadedͷλΠϛϯάͰ৭ʑ΍
    Γ͗ͯ͢Δύλʔϯͱ͔
    • λΠϛϯάΛม͑ͨΓɺworkerʹॲཧΛಀ
    ͨ͠Γɻ৔߹ʹΑΔ͕खஈ͸৭ʑɻ
    

    View Slide

25. ࣄલௐࠪ͸େࣄ
    • ࣮૷ʹ͸Intersection ObserverΛ࢖͍·͠ΐ͏ɻ
    • https://developers.google.com/search/docs/
    guides/lazy-loading
    • ͜͜ͷղઆΛಡΉ΂͠ɻ
    • pupperterΛ༻͍࣮ͨ૷ςετ΋Մೳɻ
    • Ϋϩʔϥʔ͕ೝࣝͯ͘͠ΕΔ͔Ͳ͏͔͸ผ໰୊ɻ
    

    View Slide

26. ෆ֬ఆཁૉ΋ଟ͍ͷͰ
    ͱ΋͔͘ݕূ͢Δ͜ͱ͕େࣄ
    

    View Slide

27. 3. ը૾ͷ஗ԆಡΈࠐΈ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Կ͕خ͍͠ͷ͔ʁ
    

    View Slide

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

    View Slide

37. ΍ͬͯΈͯͷৼΓฦΓ
    

    View Slide

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

    View Slide

39. Thanks!!
    

    View Slide