๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์น์ฌ์ดํธ ์ฑ๋ฅ, ์ฌ์ฉ์ ๊ฒฝํ, SEO๋ฅผ ๊ฐ์ ํ๊ธฐ ์ํ ์ฝ์ด ์น ๋ฐ์ดํ ์ดํด ๋ฐ ์ต์ ํ์ ๋ํ ์ข ํฉ ๊ฐ์ด๋์ ๋๋ค.
ํ๋ก ํธ์๋ ์ฑ๋ฅ ์์ง๋์ด๋ง: ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ฝ์ด ์น ๋ฐ์ดํ ๋ง์คํฐํ๊ธฐ
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ ์น์ฌ์ดํธ๋ ์ฌ์ฉ์ ๋ง์กฑ๋, ์ฐธ์ฌ๋, ๊ถ๊ทน์ ์ผ๋ก ๋น์ฆ๋์ค ์ฑ๊ณต์ ๊ฒฐ์ ์ ์ธ ์ญํ ์ ํฉ๋๋ค. Google์ ์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals, CWV)์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ฃผ์ ์ธก๋ฉด์ ์ธก์ ํ๋ ์ผ๋ จ์ ์งํ๋ก, ์น์ฌ์ดํธ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํ ํต์ผ๋ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด ๊ธ์ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์ํํ ๊ฒฝํ์ ๋ณด์ฅํ๊ธฐ ์ํด ๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํ ์ฝ์ด ์น ๋ฐ์ดํ์ ์ดํดํ๊ณ ์ต์ ํํ๋ ํฌ๊ด์ ์ธ ๊ฐ์ด๋๋ฅผ ์ ๊ณตํฉ๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ์ด๋ ๋ฌด์์ธ๊ฐ์?
์ฝ์ด ์น ๋ฐ์ดํ์ ์น ๋ฐ์ดํ์ ํ์ ์งํฉ์ผ๋ก, ์ฌ์ฉ์ ๊ฒฝํ์ ์ธ ๊ฐ์ง ์ฃผ์ ์ธก๋ฉด์ธ ๋ก๋ฉ ์ฑ๋ฅ, ์ํธ์์ฉ, ์๊ฐ์ ์์ ์ฑ์ ์ค์ ์ ๋ก๋๋ค. ์ด ์งํ๋ค์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
- ์ต๋ ์ฝํ ์ธ ๋ ๋๋ง ์๊ฐ (LCP): ๋ทฐํฌํธ ๋ด์์ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์(์: ์ด๋ฏธ์ง, ๋น๋์ค ๋๋ ํ ์คํธ ๋ธ๋ก)๊ฐ ํ์๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ LCP ์ ์๋ 2.5์ด ์ดํ์ ๋๋ค.
- ์ต์ด ์ ๋ ฅ ์ง์ฐ (FID): ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ฒ์ ์ํธ์์ฉ(์: ๋งํฌ ํด๋ฆญ, ๋ฒํผ ํญ, ์ฌ์ฉ์ ์ง์ JavaScript ๊ธฐ๋ฐ ์ปจํธ๋กค ์ฌ์ฉ)ํ๋ ์์ ๋ถํฐ ๋ธ๋ผ์ฐ์ ๊ฐ ํด๋น ์ํธ์์ฉ์ ์ค์ ๋ก ์๋ตํ ์ ์์ ๋๊น์ง์ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ์ข์ FID ์ ์๋ 100๋ฐ๋ฆฌ์ด ์ดํ์ ๋๋ค.
- ๋์ ๋ ์ด์์ ์ด๋ (CLS): ํ์ด์ง๊ฐ ๋ก๋๋๋ ๋์ ํ์ด์ง ์ฝํ ์ธ ๊ฐ ์๊ธฐ์น ์๊ฒ ์ด๋ํ๋ ์ ๋๋ฅผ ์ธก์ ํฉ๋๋ค. ์ข์ CLS ์ ์๋ 0.1 ์ดํ์ ๋๋ค.
์ด๋ฌํ ์งํ๋ค์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น๊ธฐ ๋๋ฌธ์ ์ค์ํฉ๋๋ค. ๋๋ฆฐ ๋ก๋ฉ ์๊ฐ(LCP)์ ์ฌ์ฉ์๋ฅผ ์ข์ ์ํค๊ณ ์ดํ๋ก ์ด์ด์ง ์ ์์ต๋๋ค. ๋ฎ์ ์ํธ์์ฉ์ฑ(FID)์ ์น์ฌ์ดํธ๊ฐ ๋ฐ์์ด ๋๋ฆฌ๊ณ ๋ํ๊ฒ ๋๊ปด์ง๊ฒ ํฉ๋๋ค. ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋(CLS)์ ์ฌ์ฉ์๊ฐ ์๋ชป ํด๋ฆญํ๊ฑฐ๋ ํ์ด์ง์์ ์์น๋ฅผ ์๊ฒ ํ ์ ์์ต๋๋ค.
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์ฝ์ด ์น ๋ฐ์ดํ์ด ์ค์ํ ์ด์
์ฝ์ด ์น ๋ฐ์ดํ ์ต์ ํ๋ ๋ค์๊ณผ ๊ฐ์ ์ด์ ๋ก ๊ธ๋ก๋ฒ ์ฌ์ฉ์์๊ฒ ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ์น์ฌ์ดํธ์ ํนํ ์ค์ํฉ๋๋ค:
- ๋ค์ํ ๋คํธ์ํฌ ํ๊ฒฝ: ์ธํฐ๋ท ์๋์ ๋คํธ์ํฌ ์ ๋ขฐ์ฑ์ ์ง์ญ๋ง๋ค ํฌ๊ฒ ๋ค๋ฆ ๋๋ค. CWV์ ์ต์ ํํ๋ฉด ๊ฐ๋ฐ๋์๊ตญ์ ๋๋ฆฐ ์ธํฐ๋ท ์ฐ๊ฒฐ ์ฌ์ฉ์์๊ฒ๋ ์ข์ ๊ฒฝํ์ ๋ณด์ฅํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ธ๋์ ์ฌ์ฉ์๋ ํ๊ตญ์ ์ฌ์ฉ์์ ๋นํด ํ์ ํ ๋๋ฆฐ ์๋๋ฅผ ๊ฒฝํํ ์ ์์ต๋๋ค.
- ๋ค์ํ ๋๋ฐ์ด์ค ๊ธฐ๋ฅ: ์ฌ์ฉ์๋ค์ ๊ณ ์ฑ๋ฅ ์ค๋งํธํฐ๋ถํฐ ๊ตฌํ ํผ์ฒํฐ์ ์ด๋ฅด๊ธฐ๊น์ง ๊ด๋ฒ์ํ ๋๋ฐ์ด์ค๋ก ์น์ฌ์ดํธ์ ์ ์ํฉ๋๋ค. CWV์ ์ต์ ํํ๋ฉด ์ฒ๋ฆฌ ๋ฅ๋ ฅ๊ณผ ํ๋ฉด ํฌ๊ธฐ์ ๊ด๊ณ์์ด ๋ชจ๋ ๋๋ฐ์ด์ค์์ ์น์ฌ์ดํธ๊ฐ ์ ์๋ํ๋๋ก ๋ณด์ฅํฉ๋๋ค. ๋์ด์ง๋ฆฌ์์์ ๊ตฌํ ์๋๋ก์ด๋ ํฐ์ผ๋ก ์ฌ์ดํธ์ ์ ์ํ๋ ์ฌ์ฉ์๋ฅผ ์๊ฐํด ๋ณด์ธ์.
- ๊ตญ์ SEO: Google์ ์ฝ์ด ์น ๋ฐ์ดํ์ ์์ ์์๋ก ๊ฐ์ฃผํฉ๋๋ค. CWV ์ ์๋ฅผ ๊ฐ์ ํ๋ฉด ํนํ ๋ค๋ฅธ ๊ตญ๊ฐ์ ์ฌ์ฉ์๋ฅผ ์ํ ๊ฒ์ ๊ฒฐ๊ณผ์์ ์น์ฌ์ดํธ์ ๊ฐ์์ฑ์ ๋์ผ ์ ์์ต๋๋ค. CWV ์ต์ ํ๋ ์ผ๋ณธ, ๋ธ๋ผ์ง ๋๋ ๋ ์ผ๊ณผ ๊ฐ์ ์์ฅ์์ SEO ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ๋ฌธํ์ ๊ธฐ๋์น: ์ผ๋ฐ์ ์ธ ์ ์ฉ์ฑ ์์น์ ์ ์ธ๊ณ์ ์ผ๋ก ์ ์ฉ๋์ง๋ง, ์น์ฌ์ดํธ ์๋ ๋ฐ ๋ฐ์์ฑ์ ๋ํ ์ฌ์ฉ์ ๊ธฐ๋์น๋ ๋ฌธํ๋ง๋ค ์ฝ๊ฐ์ฉ ๋ค๋ฅผ ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ธฐ๋์น๋ฅผ ์ถฉ์กฑํ๋๋ก ์ต์ ํ ์ ๋ต์ ๋ง์ถคํํ๋ฉด ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๋์ผ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ค๊ตญ์ ์ฌ์ฉ์๋ ๋งค์ฐ ๋น ๋ฅธ ๋ชจ๋ฐ์ผ ๊ฒฐ์ ์ ์ต์ํ ์ ์์ผ๋ฉฐ ๋ค๋ฅธ ๋ชจ๋ฐ์ผ ์ ํ๋ฆฌ์ผ์ด์ ์์๋ ๋น์ทํ ์๋๋ฅผ ๊ธฐ๋ํ ์ ์์ต๋๋ค.
- ๋ชจ๋๋ฅผ ์ํ ์ ๊ทผ์ฑ: ์ฑ๋ฅ์ด ๋ฐ์ด๋ ์น์ฌ์ดํธ๋ ๋ณธ์ง์ ์ผ๋ก ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์๊ฒ ๋ ์ฝ๊ฒ ์ ๊ทผํ ์ ์์ต๋๋ค. CWV์ ์ต์ ํํ๋ฉด ํ๋ฉด ํ๋ ๊ธฐ์ ๊ฐ์ ๋ณด์กฐ ๊ธฐ์ ์ ์์กดํ๋ ์ฌ์ฉ์์ ๊ฒฝํ์ ํฅ์์ํฌ ์ ์์ต๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ ๋ฌธ์ ์ง๋จ
์ฝ์ด ์น ๋ฐ์ดํ์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ์ต์ ํํ๊ธฐ ์ ์ ๊ธฐ์กด ๋ฌธ์ ๋ฅผ ํ์ ํด์ผ ํฉ๋๋ค. ๋ค์๊ณผ ๊ฐ์ ์ฌ๋ฌ ๋๊ตฌ๊ฐ ์ด๋ฌํ ๋ฌธ์ ๋ฅผ ์ง๋จํ๋ ๋ฐ ๋์์ด ๋ ์ ์์ต๋๋ค:
- Google PageSpeed Insights: ์ด ๋ฌด๋ฃ ๋๊ตฌ๋ ์ฝ์ด ์น ๋ฐ์ดํ ์ ์ ๋ฐ ๊ฐ์ ๊ถ์ฅ ์ฌํญ์ ํฌํจํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋ํ ์์ธํ ๋ถ์์ ์ ๊ณตํฉ๋๋ค. ๋ชจ๋ฐ์ผ ๋ฐ ๋ฐ์คํฌํฑ ์ ์๋ฅผ ๋ชจ๋ ์ ๊ณตํฉ๋๋ค.
- Google Search Console: Search Console์ ์ฝ์ด ์น ๋ฐ์ดํ ๋ณด๊ณ ์๋ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์น์ฌ์ดํธ์ CWV ์ฑ๋ฅ ๊ฐ์๋ฅผ ์ ๊ณตํฉ๋๋ค. ์ด๋ ์ฌ๋ฌ ํ์ด์ง์ ์ํฅ์ ๋ฏธ์น๋ ๊ด๋ฒ์ํ ํจํด๊ณผ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
- WebPageTest: ์ ์ธ๊ณ ๋ค์ํ ์์น์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํ ์คํธํ๊ณ ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด ๋ฐ ์ฅ์น ๊ธฐ๋ฅ์ ์๋ฎฌ๋ ์ด์ ํ ์ ์๋ ๊ฐ๋ ฅํ๊ณ ๋ค์ฌ๋ค๋ฅํ ๋๊ตฌ์ ๋๋ค.
- Chrome DevTools: Chrome DevTools์ ์ฑ๋ฅ ํญ์ ์ฌ์ฉํ๋ฉด ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ค์๊ฐ์ผ๋ก ๊ธฐ๋กํ๊ณ ๋ถ์ํ์ฌ ๋ณ๋ชฉ ํ์ ๋ฐ ์ต์ ํ ์์ญ์ ๋ํ ์์ธํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํ ์ ์์ต๋๋ค.
- Lighthouse: ์นํ์ด์ง ํ์ง ๊ฐ์ ์ ์ํ ์คํ ์์ค ์๋ํ ๋๊ตฌ์ ๋๋ค. ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ, SEO ๋ฑ์ ๋ํ ๊ฐ์ฌ ๊ธฐ๋ฅ์ ์ ๊ณตํฉ๋๋ค. Lighthouse๋ Chrome DevTools์ ๋ด์ฅ๋์ด ์์ต๋๋ค.
์ด๋ฌํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ ๋ ๋ค์์ ๊ธฐ์ตํ์ธ์:
- ๋ค์ํ ์์น์์ ํ ์คํธ: WebPageTest์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ๋ค์ํ ์ง๋ฆฌ์ ์์น์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํ ์คํธํ์ฌ ์ง์ญ๋ณ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํฉ๋๋ค.
- ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด ์๋ฎฌ๋ ์ด์ : ๋ค์ํ ๋คํธ์ํฌ ์๋(์: 3G, 4G, 5G)์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ํ ์คํธํ์ฌ ๋๋ฆฐ ์ธํฐ๋ท ์ฐ๊ฒฐ์ ์ฌ์ฉํ๋ ์ฌ์ฉ์์๊ฒ ์ด๋ป๊ฒ ์๋ํ๋์ง ์ดํดํฉ๋๋ค.
- ์ค์ ์ฅ์น ์ฌ์ฉ: ํนํ ๊ตฌํ ๋๋ ์ ์ฌ์ ์ฅ์น๋ฅผ ํฌํจํ ์ค์ ์ฅ์น์์ ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ฌ ๋ค์ํ ํ๋์จ์ด์์ ์ ์๋ํ๋์ง ํ์ธํฉ๋๋ค.
LCP (์ต๋ ์ฝํ ์ธ ๋ ๋๋ง ์๊ฐ) ์ต์ ํ
LCP๋ ๋ก๋ฉ ์ฑ๋ฅ, ํนํ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์์๊ฐ ํ์๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋ค์์ LCP๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ ๋ต์ ๋๋ค:
- ์ด๋ฏธ์ง ์ต์ ํ:
- ์ด๋ฏธ์ง ์์ถ: ImageOptim (Mac), TinyPNG ๋๋ Cloudinary์ ๊ฐ์ ์จ๋ผ์ธ ์๋น์ค์ ๊ฐ์ ์ด๋ฏธ์ง ์์ถ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ง ์ ํ ์์ด ์ด๋ฏธ์ง ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์.
- ์ ์ ํ ์ด๋ฏธ์ง ํ์ ์ฌ์ฉ: JPEG ๋๋ PNG์ ๊ฐ์ ๊ธฐ์กด ํ์์ ๋นํด ๋ ๋์ ์์ถ ๋ฐ ํ์ง์ ์ ๊ณตํ๋ WebP ๋๋ AVIF์ ๊ฐ์ ์ต์ ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํ์ธ์.
- ๋ฐ์ํ ์ด๋ฏธ์ง ์ฌ์ฉ: ์ฌ์ฉ์์ ์ฅ์น ๋ฐ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ํฌ๊ธฐ๋ฅผ ์ ๊ณตํ๋ ค๋ฉด `srcset` ์์ฑ์ `img` ํ๊ทธ์์ ์ฌ์ฉํ์ธ์.
- ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋(Lazy-load): ํ๋ฉด ๋ฐ ์ด๋ฏธ์ง์ ๋ก๋ฉ์ ํ์ํ ๋๊น์ง ์ฐ๊ธฐํ์ฌ ์ด๊ธฐ ํ์ด์ง ๋ก๋ ์๊ฐ์ ๊ฐ์ ํฉ๋๋ค. `loading=\"lazy\"` ์์ฑ ๋๋ lazysizes์ ๊ฐ์ JavaScript ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ฝํ ์ธ ์ ์ก ๋คํธ์ํฌ(CDN) ์ฌ์ฉ: CDN์ ์น์ฌ์ดํธ ์์ฐ์ ๋ณต์ฌ๋ณธ์ ์ ์ธ๊ณ ์๋ฒ์ ์ ์ฅํ์ฌ ์ฌ์ฉ์๊ฐ ์์ ์ ์์น์์ ๊ฐ์ฅ ๊ฐ๊น์ด ์๋ฒ์์ ๋ค์ด๋ก๋ํ ์ ์๋๋ก ํฉ๋๋ค. ์ด๋ ๋๊ธฐ ์๊ฐ์ ํฌ๊ฒ ์ค์ด๊ณ LCP๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค. Cloudflare, Amazon CloudFront, Akamai ๋ฑ์ด ์์ต๋๋ค.
- ํ
์คํธ ์ต์ ํ:
- ์์คํ ํฐํธ ์ฌ์ฉ: ์์คํ ํฐํธ๋ ์ฌ์ฉ์ ์ฅ์น์ ๋ฏธ๋ฆฌ ์ค์น๋์ด ์์ผ๋ฏ๋ก ํฐํธ ํ์ผ์ ๋ค์ด๋ก๋ํ ํ์๊ฐ ์์ต๋๋ค. ์ด๋ ํนํ ๋ชจ๋ฐ์ผ ์ฅ์น์์ LCP๋ฅผ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ์น ํฐํธ ์ต์ ํ: ์น ํฐํธ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒฝ์ฐ, WOFF2 ํ์์ ์ฌ์ฉํ๊ณ ํ์ํ ๋ฌธ์๋ง ํฌํจํ๋๋ก ํฐํธ๋ฅผ ์๋ธ์ ํ ํ๋ฉฐ `` ํ๊ทธ๋ก ํฐํธ๋ฅผ ๋ฏธ๋ฆฌ ๋ก๋ํ์ฌ ์ต์ ํํ์ธ์.
- ๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค ์ต์ํ: ์ด๊ธฐ ๋ ๋๋ง ์ง์ฐ์ ํผํ๊ธฐ ์ํด HTML์ด ๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ์ ๋ฌ๋๋๋ก ํ์ธ์.
- ์๋ฒ ์๋ต ์๊ฐ ์ต์ ํ:
- ๋น ๋ฅธ ์น ํธ์คํธ ์ ํ: ๋น ๋ฅธ ์น ํธ์คํธ๋ LCP๋ฅผ ํฌํจํ์ฌ ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ์ ํฌ๊ฒ ํฅ์์ํฌ ์ ์์ต๋๋ค.
- ์บ์ฑ ์ฌ์ฉ: ์๋ฒ ์ธก ์บ์ฑ์ ๊ตฌํํ์ฌ ์์ฃผ ์ก์ธ์คํ๋ ๋ฐ์ดํฐ๋ฅผ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅํจ์ผ๋ก์จ ๋งค๋ฒ ๋ฐ์ดํฐ๋ฒ ์ด์ค์์ ๊ฐ์ ธ์ฌ ํ์์ฑ์ ์ค์ ๋๋ค.
- ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ ์ต์ ํ: ๋ฐ์ดํฐ๋ฒ ์ด์ค ์ฟผ๋ฆฌ๊ฐ ํจ์จ์ ์ด๊ณ ์ต์ ํ๋์ด ์๋ต ์๊ฐ์ ์ต์ํํ๋๋ก ๋ณด์ฅํฉ๋๋ค.
- ๋ฆฌ๋ค์ด๋ ์ ์ต์ํ: ๋ฆฌ๋ค์ด๋ ์ ์ ํ์ด์ง ๋ก๋ ์๊ฐ์ ์๋นํ ๋๊ธฐ ์๊ฐ์ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ์ ๋ฆฌ๋ค์ด๋ ์ ์๋ฅผ ์ต์ํํ์ธ์.
- ์ค์ ๋ฆฌ์์ค ๋ฏธ๋ฆฌ ๋ก๋:
- `` ํ๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์ด๋ฏธ์ง, ํฐํธ, CSS ํ์ผ๊ณผ ๊ฐ์ ์ค์ ๋ฆฌ์์ค๋ฅผ ๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ๋ค์ด๋ก๋ํ๋๋ก ์ง์ํ์ธ์.
- CSS ์ ์ก ์ต์ ํ:
- CSS ์ถ์(Minify): ๋ถํ์ํ ๊ณต๋ฐฑ๊ณผ ์ฃผ์์ ์ ๊ฑฐํ์ฌ CSS ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์.
- ํต์ฌ CSS ์ธ๋ผ์ธํ: ๋ ๋๋ง ์ฐจ๋จ์ ํผํ๊ธฐ ์ํด ํ์ด์ง์ ์ด๊ธฐ ๋ ๋๋ง์ ํ์ํ CSS๋ฅผ ์ธ๋ผ์ธ์ผ๋ก ํฌํจํ์ธ์.
- ๋นํต์ฌ CSS ์ง์ฐ ๋ก๋: ๋นํต์ฌ CSS ๋ก๋ฉ์ ํ์ด์ง์ ์ด๊ธฐ ๋ ๋๋ง ์ดํ๋ก ์ฐ๊ธฐํ์ธ์.
- 'ํ์ด๋ก' ์์ ๊ณ ๋ ค:
- 'ํ์ด๋ก' ์์(์ข ์ข ์๋จ์ ์๋ ํฐ ์ด๋ฏธ์ง ๋๋ ํ ์คํธ ๋ธ๋ก)๊ฐ ์ผ๋ฐ์ ์ผ๋ก LCP ํ๋ณด์ด๋ฏ๋ก ์ต์ ํ๋์ด ๋น ๋ฅด๊ฒ ๋ก๋๋๋๋ก ํ์ธ์.
FID (์ต์ด ์ ๋ ฅ ์ง์ฐ) ์ต์ ํ
FID๋ ์ํธ์์ฉ์ฑ, ํนํ ๋ธ๋ผ์ฐ์ ๊ฐ ์ฌ์ฉ์์ ์ฒซ ๋ฒ์งธ ์ํธ์์ฉ์ ์๋ตํ๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค. ๋ค์์ FID๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ ๋ต์ ๋๋ค:
- JavaScript ์คํ ์๊ฐ ๋จ์ถ:
- JavaScript ์ต์ํ: ๋ถํ์ํ ๊ธฐ๋ฅ๊ณผ ์์กด์ฑ์ ์ ๊ฑฐํ์ฌ ์น์ฌ์ดํธ์ JavaScript ์ฝ๋ ์์ ์ค์ด์ธ์.
- ์ฝ๋ ๋ถํ (Code Splitting): Webpack ๋๋ Parcel๊ณผ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ JavaScript ์ฝ๋๋ฅผ ๋ ์์ ์กฐ๊ฐ์ผ๋ก ๋๋๊ณ ํ์ํ ๋๋ง ๋ก๋ํ์ธ์.
- ์ฌ์ฉ๋์ง ์๋ JavaScript ์ ๊ฑฐ: ์น์ฌ์ดํธ์์ ์ฌ์ฉ๋์ง ์๋ JavaScript ์ฝ๋๋ฅผ ์๋ณํ๊ณ ์ ๊ฑฐํ์ธ์.
- JavaScript ์คํ ์ง์ฐ: `script` ํ๊ทธ์ `async` ๋๋ `defer` ์์ฑ์ ์ฌ์ฉํ์ฌ ๋นํต์ฌ JavaScript ์ฝ๋์ ์คํ์ ํ์ด์ง ์ด๊ธฐ ๋ ๋๋ง ์ดํ๋ก ์ง์ฐ์ํค์ธ์.
- ๊ธด ์์ ํผํ๊ธฐ: ์ฅ์๊ฐ ์คํ๋๋ JavaScript ์์ ์ ๋ ์๊ณ ๊ด๋ฆฌํ๊ธฐ ์ฌ์ด ์์ ์ผ๋ก ๋ถํ ํ์ฌ ๋ธ๋ผ์ฐ์ ๊ฐ ์๋ตํ์ง ์๊ฒ ๋๋ ๊ฒ์ ๋ฐฉ์งํ์ธ์.
- ์๋ํํฐ ์คํฌ๋ฆฝํธ ์ต์ ํ:
- ๋๋ฆฐ ์๋ํํฐ ์คํฌ๋ฆฝํธ ์๋ณ: Chrome DevTools์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์น์ฌ์ดํธ๋ฅผ ๋๋ฆฌ๊ฒ ๋ง๋๋ ์๋ํํฐ ์คํฌ๋ฆฝํธ๋ฅผ ์๋ณํ์ธ์.
- ์๋ํํฐ ์คํฌ๋ฆฝํธ ๋ก๋ฉ ์ง์ฐ: ๋นํต์ฌ ์๋ํํฐ ์คํฌ๋ฆฝํธ์ ๋ก๋ฉ์ ํ์ด์ง ์ด๊ธฐ ๋ ๋๋ง ์ดํ๋ก ์ง์ฐ์ํค์ธ์.
- ์๋ํํฐ ์คํฌ๋ฆฝํธ ๋ก์ปฌ ํธ์คํ : ๊ฐ๋ฅํ๋ค๋ฉด ์๋ํํฐ ์คํฌ๋ฆฝํธ๋ฅผ ๋ก์ปฌ์์ ํธ์คํ ํ์ฌ ๋๊ธฐ ์๊ฐ์ ์ค์ด๊ณ ์ฑ๋ฅ์ ๊ฐ์ ํ์ธ์.
- ๋ถํ์ํ ์๋ํํฐ ์คํฌ๋ฆฝํธ ์ ๊ฑฐ: ์น์ฌ์ดํธ์ ์ค์ํ ๊ฐ์น๋ฅผ ์ ๊ณตํ์ง ์๋ ๋ถํ์ํ ์๋ํํฐ ์คํฌ๋ฆฝํธ๋ฅผ ์ ๊ฑฐํ์ธ์.
- ์น ์์ปค(Web Worker) ์ฌ์ฉ:
- ๋น UI ์์ ์ ์น ์์ปค๋ก ์ด๋ํ์ฌ ๋ฉ์ธ ์ค๋ ๋ ์ฐจ๋จ์ ํผํ๊ณ ๋ฐ์์ฑ์ ๊ฐ์ ํ์ธ์. ์น ์์ปค๋ฅผ ์ฌ์ฉํ๋ฉด ์ฌ์ฉ์ ์ธํฐํ์ด์ค์ ์ํฅ์ ์ฃผ์ง ์๊ณ ๋ฐฑ๊ทธ๋ผ์ด๋์์ JavaScript ์ฝ๋๋ฅผ ์คํํ ์ ์์ต๋๋ค.
- ์ด๋ฒคํธ ํธ๋ค๋ฌ ์ต์ ํ:
- ํด๋ฆญ ๋๋ ์คํฌ๋กค ๋ฆฌ์ค๋์ ๊ฐ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์ต์ ํ๋์ด ์ฑ๋ฅ ๋ณ๋ชฉ ํ์์ ์ผ์ผํค์ง ์๋๋ก ํ์ธ์.
- ์๋ํํฐ Iframes ์ง์ฐ ๋ก๋:
- Iframes, ํนํ ๋ค๋ฅธ ๋๋ฉ์ธ(์: YouTube ๋์์ ๋๋ ์์ ๋ฏธ๋์ด ์๋ฒ ๋)์์ ์ฝํ ์ธ ๋ฅผ ๋ก๋ํ๋ Iframes๋ FID์ ์๋นํ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ฌ์ฉ์๊ฐ ์คํฌ๋กคํ์ฌ ๊ทผ์ฒ์ ๋๋ฌํ ๋๋ง ๋ก๋๋๋๋ก ์ง์ฐ ๋ก๋ํ์ธ์.
CLS (๋์ ๋ ์ด์์ ์ด๋) ์ต์ ํ
CLS๋ ์๊ฐ์ ์์ ์ฑ, ํนํ ํ์ด์ง ์ฝํ ์ธ ์ ์๊ธฐ์น ์์ ์ด๋์ ์ธก์ ํฉ๋๋ค. ๋ค์์ CLS๋ฅผ ์ต์ ํํ๊ธฐ ์ํ ๋ช ๊ฐ์ง ์ ๋ต์ ๋๋ค:
- ์ด๋ฏธ์ง ๋ฐ ๋น๋์ค์ ํญ์ ํฌ๊ธฐ ์์ฑ ํฌํจ:
- ์ฝํ ์ธ ๊ฐ ๋ก๋๋๊ธฐ ์ ์ ํ์ด์ง์ ํ์ํ ๊ณต๊ฐ์ ์์ฝํ๊ธฐ ์ํด `img` ๋ฐ `video` ์์์ ํญ์ `width` ๋ฐ `height` ์์ฑ์ ์ง์ ํ์ธ์. ์ด๋ ์ฝํ ์ธ ๊ฐ ๋ ๋๋ง๋ ๋ ๋ ์ด์์ ์ด๋์ ๋ฐฉ์งํฉ๋๋ค.
- ์ผ๊ด๋ ํฌ๊ธฐ ์กฐ์ ์ ์ํด CSS `aspect-ratio` ์์ฑ์ ์ฌ์ฉํ์ธ์.
- ๊ด๊ณ ๋ฅผ ์ํ ๊ณต๊ฐ ํ๋ณด:
- ์๋ฆฌ ํ์์๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๊ด๊ณ ์ฌ๋กฏ์ ์น์๋ฅผ ๋ฏธ๋ฆฌ ์ง์ ํ์ฌ ๊ด๊ณ ๋ฅผ ์ํ ๊ณต๊ฐ์ ํ๋ณดํ์ธ์. ์ด๋ ๊ด๊ณ ๊ฐ ๋ก๋๋ ๋ ๋ ์ด์์ ์ด๋์ ๋ฐฉ์งํฉ๋๋ค.
- ๊ธฐ์กด ์ฝํ
์ธ ์์ ์ ์ฝํ
์ธ ์ฝ์
ํผํ๊ธฐ:
- ์ฌ์ฉ์ ์ํธ์์ฉ์ ๋ํ ์๋ต์ด ์๋ ํ, ๊ธฐ์กด ์ฝํ ์ธ ์์ ์ ์ฝํ ์ธ ๋ฅผ ์ฝ์ ํ๋ ๊ฒ์ ํผํ์ธ์. ์ด๋ ์๊ธฐ์น ์์ ๋ ์ด์์ ์ด๋์ ์ผ์ผํค๊ณ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ฐฉํดํ ์ ์์ต๋๋ค.
- ๋ ์ด์์ ํธ๋ฆฌ๊ฑฐ ์์ฑ ๋์ ํธ๋์คํผ ์ฌ์ฉ:
- ์์๋ฅผ ์ ๋๋ฉ์ด์ ํํ๊ธฐ ์ํด ๋ ์ด์์์ ํธ๋ฆฌ๊ฑฐํ๋ ์์ฑ(์: `top`, `left`) ๋์ CSS `transform` ์์ฑ(์: `translate`, `scale`, `rotate`)์ ์ฌ์ฉํ์ธ์. ํธ๋์คํผ์ ์ฑ๋ฅ์ด ๋ ์ข๊ณ ๋ ์ด์์ ์ด๋์ ์ผ์ผํค์ง ์์ต๋๋ค.
- ์ ๋๋ฉ์ด์
์ด ๋ ์ด์์ ์ด๋์ ์ ๋ฐํ์ง ์๋๋ก ํ์ธ:
- ํ์ด์ง ๋ ์ด์์์ ๋ณ๊ฒฝํ๋ ์ ๋๋ฉ์ด์ ์ ํผํด์ผ ํฉ๋๋ค. ์ ๋๋ฉ์ด์ ํจ๊ณผ๋ฅผ ์ํด margin ๋๋ padding๊ณผ ๊ฐ์ ์์ฑ ๋์ CSS transform ์์ฑ์ ์ฌ์ฉํ์ธ์.
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์์ ํ
์คํธ:
- ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์์ ์น์ฌ์ดํธ๋ฅผ ํ ์คํธํ์ฌ ๋ค์ํ ์ฅ์น์์ ๋ฐ์ํ ์ ์๋ ๋ ์ด์์ ์ด๋์ ์๋ณํ๊ณ ์์ ํ์ธ์.
์ฝ์ด ์น ๋ฐ์ดํ ์ต์ ํ๋ฅผ ์ํ ๊ธ๋ก๋ฒ ๊ณ ๋ ค์ฌํญ
๊ธ๋ก๋ฒ ์ฌ์ฉ์๋ฅผ ์ํด ์ฝ์ด ์น ๋ฐ์ดํ์ ์ต์ ํํ ๋๋ ๋ค์ ์ฌํญ์ ๊ณ ๋ คํ์ธ์:
- ํ์งํ:
- ์ด๋ฏธ์ง ์ต์ ํ: ๋ฌธํ์ ์ ํธ๋์ ์ฝํ ์ธ ๊ด๋ จ์ฑ์ ๊ณ ๋ คํ์ฌ ๊ฐ ์ง์ญ์ ๋ง๊ฒ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํ์ธ์. ์๋ฅผ ๋ค์ด, ๋ถ๋ฏธ ์ฌ์ฉ์์๊ฒ ์ ํตํ๋ ์ด๋ฏธ์ง๊ฐ ์์์์์๋ ํจ๊ณผ์ ์ด์ง ์์ ์ ์์ต๋๋ค.
- ํฐํธ ์ต์ ํ: ์น ํฐํธ๊ฐ ์น์ฌ์ดํธ์์ ์ฌ์ฉ๋๋ ๋ชจ๋ ์ธ์ด๋ฅผ ์ง์ํ๋์ง ํ์ธํ์ธ์. ์ ๋์ฝ๋ ๋ฒ์๋ฅผ ์ฌ์ฉํ์ฌ ํน์ ์ธ์ด์ ํ์ํ ๋ฌธ์๋ง ๋ก๋ํ์ธ์.
- ์ฝํ ์ธ ์ ์ก: ๋ค์ํ ์ง์ญ์ ์๋ฒ๋ฅผ ๋ CDN์ ์ฌ์ฉํ์ฌ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ์น์ฌ์ดํธ ์์ฐ์ด ๋น ๋ฅด๊ฒ ์ ์ก๋๋๋ก ๋ณด์ฅํ์ธ์.
- ๋ชจ๋ฐ์ผ ์ฐ์ ์ ๊ทผ ๋ฐฉ์:
- ๋ชจ๋ฐ์ผ ์ฅ์น๊ฐ ๊ฐ๋ฐ๋์๊ตญ์์ ๋ง์ ์ฌ์ฉ์๊ฐ ์ธํฐ๋ท์ ์ ์ํ๋ ์ฃผ์ ์๋จ์ด๋ฏ๋ก, ๋ชจ๋ฐ์ผ ์ฅ์น์ ๋ง๊ฒ ์น์ฌ์ดํธ๋ฅผ ๋จผ์ ์ค๊ณํ๊ณ ์ต์ ํํ์ธ์.
- ์ ๊ทผ์ฑ:
- ์ฌ์ฉ์์ ์์น์ ๊ด๊ณ์์ด ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์๊ฐ ์น์ฌ์ดํธ์ ์ ๊ทผํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์. WCAG (์น ์ฝํ ์ธ ์ ๊ทผ์ฑ ์ง์นจ)์ ๊ฐ์ ์ ๊ทผ์ฑ ์ง์นจ์ ๋ฐ๋ผ ์น์ฌ์ดํธ๋ฅผ ๋์ฑ ํฌ๊ด์ ์ผ๋ก ๋ง๋์ธ์.
- ์ฑ๋ฅ์ ์ ๊ธฐ์ ์ผ๋ก ๋ชจ๋ํฐ๋ง:
- ์น์ฌ์ดํธ์ ์ฝ์ด ์น ๋ฐ์ดํ ์ ์๋ฅผ ์ง์์ ์ผ๋ก ๋ชจ๋ํฐ๋งํ๊ณ ๋ฐ์ํ ์ ์๋ ์๋ก์ด ๋ฌธ์ ๋ฅผ ์๋ณํ์ธ์. Google Search Console ๋ฐ PageSpeed Insights์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์งํ ์ํฉ์ ์ถ์ ํ๊ณ ๊ฐ์ ์์ญ์ ์๋ณํ์ธ์.
- ์ง์ญ ํธ์คํ
๊ณ ๋ ค:
- ํธ๋ํฝ์ด ๋ง์ ํน์ ์ง์ญ์ ๊ฒฝ์ฐ, ๋๊ธฐ ์๊ฐ์ ์ค์ด๊ธฐ ์ํด ํด๋น ์ง์ญ์ ์์นํ ์๋ฒ์ ์น์ฌ์ดํธ๋ฅผ ํธ์คํ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
์ฌ๋ก ์ฐ๊ตฌ: ์ฝ์ด ์น ๋ฐ์ดํ์ ์ต์ ํํ ๊ธ๋ก๋ฒ ๊ธฐ์ ๋ค
๋ช๋ช ๊ธ๋ก๋ฒ ๊ธฐ์ ๋ค์ ์ฝ์ด ์น ๋ฐ์ดํ์ ๋ง์ถฐ ์น์ฌ์ดํธ๋ฅผ ์ฑ๊ณต์ ์ผ๋ก ์ต์ ํํ์ต๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ์์์ ๋๋ค:
- Google: Google์ ์ต์ ์ด๋ฏธ์ง ํ์ ์ฌ์ฉ, ์ด๋ฏธ์ง ์ง์ฐ ๋ก๋, JavaScript ์คํ ์ต์ ํ ๋ฑ ์์ฒด ์น์ฌ์ดํธ์ ๋ค์ํ ์ต์ ํ๋ฅผ ๊ตฌํํ์ต๋๋ค.
- YouTube: YouTube๋ LCP๋ฅผ ๊ฐ์ ํ๊ณ CLS๋ฅผ ์ค์ด๊ธฐ ์ํด ๋์์ ํ๋ ์ด์ด๋ฅผ ์ต์ ํํ์ฌ ์ฌ์ฉ์์๊ฒ ๋ ๋์ ์์ฒญ ๊ฒฝํ์ ์ ๊ณตํฉ๋๋ค.
- Amazon: Amazon์ ์ด๋ฏธ์ง ์ต์ ํ, ์ฝ๋ ๋ถํ , ์๋ฒ ์ธก ์บ์ฑ ๋ฑ ์ ์์๊ฑฐ๋ ์น์ฌ์ดํธ์ ๋ค์ํ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ๊ตฌํํ์ต๋๋ค.
์ด๋ฌํ ์ฌ๋ก ์ฐ๊ตฌ๋ค์ ์ฝ์ด ์น ๋ฐ์ดํ ์ต์ ํ๊ฐ ์น์ฌ์ดํธ ์ฑ๋ฅ ๋ฐ ์ฌ์ฉ์ ๊ฒฝํ์ ์๋นํ ์ํฅ์ ๋ฏธ์ณ ์ฐธ์ฌ๋, ์ ํ์จ ๋ฐ ์์ต ์ฆ๊ฐ๋ก ์ด์ด์ง ์ ์์์ ๋ณด์ฌ์ค๋๋ค.
๊ฒฐ๋ก
์ฝ์ด ์น ๋ฐ์ดํ ์ต์ ํ๋ ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ๋ฐ์์ฑ์ด ์ข์ผ๋ฉฐ ์๊ฐ์ ์ผ๋ก ์์ ์ ์ธ ์น์ฌ์ดํธ ๊ฒฝํ์ ์ ๊ณตํ๋ ๋ฐ ํ์์ ์ ๋๋ค. ์ด ๊ธ์ ์ค๋ช ๋ ์ฃผ์ ์งํ๋ฅผ ์ดํดํ๊ณ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์ง๋จํ๋ฉฐ ์ต์ ํ ์ ๋ต์ ๊ตฌํํจ์ผ๋ก์จ ์น์ฌ์ดํธ์ ์ฝ์ด ์น ๋ฐ์ดํ ์ ์๋ฅผ ๊ฐ์ ํ๊ณ ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ๋์ด๋ฉฐ SEO ์ฑ๋ฅ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๊ธ๋ก๋ฒ ์ฌ์ฉ์๊ฐ ์ ์ํ๋ ๊ณ ์ ํ ๊ณผ์ ์ ๊ธฐํ๋ฅผ ๊ณ ๋ คํ๊ณ ์ด์ ๋ฐ๋ผ ์ต์ ํ ์ ๋ต์ ๋ง์ถคํํ๋ ๊ฒ์ ์์ง ๋ง์ธ์. ์ง์์ ์ธ ๋ชจ๋ํฐ๋ง ๋ฐ ๊ฐ์ ์ ์ต์ ์ ์ฑ๋ฅ์ ์ ์งํ๊ณ ๋ชจ๋ ์ฌ์ฉ์์๊ฒ ๊ธ์ ์ ์ธ ๊ฒฝํ์ ๋ณด์ฅํ๋ ๋ฐ ์ค์ํฉ๋๋ค.