이번 글에서는 Next.js 기반 프로젝트의 페이지를 성능 최적화하는 과정을 기록할 것이다.
나는 Google의 Lighthouse 도구를 사용해 웹 성능을 측정하고 개선해보았다.

---

웹 성능 최적화가 중요한 이유

사용자는 사이트가 느린걸 싫어한다. 로딩이 좀만 길어져도 응 안써. 하고 나감
성능이 낮으면 사용자 이탈률이 높아지고, 검색엔진 최적화(SEO)에도 불리하다.
특히 Next.js는 SSR을 지원하지만, 잘못쓰면 오히려 느려질 수 있다.
그래서 나는 Lighthouse를 통해 성능 병목을 확인하고 직접 개선해보기로 했다.

Lighthouse란?

Lighthouse는 Chrome 브라우저에서 제공하는 웹사이트 품질 분석 도구이다.
성능 점수부터 접근성, SEO, Best Practice까지 알아서 분석해준다.

• Performance : 페이지 로딩 속도, 스크립트 실행 시간 등
• Accessibility : 접근성 문제
• Best Practices : 보안/코딩 관례 준수 여부
• SEO : 검색 최적화 관련 지표

f12 → Lighthouse 탭 → "페이지 로드 분석" 클릭하면 측정 끝!

주요 성능 지표

지표	설명
LCP (Largest Contentful Paint)	가장 큰 콘텐츠가 화면에 렌더링될 때까지 걸린 시간
CLS (Cumulative Layout Shift)	화면 요소가 갑자기 움직이는 정도
TBT (Total Blocking Time)	메인 스레드가 막혀 사용자가 아무것도 할 수 없는 시간
TTFB (Time To First Byte)	첫 바이트가 브라우저에 도달하는 시간 (서버 응답 속도)

---

초기 측정 결과

• Performance: 62점
• Main-thread work: 6.7초
• Script Evaluation: 3,715ms
• Script Parsing & Compilation: 975ms
• Garbage Collection: 467ms

👉 /study(첫 페이지) 진입할 때 너무 느렸음. 인기글 + 전체 게시글 한꺼번에 불러오면서, 중요한 콘텐츠가 늦게 뜨는 문제가 있었음

---

① Minimize main-thread work : use client 다이어트
use client가 붙은 컴포넌트 중에서 정적 UI만 처리하는 컴포넌트는 서버 컴포넌트로 전환해 메인 스레드의 부담을 줄여보자.

예시: StudyList → StudyCard 분리

• StudyCard

import React from "react";
import { formatRelativeTime } from "@/lib/date";
import {  Study, User } from "@prisma/client";

import Image from "next/image";
import { FaBookmark } from "react-icons/fa";
import Link from "next/link";

type StudyType = Study & {
  author: User;
  comments: Comment[];
};

interface Props {
  study: StudyType;
  isLast: boolean;
  observerRef: React.RefObject<HTMLDivElement | null>;
}

const StudyCard = ({ study, isLast, observerRef }: Props) => {
  const today = new Date();
  today.setHours(0, 0, 0, 0); // 오늘 00:00:00

  return (
    <Link href={`/study/${study.id}`} key={study.id}>
      <div
        ref={isLast ? observerRef : null}
        className=" min-h-[200px] group bg-white rounded shadow-sm border border-gray-200 p-6 hover:shadow-lg transition-all duration-300 hover:-translate-y-1"
      >
        <div className="space-y-4">
          <div className="flex items-start gap-5">
            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gray-200">
              {study.category}
            </span>
            <span
              className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
                study.startDate && new Date(study.startDate) < today
                  ? "bg-gray-300 text-gray-500"
                  : "bg-green-200 text-green-700"
              }`}
            >
              {study.startDate && new Date(study.startDate) < today
                ? "모집 마감"
                : "모집중"}
            </span>
          </div>

          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-gray-900  transition-colors line-clamp-1">
              {study.title}
            </h3>
            <p
              className="text-sm text-gray-600 line-clamp-2 leading-relaxed
                  min-h-[48px]"
            >
              {study.content.replace(/[#_*~`>[\]()\-!\n]/g, "").slice(0, 100)}
            </p>
          </div>

          <div className="flex items-center gap-3 text-xs text-gray-500">
            <span>{formatRelativeTime(new Date(study.createdAt))}</span>
            <span>•</span>
            <span>{study._count.comments}개의 댓글</span>
          </div>

          <div className="flex items-center justify-between pt-3 border-t border-gray-100">
            <div className="flex items-center gap-3">
              <div>
                <div className="w-8 h-8 rounded-full overflow-hidden relative">
                  <Image
                    src={study.author.profileImage ?? "/default-avatar.png"}
                    alt="프로필"
                    fill
                    className="object-cover"
                  />
                </div>
              </div>
              <span className="text-sm text-gray-700 font-medium ">
                {study.author.nickname}
              </span>
            </div>
            <div className="flex items-center gap-1 text-red-500">
              <FaBookmark className="text-sm" />

              <span className="text-sm font-medium">{study.scrap}</span>
            </div>
          </div>
        </div>
      </div>
    </Link>
  );
};

export default StudyCard;

그리고 StudyList.tsx에서는 이렇게 사용

import StudyCard from "./StudyCard";

// ...

{studies.map((study, index) => (
  <StudyCard
    key={study.id}
    study={study}
    isLast={index === studies.length - 1}
    observerRef={observerRef}
  />
))}

성능 점수는 그대로였지만, 길었던 코드를 분리해서 가독성이 좋아졌고, 유지보수성 향상

---

지연 로딩, DB 쿼리 최적화, dynamic import 써서
점수가 진짜로 오르기 시작한 이야기는 다음 편에서