프론트엔드 성능 최적화

프론트엔드 성능 최적화

프론트엔드 성능 최적화란 웹사이트나 앱의 로딩 속도와 렌더링 품질을 개선시키는 과정이다. 프론트엔드 성능 최적화를 통해 사용자 경험을 향상시키고, 검색엔진 최적화(SEO)를 도모하고, 비용을 절감할 수 있다. 성능 최적화를 통해 사용자 경험을 개선시킬 수 있고, 이는 곧 페이지 이탈률을 줄이기도 한다.

 

---

 

 

FP, FCP, FMP, TTI, CLS, FID, TBT, LCP 

FP, FCP, FMP, TTI는 웹 페이지의 성능을 측정하는 지표들이다.

• FP (First Paint) : 페이지가 로드되기 시작하고 첫 번째 픽셀이 화면에 그려지는 시간을 나타낸다. FP를 개선하기 위해서는 렌더링을 차단하는 리소스(CSS, JS)를 최소화하고, CDN을 사용하고, 캐시 정책을 적용하는 등의 방법이 있다.
• FCP (First Contentful Paint) : 페이지가 로드되기 시작하고 텍스트나 이미지 등의 컨텐츠가 화면에 그려지는 시간이다. FCP를 개선하기 위해서는 FP와 비슷한 방법을 사용할 수 있으며, 추가적으로 이미지 최적화, 웹 폰트 로드 최적화, 코드 스플리팅 등의 방법이 있다.
• FMP (First Meaningful Paint) : 페이지가 로드되기 시작하고 사용자에게 의미있는 컨텐츠가 화면에 그려지는 시간을 나타낸다. FMP는 페이지의 주요 컨텐츠가 어떤 것인지에 따라 달라질 수 있으며, 정확하게 측정하기 어려운 지표이다. FMP를 개선하기 위해서는 FCP와 비슷한 방법을 사용할 수 있으며, 추가적으로 중요한 컨텐츠를 우선적으로 로드하고, 레이아웃 변화를 최소화하는 등의 방법이 있다.
• TTI (Time To Interactive) : 페이지가 로드되기 시작하고 사용자의 입력에 응답할 수 있는 상태가 되는 시간을 나타낸다. TTI를 개선하기 위해서는 JS의 실행 시간을 줄이고, 메인 스레드를 차단하는 작업을 분할하고, 웹 워커를 사용하는 방법이 있다.

 

 이 외에도 cls, fid, tbt, lcp등의 웹페이지 성능을 측정하는 지표들이 있다.

• CLS (Cumulative Layout Shift) : 페이지의 레이아웃이 로딩 과정에서 얼마나 변화하는지를 나타낸다. 레이아웃의 변화는 사용자의 입력에 의한 것이 아니라, 리소스의 로드나 스타일의 적용 등에 의한 것이며, CLS가 높으면 사용자의 경험을 저해하고, 잘못된 클릭을 유발할 수 있다. CLS를 개선하기 위해서는 이미지, 광고, 프레임 등의 요소에 크기를 명시하고, 동적으로 삽입되는 컨텐츠를 공간을 확보하고, 웹 폰트의 로딩을 최적화하는 등의 방법이 있다.
• FID (First Input Delay) : 페이지가 사용자의 입력에 응답하는데 걸리는 시간을 나타낸다. 입력은 클릭, 탭, 키보드 입력 등이 될 수 있다. FID가 높으면 페이지의 반응성이 떨어지고, 사용자의 만족도가 감소한다. FID를 개선하기 위해서는 자바스크립트의 실행 시간을 줄이고, 메인 스레드를 차단하는 작업을 분할하고, 웹 워커를 사용하는 등 TTI 개선 방법과 비슷하다.
• TBT (Total Blocking Time) : FCP와 TTI 사이에 메인 스레드가 사용자의 입력에 응답할 수 없는 시간의 총합을 나타낸다. 50ms를 초과하는 작업의 차단 시간을 계산한다. TBT는 FID와 비슷한 개념이지만, 실제 사용자의 입력이 없어도 측정할 수 있으며  FID와 비슷한 방법으로 개선하면 된다.
• LCP (Largest Contentful Paint) : 페이지의 주요 컨텐츠가 화면에 표시되는데 걸리는 시간을 나타낸다. 주요 컨텐츠는 텍스트나 이미지 등이 될 수 있으며, LCP가 높으면 유저는 페이지의 로딩 속도가 느리다고 인식한다. LCP를 개선하기 위해서는 리소스의 크기와 수를 최소화하고, 우선순위를 결정하고 순차적으로 로드하고, CDN을 사용하면 된다.

 

