🚀 Lighthouse란?
Lighthouse는 Google에서 제공하는 웹사이트 성능 및 품질 평가 도구입니다.
웹 페이지의 로딩 속도(Performance), 접근성(Accessibility), SEO(검색 엔진 최적화), 최신 웹 기술 적용 여부(Best Practices) 등을 분석하여 100점 만점 기준으로 점수를 제공합니다.
Lighthouse는 웹사이트를 다음 5가지 기준으로 평가합니다:
- Performance (성능)
- Accessibility (접근성)
- Best Practices (최적화된 웹 기술 적용 여부)
- SEO (검색 엔진 최적화)
- Progressive Web App (PWA 지원 여부)
특히 Performance(성능) 항목은 사용자 경험을 개선하는 데 가장 중요한 지표이며, 주요 평가 요소로 LCP, FCP, TBT, CLS 등이 있습니다.
Lighthouse 점수가 중요한 이유
- 검색 엔진 최적화(SEO) → 점수가 높을수록 검색 노출 순위 상승
- 사용자 경험(UX) 향상 → 빠른 페이지 로딩과 높은 접근성 제공
- 소셜 미디어 최적화 → 링크 공유 시 미리보기(OG 메타 태그) 개선
✅ Performance(성능) 최적화: Lighthouse 점수 개선
🔍 문제점
- LCP(Largest Contentful Paint) 시간이 길어 주요 콘텐츠가 화면에 표시되는 속도가 느림.
- FCP(First Contentful Paint) 지연으로 사용자가 페이지가 로딩 중인지 알기 어려움.
- TBT(Total Blocking Time) 가 높아, 페이지가 반응하기까지 시간이 오래 걸림.
- 불필요한 자바스크립트 및 CSS 로드 → 네트워크 비용 증가로 인해 로딩 속도 저하.
📊 Performance(성능) 지표 설명
| 지표 | 의미 | 영향 | 기준 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 가장 큰 콘텐츠(이미지, 텍스트 등)가 화면에 표시되는 시간 | 로딩 속도 | 2.5초 이하 |
| FCP (First Contentful Paint) | 첫 번째 콘텐츠(텍스트, 이미지)가 렌더링되는 시간 | 초기 로딩 | 1.8초 이하 |
| TBT (Total Blocking Time) | 메인 스레드가 차단된 총 시간 | 페이지 반응성 | 300ms 이하 |
| CLS (Cumulative Layout Shift) | 레이아웃이 갑자기 바뀌는 정도 | 시각적 안정성 | 0.1 이하 |
🛠 해결 방법
🔹 1. 이미지 최적화 (next/image 적용 및 WebP 변환)
✅ 고해상도 이미지 최적화 → next/image 사용하여 WebP 포맷 적용
✅ Lazy Loading 기본 적용 → 사용자가 스크롤할 때 이미지를 로드하여 초기 페이지 로딩 속도 개선
📌 적용 코드 (next/image 활용)
import Image from "next/image";
export default function OptimizedImage() {
return (
<Image
src="/example-image.jpg"
alt="예제 이미지"
width={800}
height={600}
quality={75} // 이미지 품질 최적화 (기본값 75)
layout="intrinsic" // 컨테이너 크기에 맞게 자동 조정
priority // 중요 이미지 빠른 로딩 (Above-the-Fold)
/>
);
}
🔹 2. 불필요한 자바스크립트 제거 (tree shaking, swcMinify 적용)
✅ 사용하지 않는 코드 제거 (tree shaking 적용)
✅ Next.js 최신 swcMinify 적용 → 번들 크기 축소 및 JavaScript 로딩 속도 개선
📌 적용 코드 (next.config.js)
module.exports = {
experimental: {
optimizeCss: true, // 불필요한 CSS 제거
},
swcMinify: true, // 최신 SWC 컴파일러로 JavaScript 크기 최적화
};
🔹 3. 텍스트 압축 적용 (gzip, brotli 활성화)
✅ Next.js 내장 compress 옵션 사용하여 압축 적용
✅ HTML, CSS, JavaScript 전송 크기 감소로 네트워크 성능 최적화
📌 적용 코드 (next.config.js)
module.exports = {
compress: true, // gzip 및 brotli 압축 활성화
productionBrowserSourceMaps: false, // 배포 시 소스맵 제거하여 JS 크기 줄이기
};
🔹 4. 코드 스플리팅 및 Lazy Loading 적용
✅ React.lazy, dynamic import()를 사용하여 초기 JS 로딩 최소화
✅ 중요하지 않은 컴포넌트는 페이지 진입 후 로드 (Lazy Load 적용)
📌 적용 코드 (React.lazy 및 dynamic import() 활용)
import dynamic from "next/dynamic";
// 클라이언트에서만 로드 (서버에서는 실행되지 않음)
const HeavyComponent = dynamic(() => import("@/components/HeavyComponent"), {
ssr: false,
loading: () => <p>로딩 중...</p>,
});
export default function Home() {
return (
<div>
<h1>홈 페이지</h1>
<HeavyComponent />
</div>
);
}
🔹 5. Next.js 자동 콘솔 제거 설정 (removeConsole 옵션 추가)
✅ Next.js 13 이상에서는 next.config.js에서 콘솔 로그 자동 제거 가능
✅ 불필요한 디버깅 로그 제거하여 JS 파일 크기 최소화
📌 적용 코드 (next.config.js)
module.exports = {
compiler: {
removeConsole: process.env.NODE_ENV === "production",
},
};
🔹 6. 웹 폰트 최적화 (Preload 설정 추가)
✅ 자주 사용하는 웹 폰트를 미리 로드하여 렌더링 속도 향상
✅ 시스템 폰트 폴백 적용으로 빠른 표시 보장
📌 적용 코드 (_document.page.tsx)
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html>
<Head>
{/* 웹 폰트 Preload 적용 */}
<link
rel="preload"
href="/fonts/Inter.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
✅ SEO 최적화: Lighthouse SEO 점수 개선
🔍 문제점
- 검색 엔진 색인(크롤링) 최적화 부족 → 메타 태그가 없어서 Google, Bing 등의 검색 엔진이 페이지 내용을 제대로 인식하지 못함.
- 소셜 미디어 공유 최적화 부족 → Open Graph 태그(
og:title,og:description) 미적용으로 SNS 공유 시 기본 미리보기 사용됨.
🛠 해결 방법
🔹 1. Metadata 컴포넌트 적용 (SEO 자동 설정)
✅ 페이지별 title, description을 설정하여 SEO 개선
✅ Open Graph(og:title, og:description) 추가하여 SNS 공유 최적화
📌 적용 코드 (Metadata.tsx)
import Head from "next/head";
interface MetadataProps {
title: string;
description: string;
}
export function Metadata({ title, description }: MetadataProps) {
return (
<Head>
<title>{title} | Fitmon</title>
<meta name="description" content={description} />
<meta property="og:title" content={`${title} | Fitmon`} />
<meta property="og:description" content={description} />
</Head>
);
}
📊 최적화 후 기대 효과
✅ Lighthouse 성능 점수 상승 → FCP, LCP 시간 단축으로 페이지 로딩 속도 개선
✅ SEO 개선 → 검색 엔진 색인 최적화로 유입 트래픽 증가 기대
✅ 소셜 미디어 미리보기 최적화 → OG 태그 설정으로 SNS 공유 시 올바른 미리보기 제공
✅ 접근성 점수(A11Y) 개선 → 대비 색상 및 ARIA 속성 적용으로 웹 접근성 향상
🚀 이제 더 빠르고, 검색 엔진 친화적인 웹사이트를 완성할 수 있습니당!!! 🚀🔥
