최적화를 해보자.

기능 개발이 어느정도 마무리 된 후,

이제부터는 성능 개선, 최적화를 한번 해보자고 이야기가 나왔습니다.

아무래도 저희 사이트가 다른 사이트와는 달리 3d를 다루다보니 로딩속도 등 퍼포먼스가 떨어질수도 있을 것이라고 생각했고,

최적화가 가능한 부분이 있다면 최대한 최적화를 해보자! 라고 의견이 모이게 되었습니다.

일단 성능을 측정해보자.

사이트의 어떤 부분들이 성능이 낮게 나오고 있는지, 어떤 부분들을 최적화해야 가장 드라마틱한 효과를 얻을 수 있을지 알아보고자 크롬의 라이트하우스를 이용해 사이트의 성능을 측정해보았습니다.

측정결과, 퍼포먼스가 85점이 나왔습니다.

개선이 필요한 항목들이 주황색 불로 표시가 되고 있네요.

FCP(First Contentful Paint), Speed Index, LCP(Largest Contentful Paint)를 개선해 보라고 안내해주고 있는데, 각 항목들의 대한 설명은 다음과 같습니다.

FCP(First Contentful Paint)

• 뷰포트의 콘텐츠의 첫 부분을 렌더링하는 데 걸리는 시간을 측정하는 지표입니다.

LCP(Largest Contentful Paint)

• 뷰포트의 컨텐츠 중 가장 큰(넓은) 영역을 차지하는 요소를 렌더링하는데 걸리는 시간을 측정하는 지표입니다.
• 가장 큰 요소가 가장 중요한 요소라고 판단하기에 라이트하우스 성능측정 지표 중에서 LCP의 가중치가 25%로 가장 높습니다.

Speed Index

• 뷰포트내의 ****콘텐츠가 채워지는 속도와 관련있는 지표입니다.
• “더 넓은 영역”을 “더 빠르게” 보여줄수록 좋은 점수를 받을 수 있습니다.