Chrome DevTools와 Lighthouse로 성능 최적화 해보기

실제 운영 중인 웹 서비스의 특정 페이지에서 이상한 점을 발견했다.

어떤 페이지는 빠르게 로딩되고, 어떤 페이지는 눈에 띄게 느렸다.

사용자들도 "왜 이 페이지만 느려요?"라는 문의를 자주 했다. 무엇이 문제인지 찾아보기로 했다.

---

문제 발견

Chrome DevTools의 Network 탭으로 각 페이지의 API 호출 패턴을 확인했다.

예시

1. F12로 개발자 도구 열기
2. Network 탭에서 페이지 새로고침 후 XHR/Fetch 필터 적용
3. 사용자 정보 관련 API 호출 패턴 확인
4. 각 페이지별 호출 횟수와 데이터 크기 측정

결과는 다음과 같았다.

/관리자 페이지 A	0회	0 kB
/관리자 페이지 B	1회	1.1 kB
/관리자 페이지 C	1회	1.1 kB
/관리자 페이지 D	2회	2.2 kB

같은 사용자 정보 관련 API를 페이지마다 다른 횟수로 호출하고 있었다.

---

성능 측정

실제 사용자가 체감하는 성능 차이를 확인하기 위해 Lighthouse로 측정해봤다.

프로덕션 환경에서 측정한 결과는 다음과 같았다.

 

관리자 페이지 D  페이지 (API 2회 호출)

• Performance Score: 20/100점 (Poor)

관리자 페이지 A  페이지 (API 0회 호출)

• Performance Score: 69/100점 (Needs Improvement)

차이가 49점이었다. 245%의 성능 격차가 났다.

---

원인 분석

코드를 확인해보니 각 페이지마다 사용자 정보를 가져오는 방식이 달랐다.

최적화된 페이지는 이미 로딩된 데이터를 재사용했다.

// 예시 : 최적화된 페이지
const TeachersPage = () => {
  const [userInfo] = useAtom(userAtom);
  
  if (!checkUserData(userInfo)) {
    return <LoadingSpinner />;
  }
  
  return <TeachersTable />;
};

 

문제가 있는 페이지는 컴포넌트에서 독립적으로 API를 호출했다.

// 예시 : 문제가 있는 페이지
const DocumentHistoryPage = () => {
  const [userInfo] = useAtom(userAtom);
  
  useEffect(() => {
    fetchUserProfile(); // 첫 번째 호출
  }, []);
  
  useEffect(() => {
    if (someCondition) {
      fetchUserProfile(); // 두 번째 호출
    }
  }, [dependency]);
  
  return <HistoryTable />;
};

---

해결 방법

Layout 레벨에서 한 번만 API를 호출하고, 모든 페이지에서 캐시된 데이터를 사용하도록 변경했다.

// 예시 : _layout.jsx
const Layout = ({ children }) => {
  const [userInfo, setUserInfo] = useAtom(userAtom);
  
  useEffect(() => {
    if (!userInfo) {
      fetchUserProfile().then(setUserInfo);
    }
  }, []);
  
  return (
    <div>
      <Header />
      {children}
      <Footer />
    </div>
  );
};

모든 페이지에서 일관된 패턴을 사용하도록 수정했다.

const OptimizedPage = () => {
  const [userInfo] = useAtom(userAtom);
  
  if (!checkUserData(userInfo)) {
    return <LoadingSpinner />;
  }
  
  return <PageContent />;
};

기존에 각 페이지에서 개별적으로 호출하던 fetchUserProfile() 함수 호출을 제거했다.

---

개선 결과

Lighthouse 점수	20점	71점	3.55배 향상
API 호출 횟수	2회	0회	개선
데이터 전송량	2.2 kB	0 kB	개선
성능 등급	Poor	Needs Improvement	2단계 상승

Network 탭으로 확인한 결과, 관리자 페이지 D에서 사용자 정보 API 호출이 완전히 제거되었다.

 

---

배운 점

• 추측이나, 감이 아닌 Chrome DevTools와 Lighthouse 같은 도구로 성능에 대한 객관적인 데이터를 얻는것이 중요하다.
• 같은 팀에서 개발해도 페이지마다 다른 패턴이 적용될 수 있다는 점을 확인했다. 정기적인 코드 리뷰와 아키텍처 가이드라인이 필요하다.
• 단순해 보이는 API 중복 호출 제거로 성능 향상을 시킬 수 있다.