오픈마켓) 라이트하우스 성능점수 13점 -> 67점으로 3배 껑충

0. 라이트하우스 성능점수 13점

- 홈페이지 1차 완성을 하고 라이트하우스 측정을 했는데 성능점수가 13점이 나왔다.

- 리팩토링 하기 전 성능점수를 끌어올려보자

 

1. 성능이 낮았던 원인

아래처럼 가이드사항을 알려주었다.

public 폴더에 캐러셀 슬라이드에 불러올 이미지를 넣어놨는데. 그 이미지 문제인것 같았다.

이미지의 기본적인 용량은 모두 2MB가 넘었다. 

 

 

3. 이미지 최적화를 해보자

✅이미지 최적화 방법

1) 이미지 폭을 조절하자
- 페이지에서 사용되는 이미지는 보통 가로폭이 1000px을 넘지 않는다. 이미지 사이지를 줄여주는 것만으로도 용량을 많이 줄일 수 있다.

2) 최적화된 이미지 포맷을 사용하자
- 이미지 포맷 종류

JPEG는 'Joint Photographic Experts Group' 의 약자이며 확장자는 '.jpg' 또는 '.jpeg' 이다.JPEG는 손실이 많은 압축 디지털 이미지를 만드는 데 사용할 수 있는 압축 방법이다. 크기와 품질 사이에서 절충하기 위해 압축 정도를 선택할 수 있다.
WebP는 구글이 2010년에 발표한 포맷으로 파일 크기를 줄이기 위해 손실 없는 압축과 무손실 압축을 모두 사용하고 있다. 웹사이트의 트래픽 감소 및 로딩 속도 단축을 겨냥한 것으로, 주로 사진 이미지 압축 효과가 높은 것으로 알려졌다.
AVIF는 AOMedia에서 개발한 이미지 포맷으로 손실 압축과 비 손실 압축을 전부 지원하기 때문에 WebP처럼 GIF, PNG, JPEG 등의 상용 이미지 포맷을 대체할 수 있다. 또한 애니메이션 기능이 있어 움짤로 쓸 수 있고, 압축 효율이 뛰어나다는 점에서 WebP를 닮았다.

3) <img> 에 width, height 값을 선언해서 Reflow 를 방지하자

Reflow  : 어떠한 액션이나 이벤트에 의해 DOM요소의 크기나 위치 등을 변경하면 해당 노드의 하위 노드와 상위의 노드들을 포함하여 Layout 단계를 다시 수행하게 된다. 변경하려는 특정 요소의 위치와 크기뿐만 아니라 연관된 요소들의 위치와 크기도 재계산을 하기 때문에 브라우저의 퍼포먼스를 저하시키는 요인이다.

 

 

 

---

아래의 홈페이지에서 이미지 용량을 줄여보자.

이미지 사이즈 너비를 1920px 으로 줄였고, webp로 형식을 전환하였다.  처음 이미지는 2.6MB 였는데, 용량을 줄이니 144KB 로 줄어든걸 확인할 수 있다.

 

https://squoosh.app/

Squoosh

 

부록 ) ✅ 이미지 용량을 줄이는게 왜 좋을까?

1) 다운로드 시간이 단축되기 때문이다. 이미지 용량이 클수록 다운로드 시간도 길어지기 때문에 용량을 줄이면 이미지를 로드하는 속도가 빨라진다.
2) 콘텐츠를 더 빨리 다운로드 하여 화면에 렌더링 한다 
- 최적의 사용자 경험을 제공할 수 있다. 사이트 방문자의 40% 가 3초안에 웹페이지가 로딩되지 않으면 떠난다.
3) 구글 SEO 순위를 결정할 때 모바일 응답성을 고려하여, 검색 순위에 노출한다. 
- 이미지 최적화를 통해서 모바일 응답성을 빠르게 한다면, 검색 결과의 상위궈에 노출될 수 있다.

4. 성능점수 결과는 67점!

- 3배 이상 점수가 올랐다. 확실히 캐러셀 이미지 용량을 줄이니 성능이 좋아졌다.

사실 67점도 낮은 점수이긴 하다. 이번에는 서버에서 불러오는 이미지들의 용량 문제를 해결하면 점수가 더 올라갈 것같다.

 

 

 

출처 : 

https://velog.io/@hustle-dev/%EC%9B%B9-%EC%84%B1%EB%8A%A5%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94

웹 성능을 위한 이미지 최적화

https://velog.io/@planic324/Aspect-Ratio%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90

Aspect Ratio를 알아보자