๊ฒ์ ๋ ธ์ถ์ ์ํ ๋ผ์ดํธํ์ฐ์ค์ ์ฝ์ด ์น ๋ฐ์ดํ ์ ๊ฒ ๋ฐฉ๋ฒ
๊ฒ์ ์ต์ ํ ์ ๊ฒ ํ์! ์ฝ์ด ์น ๋ฐ์ดํ๊ณผ ๋ผ์ดํธํ์ฐ์ค ์ดํดํ๊ธฐ
๋ผ์ดํธํ์ฐ์ค์ ์ฝ์ด ์น ๋ฐ์ดํ์ [ ๊ตฌ๊ธ ์ต์ ํ ์ ๊ฒ ]์ ํ๊ธฐ์ํด ์น ์ฑ๋ฅ์ ์ธก์ ํ๋ ์ธก์ ํญ๋ชฉ๊ณผ ์ธก์ ๋๊ตฌ์ ๋๋ค. ๊ฒ์ ์์ ๋ ธ์ถ์ ํ๊ธฐ ์ํด ํ์ ํญ๋ชฉ์ ๋๋ค. ์ฆ, ์ทจ์ ์ ํ๊ธฐ ์ํด์๋ ์ด๋ ฅ์๋ฅผ ์ ์ถํด์ ์๋ฅ ์ ์, ๋ฉด์ , ๋ถ์ ๋ฐฐ์น๋ฐ๊ฒ ๋๋ฏ์ด ๋จผ์ ์๋ฅ ์ ์(์ฝ์ด์น๋ฐ์ดํ)์์ ํฉ๊ฒฉํด์ผ ํฉ๋๋ค. ๊ทธ๋์ผ ๋ฉด์ (๋ผ์ดํธํ์ฐ์ค)์ ๋ณด๊ณ ์ข์ ๋ถ์(๊ณ ํ์ง ์ฝํ ์ธ ์์๋ ธ์ถ)์ ๋ฐฐ์น๋ ์ ์์ต๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ ํต๊ณผ๋ ์๋ฅ์ ์์์ ํฉ๊ฒฉ์ด๊ณ ๋ผ์ดํธํ์ฐ์ค๋ ๋ฉด์ ์ํ, ๊ทธ๋ฆฌ๊ณ ์ฝํ ์ธ ๋ ์ข์ ๋ถ์ ๋ฐฐ์น์ ๋๋ค.
์ด ๋ ๋๊ตฌ์ ์ญํ ๊ณผ ์ค์์ฑ์ ๊ตฌ์ฒด์ ์ผ๋ก ์ดํด๋ณด๊ฒ ์ต๋๋ค.
1. ๊ตฌ๊ธ ์ต์ ํ ์ ๊ฒ ์ฝ์ด ์น ๋ฐ์ดํ
์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals) ์ ์น ํ์ด์ง์์ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๊ฐํ๋ ์ฃผ์ ์งํ๋ก, ๊ตฌ๊ธ์ด ์น ํ์ด์ง์ ์ฑ๋ฅ๊ณผ ํ์ง์ ์ธก์ ํ๋ ๊ธฐ์ค์ ๋๋ค. ์ฆ ์ต์ ์ธก์ ํญ๋ชฉ์ ๋๋ค.
์ฝ์ด ์น ๋ฐ์ดํ์ ์ฌ์ฉ์ ๊ฒฝํ์ ํ๊ฐํ๋ ์ธ ๊ฐ์ง ์ฃผ์ ์งํ๋ก ๊ตฌ์ฑ๋์ด ์์ผ๋ฉฐ, ์น ํ์ด์ง์ ๋ก๋ฉ ์๋์ ์์ ์ฑ์ ์ธก์ ํฉ๋๋ค. ์ด ์งํ๋ค์ ๊ตฌ๊ธ์ด ์น ํ์ด์ง์ ์ฑ๋ฅ์ ํ๊ฐํ๋ ๊ธฐ๋ณธ ๊ธฐ์ค์ด ๋ฉ๋๋ค. ๊ตฌ์ฒด์ ์ธ ์งํ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- LCP (Largest Contentful Paint): ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ๊ฐ ํ๋ฉด์ ๋ํ๋๋ ๋ฐ ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- FID (First Input Delay): ์ฌ์ฉ์๊ฐ ํ์ด์ง์ ์ํธ์์ฉํ ๋์ ์๋ต ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
- CLS (Cumulative Layout Shift): ํ์ด์ง ๋ก๋ฉ ์ค ๋ ์ด์์์ ์์ ์ฑ์ ์ธก์ ํฉ๋๋ค.
2024๋ 3์ 12์ผ๋ถํฐ INP๊ฐ FID๋ฅผ ๋์ฒดํ์ฌ Core Web Vital ์ญํ ์ ํ๊ฒ ๋์์ต๋๋ค.

