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

FukuokaJS #9の登壇資料です。

スライド内のリンク一覧
https://caniuse.com/#feat=loading-lazy-attr
https://caniuse.com/#feat=intersectionobserver
https://web.dev/native-lazy-loading
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

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/