우수한 UX를 위해 가장 큰 콘텐츠가 포함된 페인트를 측정하고 최적화하는 방법

온라인 성공에 관해서는 여러 가지 방법이 있습니다. 최적화된 사용자 경험이 그러한 방법 중 하나입니다. Google은 다양한 사용자 경험 및 관련 측정항목을 사용하여 SEO에 대한 웹사이트 순위를 정합니다. 웹 성능을 향상시키기 위해 여러 도구를 계속 생산해 왔습니다. 아래에서 Google이 사용자 경험을 개선하기 위해 찾고 있는 몇 가지 방법을 살펴보겠습니다.

Google 핵심 Web Vitals란 무엇입니까?

적절한 사용자 경험에 대한 측정과 이해를 수정하려는 최근 시도에서 Google은 페이지의 측정항목을 규제했습니다. 이러한 표준화된 측정항목을 핵심 웹 바이탈이라고 하며 웹사이트에서 실제 사용자 전문 지식의 평가를 용이하게 합니다.

가장 큰 콘텐츠가 포함된 페인트는 무엇입니까?

먼저 LCP(Large Contentful Paint)를 살펴보겠습니다. 핵심 웹 바이탈 메트릭 중 하나입니다. 표시 영역 내에서 가장 큰 콘텐츠 구성 요소가 표시될 때 로드 시간을 측정합니다. TTFB 및 First Contentful Paint와 같은 대체 메트릭은 라이브 페이지 경험을 공동으로 촉진하지만 페이지가 사용자에게 "의미 있는" 상태가 되면 표시되지 않습니다.

일반적으로 페이지에서 가장 중요한 구성 요소가 완전히 표시되지 않는 한 페이지는 사용자에게 충분한 컨텍스트를 제공하지 않을 수 있습니다. 따라서 LCP는 사용자의 기대치를 나타냅니다. 핵심 Web Vitals 메트릭인 LCP는 성능 점수의 25%를 차지하므로 최적화해야 하는 가장 중요한 메트릭 중 하나입니다.

LCP 시간 확인

Google에 따르면 가장 큰 콘텐츠가 포함된 페인트로 생각되는 부품 범주는 다음과 같습니다.

• <img> 요소
• <svg> 요소 내부의 <image> 요소
• <비디오> 요소(포스터 이미지 사용)
• URL 함수를 통해 로드된 배경 이미지가 있는 요소
• 텍스트 노드 및/또는 기타 인라인 수준 텍스트 요소로 구성된 블록 수준 요소

LCP는 어떻게 측정됩니까?

물론 웹 페이지의 LCP를 측정하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 Lighthouse, PageSpeed ​​Insights, Search Console 및 Chrome 사용자 경험 보고서를 포함하는 사용 가능한 플랫폼 중 하나를 사용하는 것입니다. 예를 들어 보고서의 Google PageSpeed ​​Insights는 LCP를 계산하기 위한 구성 요소를 나타냅니다.

좋은 LCP란 무엇입니까?

적절한 사용자 전문 지식을 제공하려면 사이트에서 LCP를 2.5초 이하로 유지하려고 시도해야 합니다. 대부분의 페이지 로드는 이 임계값 아래에서 발생해야 합니다. 이제 우리는 모두 LCP가 무엇이고 우리의 목표가 무엇인지 알았으므로 LCP를 향상시키는 방법을 살펴보겠습니다.

(Majority of pages must load 2.5초 이하의 LCP로 이름이 지정된 이미지를 추가하세요.jpg)

LCP(Large Contentful Paint)를 최적화하는 방법

LCP를 완전히 줄이는 기본 시스템은 사용자의 장치에 다운로드되는 데이터를 줄이고 해당 콘텐츠를 관리하고 원활한 사용자 경험을 보장하는 데 걸리는 시간을 줄이는 것입니다.

사진 최적화

대부분의 사이트에서 스크롤 없이 볼 수 있는 콘텐츠에는 일반적으로 LCP에 필요한 대형 이미지가 포함됩니다. 영웅 이미지, 회전 목마 또는 배너일 수 있습니다. 보다 강력한 LCP를 위해 이러한 그림을 최적화해야 합니다.

