LCP, FID, CLS, TTFB, FCP 정의 및 개선 방안
1) Largest Contentful Paint ( LCP ) 최대 콘텐츠 풀 페인트
- 정의 : 사용자가 페이지에 방문한 후 페이지의 주요 콘텐츠가 로드되고 화면에 완전히 표시되기까지 걸린 시간을 측정하는 성능 지표이다.
페이지 로딩 성능을 평가하는 데 중요한 척도로, 사용자가 실제로 볼 수 있는 가장 큰 요소가 얼마나 빨리 로드 되는지 나타냄
특히 대형 이미지, 비디오 썸네일 또는 대량의 텍스트 블록 같은 큰 콘텐츠 요소에 초점을 맞춘다.
- 좋은 LCP 점수:
- 좋음 : 2.5초 이내
- 개선 필요 : 2.5초 - 4초
- 나쁨 : 4초 이상
- 개선 방안 :
- 리소스 최적화
- 이미지와 비디오 등 미디어 파일을 압축하고 적절한 크기로 조정하여 로드 시간 단축
- lazy loading 기법을 사용하여 필요할 때만 리소스를 로드
- 코드 분할과 지연로딩
- React의 'React.lazy()' 및 'Suspense'를 사용하여 코드 분할을 구현.
- 초기 로드 시간을 단축하고 사용자 상호작용에 필요한 리소스만 우선 로드할 수 있다.
- 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성
- 서버 사이드 렌더링(SSR)을 사용하면 초기 페이지 로딩 시에 HTML과 CSS가 이미 준비되어있어 사용자에게 빠르게 콘텐츠 제공 가능
- 정적 사이트 생성(STatic Site Feneration, SSG)은 빌드 타임에 HTML을 생성하여 로드 시간 단축.
- 크리티컬 CSS 사용
- 페이지 로드에 필수적인 스타일만을 포함한 '크리티컬 CSS'를 추출하여 페이지의 초기 로드 시간 개선
- 프론트엔드 성능 최적화
- 컴포넌트 렌더링 최적화를 통해 필요 없는 리렌더링을 방지.
- 'React.memo','useMemo','useCallback'등을 활용하여 불필요한 연산을 줄임.
- 정의 : 사용자가 웹 페이지와 처음 상호작용하는 순간부터 브라우저가 이 상호작용에 응답하기 시작할 때까지의 지연시간을 측정하는 웹성능 지표 ( 클릭. 탭, 키보드 입력 등 )
사용자가 웹 페이지와의 상호작용을 시작할 때 느끼는 방응성을 측정하여, 사용자 경험의 실시간성과 방응성을 평가하는 데 중요.
- 개선 방안 :
- 코드 분할과 지연 로딩
- React의 'React.lazy()' 및 'Suspense'를 사용하여 코드 분할을 구현.
- 초기 로드 시간을 단축하고 사용자 상호작용에 필요한 리소스만 우선 로드할 수 있다.
- 웹팩의 모듈 분할
- 웹팩을 사용해 번들 크기를 최적화하고, 필요한 리소스만 초기 로드에 포함 시킨다.
- 이벤트 리스너 최적화
- 불필요한 이벤트 리스너를 제거하고, 가능한 한 컴포넌트 트리의 사위에서 이벤트를 처리한다.
- 상태 관리 최적화
- 상태 업데이트로 인한 불필요한 리렌더링을 줄이기 위해 'React.memo','useMemo','useCallback'같은 React의 최적화 기능을 사용
- 비동기 작업 관리
- 네트워크 요청, 데이터 처리와 같은 비동기 작업을 효율적으로 관리.
- 사용자 상호작용 이전에 데이터를 미리 로드하거나, 상호작용이 필요하지 않은 작업은 백그라운드에서 처리
3) Cumulative Layout Shift ( CLS ) 누적 레이아웃 이동
- 정의 : 사용자가 웹 페이지를 방문할 때 발생하는 레이아수 변화의 총합을 측정하는 지표로, 웹 페이지의 시각적 안정성을 나타낸다. 사용자 경험을 개선하고, 페이지의 사용성을 높이는 데 중요하다. 레이아웃의 변화가 갑작스럽게 발생하면 사용자가 의도치 않은 상호작용을 하게 되어 불편할 수 있다.
- 개선 방안 :
- 이미지와 광고 요소의 크기 지정
- 이미지, 비디오, 광고 또는 다른 삽입된 콘텐츠의 크기를 CSS를 통해 명시적으로 지정.
- 해당 요소가 로드될 때 발생할 수 있는 레이아웃 변화를 방지.
- 동적 콘텐츠 삽입위치 고려
- 페이지의 중간에 동적 콘텐츠( 댓글, 리스트 아이템 등 )를 삽입할 때는 사용자의 상호작용을 통해서만 이루어지게 하여, 레이아웃이 갑자기 변경되지 않게 한다.
- 폰트 로딩 전략 최적화
- 웹 폰트가 로드되는 동안 텍스트의 레이아웃 변화를 방지하기 위해 'font-display: swap;' 같은 CSS 규칙을 사용하여 폰트 로딩 전략 최적화
- 애니메이션과 전화 효과 사용 최소화
- 레이아웃 변화를 일으킬 수 있는 애니메이션과 전화효과는 신중하게 사용, 예측 가능하고 안정적인 시각 경험을 제공
- 리액트의 상태 관리
- React에서 상태 변화로 인해 발생하는 레이아웃 변화는 계획적이고 예측 가능해야 한다. 컴포넌트 상태 변화 시 레이아수의 변동이 최소화 되도록 설계
4) Time to First Byte ( TTFB ) 최초 바이트까지의 시간
- 정의 : 사용자가 웹 페이지를 요청한 순간부터 브라우저가 서버로부터 첫번째 바이트를 수신할 때까지의 시간을 측정하는 성능 지표. 서버 응답시간을 줄이고, 초기 로드 경험을 개선하는데 중요하다
- 개선 방안 :
- 서버 성능 최적화
- 서버 하드웨어 및 소프트웨어의 성능을 평가하고, 필요한 경우 업그레이드를 고려
- 데이터베이스 쿼리, 서버 사이드 스크립트 등 서버에서 실행되는 작업의 효율성을 개선
- 캐싱 전략 구현
- 정적 콘텐츠 및 자주 요청되는 데이터에 대해 캐싱을 구현하여 서버 응답 시간을 단축.
- CDN(Content Delivery Network)을 사용하여 전 세계 사용자에게 빠른 콘텐츠 제공을 지원
- 서버 사이드 렌더링 사용
- 초기 HTML을 빠르게 전송하고, 사용자에게 첫 화면을 빠르게 보여준다
- 네트워크 최적화
- DNS 조회 시간을 최소화하고 , TLS/SSL 핸드셰이크를 최적화하여 연결 설정 시간을 단축한다.
- 서버와 클라이언트 간의 네트워크 경로를 최적화하여 패킷 전송 시간을 줄인다.
- 로드 밸런싱 및 스케일링
- 트래픽이 많은 시간에 대비하여 서버 로드 밸런싱 및 자동 스케일링을 구현하여 서버에 가해지는 부하를 분산
- 코드 및 리소스 최적화
- 번들 크기를 최소화하고, 필요한 리소스만 최초 로드에 포함시키도록 코드를 최적화
5) First Contentful Paint ( FCP ) 최초 콘텐츠 풀 시간
- 정의 : 사용자가 웹 페이지를 요청한 후 브라우저가 첫 번째 콘텐츠를 화면에 렌더링하기 시작할 때까지의 시간을 측정하는 웹 성능 지표. 사용자의 초기 로딩 경험을 개선하고, 전반적인 사용자 만족도를 향상 시키는데 중요.
- 개선 방안 :
- 서버 사이드 렌더링
- SSR을 사용하면 초기 페이지 로드 시 HTMLl이 이미 생성되어 있어 브라우저가 콘텐츠를 더 빠르게 렌더링 할 수 있다.
- 코드 분할과 지연 로딩
'React.lazy()'와 'Suspense'를 사용하여 필요한 컴포넌트만 초기 로드에 포함시키고, 나머지는 필요할 때 로드
- 리소스 최적화
- 크리티컬한 CSS와 자바스크립트르 최적화하여 초기 로드 시간을 단축한다.
- 이미지, 폰트, 기타 미디어 자원의 크기를 최적화 하고 필요한 경우 게으른 로딩(lazy loading)을 적용한다.
- 효율적인 자바스크립트 실행
- 브라우저가 중요 콘텐츠를 더 빠르게 렌더링 할 수 있도록 자바스크립트 실행을 최적화
- 'useEffect' 또는 다른 사이드 이펙트를 통해 수행되는 비동기 작업은 사용자 경험에 필수적인 것들로 제한
- 크리티컬 패스 최적화
- 브라우저가 첫 페이지를 렌더링하는 데 필요한 리소스를 우선적으로 로드하도록 HTML, CSS, 자바스크립트의 로딩 순서를 최적화
소통해요~ 😄