리액트 이미지 최적화 및 성능 개선

https://heytossme.netlify.app/

HeyTossMe

 

Problem

• 메인 페이지 등에서 사이트가 버벅거리거나 로딩이 느려지는 문제
• 이미지 최적화 관련 처리 X

 

Reason

• 검색하다가 LightHouse라는 툴을 발견해서(!!) 한 번 적용해 봤는데 성능 점수 뭔 일임
• 메인 페이지 무한 슬라이드에서 성능 문제가 있을 거라는 예상은 했었는데, 무한 슬라이드 로직에 문제가 있는 게 아니라 고화질 이미지를 너무 많이 사용한 데서 크게 문제가 아닐까 싶었다

 

Try to solve

• 메인 페이지 무한 슬라이드 이미지 교체
  • 대놓고 버벅거리는 문제는 해결됨 41점이긴 한데 410점 같음

 

• 이미지 업로드 시 이미지 압축 코드 작성
  • browser-image-compression 라이브러리 사용

import imageCompression from "browser-image-compression";

const handleFileOnChange = async (e: any) => {
        let file = e.target.files[0];
        const options = {
            maxSizeMB: 2,
            maxWidthOrHeight: 300,
        };
        try {
            const compressedFile = await imageCompression(file, options);
            setFiles(compressedFile);
            const promise = imageCompression.getDataUrlFromFile(compressedFile);
            promise.then((result) => {
                setImageSrc(result);
            });
        } catch (error) {
            console.log(error);
        }
    };

 

• 적용 전후 비교
  • 멋지게 압축이 되었구나 ^ㅡ^…

 

• react-icons 사용에서도 성능 문제가 있는 걸로 파악이 되는데, 이거는 추후에 한 번 고려를 해 보겠음...
  • Reference ⇒ https://velog.io/@hye_rin/lighthouse를-이용한-성능-최적화

lighthouse를 이용한 성능 최적화