프론트엔드최적화2 최적화 작업(삽질) (2/2) 나에겐 3번째 문제가 있었다."Properly size images" : 브라우저가 필요로 하는 크기보다 더 큰 이미지를 로드해서 성능이 떨어질 때 발생적절한 크기의 이미지를 요청하도록 설정해야 한다. 이 문제를 풀어야 하는데 전 글에서 말했듯 나는 S3 + CloudFront를 건드릴 수 없는 환경이다.포기할 순 없으니 CloudflareCDN을 사용하기로 했다. unplash라는 친구를 소개 하겠다.https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.unsplash.comUnsplash가 하는 역할:이미지를 저장, 최적화, 가.. 2025. 1. 13. 최적화 작업(삽질) (1/2) 일단 나는 프론트엔드 성능 최적화가이드라는 책을 먼저 읽고 해당 작업을 시작했다.(필요할 때마다 반복해서 읽을 것이다)14일 동안 고민한 거 같은데 당장 성능지표는 이렇다.왼쪽이 개발환경,오른쪽이 배포환경이다. 나름 나쁘지 않은 점수라고 생각하지만 나는 끝까지 올려보고 싶어 Perfomence에 대해 2주동안 고민 했다.문제는 LCP였다.**LCP (Largest Contentful Paint)**는 화면에서 가장 큰 콘텐츠가 렌더링되는 시점을 측정하는 지표로, 2.5초 이하가 "좋음" 기준이다. 개발 환경에서는 LCP가 더 낮게 측정되었다.(코드 압축,Tree-shaking,브라우저 캐싱 등이 이유다.) 이미지가 너무 크다. 이미지가 너무 커서 화면에 그리는데 느리다는 문제다.이것을 해결 해보기 위해.. 2025. 1. 13. 이전 1 다음
