๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ Lighthouse CI๋ฅผ ํตํฉํ์ฌ ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์๋ํํ๋ ๋ฐฉ๋ฒ์ ๋ฐฐ์ฐ์ธ์. ๋ชจ๋ ์ปค๋ฐ์์ ์น์ฌ์ดํธ ์๋, ์ ๊ทผ์ฑ, SEO๋ฅผ ๊ฐ์ ํ์ธ์.
ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ: ์ง์์ ์ธ ๊ฐ์ ์ ์ํ Lighthouse CI ํตํฉ
์ค๋๋ ์ ๋์งํธ ํ๊ฒฝ์์ ์น์ฌ์ดํธ ์ฑ๋ฅ์ ๋งค์ฐ ์ค์ํฉ๋๋ค. ๋๋ฆฐ ๋ก๋ฉ ์๊ฐ, ์ ๊ทผ์ฑ ๋ฌธ์ , ์ ์กฐํ SEO๋ ์ฌ์ฉ์ ๊ฒฝํ๊ณผ, ๊ฒฐ๊ณผ์ ์ผ๋ก, ๋น์ฆ๋์ค ๊ฒฐ๊ณผ์ ํฐ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๋ ํ๋ ์ํํธ์จ์ด ๊ฐ๋ฐ ๋ผ์ดํ์ฌ์ดํด์ ํ์์ ์ธ ๋ถ๋ถ์ด ๋์์ผ๋ฉฐ, ์น์ฌ์ดํธ์ ์น ์ ํ๋ฆฌ์ผ์ด์ ์ด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ , ์์ ์ ์ด๋ฉฐ, ์ฌ์ฉ์ ์นํ์ ์ด๋๋ก ๋ณด์ฅํฉ๋๋ค. ์ด ๊ธ์์๋ ๊ฐ๋ ฅํ ์คํ์์ค ๋๊ตฌ์ธ Lighthouse CI๋ฅผ ์ง์์ ํตํฉ(CI) ํ์ดํ๋ผ์ธ์ ํตํฉํ์ฌ ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์๋ํํ๊ณ ์ง์์ ์ธ ๊ฐ์ ์ ์ด๋์ด๋ด๋ ๋ฐฉ๋ฒ์ ์์ธํ ์ดํด๋ด ๋๋ค.
ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๊ฐ ์ค์ํ ์ด์ ๋ ๋ฌด์์ผ๊น์?
Lighthouse CI์ ๋ํด ์์๋ณด๊ธฐ ์ ์ ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๊ฐ ์ ์ค์ํ์ง ์ดํดํด ๋ณด๊ฒ ์ต๋๋ค:
- ์ฌ์ฉ์ ๊ฒฝํ: ๋น ๋ฅด๊ณ ๋ฐ์์ด ์ข์ ์น์ฌ์ดํธ๋ ๋ ๋์ ์ฌ์ฉ์ ๊ฒฝํ์ ์ ๊ณตํ์ฌ ์ฐธ์ฌ๋๋ฅผ ๋์ด๊ณ ์ดํ๋ฅ ์ ์ค์ ๋๋ค. ์ผ๋ณธ ๋์ฟ์ ์ ์ฌ ๊ณ ๊ฐ์ด ๋๋ฆฌ๊ฒ ๋ก๋ฉ๋๋ ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์์ ์ ํ์ ๊ตฌ๋งคํ๋ ค๊ณ ํ๋ค๊ณ ์์ํด ๋ณด์ธ์. ๊ทธ๋ค์ ์ฌ์ดํธ๋ฅผ ํฌ๊ธฐํ๊ณ ๋์์ ์ฐพ์ ๊ฐ๋ฅ์ฑ์ด ๋์ต๋๋ค.
- SEO ์์: ๊ตฌ๊ธ๊ณผ ๊ฐ์ ๊ฒ์ ์์ง์ ์น์ฌ์ดํธ ์๋์ ์ฑ๋ฅ์ ์์ ๊ฒฐ์ ์์๋ก ๊ณ ๋ คํฉ๋๋ค. ๋น ๋ฅธ ์น์ฌ์ดํธ๋ ๊ฒ์ ๊ฒฐ๊ณผ์์ ๋ ๋์ ์์๋ฅผ ์ฐจ์งํ๋ ๊ฒฝํฅ์ด ์์ผ๋ฉฐ, ์ด๋ ๋ ๋ง์ ์ ๊ธฐ์ ํธ๋ํฝ์ ์ ๋ํฉ๋๋ค. ๊ตฌ๊ธ์ ์ฝ์ด ์น ๋ฐ์ดํ(Core Web Vitals) ์ด๋์ ํฐ๋ธ๋ SEO๋ฅผ ์ํด ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP), ์ต์ด ์ ๋ ฅ ์ง์ฐ(FID), ๋์ ๋ ์ด์์ ์ด๋(CLS)๊ณผ ๊ฐ์ ์์์ ์ค์์ฑ์ ๊ฐ์กฐํฉ๋๋ค.
- ์ ๊ทผ์ฑ: ์ฑ๋ฅ ๊ฐ์ ์ ์ข ์ข ์ฅ์ ๊ฐ ์๋ ์ฌ์ฉ์์ ์ ๊ทผ์ฑ ํฅ์์ผ๋ก ์ด์ด์ง๋๋ค. ์ต์ ํ๋ ์ฝ๋์ ์ด๋ฏธ์ง๋ ์คํฌ๋ฆฐ ๋ฆฌ๋์ ์์กดํ๊ฑฐ๋ ๋์ญํญ์ด ์ ํ๋ ์ฌ์ฉ์์ ๊ฒฝํ์ ๊ฐ์ ํ ์ ์์ต๋๋ค.
- ์ ํ์จ: ๋น ๋ฅธ ์น์ฌ์ดํธ๋ ์ ํ์จ์ ์ง์ ์ ์ธ ์ํฅ์ ๋ฏธ์น ์ ์์ต๋๋ค. ์ฐ๊ตฌ์ ๋ฐ๋ฅด๋ฉด ํ์ด์ง ๋ก๋ ์๊ฐ์ด ๋จ 1์ด๋ง ์ง์ฐ๋์ด๋ ์ ํ์จ์ด ํฌ๊ฒ ๊ฐ์ํ ์ ์์ต๋๋ค. ์ธ๋ ๋ญ๋ฐ์ด์ ์ฌ์ฉ์๊ฐ ํญ๊ณตํธ์ ์์ฝํ๋ ค๊ณ ํ๋ค๊ณ ์๊ฐํด ๋ณด์ธ์. ๋๋ฆฐ ์์ฝ ๊ณผ์ ์ ๊ทธ๋ค์ด ๊ตฌ๋งค๋ฅผ ํฌ๊ธฐํ๊ณ ๊ฒฝ์์ฌ๋ฅผ ์ ํํ๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
- ๋ฆฌ์์ค ์ต์ ํ: ์ฑ๋ฅ ํ ์คํธ๋ ๋ฆฌ์์ค๋ฅผ ์ต์ ํํ ์ ์๋ ์์ญ์ ์๋ณํ๋ ๋ฐ ๋์์ ์ฃผ์ด ์๋ฒ ์ธํ๋ผ ๋ฐ ๋์ญํญ ์ฌ์ฉ ์ธก๋ฉด์์ ๋น์ฉ์ ์ ๊ฐํ ์ ์์ต๋๋ค.
Lighthouse CI ์๊ฐ
Lighthouse CI๋ CI/CD ํ์ดํ๋ผ์ธ๊ณผ ์ํํ๊ฒ ํตํฉ๋๋๋ก ์ค๊ณ๋ ์คํ์์ค ์๋ํ ๋๊ตฌ์ ๋๋ค. ๊ตฌ๊ธ์ด ๊ฐ๋ฐํ ์ธ๊ธฐ ์๋ ๊ฐ์ฌ ๋๊ตฌ์ธ Lighthouse๋ฅผ ์คํํ๊ณ ์น์ฌ์ดํธ์ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, SEO, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ ํ๋ก๊ทธ๋ ์๋ธ ์น ์ฑ(PWA) ์ค์ ์ฌ๋ถ์ ๋ํ ํต์ฐฐ๋ ฅ์ ์ ๊ณตํฉ๋๋ค. Lighthouse CI๋ ๋ค์๊ณผ ๊ฐ์ ๋์์ ์ค๋๋ค:
- ์ฑ๋ฅ ๊ฐ์ฌ ์๋ํ: ๋ชจ๋ ์ปค๋ฐ ๋๋ ํ ๋ฆฌํ์คํธ์ ๋ํด ์๋์ผ๋ก Lighthouse ๊ฐ์ฌ๋ฅผ ์คํํฉ๋๋ค.
- ์๊ฐ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์ถ์ : ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์งํ๋ฅผ ๋ชจ๋ํฐ๋งํ๊ณ ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ์๋ณํฉ๋๋ค.
- ์ฑ๋ฅ ์์ฐ ์ค์ : ์ฑ๋ฅ ์์ฐ์ ์ ์ํ๊ณ ์ด๋ฅผ ์ด๊ณผํ๋ฉด ๋น๋๋ฅผ ์คํจ์ํต๋๋ค.
- CI/CD ์์คํ ๊ณผ ํตํฉ: GitHub Actions, GitLab CI, CircleCI, Jenkins์ ๊ฐ์ ์ธ๊ธฐ ์๋ CI/CD ์์คํ ๊ณผ ํตํฉํฉ๋๋ค.
- ์ฑ๋ฅ ๋ฌธ์ ์ ๋ํ ํ์ : Lighthouse ๋ณด๊ณ ์๋ฅผ ๊ณต์ ํ๊ณ ํ๊ณผ ํ๋ ฅํ์ฌ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํฉ๋๋ค.
Lighthouse CI ์ค์ ํ๊ธฐ
ํ๋ก์ ํธ์ Lighthouse CI๋ฅผ ์ค์ ํ๋ ๋จ๊ณ๋ณ ๊ฐ์ด๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
1. Lighthouse CI ์ค์นํ๊ธฐ
npm ๋๋ yarn์ ์ฌ์ฉํ์ฌ Lighthouse CI CLI๋ฅผ ์ ์ญ์ผ๋ก ์ค์นํฉ๋๋ค:
npm install -g @lhci/cli
yarn global add @lhci/cli
2. Lighthouse CI ๊ตฌ์ฑํ๊ธฐ
ํ๋ก์ ํธ์ ๋ฃจํธ ๋๋ ํฐ๋ฆฌ์ lighthouserc.js ํ์ผ์ ๋ง๋ค์ด Lighthouse CI๋ฅผ ๊ตฌ์ฑํฉ๋๋ค. ๋ค์์ ๊ตฌ์ฑ ์์์
๋๋ค:
module.exports = {
ci:
{
collect:
{
url: ['http://localhost:3000', 'http://localhost:3000/about'],
startServerCommand: 'npm start',
numberOfRuns: 3,
},
assert:
{
assertions:
{
'categories:performance': ['warn', { minScore: 0.9 }],
'categories:accessibility': ['error', { minScore: 1 }],
'categories:best-practices': ['warn', { minScore: 0.9 }],
'categories:seo': ['warn', { minScore: 0.9 }],
'categories:pwa': ['off'],
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
'largest-contentful-paint': ['warn', { maxNumericValue: 4000 }],
'total-blocking-time': ['warn', { maxNumericValue: 200 }],
'cumulative-layout-shift': ['warn', { maxNumericValue: 0.1 }],
},
},
upload:
{
target: 'temporary-redirect',
},
},
};
์ด ๊ตฌ์ฑ์ ์์ธํ ์ดํด๋ณด๊ฒ ์ต๋๋ค:
collect.url: ๊ฐ์ฌํ URL์ ๋ฐฐ์ด์ ๋๋ค. ์ด ์์๋ ํํ์ด์ง์ 'about' ํ์ด์ง๋ฅผ ๊ฐ์ฌํฉ๋๋ค. ๋ค์ํ ์ฌ์ฉ ์ฌ๋ก๋ฅผ ๊ณ ๋ คํ์ฌ ์น์ฌ์ดํธ์ ๋ชจ๋ ์ค์ํ ํ์ด์ง๋ฅผ ํฌํจํด์ผ ํฉ๋๋ค. ์๋ฅผ ๋ค์ด, ์ ์ ์๊ฑฐ๋ ์ฌ์ดํธ์๋ ํํ์ด์ง, ์ ํ ๋ชฉ๋ก ํ์ด์ง, ์ ํ ์์ธ ํ์ด์ง ๋ฐ ๊ฒฐ์ ํ๋ก์ธ์ค๊ฐ ํฌํจ๋ ์ ์์ต๋๋ค.collect.startServerCommand: ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์์ํ๋ ๋ช ๋ น์ด์ ๋๋ค. Lighthouse CI๊ฐ ๋ก์ปฌ ๊ฐ๋ฐ ํ๊ฒฝ์ ๋ํด ์คํ๋์ด์ผ ํ๋ ๊ฒฝ์ฐ ํ์ํฉ๋๋ค.collect.numberOfRuns: ๊ฐ URL์ ๋ํด Lighthouse ๊ฐ์ฌ๋ฅผ ์คํํ ํ์์ ๋๋ค. ์ฌ๋ฌ ๋ฒ์ ๊ฐ์ฌ๋ฅผ ์คํํ๋ฉด ๋คํธ์ํฌ ์ํ ๋ฐ ๊ธฐํ ์์ธ์ ๋ณ๋์ ์ํํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.assert.assertions: Lighthouse ๊ฐ์ฌ ๊ฒฐ๊ณผ๋ฅผ ๊ฒ์ฆํ๊ธฐ ์ํ ์ด์ค์ ์งํฉ์ ๋๋ค. ๊ฐ ์ด์ค์ ์ ๋ฉํธ๋ฆญ ๋๋ ์นดํ ๊ณ ๋ฆฌ์ ์๊ณ๊ฐ์ ์ง์ ํฉ๋๋ค. ์๊ณ๊ฐ์ด ์ถฉ์กฑ๋์ง ์์ผ๋ฉด ๋น๋๊ฐ ์คํจํฉ๋๋ค. ์ด ์์์์๋ ์ฑ๋ฅ, ์ ๊ทผ์ฑ, ๋ชจ๋ฒ ์ฌ๋ก ๋ฐ SEO ์นดํ ๊ณ ๋ฆฌ์ ๋ํ ์๊ณ๊ฐ์ ์ค์ ํฉ๋๋ค. ๋ํ ์ต์ด ์ฝํ ์ธ ํ ํ์ธํธ(FCP), ์ต๋ ์ฝํ ์ธ ํ ํ์ธํธ(LCP), ์ด ์ฐจ๋จ ์๊ฐ(TBT), ๋์ ๋ ์ด์์ ์ด๋(CLS)๊ณผ ๊ฐ์ ํน์ ๋ฉํธ๋ฆญ์ ๋ํ ์๊ณ๊ฐ๋ ์ค์ ํฉ๋๋ค.upload.target: Lighthouse ๋ณด๊ณ ์๋ฅผ ์ ๋ก๋ํ ์์น๋ฅผ ์ง์ ํฉ๋๋ค.temporary-redirect๋ ๋ณด๊ณ ์๋ฅผ ์์ ์ ์ฅ ์์น์ ์ ๋ก๋ํ๊ณ ์ก์ธ์คํ ์ ์๋ URL์ ์ ๊ณตํฉ๋๋ค. ๋ค๋ฅธ ์ต์ ์ผ๋ก๋ Lighthouse CI ์๋ฒ ๋๋ Google Cloud Storage๋ Amazon S3์ ๊ฐ์ ํด๋ผ์ฐ๋ ์คํ ๋ฆฌ์ง ์๋ฃจ์ ์ ์ฌ์ฉํ๋ ๊ฒ์ด ์์ต๋๋ค.
3. CI/CD ์์คํ ๊ณผ ํตํฉํ๊ธฐ
๋ค์ ๋จ๊ณ๋ Lighthouse CI๋ฅผ CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉํ๋ ๊ฒ์ ๋๋ค. GitHub Actions์ ํตํฉํ๋ ๋ฐฉ๋ฒ์ ์์๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค:
๋ฆฌํฌ์งํ ๋ฆฌ์ .github/workflows/lighthouse.yml ํ์ผ์ ์์ฑํฉ๋๋ค:
name: Lighthouse CI
on:
push:
branches: [main]
pull_request:
jobs:
lighthouse:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '16'
- name: Install Dependencies
run: npm ci
- name: Run Lighthouse CI
run: | npm run build
lhci autorun
์ด ์ํฌํ๋ก์ฐ๋ ๋ค์ ๋จ๊ณ๋ฅผ ์ํํฉ๋๋ค:
- ์ฝ๋๋ฅผ ์ฒดํฌ์์ํฉ๋๋ค.
- Node.js๋ฅผ ์ค์ ํฉ๋๋ค.
- ์์กด์ฑ์ ์ค์นํฉ๋๋ค.
- Lighthouse CI๋ฅผ ์คํํฉ๋๋ค. ์ด ๋จ๊ณ๋ ๋จผ์ ์ ํ๋ฆฌ์ผ์ด์
์ ๋น๋ํ(
npm run build) ๋ค์, Lighthouse ๊ฐ์ฌ๋ฅผ ์คํํ๊ณ ๊ตฌ์ฑ๋ ์๊ณ๊ฐ์ ๋ํด ๊ฒฐ๊ณผ๋ฅผ ์ด์ค์ ํ๋lhci autorun์ ์คํํฉ๋๋ค.
์ด ์ํฌํ๋ก์ฐ๋ฅผ ํน์ CI/CD ์์คํ
๋ฐ ํ๋ก์ ํธ ์๊ตฌ ์ฌํญ์ ๋ง๊ฒ ์กฐ์ ํ์ธ์. ์๋ฅผ ๋ค์ด, GitLab CI๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ ์ ์ฌํ ๋จ๊ณ๋ก .gitlab-ci.yml ํ์ผ์ ๊ตฌ์ฑํ ๊ฒ์
๋๋ค.
4. Lighthouse CI ์คํํ๊ธฐ
๋ณ๊ฒฝ ์ฌํญ์ ์ปค๋ฐํ๊ณ ๋ฆฌํฌ์งํ ๋ฆฌ๋ก ํธ์ํ์ธ์. CI/CD ํ์ดํ๋ผ์ธ์ด ์๋์ผ๋ก Lighthouse CI๋ฅผ ์คํํฉ๋๋ค. ์ด์ค์ ์ค ํ๋๋ผ๋ ์คํจํ๋ฉด ๋น๋๊ฐ ์คํจํ์ฌ ๊ฐ๋ฐ์์๊ฒ ๊ท์คํ ํผ๋๋ฐฑ์ ์ ๊ณตํฉ๋๋ค. Lighthouse CI ๋ณด๊ณ ์๋ CI/CD ์์คํ ์์ ์ ๊ณตํ๋ URL์์ ํ์ธํ ์ ์์ต๋๋ค.
๊ณ ๊ธ ๊ตฌ์ฑ ๋ฐ ์ฌ์ฉ์ ์ ์
Lighthouse CI๋ ๋ค์ํ ๊ตฌ์ฑ ์ต์ ๊ณผ ์ฌ์ฉ์ ์ ์ ๊ฐ๋ฅ์ฑ์ ์ ๊ณตํฉ๋๋ค. ๋ค์์ ๋ช ๊ฐ์ง ๊ณ ๊ธ ๊ธฐ๋ฅ์ ๋๋ค:
1. Lighthouse CI ์๋ฒ ์ฌ์ฉํ๊ธฐ
Lighthouse CI ์๋ฒ๋ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์งํ ์ถ์ , ํ๋ก์ ํธ ๊ด๋ฆฌ, ์ฑ๋ฅ ๋ฌธ์ ์ ๋ํ ํ์
์ ์ํ ์ค์ ์ง์ค์ ๋์๋ณด๋๋ฅผ ์ ๊ณตํฉ๋๋ค. Lighthouse CI ์๋ฒ๋ฅผ ์ฌ์ฉํ๋ ค๋ฉด ์ธ์คํด์ค๋ฅผ ์ค์ ํ๊ณ ๋ณด๊ณ ์๋ฅผ ์๋ฒ์ ์
๋ก๋ํ๋๋ก lighthouserc.js ํ์ผ์ ๊ตฌ์ฑํด์ผ ํฉ๋๋ค.
๋จผ์ ์๋ฒ๋ฅผ ๋ฐฐํฌํฉ๋๋ค. Docker, Heroku, AWS ๋ฐ Google Cloud์ ๊ฐ์ ํด๋ผ์ฐ๋ ์ ๊ณต์ ์ฒด๋ฅผ ํฌํจํ ๋ค์ํ ๋ฐฐํฌ ์ต์ ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์๋ฒ ๋ฐฐํฌ์ ๋ํ ์์ธํ ์ง์นจ์ Lighthouse CI ์ค๋ช ์๋ฅผ ์ฐธ์กฐํ์ธ์.
์๋ฒ๊ฐ ์คํ๋๋ฉด ์๋ฒ๋ฅผ ๊ฐ๋ฆฌํค๋๋ก lighthouserc.js ํ์ผ์ ์
๋ฐ์ดํธํฉ๋๋ค:
module.exports = {
ci:
{
collect: {
url: ['http://localhost:3000'],
startServerCommand: 'npm start',
},
assert: {
assertions: {
'categories:performance': ['warn', { minScore: 0.9 }],
},
},
upload:
{
target: 'lhci',
serverBaseUrl: 'YOUR_LHCI_SERVER_URL',
token: 'YOUR_LHCI_SERVER_TOKEN',
},
},
};
YOUR_LHCI_SERVER_URL์ Lighthouse CI ์๋ฒ์ URL๋ก, YOUR_LHCI_SERVER_TOKEN์ ์๋ฒ์์ ์์ฑ๋ ํ ํฐ์ผ๋ก ๋ฐ๊พธ์ธ์. ์ด ํ ํฐ์ CI ํ์ดํ๋ผ์ธ์ ์๋ฒ๋ก ์ธ์ฆํฉ๋๋ค.
2. ์ฑ๋ฅ ์์ฐ ์ค์ ํ๊ธฐ
์ฑ๋ฅ ์์ฐ์ ํน์ ๋ฉํธ๋ฆญ์ ๋ํด ํ์ฉ ๊ฐ๋ฅํ ์๊ณ๊ฐ์ ์ ์ํฉ๋๋ค. Lighthouse CI๋ฅผ ์ฌ์ฉํ๋ฉด ์ฑ๋ฅ ์์ฐ์ ์ค์ ํ๊ณ ํด๋น ์์ฐ์ ์ด๊ณผํ๋ฉด ๋น๋๋ฅผ ์คํจ์ํฌ ์ ์์ต๋๋ค. ์ด๋ ์ฑ๋ฅ ์ ํ๋ฅผ ๋ฐฉ์งํ๊ณ ์น์ฌ์ดํธ๊ฐ ํ์ฉ ๊ฐ๋ฅํ ์ฑ๋ฅ ํ๊ณ ๋ด์ ์๋๋ก ๋ณด์ฅํ๋ ๋ฐ ๋์์ด ๋ฉ๋๋ค.
lighthouserc.js ํ์ผ์ assert.assertions ์์ฑ์ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ์์ฐ์ ์ ์ํ ์ ์์ต๋๋ค. ์๋ฅผ ๋ค์ด, ์ต์ด ์ฝํ
์ธ ํ ํ์ธํธ(FCP)์ ๋ํ ์ฑ๋ฅ ์์ฐ์ ์ค์ ํ๋ ค๋ฉด ๋ค์ ์ด์ค์
์ ์ถ๊ฐํ ์ ์์ต๋๋ค:
'first-contentful-paint': ['warn', { maxNumericValue: 2500 }],
์ด ์ด์ค์ ์ FCP๊ฐ 2500๋ฐ๋ฆฌ์ด๋ณด๋ค ํฌ๋ฉด ๋น๋๋ฅผ ์คํจ์ํต๋๋ค.
3. Lighthouse ๊ตฌ์ฑ ์ฌ์ฉ์ ์ ์ํ๊ธฐ
Lighthouse CI๋ฅผ ์ฌ์ฉํ๋ฉด ํน์ ์๊ตฌ์ ๋ง๊ฒ Lighthouse ๊ตฌ์ฑ์ ์ฌ์ฉ์ ์ ์ํ ์ ์์ต๋๋ค. ๋ค์๊ณผ ๊ฐ์ ๋ค์ํ Lighthouse ์ค์ ์ ๊ตฌ์ฑํ ์ ์์ต๋๋ค:
onlyAudits: ์คํํ ๊ฐ์ฌ ๋ชฉ๋ก์ ์ง์ ํฉ๋๋ค.skipAudits: ๊ฑด๋๋ธ ๊ฐ์ฌ ๋ชฉ๋ก์ ์ง์ ํฉ๋๋ค.throttling: ๋ค์ํ ๋คํธ์ํฌ ์กฐ๊ฑด์ ์๋ฎฌ๋ ์ด์ ํ๋๋ก ๋คํธ์ํฌ ์ค๋กํ๋ง ์ค์ ์ ๊ตฌ์ฑํฉ๋๋ค.formFactor: ์๋ฎฌ๋ ์ด์ ํ ํผ ํฉํฐ(๋ฐ์คํฌํฑ ๋๋ ๋ชจ๋ฐ์ผ)๋ฅผ ์ง์ ํฉ๋๋ค.screenEmulation: ํ๋ฉด ์๋ฎฌ๋ ์ด์ ์ค์ ์ ๊ตฌ์ฑํฉ๋๋ค.
Lighthouse ๊ตฌ์ฑ์ ์ฌ์ฉ์ ์ ์ํ๋ ค๋ฉด lhci autorun ๋ช
๋ น์ด์ ์ฌ์ฉ์ ์ ์ Lighthouse ๊ตฌ์ฑ ํ์ผ์ ๊ฐ๋ฆฌํค๋ --config-path ํ๋๊ทธ๋ฅผ ์ ๋ฌํ ์ ์์ต๋๋ค. ์ ์ฒด ๊ตฌ์ฑ ์ต์
๋ชฉ๋ก์ Lighthouse ์ค๋ช
์๋ฅผ ์ฐธ์กฐํ์ธ์.
4. ์ธ์ฆ๋ ํ์ด์ง ๊ฐ์ฌํ๊ธฐ
์ธ์ฆ๋ ํ์ด์ง๋ฅผ ๊ฐ์ฌํ๋ ค๋ฉด ์ฝ๊ฐ ๋ค๋ฅธ ์ ๊ทผ ๋ฐฉ์์ด ํ์ํฉ๋๋ค. ๊ฐ์ฌ๋ฅผ ์คํํ๊ธฐ ์ ์ Lighthouse CI์ ์ธ์ฆํ ์ ์๋ ๋ฐฉ๋ฒ์ ์ ๊ณตํด์ผ ํฉ๋๋ค. ์ด๋ ์ฟ ํค๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ ๋ก๊ทธ์ธ ํ๋ก์ธ์ค๋ฅผ ์คํฌ๋ฆฝํ ํ์ฌ ์ํํ ์ ์์ต๋๋ค.
์ผ๋ฐ์ ์ธ ์ ๊ทผ ๋ฐฉ์ ์ค ํ๋๋ --extra-headers ํ๋๊ทธ๋ฅผ ์ฌ์ฉํ์ฌ ์ธ์ฆ ์ฟ ํค๋ฅผ Lighthouse CI์ ์ ๋ฌํ๋ ๊ฒ์
๋๋ค. ์ฟ ํค๋ ์น์ฌ์ดํธ์ ๋ก๊ทธ์ธํ ํ ๋ธ๋ผ์ฐ์ ์ ๊ฐ๋ฐ์ ๋๊ตฌ์์ ์ป์ ์ ์์ต๋๋ค.
๋๋ Puppeteer ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ์ฌ ๋ก๊ทธ์ธ ํ๋ก์ธ์ค๋ฅผ ์๋ํํ ๋ค์ ์ธ์ฆ๋ ํ์ด์ง์์ Lighthouse ๊ฐ์ฌ๋ฅผ ์คํํ ์ ์์ต๋๋ค. ์ด ์ ๊ทผ ๋ฐฉ์์ ๋ ๋ง์ ์ ์ฐ์ฑ์ ์ ๊ณตํ๋ฉฐ ๋ณต์กํ ์ธ์ฆ ์๋๋ฆฌ์ค๋ฅผ ์ฒ๋ฆฌํ ์ ์๊ฒ ํด์ค๋๋ค.Lighthouse CI๋ฅผ ์ด์ฉํ ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ ๋ชจ๋ฒ ์ฌ๋ก
Lighthouse CI์ ์ด์ ์ ๊ทน๋ํํ๋ ค๋ฉด ๋ค์ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด์ธ์:
- ์ ๊ธฐ์ ์ผ๋ก Lighthouse CI ์คํํ๊ธฐ: Lighthouse CI๋ฅผ CI/CD ํ์ดํ๋ผ์ธ์ ํตํฉํ์ฌ ๋ชจ๋ ์ปค๋ฐ ๋๋ ํ ๋ฆฌํ์คํธ์ ๋ํด ๊ฐ์ฌ๋ฅผ ์๋์ผ๋ก ์คํํ์ธ์. ์ด๋ฅผ ํตํด ์ฑ๋ฅ ์ ํ๋ฅผ ์กฐ๊ธฐ์ ๊ฐ์งํ๊ณ ์ ์ํ๊ฒ ํด๊ฒฐํ ์ ์์ต๋๋ค.
- ํ์ค์ ์ธ ์ฑ๋ฅ ์์ฐ ์ค์ ํ๊ธฐ: ๋์ ์ ์ด์ง๋ง ๋ฌ์ฑ ๊ฐ๋ฅํ ์ฑ๋ฅ ์์ฐ์ ์ ์ํ์ธ์. ๋ณด์์ ์ธ ์์ฐ์ผ๋ก ์์ํ์ฌ ์น์ฌ์ดํธ ์ฑ๋ฅ์ด ํฅ์๋จ์ ๋ฐ๋ผ ์ ์ฐจ ์์ฐ์ ๊ฐํํ์ธ์. ํ์ด์ง์ ๋ณต์ก์ฑ๊ณผ ์ค์๋์ ๋ฐ๋ผ ์ ํ๋ณ๋ก ๋ค๋ฅธ ์์ฐ์ ์ค์ ํ๋ ๊ฒ์ ๊ณ ๋ คํ์ธ์.
- ํต์ฌ ์งํ์ ์ง์คํ๊ธฐ: ์ฌ์ฉ์ ๊ฒฝํ๊ณผ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ์ ๊ฐ์ฅ ํฐ ์ํฅ์ ๋ฏธ์น๋ ํต์ฌ ์ฑ๋ฅ ์งํ์ ์ฐ์ ์์๋ฅผ ๋์ธ์. ๊ตฌ๊ธ์ ์ฝ์ด ์น ๋ฐ์ดํ(LCP, FID, CLS)์ด ์ข์ ์์์ ์ ๋๋ค.
- ์ฑ๋ฅ ๋ฌธ์ ์กฐ์ฌ ๋ฐ ํด๊ฒฐํ๊ธฐ: Lighthouse CI๊ฐ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์๋ณํ๋ฉด ์ฒ ์ ํ ์กฐ์ฌํ๊ณ ์ ์ ํ ํด๊ฒฐ์ฑ ์ ๊ตฌํํ์ธ์. Lighthouse ๋ณด๊ณ ์๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ์ ๊ทผ๋ณธ ์์ธ์ ํ์ ํ๊ณ ๊ฐ์ฅ ์ํฅ๋ ฅ ์๋ ์์ ์ฌํญ์ ์ฐ์ ์์๋ฅผ ์ ํ์ธ์.
- ์๊ฐ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ๋ชจ๋ํฐ๋งํ๊ธฐ: ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ ์งํ๋ฅผ ์ถ์ ํ์ฌ ์ถ์ธ์ ํจํด์ ํ์ ํ์ธ์. Lighthouse CI ์๋ฒ ๋๋ ๋ค๋ฅธ ๋ชจ๋ํฐ๋ง ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ์ฑ๋ฅ ๋ฐ์ดํฐ๋ฅผ ์๊ฐํํ๊ณ ๊ฐ์ ํ ์์ญ์ ์๋ณํ์ธ์.
- ํ ๊ต์กํ๊ธฐ: ํ์ด ํ๋ก ํธ์๋ ์ฑ๋ฅ์ ์ค์์ฑ๊ณผ Lighthouse CI๋ฅผ ํจ๊ณผ์ ์ผ๋ก ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ ์ดํดํ๋๋ก ํ์ธ์. ๊ทธ๋ค์ ๊ธฐ์ ๊ณผ ์ง์์ ํฅ์์ํค๋ ๋ฐ ๋์์ด ๋๋ ๊ต์ก๊ณผ ์๋ฃ๋ฅผ ์ ๊ณตํ์ธ์.
- ๊ธ๋ก๋ฒ ๋คํธ์ํฌ ํ๊ฒฝ ๊ณ ๋ คํ๊ธฐ: ์ฑ๋ฅ ์์ฐ์ ์ค์ ํ ๋ ์ ์ธ๊ณ ์ฌ๋ฌ ์ง์ญ์ ๋คํธ์ํฌ ํ๊ฒฝ์ ๊ณ ๋ คํ์ธ์. ์ธํฐ๋ท ์๋๊ฐ ๋๋ฆฐ ์ง์ญ์ ์ฌ์ฉ์๋ ๋น ๋ฅธ ์๋๋ฅผ ๊ฐ์ง ์ง์ญ์ ์ฌ์ฉ์์ ๋ค๋ฅธ ๊ฒฝํ์ ํ ์ ์์ต๋๋ค. ํ ์คํธ ์ค์ ๋ค์ํ ๋คํธ์ํฌ ํ๊ฒฝ์ ์๋ฎฌ๋ ์ด์ ํ๋ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์.
- ์ด๋ฏธ์ง ์ต์ ํํ๊ธฐ: ์ด๋ฏธ์ง ์ต์ ํ๋ ํ๋ก ํธ์๋ ์ฑ๋ฅ์ ์ค์ํ ์ธก๋ฉด์ ๋๋ค. ImageOptim, TinyPNG ๋๋ ์จ๋ผ์ธ ๋ณํ๊ธฐ์ ๊ฐ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ฌ ํ์ง ์ ํ ์์ด ์ด๋ฏธ์ง๋ฅผ ์์ถํ๊ณ ์ต์ ํํ์ธ์. WebP์ ๊ฐ์ด JPEG ๋ฐ PNG์ ๊ฐ์ ๊ธฐ์กด ํ์๋ณด๋ค ๋ ๋์ ์์ถ๋ฅ ๊ณผ ํ์ง์ ์ ๊ณตํ๋ ์ต์ ์ด๋ฏธ์ง ํ์์ ์ฌ์ฉํ์ธ์. ๋ทฐํฌํธ์์ ์ฆ์ ๋ณด์ด์ง ์๋ ์ด๋ฏธ์ง์ ๋ํด ์ง์ฐ ๋ก๋ฉ(lazy loading)์ ๊ตฌํํ์ธ์.
- ์ฝ๋ ์ถ์ ๋ฐ ์์ถํ๊ธฐ: HTML, CSS, JavaScript ์ฝ๋๋ฅผ ์ถ์(minify)ํ์ฌ ํ์ผ ํฌ๊ธฐ๋ฅผ ์ค์ด์ธ์. UglifyJS, Terser ๋๋ ์จ๋ผ์ธ ์ถ์ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ์ธ์. ์๋ฒ์์ Gzip ๋๋ Brotli ์์ถ์ ํ์ฑํํ์ฌ ์ ์ก๋๋ ํ์ผ์ ํฌ๊ธฐ๋ฅผ ๋์ฑ ์ค์ด์ธ์.
- ๋ธ๋ผ์ฐ์ ์บ์ฑ ํ์ฉํ๊ธฐ: ์ด๋ฏธ์ง, CSS, JavaScript ํ์ผ๊ณผ ๊ฐ์ ์ ์ ์์ฐ์ ๋ํด ์ ์ ํ ์บ์ ํค๋๋ฅผ ์ค์ ํ๋๋ก ์๋ฒ๋ฅผ ๊ตฌ์ฑํ์ธ์. ์ด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ๋ ์ด๋ฌํ ์์ฐ์ ์บ์ํ๊ณ ๋ฐ๋ณต์ ์ผ๋ก ๋ค์ด๋ก๋ํ๋ ๊ฒ์ ํผํ ์ ์์ต๋๋ค.
๊ฒฐ๋ก
Lighthouse CI๋ฅผ ๊ฐ๋ฐ ์ํฌํ๋ก์ฐ์ ํตํฉํ๋ ๊ฒ์ ๊ณ ์ฑ๋ฅ, ์ ๊ทผ์ฑ์ด ๋ฐ์ด๋๊ณ SEO ์นํ์ ์ธ ์น์ฌ์ดํธ๋ฅผ ๊ตฌ์ถํ๊ธฐ ์ํ ์ค์ํ ๋จ๊ณ์ ๋๋ค. ํ๋ก ํธ์๋ ์ฑ๋ฅ ํ ์คํธ๋ฅผ ์๋ํํ๊ณ ์๊ฐ ๊ฒฝ๊ณผ์ ๋ฐ๋ฅธ ์ฑ๋ฅ์ ์ถ์ ํจ์ผ๋ก์จ ์ฑ๋ฅ ๋ฌธ์ ๋ฅผ ์กฐ๊ธฐ์ ์๋ณํ๊ณ ํด๊ฒฐํ๋ฉฐ ์ฌ์ฉ์ ๊ฒฝํ์ ๊ฐ์ ํ๊ณ ๋น์ฆ๋์ค ๊ฒฐ๊ณผ๋ฅผ ์ด๋์ด๋ผ ์ ์์ต๋๋ค. Lighthouse CI๋ฅผ ๋์ ํ๊ณ ์ง์์ ์ธ ์ฑ๋ฅ ๊ฐ์ ์ ๊ฐ๋ฐ ํ๋ก์ธ์ค์ ํต์ฌ ๊ฐ์น๋ก ์ผ์ผ์ธ์. ์น์ฌ์ดํธ ์ฑ๋ฅ์ ์ผํ์ฑ ๋ ธ๋ ฅ์ด ์๋๋ผ ์ง์์ ์ธ ๊ด์ฌ๊ณผ ์ต์ ํ๊ฐ ํ์ํ ์ง์์ ์ธ ๊ณผ์ ์์ ๊ธฐ์ตํ์ธ์. ๋ฌธํ์ , ์ง์ญ์ ์์ธ์ ๊ณ ๋ คํ์ฌ ๋ชจ๋ ์ฌ์ฉ์๊ฐ ์์น๋ ์ฅ์น์ ๊ด๊ณ์์ด ์ํํ ๊ฒฝํ์ ํ ์ ์๋๋ก ๋ณด์ฅํ์ธ์. ์ด ๊ธ์์ ์ค๋ช ํ ๋ชจ๋ฒ ์ฌ๋ก๋ฅผ ๋ฐ๋ฅด๋ฉด ์ ์ธ๊ณ ์ฌ์ฉ์์๊ฒ ๋น ๋ฅด๊ณ ์์ ์ ์ด๋ฉฐ ์ฆ๊ฑฐ์ด ๊ฒฝํ์ ์ ๊ณตํ๋ ์น์ฌ์ดํธ๋ฅผ ๋ณด์ฅํ ์ ์์ต๋๋ค.