반응형
portfolio
-
[포트폴리오] 포트폴리오 웹사이트 최적화 - 1 (Properly size images, Serve images in next-gen format)Next.js 2024. 2. 7. 08:00
라이트하우스 검사 결과에서 나온 퍼포먼스 항목을 하나씩 고쳐보고자 한다 1. Properly size images 페이지에서 사용자 화면에 렌더링된 사이즈보다 큰 이미지를 제공하면 쓸데없는 용량이 낭비되고 페이지 로드 시간이 느려진다고 한다(참고) 즉, 실제로 화면에 렌더링되어야 할 크기보다 실제 이미지의 크기가 너무 크면 느려지고 낭비니까 고치라는 항목이었다 캐러셀에 있는 프로젝트 이미지1,2와 로고 이미지에 대해서 적절한 사이즈를 주어야했다 살펴보니 로고의 경우 렌더된 사이즈는 최대 40*40인데 실제 사이즈는 200*200이었다 프로젝트 이미지들도 실제로 렌더링되어야하는 사이즈에 비해 컸다 밑에 작성할 Serve images in next-gen formats 항목과 같이 해결하기 위해 Next...