[성능] 이미지 압축

[SEMINSEMINSEMIN]

무엇을 위해 리팩토링 하나요?

• [x] 성능 개선
• [ ] 접근성 개선
• [ ] 코드 중복 개선
• [ ] 컨벤션 정리

  적용 페이지

• [x] 회원가입시 프로필 설정
• [x] 로그인 후 프로필 설정
• [x] 게시글 작성
• [x] 게시글 수정
• [x] 상품 업로드

특이사항

핵심

• browser-image-compression 사용: 서버에 이미지 전송 전 이미지 압축 위해
• gif는 압축하지 않음(2023.01.12): 이 문제 해결 필요
• 이미지 압축 정도: 프로필 이미지의 경우 크기가 작기 때문에 압축을 더 많이 하는 방식으로

  const maxWidthOrHeightSet = isProfile ? 200 : 400;
  const maxSizeMBSet = isProfile ? 0.08 : 0.25;
  const options = {
      maxSizeMB: maxSizeMBSet,
      maxWidthOrHeight: maxWidthOrHeightSet,
      useWebWorker: true,
  };

  이미지 요소에 width와 height 명시

• 이유: 이미지 요소에 명시적인 너비 및 높이를 설정하여 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선하기 위해
• 적용 파일
  • PostCard.jsx

    중복 줄임

• utils 폴더 하에 imgCompressHandle.js 추가: 코드 중복 줄이기 위해, 관련 링크
• UploadPost.jsx와 PostEdit.jsx에서 ImageUpload 컴포넌트를 사용함으로써 ImageUpload 컴포넌트 재사용성을 높임
• PostEdit과 UploadPost를 UploadEditPost로 통합, 폴더 구조 바꿈

스타일

• 회원가입시 프로필 설정 페이지에서 img 태그에 object-fit: cover 스타일 추가
• 프로필 페이지의 ProfileCard 컴포넌트에서 이미지 태그에 object-fit: cover 스타일 추가
• 상품 업로드 페이지의 미리보기 이미지에 object-fit: cover 스타일 추가
• 이미지 삭제 버튼 위치 조정

  접근성

• UploadEditPost내 Contentimg의 alt를 "게시글 첨부 사진"으로 변경

  한계점

• gif 압축 문제
  • gif를 browser-image-compression으로 압축시 움직이는 gif가 아닌 정지된 gif로 나옴
  • 일단 gif는 압축하지 않는 것으로 처리했으나 gif 용량이 클 경우를 대비해 대책 마련 필요(2023.01.12)
• 코드 중복 개선 필요: 특히 UploadPost와 PostEdit

  참고

  🔗 https://velog.io/@devyouth94/react-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%A6%AC%EC%82%AC%EC%9D%B4%EC%A7%95%EC%9D%84-%ED%95%B4%EB%B3%B4%EC%9E%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%AF%B8%EB%A6%AC%EB%B3%B4%EA%B8%B0 🔗 brower-image-compression 작동 원리 설명 블로그 글

[github-actions[bot]]

Branch refactor/issue-379 created for issue: [성능] 이미지 압축

[SEMINSEMINSEMIN]

성능 비교

테스트용 계정

저희가 썼던 기존의 테스트용 계정은 압축을 안 하고 서버에 이미 올라간게 있어 제대로 성능 비교가 힘들거 같았습니다. 그래서 동일한 사진 및 글이 올라간 계정을 만들었습니다. 사진 업로드시 MB가 넘는 고용량 사진을 올렸습니다.

압축 한 계정

계정이름	아이디	비밀번호
삼대오백	imageComp@test01.com	123123
그뉵그뉵	imageComp@test02.com	123123
다이어트시러	imageComp@test03.com	123123

압축 안 한 계정

계정이름	아이디	비밀번호
삼대오백압축x	imageCompNone@test01.com	123123
그뉵그뉵압축x	imageCompNone@test02.com	123123
다이어트시러압축x	imageCompNone@test03.com	123123

비교 방식

• imageCompNone@test01.com, imageComp@test01.com으로 테스트 진행.
• 개발자 도구의 Performance Insights와 Lighthouse 이용해 압축 한 계정과 압축 안 한 계정의 성능 비교
• 테스트 환경: 풀리퀘스트 후 프리뷰 넷플리파이 페이지

점수 기준 설명

• DCL(DOM Content Loaded)
  • Marks the point when the page's initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
• FCP(First Contentful Paint)
  • Measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
• TTI(Time to Interactive)
  • Measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of reliably responding to user input quickly.
• LCP(Largest Contentful Paint)
  • Marks the point in the page load timeline when the page's main content has likely loaded.

프로필 페이지

이미지 압축을 하지 않은 경우

Performance Insights

점수 기준	점수
DCL	4.08초
FCP	4.14초
LCP	4.41초
TTI	12.88초

lighthouse performance score

이미지 압축을 한 경우

Performance Insights

점수 기준	점수
DCL	1초
FCP	1.05초
LCP	1.34초
TTI	1.05초

lighthouse performance score

홈피드

이미지 압축을 하지 않은 경우

Performance Insights

점수 기준	점수
DCL	2.98초
FCP	3.06초
LCP	3.8초
TTI	3.73초

lighthouse performance score

이미지 압축을 한 경우

Performance Insights

점수 기준	점수
DCL	1.25초
FCP	1.31초
LCP	1.74초
TTI	1.39초

lighthouse performance score