2. LIGHThouse
Lighthouse๋ ๊ตฌ๊ธ์์ ์ ์ํ ๊ฒ์์์ง ์ต์ ํ ํ์ง ํ ์คํธ ๋๊ตฌ์ ๋๋ค.
ํ์ ์ธก์ ํญ๋ชฉ
1. ์ ๊ทผ์ฑ (Accessibility)
์ฌ์ฉ์๊ฐ ์ผ๋ง๋ ์ฝ๊ณ ํธํ๊ฒ ํ์ด์ง๋ฅผ ์ด์ฉํ ์ ์๋์ง๋ฅผ ์ธก์ ํฉ๋๋ค.
2. ๊ถ์ฅ ์ฌํญ (Best Practices)
๊ถ์ฅ์ฌํญ์ ์นํ์ด์ง๊ฐ ์นํ์ค ๊ท์ ๊ณผ ๋ชจ๋ฒ์ฌ๋ก์ ๋ํ ์ธก์ ์ ๋๋ค.
๊ฒ์์์ง์ด ์์ธ์ ์ต์ ํ๋ฅผ ํตํด ๋ ธ์ถ์ด ์๋๋์ง ์ธก์ ํ๋ ํญ๋ชฉ์ ๋๋ค.
4. CLS (Cumulative Layout Shift)
CLS ํ์ด์ง ๋ก๋ ๋๋ ๋์ ๋ ์ด์์์ด ์ผ๋ง๋ ์์ ์ ์ธ์ง๋ฅผ ์ธก์ ํฉ๋๋ค.
5. INP (Interaction to Next Paint )
INP๋ ์ฌ์ฉ์๊ฐ ํ์ด์ง์์ ์ด๋ค (๋ฒํผํด๋ฆญ.๋งํฌํด๋ฆญ๋ฑ....)์กฐ์์ ์๋ตํ๋ ์ฑ๋ฅ์ ์ธก์ ํฉ๋๋ค.
์ ๊ทผ์ฑ (Accessibility). ๊ถ์ฅ ์ฌํญ (Best Practices). ๊ฒ์ ์ต์ ํ (SEO). ๊ฒ์ ์ต์ ํ (SEO). CLS (Cumulative Layout Shift), INP (Interaction to Next Paint ) ๋ ์ค์ํ ํญ๋ชฉ์ ๋๋ค.
๊ฒ์ ์ต์ ํ (SEO). CLS (Cumulative Layout Shift).INP (Interaction to Next Paint )๋ ํ์ ์ฌํญ์ ๋๋ค.
์ฑ๋ฅ ์ธก์ ํญ๋ชฉ
1. FCP (First Contentful Paint)
์นํ์ด์ง ์ ์์ ์ฒ์ ์์๋๋ ์ฝํ ์ธ ์ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.

