최적화 작업(삽질) (1/2)

일단 나는 프론트엔드 성능 최적화가이드라는 책을 먼저 읽고 해당 작업을 시작했다.

(필요할 때마다 반복해서 읽을 것이다)

14일 동안 고민한 거 같은데 당장 성능지표는 이렇다.

배포 환경

왼쪽이 개발환경,오른쪽이 배포환경이다.

 

나름 나쁘지 않은 점수라고 생각하지만 나는 끝까지 올려보고 싶어 Perfomence에 대해 2주동안 고민 했다.

문제는 LCP였다.

**LCP (Largest Contentful Paint)**는 화면에서 가장 큰 콘텐츠가 렌더링되는 시점을 측정하는 지표로, 2.5초 이하가 "좋음" 기준이다.

 

개발 환경에서는 LCP가 더 낮게 측정되었다.(코드 압축,Tree-shaking,브라우저 캐싱 등이 이유다.)

 

---

이미지가 너무 크다.

 

왼쪽 배포,오른쪽 개발환경

이미지가 너무 커서 화면에 그리는데 느리다는 문제다.

이것을 해결 해보기 위해 나는 이런 노력들을 했다.

 

1.모임생성을 할 때 이미지를 줄여서 넣어보자.

2.백엔드 분과 CDN 사용에 대한 논의

3.이미지 컴포넌트의 수정

4.Next.js에서의 폼데이터 전송 시 webp 등으로 변경

 

유의미한 차이점을 낼 만큼 성능변화를 이루진 못했고 CDN에 대한 욕심이 커졌다.

그렇지만 S3를 백쪽에서 관리하기에 백엔드에서 처리해야 할 문제이며

백엔드분께선 "그또한 비용"이라는 말씀과 함께 긍정적인 답변은 안하시고

아마존 PC가 프리티어이기에 성능상 느린 게 당연하다고 하셨다.

 

 

오케이. 나중에 내가 노드를 다루게 되면 써봐야겠다고 다짐했다.

---

Properly size images(이미지를 적절한 크기로 제공하지 않아서 발생한 문제)

컴포넌트를 몇번이나 재수정 했지만 해결할 수 없었다.

그 이유는 반응형 때문이다. 우리가 받은 디자인은 767px 기준 이하가 되면 이미지는 748px이하가 되는데

이는 이미지가 커진다는 소리다.

 

aspect 속성을 사용하여 반응형으로 구현하려 해도 테일윈드에서 오류가 떴다. (aspect에 대한 라이브러리를 쓰려고 했다.)

구글링,AI,stackoverflow에도 비슷한 내용의 글이 있으나 답변은 달리지 않아 한참을 헤멨고

나에겐 두가지 선택지가 생겼다.

 

1. 디자이너님이 준대로 구현하자.

2. 이미지 비율이 깨지든 말든 신경쓰지 말자.

결국 기능구현에 초점을 두기로 했다.

 

참고하려 했던 링크..

https://stackoverflow.com/questions/72827017/how-to-maintain-aspect-ratio-of-a-portrait-div-on-a-wide-screen-with-tailwind-cs

https://stackoverflow.com/questions/73910706/tailwindcss-add-custom-aspect-ratio-class

 

 

 

이미지에 들어가는 CSS가 너무 많다.

이 오류는 이미지를 컴포넌트로 따로 빼면서 빨강에서 주황으로 바뀌게 되었다.

 

문제가 하나 더 있었는데

그 문제와 어떻게 구현 했는지는 다음 글에 올리도록 하겠다.