또한 유저는 optimized rendering과 같은 점차적으로 보이게 되는 화면을 더 빠르다고 인식한다.

 

---

 

로딩 성능

로딩 성능이란 서버에 있는 웹페이지와 기타 리소스(JS 등) 을 다운로드할 때의 성능이다. 로딩 성능을 개선하면 사용자가 원하는 콘텐츠를 빠르게 보여줄 수 있다.

로딩 성능을 개선하는 방법은 다운로드해야하는 리소스의 크기와 요청 횟수를 줄이고, 우선순위에 따라 순차적으로 로드하는 방법 등이 있다. 로딩성능 최적화를 통해 웹페이지의 로딩 시간을 단축하고 사용자 대기시간을 줄일 수 있다. 이는 이탈률에 직접적으로 영향을 끼친다.

 

• 리소스의 크기와 수를 최소화 :
  • 웹페이지에서 사용되는 리소스(HTML, CSS, JS)크기를 줄이기 위해 압축, 미니파이(minify), 난독화, 지연로딩, 이미지 최적화 등의 방법을 사용한다.
  • 웹페이지에서 사용되는 리소스의 수를 줄이기 위해 코드 분할, 번들링, 스프라이트 이미지, 인라인 리소스 등의 방법을 사용한다. (인라인 리소스는 파일 요청 및 로드시간을 줄여주지만 코드품질을 저하시키기에 지양한다)

• 리소스의 우선순위 결정 및 순차적 로드 : 웹 페이지에 사용되는 모든 리소스는 동일한 중요도를 갖지 않는다. css는 레이아웃과 스타일을 결정하기에 JS 보다 높은 우선순위에 들어간다. 또한 유저가 처음 보는 화면에 필요한 리소스는 나중에 보게 될 화면의 리소스보다 높은 우선순위를 갖는다.
  • react helmet, webpack preload, prefetch 설정등을 통해 우선순위를 정한다.
  • webpack 설정, react-async-script-loader 라이브러리등을 사용하여 JS 우선순위를 정한다.
• CDN(Content Delivery Network) 사용 : CDN은 전세계에 분산된 서버 네트워크이며 사용자와 가장 가까운 서버에서 웹페이지 리소스를 제공한다.

 

---

 

렌더링 성능

렌더링 성능이란 웹페이지의 DOM, CSSOM, JS 등을 효율적으로 처리하고, 브라우저 레이아웃, 페인팅 등을 최소화하는 방법이다. 렌더링 성능이 향상되면 웹 페이지의 반응성을 높일 수 있다.

• DOM 조작 최소화 : DOM 조작은 필요한 경우에만 해야 하며, 한 번에 여러 개의 변경 사항을 같이 적용하고, Virture DOM이나 프레임워크등을 사용해 최소화시켜야 한다.
• CSS 애니메이션 사용 : CSS 속성 중 transfomr, opacity 속성은 CPU에서 동작하므로 CPU의 부하를 줄일 수 있다. layout과 paint를 발생시키는 속성은 피하는 것이 좋다.
• Reflow와 Repaint 방지 : 
  • Reflow는 브라우저가 웹 페이지의 요소들의 크기와 위치를 계산하는 과정이다.
  • Repaint는 브라우저가 웹 페이지 요소들의 색상, 스타일, 텍스트 등을 그리는 과정이다.
  • Reflow와 Repaint는 웹페이지 성능에 큰 영향을 미친다. 요소의 크기와 위치를 고정하고, 불필요한 스타일 변경을 피해야 한다.

 

---

 

Lighthoust

Lighthouse는 웹 페이지의 품질을 개선하기 위해 구글에서 제공하는 자동화 도구이다. Lighthouse는 성능, 접근성, SEO 등에 대한 전반적인 진단을 해준다. 

페이지 로드 분석을 클릭 후 성능(performance)을 보면 해당 페이지의 성능이 측정되어 있다.

Lighthouse는 속도 점수와 FCP, LCP, TBT, CLS 등의 다양한 지표를 표시한다.

 

 

Lighthouse로 웹페이지의 성능을 측정하고, 해당 부분에 대한 로직 수정, CDN 사용, 리소스 최소화 등을 통해 성능 최적화를 하면 된다.

 

 

 

개인 기록용입니다. 만약 잘못된 부분이 있다면 댓글로 알려주신다면 감사하겠습니다!