Search
โณ

lazy loading

๐Ÿง‘๐Ÿผโ€๐Ÿš€ lazy loading๋ฅผ ์•Œ์•„์•ผ ํ•˜๋Š” ์ด์œ 

โ—์ด๋ฏธ์ง€, ๋™์˜์ƒ์ด ์›น ํŽ˜์ด์ง€์˜ ์ฃผ์š” ๋ถ€๋ถ„์œผ๋กœ ๋งŽ์ด ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋‹ค๋ฉด โ—์‚ฌ์šฉ์ž์—๊ฒŒ '์‹ค์ œ์ ์œผ๋กœ' ๋” ๋น ๋ฅธ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์ œ๊ณตํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด

๐Ÿ™‹๐Ÿปโ€โ™‚๏ธ ์ด ๋ฌธ์„œ๋ฅผ ๋ณด๊ณ  ๋‚˜๋ฉด

์ด๋ฏธ์ง€๋‚˜ ๋™์˜์ƒ ๊ฐ™์€ ์ฝ˜ํ…์ธ ๋“ค์„ lazy loading์œผ๋กœ ๋ Œ๋”๋งํ•  ์ˆ˜ ์žˆ๋‹ค.

โณ lazy loading

์˜์–ด ๋‹จ์–ด ์ค‘ 'lazy'๋Š” '๊ฐ€๋Šฅํ•œ ํ•œ ๊ธธ๊ฒŒ ์ผ์„ ๋ฏธ๋ฃจ๋Š” ํ–‰์œ„'๋ž€ ์˜๋ฏธ์— ๊ธฐ๋ฐ˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ lazy loading์€ ๊ฐ€๋Šฅํ•œ ํ•œ ๊ธธ๊ฒŒ ๋ฏธ๋ฃจ์–ด ์›นํŽ˜์ด์ง€์—์„œ ๋ณด์—ฌ์ค„ ์ฝ˜ํ…์ธ ๋“ค์ด ์‹ค์ œ๋กœ ํ™”๋ฉด์— ๋ณด์ผ ๋•Œ๊นŒ์ง€ ๋ฏธ๋ฃฌ ํ›„ ๋กœ๋”ฉํ•˜๋Š” ๊ธฐ์ˆ ์ž…๋‹ˆ๋‹ค. ๋‹ค์‹œ ํ•œ๋ฒˆ ๊ฐ•์กฐํ•˜๋ฉด ์ด ๋ฆฌ์†Œ์Šค๋“ค์€ ํ•„์š”ํ•  ๋•Œ ๋กœ๋“œ๋ผ์•ผํ•ฉ๋‹ˆ๋‹ค. ํ…์ŠคํŠธ ์™ธ์— ์ด๋ฏธ์ง€์™€ ๋™์˜์ƒ ๊ฐ™์€ ์ฝ˜ํ…์ธ ๋“ค์€ ๋ชจ๋“  ์›น์‚ฌ์ดํŠธ์— ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋งค์šฐ ์ค‘์š”ํ•œ ๋ถ€๋ถ„์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด๋Ÿฌํ•œ ์ฝ˜ํ…์ธ ๋“ค์€ ํŽ˜์ด์ง€ ์„ฑ๋Šฅ์— ๊ฐ€์žฅ ๋งŽ์ด ์˜ํ–ฅ์„ ์ฃผ๊ณ  ์žˆ๋Š” ์š”์†Œ์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ ๋งŽ์€ ์—”์ง€๋‹ˆ์–ด๊ฐ€ ์ด๋ฏธ์ง€๋ฅผ ์ตœ์ ํ™”ํ•ด์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ฃผ๊ธฐ ์œ„ํ•ด ๋…ธ๋ ฅํ–ˆ๊ณ  ๊ทธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์˜ ํ•˜๋‚˜๊ฐ€ lazy loading ์ž…๋‹ˆ๋‹ค.
์•„๋ž˜ ์˜์ƒ์€ lazy loading์œผ๋กœ ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ๋˜๋Š” ์žฅ๋ฉด์ž…๋‹ˆ๋‹ค. ํšŒ์ƒ‰์˜ placeholder ์˜์—ญ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์Šคํฌ๋กค์„ ์•„๋ž˜๋กœ ๋‚ด๋ฆด ๋•Œ ํ™”๋ฉด์— ์ •์ƒ์ ์œผ๋กœ load ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฐฉ์‹์€ ์›น ์„ฑ๋Šฅ๊ณผ ๋””๋ฐ”์ด์Šค ๋‚ด ๋ฆฌ์†Œ์Šค ํ™œ์šฉ๋„ ์ฆ๊ฐ€, ๊ทธ๋ฆฌ๊ณ  ์—ฐ๊ด€๋œ ๋น„์šฉ์„ ์ค„์ด๋Š” ๋ฐ ๋„์›€์„ ์ค„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€์—์„œ ์Šคํฌ๋กค์„ ์•„๋ž˜๋กœ ๋‚ด๋ฆผ์œผ๋กœ์จ, ์ด๋ฏธ์ง€์˜ placeholder๋Š” ๋ทฐํฌํŠธ(์›น ํŽ˜์ด์ง€ ๋‚ด ๋ณด์ด๋Š” ๋ถ€๋ถ„)์— ๋‹ค๊ฐ€์˜ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ด ๋ทฐํฌํŠธ์— ๋ณด์ด๊ฒŒ๋˜๋ฉด ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋”ฉ๋˜๋„๋ก ํŠธ๋ฆฌ๊ฑฐ๋ฅผ ์ผ์œผํ‚จ ํ›„, ์‹ค์ œ ์ด๋ฏธ์ง€๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค.

