๋ด ๋ธ๋ก๊ทธ ์ฑ์ฅ์ง์ ํ์ธ๋ฒ: ๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ
๋๊ตฌ๋ ์ฝ๊ฒ ๋ด ๋ธ๋ก๊ทธ ์ฑ์ฅ ์ง๋ฃ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค! ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ๋ฅผ ํ์ฉํด ๋ธ๋ก๊ทธ ์ ๊ทผ์ฑ, ๋ก๋ฉ ์๋, ์ฌ์ฉ์ ๊ฒฝํ ์์น๋ฅผ ํตํด ๋ด ๋ธ๋ก๊ทธ์ ์ฑ์ฅ ๊ฐ๋ฅ์ฑ์ ์ธก์ ํ๋ ๋ฐฉ๋ฒ์ ์๋ดํฉ๋๋ค.
๋ธ๋ก๊ทธ๋ฅผ ์ด์ฌํ ์ฐ๋๋ฐ ๋ด ๋ธ๋ก๊ทธ๊ฐ ์ฌ๋ฐ๋ฅธ ๋ฐฉํฅ์ผ๋ก ๊ฐ๊ณ ์๋์ง ๊ถ๊ธํ ๋๊ฐ ์์ต๋๋ค. ํน์ ๋ด ๋ธ๋ก๊ทธ๊ฐ ๊ฒ์์์ง์์ ์ด๋ค ํ๊ฐ๋ฅผ ๋ฐ๊ณ ์๋์ง ๊ถ๊ธํ์ ๊ฐ์? ์ด๋ณด์๋ ํด๋ฆญ ๋ช ๋ฒ์ผ๋ก ๋ด ๋ธ๋ก๊ทธ์ '์ฑ์ ํ'๋ฅผ ํ์ธํ๊ณ ๊ฐ์ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค. ๋ฐ๋ก ๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ(PageSpeed Insights)๋ฅผ ํ์ฉํ๋ ๊ฒ์ ๋๋ค.
1. ๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ๋?
๊ตฌ๊ธ์ ์น ์์ฅ ์ง๋ฐฐ๋ ฅ์ ์์ฒญ๋ฉ๋๋ค. ๊ทธ๋ค์ด ์ ๊ณตํ๋ ํ์ค์ ์ ์ธ๊ณ ์น ๊ฐ๋ฐ์์ ์๋ฒ ์ด์์์๊ฒ ์ฌ์ค์ ์ง์นจ๊ณผ๋ ๊ฐ์ต๋๋ค. ๋งค๋ ์งํ๋๋ ๊ตฌ๊ธ ์ฑ ์ปจํผ๋ฐ์ค์ ์ ์ธ๊ณ๊ฐ ๊ด์ฌ์ ๊ฐ์ง๊ณ ์ง์คํ๋ ์ด์ ๋ ๋ฐ๋ก ์ฌ๊ธฐ์ ์์ต๋๋ค. ์ด๋ฌํ ๊ตฌ๊ธ์ ์์ฅ ์ง๋ฐฐ๋ ฅ๊ณผ ๊ทธ๋ค์ด ์ ๊ณตํ๋ ์น ํ์ค ์ธก์ ๋๊ตฌ์ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ(PageSpeed Insights)๋ ์น ์ฑ๋ฅ ์งํ๋ฅผ ๊ฐ๋ ํ๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋๊ตฌ์ด์ ํ์ค์ด ๋ ์ ์์ต๋๋ค.
๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ๋ ์น์ฌ์ดํธ์ ์ฑ๋ฅ์ ์ธก์ ํ๊ณ ๊ฐ์ ๋ฐฉํฅ์ ์ ์ํด ์ฃผ๋ ๋๊ตฌ์ ๋๋ค. ๊ตฌ๊ธ์ด ์ด๋ฅผ ๊ฐ์กฐํ๋ ์ด์ ๋ ๋ช ํํฉ๋๋ค. ๊ตฌ๊ธ์ ๋ชฉํ๋ ์ฌ์ฉ์์๊ฒ ๊ฐ์ฅ ๋น ๋ฅด๊ณ ์พ์ ํ ์ ๋ณด๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ๋ฐ๋ผ์ ์ด ์์น๋ ๋จ์ํ ์๋ ์ธก์ ์ ๋์ด, ๊ตฌ๊ธ ๊ฒ์ ๊ฒฐ๊ณผ ์์๋ฅผ ๊ฒฐ์ ํ๋ ์น ํ์ค ์งํ๋ก ์์ฉํฉ๋๋ค.
๊ทธ๋ฌ๋ ์ด๋ฌํ ์งํ๋ฅผ ์ผ๋ฐ ์ด๋ณด์๊ฐ ๋ณด๋ฉด, ์ด ์์น๊ฐ ๋ฌด์์ ์๋ฏธํ๋ฉฐ ์ด๋ค ์ํฅ์ ์ฃผ๋์ง ํ์ ํ๊ธฐ๋ ์ฝ์ง ์์ต๋๋ค. ๊ทธ๋์ ์ค๋์ ์น ํ์ค ๋ธ๋ก๊ทธ ์ฑ๋ฅ ์งํ์ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ๋ฅผ ํตํด ๋ด ๋ธ๋ก๊ทธ์ ์ฑ์ฅ ๊ฐ๋ฅ์ฑ์ ๊ฐ๋จํ๊ฒ ์ธก์ ํด ๋ณด๋ ๋ฐฉ๋ฒ์ผ๋ก ์์ํด ๋ณด๊ฒ ์ต๋๋ค.
์ด ์งํ๋ฅผ ๊ฐ๋จํ๊ฒ ์ธก์ ํ๋ ๋ฐฉ๋ฒ์ ๋ธ๋ก๊ทธ ์ต์ ํ ์์ ฏ ์ค์น ๋ฐฉ๋ฒ์ ์ด์ ๊ธ์ ํ์ธํ์ธ์!

