画像の遅延 ローディングの話

画像の遅延 ローディングの話

B535c947f6a7fdd35fbf3f68fff533d0?s=128

SoichiroKatsuki

August 20, 2019
Tweet

Transcript

  1. ը૾ͷ஗Ԇ ϩʔσΟϯάͷ࿩ FukuokaJS #9 2019/08/20 Ճ݄ फҰ࿠

  2. ࣗݾ঺հ ɾ໊લ: Ճ݄ फҰ࿠ɹ ɹɹ ˏZuckey_ ɾॴଐ: ɾझຯ: ϩʔυόΠΫɹےτϨ ɾಲࠎϥʔϝϯ͕େ޷͖

  3. ஗ԆϩʔσΟϯάΛ༻͍ΔϝϦοτ • Ϣʔβʔʹදࣔ͞Εͳ͍ը૾͕ແବʹɹɹɹ ಡΈࠐ·Εͳ͍ • ϑΝʔετϏϡʔ͕଎͘ͳΔ৔߹͕͋Δ • ϝϞϦ΍CPUͳͲͷϦιʔε͕ແବʹͳΒͳ͍

  4. Chrome͕ ஗ԆϩʔσΟϯάΛ αϙʔτ͠·ͨ͠ʂ

  5. ஗ԆϩʔσΟϯάͷ࣮૷ํ๏ • loading ଐੑʹlazyΛࢦఆ͢Δ • ҎԼͷ3͕ͭࢦఆͰ͖Δ • autoɿ஗ԆಡΈࠐΈ͢Δ͔Λϒϥ΢βʹ೚ͤΔ • lazyɿ஗ԆಡΈࠐΈ͢Δ

    • eagerɿ஗ԆಡΈࠐΈ͠ͳ͍
  6. https://caniuse.com/#feat=loading-lazy-attr

  7. ஗ԆϩʔσΟϯάͷ࣮૷ํ๏ • scroll, resizeͳͲͷΠϕϯτϋϯυϥʔΛ࢖༻ • ύϑΥʔϚϯε͕͋·Γྑ͘ͳ͍ • Intersection Observer Λ࢖༻

    • IE΋ରԠ͢ΔͳΒPolyfill͕ඞཁ https://caniuse.com/#feat=intersectionobserver
  8. ஗ԆϩʔσΟϯά༻ͷϥΠϒϥϦ • lazysizes(https://github.com/aFarkas/lazysizes) • Intersection ObserverͰ࣮૷͞Ε͍ͯΔ • blazy(https://github.com/dinbror/blazy) • scroll,resizeͳͲͷΠϕϯτϋϯυϥͰ࣮૷͞Ε͍ͯΔ

    • IE7+Ͱಈ͘Β͍͠ww • ֤ϑϨʔϜϫʔΫ༻ͷϥΠϒϥϦ • ng-lazy-image(https://github.com/tjoskar/ng-lazyload-image) • react-lazyload(https://github.com/jasonslyvia/react-lazyload) • vue-lazyload(https://github.com/hilongjw/vue-lazyload)
  9. DEMO (vue-lazyload)

  10. ·ͱΊ • ࠓޙ͸ϥΠϒϥϦͳͲΛ࢖༻͠ͳͯ͘΋ը૾ͷ ஗ԆϩʔσΟϯά͕Ͱ͖ΔΑ͏ʹͳΓͦ͏ • ݱঢ়͸Chrome͔͠σϑΥϧτͰ༗ޮͰͳ͍ɹ ͷͰϥΠϒϥϦΛ࢖͏ͷ͕ྑͦ͞͏ • Vue.jsͳΒvue-lazyload͸͍͍ͧʂ

  11. ࢀߟURL • https://web.dev/native-lazy-loading • https://developers.google.com/web/ fundamentals/performance/lazy-loading- guidance/images-and-video/