사진을 최적화하려면 ImageKit.io와 같은 타사 이미지 CDN을 사용해야 합니다. 타사 이미지 CDN을 사용하는 이점은 단순히 실제 비즈니스를 대상으로 하고 이미지 최적화는 이미지 CDN에 맡길 수 있다는 것입니다.

반응형 사진을 위한 실시간 변환

Google은 거의 모든 사이트에 모바일 우선 분류를 사용합니다. 이것이 데스크탑보다 모바일에 LCP를 최적화해야 하는 이유입니다. 각 이미지는 레이아웃 요구에 맞게 바로 축소되어야 합니다.

예를 들어, 목록 페이지에서는 이미지를 더 작은 크기로, 상품 상세 페이지에서는 더 큰 크기로 이미지를 원합니다. 이 크기 조정을 통해 정확한 페이지에 필요한 것보다 더 많은 추가 바이트를 사용하지 않는 것 같습니다.

사진 캐시 및 배달 시간 개선

이미지 CDN은 CDN(콘텐츠 전송 네트워크)을 사용하여 사진을 전송합니다. CDN을 사용하면 전 세계의 절반에 있는 서버가 아니라 가까운 위치에서 사진을 로드할 수 있습니다.

필수 리소스 미리 로드

LCP에 영향을 주는 경우 브라우저에서 시각적 개체를 로드하지 못할 수 있는 경우가 있습니다. 예를 들어, 접힌 부분의 상단에 있는 배너 이미지는 CSS 파일 내에서 배경 이미지로 보일 수 있습니다. 브라우저는 CSS 파일을 다운로드할 때까지 이미지에 대해 알지 못하기 때문에 로드하지 않습니다.

이제 "가장 큰 Contentful 페인트 이미지를 어떻게 미리 로드합니까?"라고 묻는다면 대답은 간단합니다. 하이퍼텍스트 마크업 언어 문서의 상단 섹션에 rel= "preload" 속성이 있는 태그를 사용하여 미리 로드할 수 있습니다.

문서에 여러 리소스를 미리 로드할 수 있지만 스크롤 없이 볼 수 있는 사진이나 비디오, 페이지 전체 글꼴 파일 또는 필수 CSS 및 JS 파일로 제한해야 합니다.

서버 응답 시간 단축

서버가 정상으로 간주되는 것보다 로드하는 데 더 오래 걸리면 화면에 페이지를 로드하는 데 걸리는 시간이 늘어납니다. 이는 LCP와 함께 각 페이지 속도 메트릭에 부정적인 영향을 미칩니다. 서버 응답 시간을 향상시키기 위해 다음을 수행할 수 있습니다.

• 서버 분석 및 최적화
• 콘텐츠 전송 네트워크 사용
• 타사 출처에 사전 연결
• 서비스 워커와 함께 콘텐츠 캐시 우선 제공
• 텍스트 파일 압축

클라이언트 장치 응답 시간 개선

페이지를 로드하는 데 시간이 오래 걸리면 잠재 고객에게 불쾌감을 줄 수 있습니다. 운 좋게도 끝에서 제대로 로드되고 원활한 사용자 경험을 만들기 위해 할 수 있는 몇 가지 작업이 있습니다. 여기에는 다음이 포함됩니다.

• 필수 CSS 인라인
• 콘텐츠 축소 및 누르기
• 클라이언트 측 렌더링을 위한 LCP 최적화
• 서버 측 렌더링 사용
• 사전 렌더링 사용

LCP는 사용자 경험 및 여정과 강력한 상관관계가 있는 큰 검색 순위 요소가 되었습니다. 따라서 웹 비즈니스를 운영하는 경우 이러한 구성 요소를 최적화하여 노력의 성공을 보장해야 합니다.

저자 약력

Ghia Marnewick은 작가, 소셜 미디어 관리자 및 디지털 관리자입니다. 그녀는 Aumcore에 대한 콘텐츠를 작성하고 세상과 정보를 공유하는 새로운 방법을 찾는 데 열정적입니다.