๊ฒ์ ์ต์ ํ๋ฅผ ์ํ ๋ก๋ฉ ์๋ ๊ฐ์ ๋ฐฉ๋ฒ
๊ฒ์ ์ต์ ํ๋ฅผ ์ํ ํ์ด์ง ๋ก๋ฉ ์๋์ ์ค์์ฑ๊ณผ ๊ฐ์ ๋ฐฉ๋ฒ
1. ๋ก๋ฉ ์๋๊ฐ ์ค์ํ ์ด์
๊ฒ์์์ง์ ์นํ์ด์ง์ ๋ก๋ฉ ์๋๋ฅผ ํ๊ฐ ์์๋ก ์ผ์ต๋๋ค. ํนํ, ๋ค์๊ณผ ๊ฐ์ ์ด์ ๋ก ๋ก๋ฉ ์๋๋ ๊ฒ์์์ง ์ต์ ํ(SEO)์์ ์ค์ํ ์์น๋ฅผ ์ฐจ์งํฉ๋๋ค.
- ์ฌ์ฉ์ ๊ฒฝํ ๊ฐ์ : ๋น ๋ฅด๊ฒ ๋ก๋ฉ๋๋ ํ์ด์ง๋ ์ฌ์ฉ์ ์ดํ๋ฅ ์ ์ค์ด๊ณ ํ์ด์ง ์ฒด๋ฅ ์๊ฐ์ ๋๋ฆฝ๋๋ค.
- ๊ฒ์ ๋ญํน ํฅ์: ๊ตฌ๊ธ์ ๋น๋กฏํ ์ฃผ์ ๊ฒ์์์ง์ ๋ก๋ฉ ์๋๊ฐ ๋น ๋ฅธ ํ์ด์ง๋ฅผ ์ฐ์ ์ ์ผ๋ก ๋ ธ์ถํฉ๋๋ค.
- ๊ด๊ณ ๋ฐ ์์ต ์ต์ ํ: ๋๋ฆฐ ๋ก๋ฉ์ ๊ด๊ณ ํด๋ฆญ๋ฅ ์๋ ์ํฅ์ ๋ฏธ์นฉ๋๋ค.
2. DevTools๋ฅผ ํ์ฉํ ๋ก๋ฉ ์๋ ๋ถ์
Chrome DevTools๋ ๋ก๋ฉ ์๋๋ฅผ ๋ถ์ํ๋ ๋ฐ ์ ์ฉํ ๋๊ตฌ์ ๋๋ค. ๋ค์์ DevTools๋ฅผ ํ์ฉํ๋ ๋จ๊ณ๋ณ ๋ฐฉ๋ฒ์ ๋๋ค.
- DevTools ์ด๊ธฐ: ๋ธ๋ผ์ฐ์ ์์
F12
๋๋Ctrl+Shift+I
๋ฅผ ๋๋ฌ DevTools๋ฅผ ์คํํฉ๋๋ค. - ์ฑ๋ฅ ํญ ์ฌ์ฉ: "Performance" ํญ์ ์ ํํ ํ ๋ นํ ๋ฒํผ(โบ๏ธ)์ ๋๋ฌ ๋ก๋ฉ ๊ณผ์ ์ ๊ธฐ๋กํฉ๋๋ค.
- ๋ก๋ฉ ์์ ํ์ธ: ๋ นํ๋ ๋ฐ์ดํฐ๋ฅผ ํตํด ์ด๋ค ์์๊ฐ ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋์ง ์๊ฐ์ ์ผ๋ก ํ์ ํฉ๋๋ค. ๊ด๊ณ , ๋์์, ์ด๋ฏธ์ง ๋ฑ ํน์ ์์๊ฐ ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋์ง ํ์ธํฉ๋๋ค.
3. ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋ ์์ ์์ ๋ฐฉ๋ฒ
์์ฐจ ๋ก๋ฉ์ ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ๋์ด๋ ์ต๊ณ ์ ๋ฐฉ๋ฒ์ ๋๋ค.
3.1 ๊ด๊ณ ์ต์ ํ
- Lazy Loading ์ ์ฉ: ๊ด๊ณ ๊ฐ ํ๋ฉด์ ํ์๋๊ธฐ ์ ๊น์ง ๋ก๋ฉ์ ์ง์ฐ์ํต๋๋ค.
- ๊ด๊ณ ์์น ์กฐ์ : ์ฌ์ฉ์์๊ฒ ๋ ์ค์ํ ์์น๋ก ์ด๋ํด ํ์ด์ง์ ํต์ฌ ์ฝํ ์ธ ๋ก๋ฉ์ ์ฐ์ ์ํฉ๋๋ค.
3.2 ์ด๋ฏธ์ง ์ต์ ํ
- ํฌ๋งท ๋ณ๊ฒฝ: JPEG ๋์ WebP์ ๊ฐ์ ๊ฒฝ๋ ํฌ๋งท ์ฌ์ฉ.
- ํฌ๊ธฐ ์กฐ์ : ์ฌ์ฉ์ ํ๋ฉด์ ์ ํฉํ ํฌ๊ธฐ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ฏธ๋ฆฌ ์กฐ์ .
- Lazy Loading ์ ์ฉ: ํ๋ฉด์ ๋ณด์ด๋ ์๊ฐ์๋ง ์ด๋ฏธ์ง๋ฅผ ๋ก๋ฉ.
์ด๋ฏธ์ง๋ฅผ ์์ฐจ ๋ก๋ฉ์ ํ์ฉํด์ ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ๊ฐ์ ํฉ๋๋ค.
<img data-src="example.jpg" alt="Lazy Load Example" class="lazy-load" />
<script>
const lazyImages = document.querySelectorAll('.lazy-load');
const lazyLoadObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // ์ค์ ์ด๋ฏธ์ง ๋ก๋
img.classList.remove('lazy-load');
observer.unobserve(img); // ๋ก๋ ์๋ฃ ํ ๊ด์ฐฐ ์ค๋จ
}
});
});
lazyImages.forEach(img => lazyLoadObserver.observe(img));
</script>
3.3 ๋์์ ์ต์ ํ
- ์๋ฒ ๋ ๋์ ์ธ๋ค์ผ ์ฌ์ฉ: ๋์์ ๋์ ์ ์ ์ด๋ฏธ์ง(์ธ๋ค์ผ)๋ฅผ ๋จผ์ ํ์.
- ๋น๋์ค ํฌ๋งท ์ต์ ํ: ๊ฐ๋ณ๊ณ ๋น ๋ฅด๊ฒ ๋ก๋ฉ๋๋ ํฌ๋งท(H.265, WebM) ์ฌ์ฉ.
4. ํต์ฌ ์ฝํ ์ธ ๋ฅผ ๊ฐ์ฅ ๋จผ์ ๋ก๋ฉ
ํ์ด์ง ์ ์ ์ ์ฌ์ฉ์๊ฐ ๊ฐ์ฅ ๋จผ์ ๋ณด๋ ์์๊ฐ ํต์ฌ์ ๋๋ค. ๋ค์์ ๊ณ ๋ คํด ์ฐ์ ์์๋ฅผ ์ค์ ํ์ธ์.
- ๊ฐ์ฅ ๋์ ๋๋ ์ฝํ ์ธ ํ์ธ: ์ด๊ธฐ ๋ก๋ฉ ํ๋ฉด์์ ์ฌ์ฉ์ ๋์ ๊ฐ์ฅ ์ ๋ค์ด์ค๋ ์ฝํ ์ธ ๋ฅผ ํ์ ํฉ๋๋ค.
- ๋ฌธ์ ์์ ์๋ณ: ๊ด๊ณ , ์ด๋ฏธ์ง, ๋์์ ๋ฑ ์ถ๊ฐ๋ ์์๊ฐ ๋ก๋ฉ ์๋๋ฅผ ์ ํ์ํจ๋ค๋ฉด ์์น๋ฅผ ์ฌ์กฐ์ ํ๊ฑฐ๋ ์ ๊ฑฐํฉ๋๋ค.
- ์ฑ๋ฅ ํ ์คํธ ๋ฐ๋ณต: ๋ณ๊ฒฝ ํ์๋ DevTools๋ฅผ ์ฌ์ฉํด ์ฑ๋ฅ์ ๋ค์ ํ์ธํฉ๋๋ค.
5. SEO์ ์์ต์ ๊ท ํ ์ ์ง
๊ด๊ณ ์ ์ฝํ ์ธ ๊ฐ ๋ก๋ฉ ์๋์ ๋ฏธ์น๋ ์ํฅ์ ์์ ํ ๋ฐฐ์ ํ ์๋ ์์ต๋๋ค. ํ์ง๋ง ๋ค์ ์์น์ ์ ์งํ๋ฉด ์ต์ ํ์ ์์ต ์ฌ์ด์ ๊ท ํ์ ๋ง์ถ ์ ์์ต๋๋ค.
- ๊ด๊ณ ๊ฐ ์ฝํ ์ธ ๋ฅผ ๋ฐฉํดํ์ง ์๋๋ก ๋ฐฐ์น.
- ์ฌ์ฉ์ ๊ฒฝํ์ ์ต์ฐ์ ์ผ๋ก ๊ณ ๋ ค.
- ์ง์์ ์ธ ์ฑ๋ฅ ํ ์คํธ๋ก ๋ฌธ์ ์์ ์ต์ํ.
๊ฐ์ธ ์๋ฒ์ ๊ฐ์ธ ์ฌ์ดํธ๋ฅผ ์ด์์ค์ด ์๋๊ณ ์๋ ์๋น์ค(๋ธ๋ก๊ทธ)๋ฅผ ์ด์์ค์ด๋ผ๋ฉด ์ด๊ธฐ ๋ก๋ฉ ์๋ ๊ฐ์ ์ ํ๊ณ๊ฐ ์์ผ๋ฉฐ ์ด์์๊ฐ ํ ์ ์๋๊ฒ์ ์ด๊ธฐ ๋ก๋ฉ๋๋ ์ฝํ ์ธ ์ ์ค์๋์ ๋ฐ๋ผ ์์ฐจ ๋ก๋ฉ์ ์ ์ฉํ๋ฏ๋ก์จ ์ด๊ธฐ ๋ก๋ฉ ์๋๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค.