๐LightHouse๋?
LightHouse๋ ์นํ์ด์ง์ ์ฑ๋ฅ์ ์ธก์ ํด์ฃผ๊ณ ๊ฐ์ ์ฑ ์ ์ ๊ณตํด์ฃผ๋ ์๋ํ ๋๊ตฌ์ ๋๋ค. ๊ฐ๋ฐ์๋ Lighthouse์ ๊ฒ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ์นํ์ด์ง์ ํ์ง์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
Lighthouse๋ Chrome DevTools๋ถํฐ CLI, ๋ ธ๋ ๋ชจ๋ ๋ฑ ๋ค์ํ ๊ฒฝ๋ก๋ฅผ ํตํด ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ฒ์ฌํ ํ์ด์ง์ url์ Lighthouse์ ์ ๋ฌํ๋ฉด Lighthouse๋ ํด๋น ํ์ด์ง์ ๋ํ ์ฌ๋ฌ ๊ฒ์ฌ๋ฅผ ์คํํฉ๋๋ค.
๐Lighthouse ์ฌ์ฉ
2020๋ 5์ 19์ผ Lighthouse ๋ฒ์ 6.0 ๋ฐฐํฌ ์ดํ Chrome ๊ฐ๋ฐ์ ๋๊ตฌ์์ Lighthouse๊ฐ ๋ค์ด์์ต๋๋ค.
- ๊ฒ์ฌํ๊ณ ์ถ์ ํ์ด์ง์์ ๊ฐ๋ฐ์ ๋๊ตฌ๋ฅผ ์ฝ๋๋ค.
- Lighthouse ํญ์ผ๋ก ๋ค์ด์ต๋๋ค.
- Analyze page load ๋ฅผ ํด๋ฆญํด์ ๊ฒ์ฌ๋ฅผ ์คํํฉ๋๋ค.
4. ๊ฒ์ฌ๊ฐ ์๋ฃ๋๋ฉด ์๋์ ๊ฐ์ ๋ฆฌํฌํธ๊ฐ ์์ฑ๋ฉ๋๋ค.
๐Lighthouse ๋ถ์ ๊ฒฐ๊ณผ ํญ๋ชฉ
1. Performance
ํ๋ฉด์ ์ฝํ ์ธ ๊ฐ ์ผ๋ง๋ ๋นจ๋ฆฌ ํ์๋๊ณ ์ฌ์ฉ์๋ ์ผ๋ง๋ ๋น ๋ฅด๊ฒ ์ ์ ์ ์ํธ์์ฉํ๋์ง์ ์ด์ ์ ๋ง์ถ๊ณ ์์ต๋๋ค. ๋ํ ์ธ๋ถ ํญ๋ณต๋ง๋ค ๊ฐ์ค์น๊ฐ ์กด์ฌํฉ๋๋ค.
Lighthouse 8 ๊ฐ์ฌ ๊ฐ์ค์น
์ต์ด ์ฝํ ์ธ ๊ฐ ํฌํจ๋ ํ์ธํธ | 10% |
์๋ ์ง์ | 10% |
๊ฐ์ฅ ํฐ ์ฝํ ์ธ ๊ฐ ํฌํจ๋ ํ์ธํธ | 25% |
์ํธ ์์ฉ๊น์ง์ ์๊ฐ | 10% |
์ด ์ฐจ๋จ ์๊ฐ | 30% |
๋์ ๋ ์ด์์ ์ด๋ | 15% |
2. Accessibility
Accessibility ํญ๋ชฉ์์๋ ์น ํ์ด์ง๊ฐ ์น ์ ๊ทผ์ฑ์ ์ ๊ฐ์ถ๊ณ ์๋์ง ํ์ธํฉ๋๋ค. <img> ํ๊ทธ์ alt ๋์ฒด ํ ์คํธ ์์ฑ์ด ์๋์ง, ๋ฐฐ๊ฒฝ์๊ณผ ์ฝํ ์ธ ์์์ ๋๋น๊ฐ ์ถฉ๋ถํ์ง, ์ ์ ํ WAI-ARIA ์์ฑ์ ์ฌ์ฉํ๋์ง ๋ฑ์ ํ์ธํฉ๋๋ค.
3. Best Practices
Best Practices ํญ๋ชฉ์์๋ ์น ํ์ด์ง๊ฐ ์น ํ์ค ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ์ ๋ฐ๋ฅด๊ณ ์๋์ง ํ์ธํฉ๋๋ค. ๋๋ ์ฌ์ฉํ์ง ์๋ API๋ฅผ ํธ์ถํ๊ณ ์์ง ์์์ง, HTTPS ํ๋กํ ์ฝ์ ์ฌ์ฉํ๋์ง, ์ฝ์ ์ฐฝ์ ์ค๋ฅ๊ฐ ํ์ ๋์ง๋ ์๋์ง ๋ฑ์ ํ์ธํฉ๋๋ค.
4. SEO (Search Engine Optimization)
SEO ํญ๋ชฉ์์๋ ์น ํ์ด์ง๊ฐ ๊ฒ์ ์์ง ์ต์ ํ๊ฐ ์ ๋์ด์๋์ง ํ์ธํฉ๋๋ค. ์ ํ๋ฆฌ์ผ์ด์ ์ robots.txt๊ฐ ์ ํจํ์ง, <meta> ์์๋ ์ ์์ฑ๋์ด ์๋์ง, ํ ์คํธ ํฌ๊ธฐ๊ฐ ์ฝ๊ธฐ์ ๋ฌด๋ฆฌ๊ฐ ์๋์ง ๋ฑ์ ํ์ธํฉ๋๋ค.
5. PWA (Progressive Web App)
Progressive Web App์ ์ ์ํ๋ ์ผ๋ จ์ ๊ธฐ์ค์ ๋ฐ๋ผ ์น ํ์ด์ง๋ฅผ ํ์ธํฉ๋๋ค. ์ด ๊ฒ์ฌ๋ ํด๋น ์น ํ์ด์ง๊ฐ ํญ๋ชฉ์ ๋ฐ๋ฅด๊ณ ์๋์ง ์ธก์ ํ์ฌ ์ ์๋ฅผ ๋ถ์ฌํ๋ ๊ฒ์ด ์๋๋ผ ์น์ด HTTP๋ฅผ HTTPS๋ก ๋ฆฌ๋ค์ด๋ ์ ํ๋์ง, ์๋ต ์ฝ๋๋ ๋ช ํํ์ง, 3G ๋คํธ์ํฌ์์๋ ๋ก๋ฉ์ด ๋น ๋ฅด๊ฒ ์ด๋ฃจ์ด์ง๋ ์ง์ ๊ฐ์ ์ฌ๋ถ๋ฅผ ๊ฒ์ฌํ์ฌ ํฉ๊ฒฉ ๋๋ ์คํจ๋ฅผ ํ๋ณํฉ๋๋ค.
๐Opportunities
Lighthouse๋ ์ฑ๋ฅ์ ์ธก์ ํ ๋ฟ ์๋๋ผ ๋ฌด์์ด ์๊ฐ์ ๋ง์ด ์๋ชจํ๋์ง, ์ด๋ป๊ฒ ๊ฐ์ ํ์ฌ ์ต์ ํ๋ฅผ ํ ์ ์์์ง ํด๊ฒฐ์ฑ ๋ ์ ์ํด์ค๋๋ค. Opportunities(์ถ์ฒ) ํญ๋ชฉ์ ํ์ธํ๋ฉด ๊ฐ ๋ฉํธ๋ฆญ๋ณ ๋ฌธ์ ๋ฅผ ํ์ธํ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ผ๋ก, ๊ธฐํ ๋๋ ์ง๋จ ๊ฒฐ๊ณผ๊ฐ ์๋ ๋ฉํธ๋ฆญ๋ง Lighthouse ์ฑ๋ฅ ์ ์์ ์ํฅ์ ๋ฏธ์นฉ๋๋ค. ๋ค๋ง, ๊ธฐํ์ ์ง๋จ์ ๊ฐ์ ํ๋ฉด ๋ฉํธ๋ฆญ ๊ฐ์ด ๊ฐ์ ๋ ๊ฐ๋ฅ์ฑ์ด ๋์ผ๋ฏ๋ก ๊ฐ์ ์ ์ธ ๊ด๊ณ๊ฐ ์์ต๋๋ค. ์ถ์ฒ ํญ๋ชฉ๋ค์ ์ค๋ฅธ์ชฝ ํ์ดํ๋ฅผ ํด๋ฆญํด ์ด์ด๋ณด๋ฉด ๊ฐ ํญ๋ชฉ์ ๋ํ ์ค๋ช ๊ณผ ํจ๊ป ๊ฐ์ ํด์ผ ํ ์ธ๋ถ ๋ด์ฉ๋ค๊ณผ ์ ์ก ํฌ๊ธฐ, ์ ๊ฐ ๊ฐ๋ฅํ ํจ๊ณผ๊น์ง ํ์ธํด ๋ณผ ์ ์์ต๋๋ค.
Opportunities ํญ๋ชฉ
์ฐจ์ธ๋ ํ์์ ์ฌ์ฉํด ์ด๋ฏธ์ง ์ ๊ณตํ๊ธฐ
WebP ๋ฐ AVIF์ ๊ฐ์ ์ด๋ฏธ์ง ํ์์ PNG๋ JPEG๋ณด๋ค ์์ถ๋ฅ ์ด ๋๊ธฐ ๋๋ฌธ์ ๋ค์ด๋ก๋๊ฐ ๋น ๋ฅด๊ณ ๋ฐ์ดํฐ ์๋น๋๋ ์ ์ต๋๋ค.
์ ๋๋ฉ์ด์ ์ฝํ ์ธ ์ ๋์์ ํ์ ์ฌ์ฉํ๊ธฐ
๋์ฉ๋์ GIF๋ ์ ๋๋ฉ์ด์ ์ฝํ ์ธ ๋ฅผ ์ ๋ฌํ๋ ๋ฐ ๋นํจ์จ์ ์ ๋๋ค. ์ ๋๋ฉ์ด์ ์๋ MPEG4/WebM ๋์์์, ์ ์ ์ธ ์ด๋ฏธ์ง์๋ GIF ๋์ PNG/WebP๋ฅผ ์ฌ์ฉํ์ฌ ๋คํธ์ํฌ ๋ฐ์ดํธ๋ฅผ ์ ์ฝํ ์ ์์ต๋๋ค.
ํจ์จ์ ์ผ๋ก ์ด๋ฏธ์ง ์ธ์ฝ๋ฉํ๊ธฐ
Lighthouse ๋ณด๊ณ ์์ ๊ธฐํ ์น์ ์๋ kibibytes(KiB)๋ก ์ ์ฌ์ ์ ๊ฐ ํจ๊ณผ๋ฅผ ์ ๊ณตํ๋ ์ต์ ํ๋์ง ์์ ๋ชจ๋ ์ด๋ฏธ์ง๊ฐ ๋์ด๋์ด ์์ต๋๋ค. ํ์ด์ง๊ฐ ๋ ๋นจ๋ฆฌ ๋ก๋๋๊ณ ๋ ์ ์ ๋ฐ์ดํฐ๋ฅผ ์๋นํ๋๋ก ์ด๋ฌํ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํํฉ๋๋ค. ์ ์ฌ์ ์ธ ์ ๊ฐ ํจ๊ณผ๊ฐ 4KiB ์ด์์ธ ๊ฒฝ์ฐ Lighthouse๋ ์ด๋ฏธ์ง๋ฅผ ์ต์ ํ ๊ฐ๋ฅํ ๊ฒ์ผ๋ก ํ๋๊ทธ ์ง์ ํฉ๋๋ค.
๋ ๋๋ง ์ฐจ๋จ ๋ฆฌ์์ค ์ ๊ฑฐํ๊ธฐ
ํ์ด์ง์ ์ฒซ ๋ฒ์งธ ํ์ธํธ๋ฅผ ์ฐจ๋จํ๋ ๋ชจ๋ URL์ด ๋์ด๋ฉ๋๋ค. ์ค์ํ ๋ฆฌ์์ค๋ฅผ ์ธ๋ผ์ธํ๊ณ , ์ค์ํ์ง ์์ ๋ฆฌ์์ค๋ฅผ ์ฐ๊ธฐํ๊ณ , ์ฌ์ฉํ์ง ์๋ ๊ฒ์ ์ ๊ฑฐํด์ ์ด๋ฌํ ๋ ๋๋ง ์ฐจ๋จ URL์ ์ํฅ์ ์ค์ด๋๊ฒ ์ข์ต๋๋ค.
์ฌ์ฉํ์ง ์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ค์ด๊ธฐ
JavaScript ํ์ผ์ ์ถ์ํ๋ฉด ํ์ด๋ก๋ ํฌ๊ธฐ์ ํ์ด์ง๋ฅผ ๋ก๋ํ๋ ์๊ฐ์ ์ค์ผ ์ ์์ต๋๋ค.
Lighthouse๋ ์ถ์๋์ง ์์ ๋ชจ๋ JavaScript ํ์ผ์ ๋ณด์ฌ์ฃผ๊ณ ํ์ผ์ ์ถ์ํ ๋ ์ ์ฌ์ ์ผ๋ก ์ ๊ฐํ ์ ์๋ ํค๋น๋ฐ์ดํธ( KIB )๋ฅผ ์๋ ค์ค๋๋ค.
์์ ํญ๋ชฉ๋ค ์ธ์๋ ํต๊ณผํ ๊ฐ์ฌ๋ฅผ ๋ณด๋ฉด Lighthouse๊ฐ ๊ฒ์ฌํ๋ ๋ง์ ํญ๋ณต๋ค์ด ์์ต๋๋ค.
๐Counclusion
Chrome ๊ฐ๋ฐ์ ๋๊ตฌ ๊ตฌ์์ ์จ์ด์์ด์ ๋ค์ด๊ฐ๋ณธ์ ๋ ์์๋๋ฐ ๊ต์ฅํ ์ ์ฉํ ๋๊ตฌ์๋ค. ๋ถ์ ํญ๋ชฉ์ด ์ธ์ธํ๊ณ ์์ธ๊ณผ ์์ ๋ฐฉ์๊น์ง ์ ์ํด์ค์ ๊ฝค ์น์ ํ๊ฒ ๋๊ปด์ก๋ค.
ํ๋ก์ ํธ์ ๋ค์ด๊ฐ๋ฉด ๊ฒฐ๊ณผ๋ ์ฒ์ฐธํ๋๋ผ๋ ์์ฃผ ๊ฒ์ฌํ๋ฉด์ ์นํด์ ธ๋ณด๊ณ ์ถ๋ค.