[메인 프로젝트] 웹사이트 최적화 (feat. lighthouse)

lighthouse 성능분석 결과

성능분석 결과

성능개선을 할 수 있는 요소들

성능 개선을 위해 했던 작업들

1.이미지 최적화
2.JSON데이터 최소화
3.데이터 캐싱
4.중복코드 최소화, 안쓰는 코드 삭제

이미지 최적화

이미지 현황

cheerio 라이브러리를 이용해서 상품 url을 크롤링하여 상품이미지를 받아오고 있는데, 이 이미지의 크키가 개당 100kb 정도 된다.
처음엔 Next/image를 사용하지 않고 최적화를 해봤다.
참고 블로그 : https://velog.io/@sehyunny/the-definitive-guide-to-image-optimization
결론적으로는 Next/image를 사용해서 최적화를 했다.
이미지에 사이즈를 미리 알려줘서 브라우저가 필요한 사이즈만큼만 이미지를 다운로드 해야하는데, view포트에 따른 사이즈를 지정해놔도 파일 크기가 많이 줄어들지 않았다.

Image 코드

        <Image
          fill
          alt="상품이미지"
          src={src || base}
          quality="10"
          sizes="40vw"
        />

Next/Image의 fill 속성은 이미지가 부모 요소의 width와 heigth의 100%를 상속하고, position을 absolute로 만들어주는 속성이다.
그래서 공식문서에서 부모요소는 relative, fixed, abosolute 중 하나의 포지션을 가져야한다고 나와있다.
quality는 이미지의 품질을 정해주는건데 1~100까지 정할 수 있고 육안으로는 품질이 떨어지는걸 체감할 수 없어서 낮게 지정했다. 이미지 크기를 많이 줄여준다.

quailty를 낮췄을 때 파일 크기

sizes속성은 뷰포트 너비에 따라 이미지 사이즈의 너비를 미리 정해놓고 브라우저에 필요한 크기만큼의 이미지를 받아오게 할 수 있다. 예를들어 (max-width: 390px) 40vw면 뷰포트의 너비가 390px 보다 작을 때는 브라우저가 뷰포트 너비의 40%만큼만 이미지를 다운받는다.
sizes 속성까지 지정해주니 파일크기는 6.4kb까지 줄어들었다.

JSON 데이터 최소화

레퍼런스 : https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/reduce-html-payload-with-nextjs.md

Next js로 개발을 했기 때문에 getServerSideProps를 사용하여 서버사이드 렌더링을 하는 페이지는 데이터까지 HTML 파일 내에
담아서 렌더링을 한다. 그래서 이 데이터가 크면 클수록 HTML 파일의 크기가 커진다.

HTML 파일 내의 JSON 데이터

현재 JSON 데이터 크기를 분석해봤는데 다음과 같이 나왔다.

JSON 데이터 크기

게시글의 수가 많지는 않아서 용량이 크지는 않지만, 데이터의 양이 많아질수록 JSON 데이터의 크기가 커질 것이었기 때문에 api 요청으로 받아오는 데이터 중 필요없는 필드를 삭제하는 작업을 했다. 이 부분은 프론트 혼자서는 할 수 없고 같이 지도기능을 개발했던 백엔드 팀원과 얘기해서 불필요한 필드를 삭제했다.

데이터 캐싱

서버사이드 렌더링으로 데이터를 미리 받아서 출력해주는 페이지가 있는데 이 때 queryKey가 sharingListInMap이다. 그래서 동일한 키를 home에서 useQuery로 캐싱을 하도록 했다. 그랬더니 home에 접속했을 때만 api요청을 하고 페이지 전환을 할 때 api 요청을 하지 않는다.

  useQuery({
    queryKey: ['sharingListInMap'],
    queryFn: getAllSharingPosts,
    staleTime: 60 * 60 * 1000,
    cacheTime: 60 * 60 * 1000,
  });

중복코드 최소화, 안 쓰는 코드 삭제

api 파일 중에 안 쓰는 코드를 삭제하고, 중복사용할 수 있는 코드들은 함수추출하기를 사용해서 리팩토링을 했다.
대표적인 예시는 카카오맵을 생성하는 함수를 추출했던 것이다.

const generateKakaoMap = (center: getMapAndMarkerPropsType['center']) => {
  let mapContainer =
      document.getElementById('map') || document.createElement('div'), // 지도를 표시할 div
    mapOption = {
      center: new kakao.maps.LatLng(center.lat, center.lng), // 지도의 중심좌표
      level: 5, // 지도의 확대 레벨
    };
  return new kakao.maps.Map(mapContainer, mapOption);
};

세 개의 함수에서 카카오 맵을 생성하고 있었는데 이 코드로 모두 대체했다.

최적화 결과

성능점수 개선

성능개선을 하기 위해 많은 자료를 찾아보고, 페이지 전환을 빠르게 하기 위해서 많은 고민을 했다..
결국 원래 27점이었던 성능점수가 87점까지 개선되었다.. 고민과 노력의 결과가 보여서 너무 뿌듯하다.
일단 추가적으로 폰트 최적화 작업을 하면 될 것 같은데 이 부분은 팀원이 해보기로 해서 기다리고 있다.