2. ์ฝ์ด ์น ๋ฐ์ดํ: ๋ธ๋ก๊ทธ ์์ต์ ๊ฒฐ์ ์ง๋ 3๋ ์์
๊ตฌ๊ธ์ '์ฝ์ด ์น ๋ฐ์ดํ'์ด๋ผ๋ ์งํ๋ฅผ ํตํด ์ฌ์ฉ์ ๊ฒฝํ์ ์์นํํฉ๋๋ค. ํนํ ๋ธ๋ก๊ทธ ์์ต(์ ๋์ผ์ค ๋ฑ)๊ณผ ์ง๊ฒฐ๋๋ ํญ๋ชฉ๋ค์ ์ฃผ์ ๊น๊ฒ ๋ด์ผ ํฉ๋๋ค. ๋ฌด์กฐ๊ฑด ํ์ ํด์ผ ํ 3๊ฐ์ง ์งํ์ ๋๋ค.
โ CLS (Cumulative Layout Shift): ๊ด๊ณ ์์ต์ ํต์ฌ
- ์๋ฏธ: ์ฝํ ์ธ ๊ฐ ๋ก๋ฉ๋๋ฉด์ ํ๋ฉด์ด ๋์ปฅ๊ฑฐ๋ฆฌ๋ฉฐ ๋ฐ๋ฆฌ๋ ํ์์ ๋๋ค.
- ์์ต๊ณผ์ ์ฐ๊ด์ฑ: ๊ธ์ ์ฝ๋ ๋์ค ๊ฐ์๊ธฐ ๊ด๊ณ ๊ฐ ๋ํ๋ ๋ฒํผ ์์น๊ฐ ๋ฐ๋์ด ์๋ชป ํด๋ฆญํ๊ฒ ๋๋ค๋ฉด, ์ฌ์ฉ์๋ ๋ถ์พ๊ฐ์ ๋๋ผ๊ณ ์ฆ์ ์ดํํ ์ ์์ต๋๋ค. ๋ ์ด์์์ด ์์ ์ ์ผ์๋ก ์ฒด๋ฅ ์๊ฐ์ด ๋์ด๋๊ณ , ์์ต๋ ์์ ํ๋ฉ๋๋ค. ๋ํ ๊ด๊ณ ๋ ธ์ถ ๋๋น CLS ์ ์๊ฐ ๋ฎ์ ๊ฒฝ์ฐ, ์์ต ์ธ์ ์ด ๋ฎ์์ง ๊ฐ๋ฅ์ฑ๋ ๋ฐฐ์ ํ ์ ์์ต๋๋ค
โก TBT (Total Blocking Time): ๋์ ์ดํ๋ฅ ์ ์ฃผ๋ฒ
- ์๋ฏธ: ํ์ด์ง๊ฐ ํด๋ฆญ์ด๋ ์คํฌ๋กค์ ๋ฐ์ํ๊ธฐ๊น์ง ๊ฑธ๋ฆฌ๋ ์ฐจ๋จ ์๊ฐ์ ๋๋ค.
- ๋ฌธ์ ์ : ๋ธ๋ก๊ทธ๊ฐ ๋๋ฆฌ๋ฉด ์ฌ์ฉ์๋ ๋ฐ๋ก ๋ค๋ก ๊ฐ๊ธฐ๋ฅผ ๋๋ฆ ๋๋ค. TBT๊ฐ ๋์์๋ก ์ดํ๋ฅ ์ด ๊ธ๊ฒฉํ ์ฆ๊ฐํ๋ฉฐ, ์ด๋ ๊ด๊ณ ์์ต ๊ฐ์๋ก ์ด์ด์ง๋๋ค. ์ฆ, ๋ฐฉ๋ฌธ์ ์๋ง ๋ง์ ๋ณด์ด๋ ์ค์ ์๋ ๋ธ๋ก๊ทธ๊ฐ ๋ ๊ฐ๋ฅ์ฑ์ด ํฝ๋๋ค.
โข LCP (Largest Contentful Paint): ์ ๊ทผ์ฑ๊ณผ ์ฒซ์ธ์
- ์๋ฏธ: ๊ฐ์ฅ ํฐ ์ด๋ฏธ์ง๋ ํ ์คํธ ๋ญ์น๊ฐ ํ๋ฉด์ ๋ํ๋๋ ์๊ฐ์ ๋๋ค.
- ์ค์์ฑ: ์ฒซ ํ๋ฉด์ด 2.5์ด ์ด๋ด์ ๋จ์ง ์์ผ๋ฉด ์ ๊ทผ์ฑ์ด ํ์ ํ ๋จ์ด์ง๋๋ค. ๋ก๋ฉ ์๋๊ฐ ๋๋ฆฐ ๋ธ๋ก๊ทธ๋ ์๋ฌด๋ฆฌ ๊ณ ํ์ง ๊ธ์ ์์ฑํด๋ ์ฌ์ฉ์๊ฐ ์ฝ์ ๊ธฐํ์กฐ์ฐจ ์ป์ง ๋ชปํ ์ ์์ต๋๋ค. ๊ฒ์ ์์ ๋ฐ ์์ธ์ ๋ถ์ด์ต์ด ๋ฐ์ํ ์์ง๊ฐ ์์ต๋๋ค. ๊ฒ์ ๋น์ฉ์ ์ค์ด๊ธฐ ์ํด, ํฐ ์ฝํ ์ธ ์ ๋๋ฆฐ ์๋๋ ๊ธฐํผ๋ ์ ์์ต๋๋ค.
3. "๋ฐ์ดํฐ๊ฐ ์๋์!" ํต๊ณผ ์ฌ๋ถ ํ์ธ
ํ์ด์ง์คํผ๋ ์ธก์ ์ '์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals) ํ๊ฐ: ํต๊ณผ'๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๋จ์ง ์๋๋ค๋ฉด, ํด๋น ๋ธ๋ก๊ทธ๋ ์์ง ๋ฐ์ดํฐ๊ฐ ์์ด์ง ์์ ์ ์ ๋ธ๋ก๊ทธ์ด๊ฑฐ๋, ์ด์ ๊ธฐ๊ฐ์ด ๊ธธ๋๋ผ๋ ๋ฐฉ๋ฌธ์๊ฐ ๊ฑฐ์ ์๋ ์ํ๋ผ๊ณ ํ๋จํ์๋ฉด ๋ฉ๋๋ค.
- ์ด์ : ํธ๋ํฝ(๋ฐฉ๋ฌธ์ ์)์ด ์ ์ ์ ์ ๋ธ๋ก๊ทธ๋ ๊ตฌ๊ธ์ด ํ๊ฐํ ๋งํ ํ๋ณธ ๋ฐ์ดํฐ๊ฐ ์ถฉ๋ถํ์ง ์๊ธฐ ๋๋ฌธ์ ๋๋ค.
- ๋์ฒ๋ฒ: ๋นํฉํ์ จ๋์? ๋นํฉํ์ง ๋ง์ธ์. ํ๋จ์ '์ง๋จ' ๋ฐ 'ํต๊ณผ ์ฌ๋ถ' ํญ๋ชฉ ๋์ ์คํ ๋ฐ์ดํฐ(Lighthouse ์ฑ์ )๋ฅผ ์ฐธ๊ณ ํ์ฌ ๊ธฐ์ ์ ์ธ ์์๋ฅผ ๋จผ์ ๊ฐ์ ํ๋ฉด ๋ฉ๋๋ค.
๋ง์ฝ ์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals) ํ๊ฐ์์ ๋ถํฉ๊ฒฉ์ด๋ผ๋ฉด, ์ง๊ธ ๋น์ฅ ๊ธ์ฐ๊ธฐ๋ฅผ ๋ฉ์ถ๊ณ ๋ฌธ์ ๋ฅผ ๊ณ ๋ฏผํด ๋ณด์๊ธธ ๊ถํด๋๋ฆฝ๋๋ค. ์ต์ ํ๋ฅผ ์งํํ์ธ์. ๋ชจ๋ฅด๊ฒ ๋ค๋ฉด ๋ฐ์ผ๋ฆฌํ๋ธ์ ์๋ฃ๋ฅผ ๊ฒ์ํด ๋ณด์ธ์. ๋ค ์์ต๋๋ค. ๊ทธ๋๋ ๋ชจ๋ฅด๊ฒ ๋ค๋ฉด ์ง๋ฌธ์ ์ฌ๋ ค๋ณด์ธ์. ์ฝ๋๋ฅผ ๊ณต์ ํด๋๋ฆฝ๋๋ค.
์ด๋ฐ ๋ ธ๋ ฅ์กฐ์ฐจ ์ด๋ ต๋ค๋ฉด, ๋ค์ด๋ฒ ๋ธ๋ก๊ทธ๋ก ์ด์ ์ ์ฌ๊ฐํ๊ฒ ๊ณ ๋ฏผํด๋ณด์๊ธธ ๊ถํด๋๋ฆฝ๋๋ค.
4. ๊ณ ํ์ง ๋ธ๋ก๊ทธ ์ธก์ ํ๋ฌ์ค ์์ธ
1. ์ ๊ทผ์ฑ (Accessibility)
๋จ์ํ ๊ธ๋ง ์ ์ฐ๋ ๊ฒ ์๋๋ผ, ์๊ฐ ์ฅ์ ์ธ์ด๋ ์ ์๋ ฅ์๋ ์ฝ๊ธฐ ํธํ ๊ตฌ์กฐ(์ด๋ฏธ์ง ๋์ฒด ํ ์คํธ, ์ ์ ํ ๋ช ์๋น ๋ฑ)๋ฅผ ๊ฐ์ท๋์ง ํ๊ฐํฉ๋๋ค. ์ด๋ ๊ตฌ๊ธ์ด ์ถ๊ตฌํ๋ '๊ณต์ต์ ๊ฐ์น'์ ๋ง๋ฌผ๋ ค ๊ณ ํ์ง ๋ธ๋ก๊ทธ๋ก ์ธ์ ๋ฐ๋ ํ๋ฌ์ค ์์ธ์ด ๋ฉ๋๋ค.
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์ Lighthouse ํญ์ ์คํํ์ฌ ์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ์ฑ๋ฅ ์ ์๋ฅผ ํ์ธํ๋ ๋ชจ์ต์ ๋๋ค. LCP, CLS ๋ฑ ํต์ฌ ์งํ๋ฅผ ํ๋์ ํ์ ํ ์ ์๋ ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ๋จ๊ณ์ ๋๋ค.
์ถ์ฒ: Google Search Central ๊ณต์ ์ ํ๋ธ -https://youtu.be/M3lA6tJx-a4?si=59zTsxJbcs9pi14f
2. ๊ถ์ฅ์ฌํญ (Best Practices)
๋ณด์ ์ฐ๊ฒฐ(HTTPS) ์ฌ์ฉ ์ฌ๋ถ๋ ์๋ํํฐ ์ฟ ํค ํฌํจ ์ฌ๋ถ๋ ํ๊ฐ ํญ๋ชฉ์ ํฌํจ๋ฉ๋๋ค. ๋ค๋ง ์ผ๋ถ ํญ๋ชฉ์ ์ธ๋ถ ๊ด๊ณ ์คํฌ๋ฆฝํธ์ ์ํฅ์ผ๋ก ์กฐ์ ์ด ์ด๋ ค์ธ ์ ์์ผ๋ฏ๋ก, ๊ถ์ฅ ์ฌํญ ์ ๋๋ก๋ง ํ๋จํด๋ ๋ฌด๋ฐฉํฉ๋๋ค.
๋ด ๋ธ๋ก๊ทธ ์ฑ์ฅ์ ์ํด ์ง๊ธ ํด์ผ ํ ์ผ
์ง๊ธ ๋ฐ๋ก ๊ตฌ๊ธ ํ์ด์ง์คํผ๋ ์ธ์ฌ์ดํธ์ ๋ด ๋ธ๋ก๊ทธ ์ฃผ์๋ฅผ ์ ๋ ฅํด ๋ณด์ธ์. ์ ์ ์์ฒด์ ์ผํฌ์ผ๋นํ๊ธฐ๋ณด๋ค๋ CLS, TBT, LCP๋ผ๋ ์ธ ๊ฐ์ง ์งํ๋ฅผ ๊ฐ์ ํ๋ ๋ฐ ์ง์คํ๋ ๊ฒ์ด ์ค์ํฉ๋๋ค.
๊ทธ๋ ๋ค๋ฉด ๊ตญ๋ด ๊ฒ์์์ง์์๋ ์ด ํ์ค์ ์ค์ํ ์งํ๋ก ํ์ฉํ ๊น์? ๊ฒฐ๋ก ๋ถํฐ ๋ง์๋๋ฆฌ๋ฉด, ๋น์ค์ ํฌ์ง ์์ง๋ง ๊ธฐ๋ณธ ํ์ง ํ๊ฐ ๊ธฐ์ค์ผ๋ก ํ์ฉ๋ ๊ฐ๋ฅ์ฑ์ ๋์ต๋๋ค. ํนํ ๊ฐ์ ๊ฒฝ์ ๋ธ๋ก๊ทธ๋ผ๋ฉด ์ด ์งํ๊ฐ ์์์ ์ํฅ์ ์ค ๊ฐ๋ฅ์ฑ์ด ์์ต๋๋ค.