lazy loading ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

image tag ์ด์šฉ ๋ฐฉ๋ฒ•

Lazy loading ์ด๋ฏธ์ง€๋“ค์€ ๋‘ ๋‹จ๊ณ„๋กœ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๋จผ์ €, ์ด๋ฏธ์ง€ ๋กœ๋”ฉ์„ ์‚ฌ์ „์— ๋ง‰๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ด๋ฏธ์ง€๋Š” ํƒœ๊ทธ ๋‚ด src ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ์ด ๋ฐฉ์‹์€ ์น˜๋ช…์ ์ธ ๋‹จ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. HTML ๋‚ด ์ฒซ ๋ฒˆ์งธ ์ด๋ฏธ์ง€๋“  1000๋ฒˆ์งธ ์ด๋ฏธ์ง€์ด๋“ , ํ˜น์€ ๋ทฐํฌํŠธ ๋ฐ–์— ์žˆ๋“  ์ƒ๊ด€์—†์ด ๋งŒ์•ฝ <img> ํƒœ๊ทธ๊ฐ€ src ์†์„ฑ์„ ๊ฐ€์ง€๋ฉด, ์ด๋ฏธ์ง€๋ฅผ ๋ฌด์กฐ๊ฑด ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.
๊ทธ๋ž˜์„œ src ์†์„ฑ ๋Œ€์‹  ๋‹ค๋ฅธ ์†์„ฑ์—๋‹ค๊ฐ€ ์ด๋ฏธ์ง€ URL์„ ๋„ฃ๋Š” ๋ฐฉ์‹์œผ๋กœ lazy loading์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด <img> ํƒœ๊ทธ์— data-src๋ผ๋Š” ์†์„ฑ์— ์ด๋ฏธ์ง€ URL์„ ์ง€์ •ํ•œ๋‹ค๋ฉด, ์ดˆ๊ธฐ์— html ํƒœ๊ทธ๊ฐ€ ์›นํŽ˜์ด์ง€์— ๊ทธ๋ ค์งˆ ๋•Œ๋Š” ์ด๋ฏธ์ง€๋Š” ๋กœ๋“œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
<img data-src="<https://ik.imagekit.io/demo/default-image.jpg>" />
HTML
ํ•˜์ง€๋งŒ ์ด๋ ‡๊ฒŒ๋งŒ ์ž‘์„ฑํ•˜๋ฉด ์‹ค์ œ ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋“œ๋˜์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ์ด๋ฏธ์ง€๋ฅผ ์–ธ์ œ ๋กœ๋”ฉํ•  ๊ฒƒ์ธ์ง€ ์•Œ๋ ค์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด์„œ๋Š”, ํ•ด๋‹น ์ด๋ฏธ์ง€(ํ˜„์žฌ๋Š” placeholder ์ƒํƒœ)๊ฐ€ ๋ทฐํฌํŠธ์— ๋“ค์–ด์™”๋Š”์ง€(์‚ฌ์šฉ์ž๊ฐ€ ๋ณด๋Š” ํŽ˜์ด์ง€์— ๋“ค์–ด์™”๋Š”์ง€) ํ™•์ธํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•

scroll, resize ๊ทธ๋ฆฌ๊ณ  orientationChange์™€ ๊ฐ™์€ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. scroll ์ด๋ฒคํŠธ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํŽ˜์ด์ง€์—์„œ ์Šคํฌ๋กค ํ•˜๋Š” ์‹œ์ ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. resize ์ด๋ฒคํŠธ๋Š” ์œˆ๋„์šฐ ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๊ฐ€ ๋ฐ”๋€” ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. orientationChange ์ด๋ฒคํŠธ๋Š” ๋””๋ฐ”์ด์Šค ํ™”๋ฉด์ด ๊ฐ€๋กœ ๋˜๋Š” ์„ธ๋กœ๋กœ ๋ฐ”๋€” ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.
์ด๋Ÿฌํ•œ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ด์šฉํ•˜์—ฌ ์–ด๋–ค ์ด๋ฏธ์ง€๊ฐ€ ๋ทฐํฌํŠธ ์•ˆ์œผ๋กœ ๋“ค์–ด์™”๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋ทฐํฌํŠธ ์•ˆ์œผ๋กœ ๋“ค์–ด๊ฐ€๋ฉด <img> ํƒœ๊ทธ์˜ data-src ์†์„ฑ์— ์ง€์ •๋œ URL์„ src ์†์„ฑ์— ๋„ฃ์–ด์„œ ์ด๋ฏธ์ง€๋ฅผ ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค. ์ดํ›„ ๋‚˜์ค‘์— ํŠธ๋ฆฌ๊ฑฐ ์ด๋ฒคํŠธ๋ฅผ ์ผ์œผํ‚ค๊ธฐ ์œ„ํ•ด ๋กœ๋”ฉ์„ ์ง€์—ฐ์‹œํ‚ฌ ์ด๋ฏธ์ง€๋กœ ์‹๋ณ„ํ•˜๋˜ lazy ํด๋ž˜์Šค๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค. ๋ชจ๋“  ์ด๋ฏธ์ง€๊ฐ€ ๋กœ๋”ฉ๋œ ์ดํ›„์—๋Š” ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ์ œ๊ฑฐํ•ฉ๋‹ˆ๋‹ค.