์ฃผ๋ก ํํ์ด์ง์ ๋ก๋ฉ ์๋๋ฅผ ์ธก์ ํ๊ธฐ ๋๋ฌธ์CSS.HTML.์ด๋ฏธ์ง,์คํฌ๋ฆฝํธ,ํฐํธ์ ๊ด๋ จ๋ ํญ๋ชฉ์ ์์ ํด์ผ ํ๋ฉฐ ์๋ฒ์์๋์๋ ์ฐ๊ด์ด ์์ต๋๋ค. ์ฆ. ์์ ํ ์ ์๋ ๋ถ๋ถ๊ณผ ์์ ํ ์ ์๋ ๋ถ๋ถ์ด ์กด์ฌํฉ๋๋ค.
์์ ๊ฐ๋ฅ๋ถ๋ถ: HTML.CSS.์ฌ์ฉ์์ค์ ์คํฌ๋ฆฝํธ. ์ด๋ฏธ์ง, ๊ด๊ณ . ํฐํธ.....
2. TBT (Total Blocking Time )
์นํ์ด์ง๊ฐ ๋ก๋์ ํ์ด์ง๊ฐ ๋ก๋ฉ๋ ๋ ๊ธฐ๋ค๋ ค์ผ ํ๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.
์คํฌ๋ฆฝํธ์คํ ์๊ฐ๊ณผ ๊ธฐ๋ณธ์ ์ธ ๋ก๋ฉ ์์ ๊ณผ ์ธ๋ถ ์ฝ๋๋ฅผ ์์ ํด์ผ ํ๊ธฐ ๋๋ฌธ์์ ์ฒด์ ์ธ ์์คํ ์ ์ต์ ํ๋ก ์งํํด์ผ ํฉ๋๋ค.
3. LCP (Largest Contentful Paint )
ํ์ด์ง ๋ก๋์ ์ ์ผ ํฐ ์ฝํ ์ธ ๊ฐ ํ์๋๋ ์๊ฐ์ ์ธก์ ํฉ๋๋ค.

LCP๋ ๊ฐ์ฅ ํฐ ์ฝํ ์ธ ์ ๋ก๋ฉ ์๋๋ง ์ต์ ํํด์ฃผ๋ฉด ๋ฉ๋๋ค.๋ก๋ฉ์๋๊ฐ ๋น ๋ฅธ๊ฒ์ ํฐํธ.์ด๋ฏธ์ง์์ ์์ ํด ์ฃผ์๋ฉด ๋ฉ๋๋ค.์ด๋๊ฒ์์ ์ผ ํฐ ์ฝํ ์ธ ๋ก ์ง์ ํ ์ง ๊ณ ๋ฏผํด์ผ ํฉ๋๋ค.

3. ๊ณ ํ์ง ์ฝํ ์ธ
์ต์ข ์ฝํ ์ธ ์ ํ์ง์ ์ ๊ฒํ ์์๋ฅผ ๊ฒฐ์ ํฉ๋๋ค.

์ฝ์ด์น ๋ฐ์ดํ ํ๊ฐ๋ ์ต์ ํ ์์ ์ ํ๋๋ผ๋ ์ต์ 2๋ฌ์์ 3๊ฐ์ ์ ๋ ๋ฐ์ดํฐ๊ฐ ๋์ ๋๊ณ ๋์ ๋ณ๊ฒฝ๋ ์ธก์ ๊ฐ์ด ๋ฐ์๋ฉ๋๋ค. ์ฑ๋ฅ ์ธก์ ํญ๋ชฉ์ ์ฝํ ์ธ ์์ฑ์ ๋ณ๋์ด ๋ฐ์ํฉ๋๋ค.
๋์์.GIFํ์ผ,์ด๋ฏธ์ง๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ์ฌ๋ถ์ ๋ฐ๋ผ์....
๊ทธ๋ฌ๋ 2 ์ฐจ ๊ธฐ์ค์ค CLS์ ๊ฒ์ ์์ง์ต์ ํ๋ ๋ณ๋์ด ์์ด์ผ ํฉ๋๋ค. ๋จ. 2์ฐจ ๋๋ฉ์ธ ์ต์ ํ์ ๊ณ ์ ๋๋ฉ์ธ ์ต์ ํ๋ ๋ค๋ฅธ ์ธก์ ๊ฐ์ด ๋์ฌ์ ์์ต๋๋ค. ์ธ๋ถ์์ ์ธก์ ๊ฐ์ด ๋ฐ์๋ฉ๋๋ค.