[웹 성능 최적화] lighthouse를 이용한 웹 성능 측정 및 최적화하기

 

 

 

웹을 배포하고 관리하는 데 있어 웹 성능의 최적화는 중요하다

이번에 개인 포트폴리오 사이트를 깃허브를 통해 배포를 해봤는데

해당 사이트의 웹 성능을 측정 및 최적화를 해보았다

 

 

웹 성능 측정

 

 

우선 웹 성능을 최적화하는 방법에 대해서 나열해자면

CSS 최적화 ,최적화, HTML 최적화, 이미지 최적화 등등 정말 끝도 없다...

 

https://developer.chrome.com/docs/lighthouse?hl=ko

하지만 해당 사이트를 이용하면 웹 성능이 어떻고 어떤 부분이 성능을 저하하는지 알 수 있다.

크롬의 확장 프로그램으로 설치해서 사용해도 되고

Node 모듈을 설치하여 사용해도 된다

 

우선 나의 첫 웹 성능이다.

90점 이상이어야 좋은 성능을 가지고 있는 것인데

나는 그것보다 많이 못 미치는 76점이었다 ㅜㅜ

 

이런 식으로 어느 부분이 성능을 저하시키고 있는지도 알려준다

해당 부분을 클릭하면 더 자세하게도 알 수 있다.

 

---

 

 

성능 최적화

 

 

우선 나는 불필요한 CSS 사용과 이미지 로딩이 많이 잡아먹고 있었고

해당 부분부터 최적화하기로 하였다

 

CSS 최적화하기
-  사용하지 않는 코드 삭제

 

 

나의 사이트에는 사용하지 않은 폰트 스타일들이 정말 많았는데

쓸데없이 코드로 작성이 되어 있어 해당 부분들을 싹 다 삭제했다

개발 초기 어떤 폰트를 사용할지 몰라 모두 적어놓았는 데 사용하지 않은 것을 삭제를 안 했다 ㅜㅜ 

 

게다가 index.css에 전역 스타일로 폰트 스타일을 지정해놨는데

그걸 까먹고 다른 부분에 같은 폰트 스타일로 중복 지정하는 부분도 있어 싹 제거했다  

 

나름 좋은 코드로 개발한다고 신경 썼는데도 이렇게 많은 부분에서

불필요한 코드가 많은지 몰랐다 😅😅  

 

 

이미지 최적화
-  loading="lazy"
- 이미지 변환

 

이미지는 로딩 시간과 용량을 많이 잡아먹기 때문에 최적화가 정말 중요한 부분이다.

 

우선 이미지 태그에 loading="lazy" 속성을 사용하여 이미지 최적화를 하였다

 

loading="lazy" 속성은 사용자가 해당 이미지에 접근할 때 로드하게 하는 것으로 

페이지 로딩 시간을 개선하고 해당 이미지에 접근하지 않으면

로드하지 않아 불필요한 자원을 낭비하지 않게 한다

 

 

다음으로는 이미지를 변환하였다

최신 형식으로 이미지 제공  |  Lighthouse  |  Chrome for Developers

이곳에 따르면 jpg나 png 대신 AVIF 및 WebP 형식으로 인코딩하면

로드 속도가 빨라지고 모바일 데이터를 적게 소비할 수 있다고 한다.

 

JPG를 WEBP로 변환 (11zon.com)

나는 해당 사이트를 이용하여 기존의 JPG 나 PNG 이미지를 webP 형식으로 변환하였다.

 

기분 탓 일진 모르겠지만 여기까지만 했는데도

확실히 초기 로딩 속도가 빨라지고 부드러운 화면 전환이 되는 거 같았다 😁😁

 

 

React.lazy() 함수 사용

 

마지막으로 React.lazy() 함수를 사용하였다 

해당 함수는 필요할 때만 컴포넌트를 로드할 수 있어 초기로드 시간을 줄일 수 있는 장점이 있다 

 

React.lazy() 사용법은 lazy()를 이용해서 임포트 하는 컴포넌트를 감싸고

해당컴포넌트를  Suspense로 감싸면 된다

Suspense는 fallback 속성을 통해 로딩 시 보여줄 UI도 구현이 가능하다 

 

[기존 코드]

import TopNav from './TopNav/TopNav';
import Profile from './Profile/Profile';
import Skill from './Skills/Skill';
import Project from './Project/Project';

function App() {
  return (
    <>
      <TopNav />
      <Profile />
      <Skill />
      <Project />
    </>
  );
}

export default App;

 

[React.lazy() 사용]

import {Suspense, lazy} from 'react';

const TopNav = lazy(() => import('./TopNav/TopNav'));
const Profile = lazy(() => import('./Profile/Profile'));
const Skill = lazy(() => import('./Skills/Skill'));
const Project = lazy(() => import('./Project/Project'));

function App() {
  return (
    <>
      <Suspense fallback={<div>⌛Loading...</div>}>
        <TopNav />
        <Profile />
        <Skill />
        <Project />
      </Suspense>
    </>
  );
}

export default App;

 

성능 최적화 결과

 

기존 76점에서 98점으로 성능이 많이 최적화가 되었다 👍👍

 

그동안 웹 성능 최적화에 대해 알고만 있고 직접적인 체감이 되지 않았었는데

실제로 최적화를 해보니 불필요한 코드가 생각보다

웹 성능을 많이 저하시킨다는 것을 확실하게 체감하게 되었다 

또한 webP가 jpg나 png보다 속도가 빠르고 데이터 소비를 적게 한다는 것도 알게 되었다.

 

 

[참고 사이트]

https://developer.chrome.com/docs/lighthouse/performance/unused-javascript?utm_source=lighthouse&utm_medium=cli&hl=ko

최신 형식으로 이미지 제공  |  Lighthouse  |  Chrome for Developers

개요  |  Lighthouse  |  Chrome for Developer

[최적화] 웹 성능 최적화 방법 5분 완성 (velog.io)