Intersection Observer API๋ฅผ ์ด์šฉํ•œ ๋ฐฉ๋ฒ•

Intersection Observer API๋Š” ์—˜๋ฆฌ๋จผํŠธ ์š”์†Œ๊ฐ€ ๋ทฐํฌํŠธ์— ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์„ ๊ฐ์ง€ํ•˜๊ณ  ์•ก์…˜์„ ์ทจํ•˜๋Š” ๊ฒƒ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ฃผ๋Š” API์ž…๋‹ˆ๋‹ค. Intersection Observer API๋Š” ์ด๋ฏธ์ง€ ๋กœ๋“œ๋ฅผ ์ง€์—ฐ์‹œํ‚ค๊ธฐ ์œ„ํ•ด ๋ชจ๋“  ์ด๋ฏธ์ง€์— Observer๋ฅผ ๋ถ€์ฐฉ์‹œํ‚ต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—˜๋ฆฌ๋จผํŠธ๊ฐ€ ๋ทฐํฌํŠธ์— ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ๊ฐ์ง€ํ•˜๊ฒŒ ๋˜๋ฉด, isIntersecting ์†์„ฑ์„ ์ด์šฉํ•˜์—ฌ ๋ณ€ํ™”๋ฅผ ๊ฐ์ง€ํ•˜๊ณ , data ์†์„ฑ์— ์ง€์ •๋œ url์„ src ์†์„ฑ์œผ๋กœ ์˜ฎ๊ธฐ๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Native lazy loading

์ตœ์‹  ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ Native lazy loading์„ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
<img src="image.jpg" alt="..." loading="lazy"> <iframe src="video-player.html" title="..." loading="lazy"></iframe>
HTML
lazy loading์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด ๋‹จ์ง€ ์ž„๋ฒ ๋”ฉ ํ•  ์ด๋ฏธ์ง€ ๋˜๋Š” iframe์— 'loading' ์†์„ฑ๋งŒ ์ถ”๊ฐ€ํ•ด์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค. loading ์†์„ฑ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฐ’์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
โ€ข
lazy: ๋ทฐํฌํŠธ์—์„œ ์ผ์ •ํ•œ ๊ฑฐ๋ฆฌ์— ๋‹ฟ์„ ๋•Œ๊นŒ์ง€ ๋กœ๋”ฉ์„ ์ง€์—ฐ์‹œํ‚ต๋‹ˆ๋‹ค.
โ€ข
eager: ํ˜„์žฌ ํŽ˜์ด์ง€ ์œ„์น˜๊ฐ€ ์œ„, ์•„๋ž˜ ์–ด๋””์— ์œ„์น˜ํ•˜๋“  ์ƒ๊ด€์—†์ด, ํŽ˜์ด์ง€๊ฐ€ ๋กœ๋”ฉ๋˜์ž๋งˆ์ž ํ•ด๋‹น ์š”์†Œ๋ฅผ ๋กœ๋”ฉํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ“˜ ์ •๋ฆฌ

โ€ข
lazy loading์„ ์ด์šฉํ•˜๋ฉด, ํŽ˜์ด์ง€ ์ดˆ๊ธฐ ๋กœ๋”ฉ ์‹œ ํ•„์š”๋กœ ํ•œ ์ด๋ฏธ์ง€์˜ ์ˆ˜๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Š” ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์„ฑ๋Šฅ ํ–ฅ์ƒ์— ๋„์›€์ด ๋œ๋‹ค.
โ€ข
lazy loading์€ ์ด๋ฏธ์ง€๊ฐ€ ๋ณด์—ฌ์ง€์ง€ ์•Š์œผ๋ฉด ์ ˆ๋Œ€ ๋กœ๋”ฉํ•˜์ง€ ์•Š์œผ๋ฏ€๋กœ, ํŽ˜์ด์ง€ ๋‚ด์—์„œ ์ „๋‹ฌํ•  ์ด ๋ฐ”์ดํŠธ ์šฉ๋Ÿ‰์„ ์ค„์ผ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”— ์ฐธ๊ณ  ๋งํฌ

โ€ข