๐ ์น์ฌ์ดํธ ์ฑ๋ฅ ์ธก์ ๋๊ตฌ Lighthouse
Lighthouse๋?
Google์์ ์ ๊ณตํ๋ ์น ์ฑ๋ฅ ์ง๋จ ๋๊ตฌ๋ก ์ฑ๋ฅ(Performance), ์ ๊ทผ์ฑ(Accessibility), ๊ถ์ฅ์ฌํญ(Best Practices), ๊ฒ์์์ง ์ต์ ํ(SEO) ๋ฑ 4๊ฐ์ง ํญ๋ชฉ์ ๋ํด ์ ์๋ฅผ ํ๊ฐํ๋ค.
์น์ฌ์ดํธ์ ์ ๋ฐ์ ์ธ ํ์ง์ ํ๊ฐํ๋ ๋ฐ ์์ด Lighthouse ์ ์๋ ์ค์ง์ ์ธ ๊ธฐ์ค์ด ๋๋ค. ์ฑ๋ฅ, UX, SEO ๋ฑ ๋ค์ํ ์์์ ์ํฅ์ ์ฃผ๋ ๋งํผ ์ ์ ๊ฐ์ ์ ์ํ ์ง์์ ์ธ ๊ด๋ฆฌ์ ์ต์ ํ๊ฐ ์ค์ํ๋ค.

ํฌ๋กฌ ๋ธ๋ผ์ฐ์ ์ DevTools(F12) ์์ Lighthouse ํญ์ ํตํด ๋ถ์์ ์คํํ ์ ์๋ค. ๋ชจ๋ฐ์ผ๊ณผ ๋ฐ์คํฌํฑ ํ๊ฒฝ ๋ชจ๋์์ ํ
์คํธ๊ฐ ๊ฐ๋ฅํ๋ค.
* ํญ๋ชฉ๋ณ ๊ฐ์ ํฌ์ธํธ
1. ์ฑ๋ฅ (Performance)
- ์ด๋ฏธ์ง ํฌ๊ธฐ ์ต์ ํ
์๋ณธ ์ด๋ฏธ์ง์ ํฌ๊ธฐ(ํด์๋, ์ฉ๋)๊ฐ ๋ถํ์ํ๊ฒ ํฌ๋ค๋ฉด ์ค์ด๊ณ ์ด๋ฏธ์ง ํฌ๋งท์ WebP๋ AVIF ๊ฐ์ ์ต์ ํฌ๋งท์ผ๋ก ๋ณํํด ์ต์ ํํ๋ค. (์ฐธ๊ณ )
- ๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค
์ธ๋ถ ์คํฌ๋ฆฝํธ์๋ strategy ์์ฑ์ ์ค์ ํ๊ณ ํ์ํ ์์ ์๋ง JavaScript๋ฅผ ๋ก๋ํ๋๋ก ์ง์ฐ ๋ก๋ฉ ๋ฐฉ์์ ์ ์ฉํ๋ค.
- ๋ถํ์ํ JavaScript ๋ก๋ฉ
์ฌ์ฉํ์ง ์๋ JS chunk๋ ๋น๋ ์ ํฌํจํ์ง ์๋๋ก ํ๊ณ ๋ฌด๊ฑฐ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ ๋์๋ ๊ธฐ๋ฅ ๋๋น ์ฑ๋ฅ ๋น์ฉ์ ์ถฉ๋ถํ ๊ณ ๋ คํ๋ค.
2. ์ ๊ทผ์ฑ (Accessibility)
- form ์์์ label์ด ์์
label ํ๊ทธ๋ฅผ ๋ช ์์ ์ผ๋ก ์ฐ๊ฒฐํ๊ฑฐ๋ aria-label์ ํ์ฉํ๋ค.
- ์ด๋ฏธ์ง์ alt ์์ฑ์ด ์์
๋ชจ๋ ์ด๋ฏธ์ง ํ๊ทธ์ ์๋ฏธ์ ๋ง๋ alt ํ ์คํธ๋ฅผ ์ ๊ณตํ๋ค.
- ์์ ๋๋น๊ฐ ๋ฎ์
์ต์ 4:5:1 ์ด์์ ๋ช ๋ ๋๋น๋ฅผ ํ๋ณดํ๋๋ก ์์ ์กฐํฉ์ ์ ํ๋ค.
- ํค๋ณด๋๋ก ์ ๊ทผ์ด ๋ถ๊ฐ๋ฅํ UI
<button>, <a>, <input> ๋ฑ์ HTML ์์๋ฅผ ์ฌ์ฉํ๊ณ tabindex, role, aria-* ์์ฑ๋ฑ์ ํตํด ํค๋ณด๋ ํฌ์ปค์ค๋ฅผ ๊ด๋ฆฌํ๋ค.
3. ๊ถ์ฅ์ฌํญ (Best Practice)
- HTTPS๊ฐ ์๋ ํ์ด์ง
SSL ์ธ์ฆ์๋ฅผ ์ ์ฉํ์ฌ HTTPS๋ฅผ ๊ธฐ๋ณธ์ผ๋ก ์ฌ์ฉํ๊ณ HTTP ์์ฒญ์ HTTPS๋ก ๋ฆฌ๋ค์ด๋ ํธ ์ฒ๋ฆฌํ๋ค.
- ์ทจ์ฝํ JS API ์ฌ์ฉ
๋ณด์์ ์ทจ์ฝํ๊ฑฐ๋ ๋นํจ์จ์ ์ธ JavaScript API๋ฅผ ์ฌ์ฉํ์ง ์๋๋ค. [document.write(), eval() ๋ฑ]
4. ๊ฒ์์์ง ์ต์ ํ (SEO)
- meta description ๋๋ฝ
ํ์ด์ง๋ณ๋ก ๋ด์ฉ์ ๋ช ํํ๊ฒ ์์ฝํ 150์~160์ ๋ด์ธ์ ๋ฌธ์ฅ์ metaํ๊ทธ๋ก ์ถ๊ฐํ๋ค.
- ๋งํฌ์ anchor ํ
์คํธ๊ฐ ๋ถ์กฑํ ๊ฒฝ์ฐ
๋งํฌ์๋ ๋ช ํํ ๋ชฉ์ ์ด ๋๋ฌ๋๋ ํ ์คํธ๋ฅผ ํฌํจํ๋ค. ๋ฒํผ์ด๋ ์ด๋ฏธ์ง ๋งํฌ์ ๊ฒฝ์ฐ aria-label ๋๋ alt ์์ฑ์ ํ์ฉํ๋ค.
- robots.txt, sitemap์ด ๋๋ฝ
๋ฃจํธ ๊ฒฝ๋ก์ robots.txt์ sitemap.xmlํ์ผ์ ์์ฑํ์ฌ ๊ฒ์ ์์ง์ด ์ฌ์ดํธ ๊ตฌ์กฐ๋ฅผ ์ ํํ ํ์ ํ ์ ์๋๋ก ํ๋ค.
๋ชจ๋ฐ์ผ ์นํ์ฑ ๋ถ์กฑ
๋ฐ์ํ ๋์์ธ์ ์ ์ฉํ๊ณ meta viewport๋ฅผ ์ค์ ํ์ฌ ๋ค์ํ ํ๋ฉด ํฌ๊ธฐ์์ ์ฝํ ์ธ ๊ฐ ์ ๋ณด์ด๋๋ก ํ๋ค.
100์ ์ ๋ชฉํ๋ก!