프론트엔드 성능 최적화가 필요한 이유와 성능 분석 방법

성능 최적화가 필요한 이유

프론트엔드를 위한 다양한 기술들이 나왔고, 이제는 성능 최적화에 초점을 맞추고 있습니다. 여기서 구글은 ‘성능이 저하되면 사용자가 떠나고 매출이 감소한다.’라고 이야기합니다. 즉 성능 최적화를 통해 사용자를 늘리고 매출 또한 증가한다는 것입니다. 구글이 조사한 페이지 로딩 속도와 이탈률 및 전환율의 관계를 살펴보면 확 이해될 것입니다.

• 페이지 표시 시간 2초 증가 → 사용자 이탈률 32% 증가
• 페이지 표시 시간 4초 증가 → 사용자 이탈률 90% 증가
• 페이지 표시 시간 5초 증가 → 사용자 이탈률 106% 증가
• 페이지 표시 시간 9초 증가 → 사용자 이탈률 123% 증가

더해서 다른 회사들의 사례도 본다면 성능 최적화가 얼마나 중요한지 이해할 수 있습니다.

• 핀터레스트 로딩 시간 40% 단축 → 검색 유입률과 가입자 수 15% 증가
• COOK 페이지 로드 시간 850밀리초 감소 → 세션당 페이지 조회 수 10% 증가/ 이탈률 7% 감소

 

이러한 성능 최적화는 어떻게 이루어질까?

성능을 결정하는 요소는 크게 두 가지입니다.

• 로딩 성능

서버에 있는 웹 체이지와 웹 페이지에 필요한 기타 리소스를 다운로드 할 떄의 성능

개선하는 방법 :

1. 다룬로드해야하는 리소스 수를 줄이거나 크기를 줄이기
2. 코드를 분할하여 다운로드 하기
3. 리소스의 우선순위를 매겨 중요한 리소스를 먼저 다운 받기

• 렌더링 성능

다운로드한 리소스를 가지고 화면을 그릴 때의 성능이며, 자바스크립트 코드에 크게 영향을 받음

개선하는 방법 :

매우 다양하며 서비스 유형에 따라서도 다릅니다. 그렇기에 자신의 서비스에 필요한 최적화 기법을 적용하기 위해선 브라우저의 동작 원리와 사용하는 프레임워크의 라이프 사이클 등 웹 개발의 기본 지식을 이해함으로써 효율적인 코드를 작성해야합니다.

정말 많은 최적화 기법들이 존재하지만 지금은 우리가 제작하고 있는 옷늘날씨 서비스에 적절한 최적화 기법 위주로 정리하겠습니다.

그 전에 성능을 분석할 수 있도록 도움을 주는 개발자 도구에 대해 알아봅시다.

 

성능 분석을 위해 사용되는 개발자 도구를 알아보자

• Network 패널

현재 웹 페이지에서 발생하는 모든 네트워크릐 트래픽을 상세하게 알려주는 도구입니다. 이를 통해서 어떤 리소스가 어느 시점에 로드 되는지, 해당 리소스의 크기 등을 확인할 수 있습니다.

• Performance 패널

웹 페이지가 로드될 때 실행되는 모든 작업을 보여 줍니다. Network 패널에서 봤던 리소스가 로드되는 타이밍뿐만 아니라 브라우저의 메인 스레드에서 실행되는 JS를 차트 형태로 볼 수 있습니다. 결론적으로 어떤 JS 코드가 느린지 확인할 수 있습니다.

• LightHouse 패널

웹사이트의 SEO 점수, 접근성 점수, 성능 점수 등을 측정해주고 개선 방향까지 제시해주는 자동화 도구입니다. 성능 관점에서 해당 도구를 사용하기 위해선 알아야하는 지표들이 있습니다.

총 6가지이며 각 지표에 가중치를 적용하여 총점을 알려줍니다.

• 6가지 지표
  • FCP(First Contentful Paint) | 10%
  페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는 데 걸리는 시간 지표입니다.
  • SI(Speed Index) | 10%
  페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도 지표입니다. 최대한 빠르게 콘텐츠를 표시하면 높은 점수를 받을 수 있습니다. 즉, 페이지 로딩에 같은 시간이 걸리더라도 콘텐츠를 더 먼저 띄운 페이지의 SI 점수가 더 높습니다.
  • LCP(Largest Contentful Paint) | 25%
  페이지가 로드될 때, 화면 내 가장 큰 이미지나 텍스트 요소가 렌더링 되기까지 걸리는 시간 지표입니다. 즉, 가장 큰 콘텐츠가 나타나는데 걸리는 시간을 기준으로 볼 수 있습니다.
  • TTI(Time to Interactive) | 10%
  페이지과 상호 작용이 가능한 시점까지 걸리는 시간 측정 지표
  • TBT(Total Blocking Time) | 30%
  페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간 총합 지표 동작 방해 작업을 포함한 FCP → TTI 사이의 시간 동안 측정
  • CLS(Cumulative Layout Shift) | 15%
  페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동 측정 지표
  ※ 레이아웃 이동 : 화면상에서 요소의 위치나 크기가 순간적으로 변하는 것

• Opportunities 섹션과 Diagnostics 섹션 : 문제점과 해결 방안, 얻을 수 있는 이점 설명
  • Opportunities 섹션 : 페이지를 더욱 빨리 로드할 수 있는데 도움이 되는 제안
  • Diagnostics 섹션 : 로드 속도와는 관계 없지만 성능 향상에 도움이 되는 제안

그리고 라이트하우스를 이용해 성능을 측정할 때는 기본 네트워크 환경이 아니라 네트워크 속도를 제한하여 어느 정도 고정된 네트워크 환경에서 성능을 측정합니다.

데스크탑은 1x 모바일은 4x로 모바일로 검사할 때 네트워크를 더욱 제한합니다.