웹 페이지에서 lcp 문제가 2.5초보다 긴 문제의 해결 방법

LCP(Largest Contentful Paint)는 세 가지 Core Web Vitals 메트릭 중 하나이며 웹페이지의 기본 콘텐츠가 로드되는 속도를 나타냅니다. 특히 LCP는 사용자가 페이지 로드를 시작한 때부터 뷰포트 내에서 가장 큰 이미지 또는 텍스트 블록이 렌더링될 때까지의 시간을 측정합니다. 좋은 사용자 경험을 제공하기 위해 사이트는 페이지 방문의 최소 75%에 대해 LCP가 2.5초 이하가 되도록 노력해야합니다.

 

브라우저가 웹 페이지를 로드하고 렌더링할 수 있는 속도에 영향을 미칠 수 있는 여러 가지 요소가 있으며 이러한 요소에 대한 차단 또는 지연은 LCP에 상당한 영향을 미칠 수 있습니다. 페이지의 한 부분에 대한 빠른 수정으로 LCP가 의미 있게 개선되는 경우는 드뭅니다. LCP를 개선하려면 전체 로드 프로세스를 살펴보고 그 과정의 모든 단계가 최적화되었는지 확인해야 합니다.

 

개선 방법

LCP를 개선하는 몇 가지 방법에는 TTFB(Time to First Byte) 개선 및 서버 응답 시간 감소가 포함됩니다. JS, 404오류 수정, 비디오 배경, 팝업 및 페이드인 사용 금지 등이 있습니다.

 

CSS 및 JS 최적화

CSS 및 JS를 최적화하면 웹 사이트 성능을 향상 시킬 수 있습니다. CSS를 최적화하는 한 가지 방법은 불필요한 스타일을 제거하고 축소, 압축 및 캐시하고 페이지 로드 시 필요하지 않은 CSS를 추가 파일로 분할해 CSS 렌더링 차단을 줄이는 것입니다. 이미지를 CSS 효과로 바꿀 수도 있습니다.

 

자바스크립트 최적화를 위해 자바스크립트를 연기하고, 사용자 상호작용이 발생할 때까지 자바스크립트를 일시중지하고, 자바스크립트를 아래로 이동하고, Google 태그 관리자를 사용할 수 있습니다.

 

 

렌더 블로킹을 위한 최적화

CSS는 미디어 쿼리를 사용해 스타일을 특정 조건으로 지정할 수 있습니다. 미디어 쿼리는 반응형 웹 디자인에 중요하며 중요한 렌더링 경로를 최적화하는 데 도움이 됩니다. 브라우저는 이러한 스타일을 모두 구분 분석할 때까지 렌더링을 차단하지만 인쇄 스타일시트와 같이 사용하지 않을 것으로 알고 있는 스타일에 대한 렌더링은 차단하지 않습니다. 미디어 쿼리를 기반으로 CSS를 여러 파일로 분할하면 사용하지 않는 CSS를 다운로드 하는 동안 렌더링 차단을 방지할 수 있습니다. 비차단 CSS 링크를 만들려면 인쇄 스타일과 같이 즉시 사용되지 않는 스타일을 별도의 파일로 이동하고 HTML 마크업에 <link>를 추가한 다음 미디어 쿼리(이 경우 인쇄 스타일시트임을 명시)를 추가합니다.

<!-- Loading and parsing styles.css is render-blocking -->
<link rel="stylesheet" href="styles.css" />

<!-- Loading and parsing print.css is not render-blocking -->
<link rel="stylesheet" href="print.css" media="print" />

<!-- Loading and parsing mobile.css is not render-blocking on large screens -->
<link
  rel="stylesheet"
  href="mobile.css"
  media="screen and (max-width: 480px)" />

 

기본적으로 브라우저는 지정된 각 스타일시트가 렌더링 블로킹이라고 가정합니다. 미디어 쿼리와 함께 특성을 추가하여 스타일시트를 적용해야 하는 시기를 브라우저에 알립니다. 브라우저가 스타일 시트를 볼 때 특정 시나리오에만 적용해야한다는 것을 알고 스타일 시트를 다운로드하지만 블록을 렌더링하지는 않습니다. CSS를 여러 파일로 분리하면 기본 렌더링 차단 파일이 훨씬 작아져 렌더링이 차단되는 시간이 줄어듭니다. media styles.css

 

 

GPU에서 애니메이션

브라우저는 CSS 애니메이션을 처리하도록 최적화되어 있으며, 리플로우(다시 그리기)를 트리거하지 않는 애니메이션 속성을 잘 처리합니다. 성능을 향상시키기 위해 애니메이션되는 노드를 메인 스레드에서 GPU로 이동할 수 있습니다.

transform() CSS 속성을 사용하면 요소를 회전, 크기 조정, 기울이기 또는 변환할 수 있습니다. CSS 비주얼 서식 모델의 좌표 공간을 수정합니다.

transform: rotate(0.5turn);

 

rotate3d() CSS 함수는 요소를 회전하는 변환을 정의합니다. 변형하지 않고 3D 공간에서 축을 고정했습니다. 결과는 <transform-function> 데이터 형식입니다.

transform: rotate3d(1, 1, 1, 45deg);

 

Largest Contentful Paint

티스토리 같은 경우 태그 생성 숫자 줄이기

태그가 관련되어 있는지는 실험중이지만 우선 태그를 관리홈에서 띄워주는 갯수를 최저숫자로 설정했다. 그리고 이후 추세를 확인해볼 생각에 있다.

 

우선 위의 조치들을 설정해보고 변화를 살펴볼 예정이다. 추후에 추가사항을 조치해볼 예정에 있다.