Shopify에서 핵심 성능 보고서를 최적화하는 방법

Core Web Vitals를 측정하는 방법과 사이트의 점수가 좋은지 나쁜지에 대한 많은 정보가 온라인에 있습니다. 그러나 특히 Shopify에서 개선을 위해 수행해야 하는 작업에 대한 실행 가능한 조언은 거의 없습니다.

이 문서에서는 Shopify 스토어에서 Core Web Vitals 점수를 정확히 어떻게 향상시킬 수 있는지 살펴보겠습니다. 우리는 이러한 권장 사항을 개발자 없이 실행 가능하도록 최대한 많이 만들려고 노력했지만 일부는 전문적인 기술 구현이 필요합니다.

각 핵심 웹 중요 메트릭을 차례로 분해하고 성능에 영향을 미치는 요소를 설명한 다음 모든 Shopify 스토어에서 각 CWV 메트릭을 개선하는 방법을 보여줍니다.

아래 제목을 클릭하면 해당 섹션으로 바로 이동합니다.

• 핵심 성능 보고서가 Shopify에서 계산되는 방식
• Shopify에서 LCP를 개선하는 방법
• Shopify에서 CLS를 개선하는 방법
• Shopify에서 FID를 개선하는 방법
• Shopify 핵심 성능 보고서 앱

핵심 성능 보고서란?

Core Web Vitals가 무엇인지 간단히 요약해 보겠습니다.

Core Web Vitals는 Google에서 사용자의 웹페이지 성능과 경험을 측정하는 데 사용하는 측정항목 집합입니다. 각 메트릭에 대해 URL은 "녹색 - 좋음", "황색 - 개선 필요" 또는 "빨간색 - 나쁨"으로 표시됩니다.

Core Web Vitals 점수는 검색 엔진 순위에 직접적인 영향을 미칩니다.

LCP - 최대 콘텐츠 페인트

페이지에서 가장 큰 요소가 화면에 렌더링되는 데 얼마나 걸립니까?

CLS - 누적 레이아웃 이동

페이지가 로드될 때 페이지 레이아웃이 얼마나 이동합니까?

FID - 첫 번째 입력 지연

페이지가 상호 작용에 반응하는 데 얼마나 걸립니까?

핵심 성능 보고서가 Shopify에서 계산되는 방식

의미 있는 개선 방법에 영향을 미치기 때문에 Google에서 Core Web Vitals 점수를 계산하는 방법을 이해하는 것이 중요합니다. Core Web Vitals의 데이터는 Chrome 웹 브라우저를 사용하는 실제 웹사이트 방문자의 성능을 측정하는 CrUX 데이터에서 가져옵니다. 이것을 '필드 데이터'라고 합니다.

각 CWV 메트릭에는 '나쁨'으로 표시되지 않기 위해 도달해야 하는 최소 평균 점수가 있습니다. 이는 페이지 그룹에 대해 기록된 평균 점수를 기반으로 합니다. Shopify 웹사이트가 핵심 웹 바이탈 메트릭에 대해 점수가 매겨지지 않는다는 점을 이해하는 것이 중요합니다. 웹사이트의 URL은 다음과 같습니다.

Shopify 스토어가 Core Web Vitals 지표에서 실패하면 Search Console에서 문제의 영향을 받은 URL 샘플을 표시합니다. 이것은 문제가 있는 곳을 좁히고 목표 개선을 적용하는 데 도움이 됩니다. Shopify 스토어에서 Core Web Vitals 최적화 작업을 시작하기 전에 먼저 가장 영향을 미칠 개선 영역을 식별하십시오. 긍정적인 결과를 얻지 못할 일에 시간을 낭비하지 마십시오.

Shopify Core Web Vital 메트릭 최적화 팁

핵심 웹 바이탈은 가장 중요한 콘텐츠와 리소스를 최대한 빨리 제공하는 것입니다.

페이지 속도 최적화는 일회성이 아닙니다. 조직은 모든 ​​의사 결정에 페이지 속도 영향을 고려하는 문화를 채택해야 합니다. 상점에 대해 고려하는 모든 개선 사항에 대해 페이지 속도에 대한 트레이드 오프가 무엇인지 고려하십시오.

Shopify에서 LCP를 개선하는 방법

LCP는 페이지에서 가장 큰 요소와 브라우저가 해당 요소를 화면에 로드하고 렌더링하는 데 걸리는 시간을 나타냅니다. 이것은 일반적으로 이미지이지만 텍스트 요소일 수도 있습니다.

Shopify 스토어에서 LCP를 개선하려면 LCP에 영향을 미치는 요소를 이해하는 데 도움이 됩니다. LCP 요소를 로드하기 위해 발생하는 네 단계가 있습니다.

LCP는 웹 브라우저가 페이지에 가장 큰 요소를 페인트/렌더링하는 데 걸리는 시간에 관한 것입니다. 로딩과 페인팅은 같은 것이 아닙니다. LCP 요소가 아주 작은 파일 크기에 최적화되더라도 LCP는 다음과 같은 이유로 여전히 오랜 시간이 걸릴 수 있습니다.

• 리소스 로드 지연. 브라우저가 요소 다운로드를 시작하는 데 시간이 너무 오래 걸립니다.
• 요소 렌더링 지연. 브라우저에서 LCP 요소를 다운로드한 후 요소를 페이지에 렌더링하는 데 너무 오래 걸립니다.

여기서 얻을 수 있는 통찰력은 LCP가 가장 큰 요소의 파일 크기 이상이라는 것입니다. 위의 4단계 프로세스를 완료하는 데 걸리는 시간입니다. LCP 점수를 높이려면 LCP 요소를 로드하고 렌더링하는 전체 프로세스에 집중하십시오.

모든 Shopify 페이지에서 LCP 요소를 찾는 방법

LCP를 개선하려면 페이지의 어떤 요소가 LCP인지 알아야 합니다. 이것은 Shopify에서 쉽습니다. PageSpeed ​​Insights로 이동하여 LCP를 찾는 데 필요한 URL을 분석하기만 하면 됩니다. 보고서가 완료되면 하단으로 스크롤하여 '진단' 섹션을 확인합니다. '가장 큰 콘텐츠가 포함된 페인트 요소'라는 행이 있습니다. 이 페이지에서 어떤 요소가 LCP인지에 대한 세부 정보를 보려면 이것을 확장합니다.

LCP 요소를 레이지로드하지 마십시오.

지연 로딩은 요소가 뷰포트에 표시될 때만 로드하는 데 사용되는 방법입니다. 이렇게 하면 스크롤 없이 볼 수 있는 콘텐츠를 더 빠르게 로드할 수 있습니다. 브라우저가 요소 다운로드를 시작하는 속도를 지연시키므로 LCP 요소를 지연 로드하면 안 됩니다.

Shopify 스토어에서 제품 페이지의 LCP 요소는 일반적으로 기본 제품 이미지입니다. 또는 블로그 게시물에서 LCP 요소는 아마도 블로그 헤더 이미지일 것입니다. 일부 Shopify 테마는 스크롤 없이 볼 수 있는 이미지를 포함하여 모든 이미지에 자동으로 지연 로드를 추가합니다. 각 Shopify 템플릿을 검토하고 LCP 요소가 무엇인지 파악하십시오. 스크롤 없이 볼 수 있는 부분 위에 나타나면 아래 속성이 HTML 태그에 포함되어 있지 않은지 확인하세요.

로딩="게으르다"

LCP 요소 사전 로드

rel=”preload”를 사용하여 웹 브라우저가 가능한 한 빨리 특정 리소스를 다운로드하도록 지시할 수 있습니다. LCP 요소에 rel=”preload”를 적용하면 브라우저가 해당 리소스를 페이지에 로드하는 우선 순위를 지정합니다.

테마 코드를 편집하여 이 작업을 직접 수행할 수 있습니다. Shopify 테마 개발자의 경우 사전 로드 태그를 출력하는 Shopify 액체 템플릿에 추가할 수 있는 필터가 있습니다.

Nextgen 이미지 사용

WebP와 같은 새로운 이미지 형식은 JPG 및 PNG와 같은 기존 형식보다 파일 크기가 작습니다. LCP 요소가 이미지인 경우 Nextgen 이미지 형식을 사용하면 다운로드 시간이 단축됩니다. 가능한 경우 WebP 이미지를 사용하되 차세대 이미지를 지원하지 않는 레거시 브라우저에 대한 폴백을 포함해야 합니다.

새로운 Shopify 테마는 자동으로 이미지를 WebP로 변환하고 적절한 브라우저에 제공합니다.

초기 HTML 응답에 LCP 요소가 포함되어 있는지 확인

LCP 요소가 초기 HTML 응답 내에서 전달되도록 하여 '리소스 로드 지연'을 줄입니다. LCP 요소가 외부 리소스(예: JS 스크립트)에 의해 페이지에 로드되면 브라우저가 LCP 요소 다운로드를 시작하는 데 시간이 더 오래 걸립니다.

이것이 Shopify 스토어에 영향을 미치는지 여부는 사용하는 스토어 테마에 따라 다릅니다. 이를 테스트하는 빠른 방법은 LCP 요소가 무엇인지 파악한 다음 JS를 끈 상태에서 페이지를 보는 것입니다. LCP 요소가 페이지 HTML에 출력되지 않으면 초기 HTML 응답 내에서 전달되지 않는다는 의미입니다.

렌더링 차단 리소스 제거

'렌더링 차단 리소스 제거' 조언은 오래 전부터 있었습니다. 그러나 실제로 무엇을 의미합니까? 스크립트 및 스타일시트와 같은 일부 리소스는 웹 페이지의 렌더링을 차단합니다. 브라우저가 리소스를 발견하면 페이지 다운로드를 중지하고 대신 해당 리소스를 다운로드하고 실행합니다. 이로 인해 사용자를 위한 페이지 렌더링이 지연됩니다.

Lighthouse 보고서는 모든 페이지에 대한 렌더링 차단 리소스를 보여줍니다. 따라서 어떤 스크립트와 스타일시트가 렌더링을 차단하는지 확인한 다음 전달 방식을 최적화해야 합니다.

렌더링 차단 JS 제거

먼저 defer 및 async라는 두 가지 속성을 이해해야 합니다. 이러한 HTML 속성은 외부 스크립트에 첨부할 수 있으며 리소스를 다운로드/실행할 시기를 브라우저에 알릴 수 있습니다.

따라서 JS 스크립트에 async 또는 defer를 적용하면 페이지 렌더링에 미치는 영향을 최소화할 수 있습니다. Shopify는 스크립트를 자동으로 비동기화하거나 연기하지 않으므로 테마 액체 템플릿으로 이동하여 속성을 직접 추가해야 합니다. 그러나 스크립트 연기가 스토어 기능에 미칠 수 있는 영향을 고려해야 하므로 이 프로세스를 수행할 때 매우 주의해야 합니다.

또한 Shopify 스토어에 설치한 앱과 플러그인이 렌더링 차단 JS 스크립트를 출력한다는 것을 알 수 있습니다. Lighthouse 보고서를 통해 이를 식별할 수 있습니다. 스토어에 설치하는 모든 앱을 신중하게 고려하고 페이지 속도에 미칠 수 있는 영향에 대해 생각해 보십시오. 일부 판매자는 사용하지 않는 앱이 여전히 스토어에 설치되어 페이지 속도에 영향을 미친다는 사실조차 인식하지 못합니다. 앱을 제거할 때 테마에 레거시 코드를 남기지 않는지 확인하세요.

렌더링 차단 CSS 스타일시트 제거

렌더링 차단 CSS를 제거하려면 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 중요한 스타일을 인라인해야 합니다. 대부분의 CSS가 사용되지 않으므로 모든 방문자에 대해 전체 스타일시트를 즉시 다운로드하는 것은 비효율적입니다.

해결책은 페이지의 스크롤 없이 볼 수 있는 섹션을 헤드 의 스타일 태그 내에 포함하여 렌더링하는 데 필요한 중요한 CSS를 인라인하는 것입니다. 그런 다음 아래 코드를 메인 스타일시트를 비동기적으로 로드하기 위한 theme.liquid.js의

 <link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">

이를 라이브 스토어에 출시하기 전에 테스트 테마를 실험하여 페이지가 여전히 시각적으로 올바르게 표시되는지 확인하십시오.

Shopify에서 CLS를 개선하는 방법

CLS는 페이지가 로드될 때 페이지 레이아웃이 얼마나 많이 이동하는지에 관한 것입니다. 원인은 일반적으로 콘텐츠가 로드되고 렌더링될 때 이동하는 이미지입니다.

이미지에 너비 및 높이 속성 추가

가장 쉬운 CLS 솔루션은 img 태그가 명시적인 너비 및 높이 속성을 출력하도록 하는 것입니다. 이러한 속성은 이미지 HTML에 적용되며 브라우저에 이미지 너비와 높이를 알려줍니다. 이 정보를 사용하여 브라우저는 이미지 종횡비와 크기를 계산하고 해당 이미지에 필요한 공간을 예약할 수 있습니다. 이렇게 하면 이미지가 페이지에 추가될 때 레이아웃이 이동하지 않습니다.

자신의 Shopify 스토어에 있는 이미지에서 이 작업을 수행하려면 로그인하고 테마 섹션으로 이동하십시오. 그리고 테마에 대한 '코드 편집'으로 이동합니다. 그런 다음 액체 템플릿 내에서 이미지를 출력하는 코드 스니펫을 찾고 img 태그에 다음 스니펫을 추가합니다.

 height="{{img.height}}" width="{{img.width}}

Shopify 홈페이지, 컬렉션, 제품 및 블로그에 사용하는 액체 템플릿을 살펴보고 img 태그가 너비 및 높이 속성을 참조하는지 확인하십시오.

글꼴 최적화

Google 글꼴과 같은 곳에서 로드하는 멋진 웹 글꼴은 FOUS(스타일이 지정되지 않은 텍스트 플래시)라는 문제로 인해 CLS 문제를 일으킬 수 있습니다. 이것은 웹 브라우저가 처음에 대체 글꼴을 로드한 다음 기본 웹 글꼴이 로드되면 텍스트가 다시 렌더링되어 레이아웃을 변경하는 위치입니다.

타사 웹 글꼴에 대한 의존도 줄이기 우선 타사 웹 글꼴에 대한 의존도를 낮추십시오. 웹 글꼴을 가져올 때 필요한 글꼴군만 가져오십시오. 한 번도 사용하지 않은 다른 글꼴 두께와 스타일을 가져오지 마세요. 이렇게 하면 글꼴 파일 크기가 커집니다.

글꼴 미리 로드 웹 글꼴은 때때로 스타일시트 내에서 로드됩니다. 이로 인해 브라우저가 글꼴 다운로드를 시작할 수 있는 속도가 지연됩니다. 대신 글꼴 파일을 당신의 가게의. 이렇게 하면 글꼴 파일을 높은 우선 순위로 로드하도록 브라우저에 알립니다.

font-display 사용:선택 사항 Font-display는 글꼴이 100ms 이내에 다운로드되지 않은 경우 브라우저에 수행할 작업을 알려주는 CSS 속성입니다. 브라우저는 처음에 대체 글꼴을 로드하고 사용자 지정 글꼴이 100ms 이내에 다운로드가 완료되지 않으면 브라우저는 페이지에 렌더링된 대체 글꼴을 유지합니다. 이렇게 하면 사용자 지정 글꼴이 너무 늦게 로드되어 레이아웃이 변경될 위험이 줄어듭니다.

Shopify에서 FID를 개선하는 방법

우리의 경험에 따르면 FID는 Shopify 스토어에 영향을 미치는 가장 덜 일반적인 Core Web Vital 메트릭입니다. FID는 페이지가 로드되는 동안 얼마나 반응하는지 측정하는 방법으로 생각하십시오. 클릭/탭하는 것보다 사용자를 좌절시키는 것은 없으며 아무 일도 일어나지 않습니다.

FID는 TBT(Total Blocking Time)라는 또 다른 메트릭과 유사합니다. TBT는 페이지가 렌더링되기 시작하는 시점(First Contentful Paint 또는 FCP)과 페이지가 반응하는 시점(Time to Interactive 또는 TTI) 사이의 시간을 측정합니다.

TBT는 메인 스레드의 처리를 차단하는 '긴 작업'으로 인해 발생합니다. 메인 스레드는 브라우저가 페이지를 로드하는 데 필요한 모든 것을 처리하는 곳입니다. 긴 작업으로 인해 기본 스레드가 처리되지 않으면 페이지가 사용자와 상호 작용하는 속도가 지연됩니다.

FID와 TBT의 차이점

FID와 TBT의 주요 차이점은 FID가 필드 데이터(Shopify 스토어를 방문한 실제 사용자의 데이터)를 기반으로 한다는 것입니다. 반면 TBT는 실험실에서 측정할 수 있으며 정의된 네트워크 조건으로 고안된 환경에서 테스트를 실행하여 계산됩니다.

자신의 페이지를 테스트할 때 FID를 측정할 수 없으므로 대신 TBT를 측정해야 합니다.

FID를 개선하려면 Shopify 스토어가 사용자의 첫 번째 상호 작용에 응답하는 속도를 높여야 합니다. Shopify 페이지를 최대한 효율적으로 로드하면 됩니다. 다음 세 가지 영역에 중점을 둡니다.

타사 코드의 영향 감소

모든 핵심 웹 바이탈 메트릭과 마찬가지로 타사 JavaScript가 문제의 원인인 경우가 많습니다. 250ms 이상 기본 스레드를 차단하는 타사는 Lighthouse 보고서에 표시됩니다. Lighthouse를 통해 페이지를 실행하여 문제를 일으키는 타사 스크립트를 식별하십시오. 그런 다음 비동기 또는 연기로 설정할 수 있는 항목을 결정합니다.

JavaScript 실행 시간 단축

JavaScript를 실행하는 데 걸리는 시간도 중요합니다. 우선 Lighthouse를 통해 페이지를 실행하고 실행하는 데 가장 오래 걸리는 스크립트를 식별합니다. Lighthouse는 2초 이상 걸리는 모든 스크립트에 플래그를 지정합니다.

코드 분할 사용 모든 JavaScript 코드를 단일 파일에 전달하는 대신 코드를 더 작은 조각으로 분할하고 해당 페이지에 필요한 코드만 전달합니다. 이는 쉽지 않으며 코드를 관리하는 개발자의 지원이 필요합니다. 프로젝트 시작 시 Shopify 테마 개발에 통합하면 훨씬 더 쉽게 찾을 수 있습니다.

코드 축소 및 압축 코드 를 축소하면 불필요한 공백과 주석이 제거됩니다. 이렇게 하면 파일 크기가 줄어들지만 브라우저가 코드를 실행할 수 있는 속도가 빨라집니다. Shopify의 장점 중 하나는 대부분의 테마 js가 자동으로 축소된다는 것입니다.

축소와 마찬가지로 js를 압축하면 파일 크기가 줄어들고 웹 브라우저에서 코드를 실행할 수 있는 속도가 빨라집니다.

스레드 작업 최소화

메인 스레드는 모든 작업 처리 및 페이지 작성 방법 계산을 수행합니다. 메인 스레드가 집약적인 작업에 의해 점유되면 TBT가 악화됩니다. 이것은 주로 Shopify 테마가 얼마나 강력한지에 달려 있습니다. 가난한 개발자가 만든 저렴한 테마는 Shopify 전문가가 개발한 테마만큼 효율적으로 로드되지 않습니다.

Shopify 스토어에서 스레드 작업을 최소화하려면 어떻게 해야 합니까? 위에서 언급했듯이 처음부터 테마에 통합하면 훨씬 쉽습니다. 리뷰가 좋은 프리미엄 Shopify 테마를 구입하는 것이 좋습니다. 또는 자체 Shopify 스토어를 구축하는 경우 스레드 작업을 최소화하도록 테마를 최적화할 수 있는 Shopify 전문 개발자와 협력하고 있는지 확인하십시오.

핵심 성능 보고서 성능을 측정하는 방법

이제 Shopify 스토어에서 Core Web Vitals를 개선하는 방법을 이해했으며 다음으로 Core Web Vitals 진행 상황을 측정하는 방법을 알아야 합니다.

검색 콘솔

Core Web Vitals에 대한 Shopify 스토어의 현재 성능을 확인하는 가장 빠른 방법은 Search Console을 이용하는 것입니다. 사이트의 현재 성능에 대한 데이터를 얻으려면 왼쪽 메뉴에서 핵심 성능 보고서로 이동하십시오. 여기에는 Core Web Vitals 문제가 있는 위치에 대한 분석이 포함되며 영향을 받는 URL의 샘플이 표시됩니다.

페이지스피드 인사이트/라이트하우스

Pagespeed Insights는 모든 페이지의 페이지 속도를 측정할 수 있는 무료 Google 도구입니다. 도구를 통해 Shopify URL을 실행하여 더 높은 점수를 얻기 위한 권장 조치와 함께 성능에 대한 자세한 분석을 얻으십시오.

크럭스 보고서

CrUX는 수백만 개의 실제 페이지에 대한 Google의 자체 속도/성능 데이터 세트입니다. Google CrUX 데이터 스튜디오 대시보드를 사용하여 자신의 Shopify 스토어에 대한 CrUX 데이터에 액세스할 수 있습니다. 대시보드는 지난 16개월 동안 Core Web Vitals 지표에서 사이트의 성능에 대한 심층 분석을 제공합니다.

모든 CWV 용어는 무엇을 의미합니까?

Core Web Vitals를 살펴보기 시작하면 많은 복잡한 용어를 보게 될 것입니다. 그 의미는 다음과 같습니다.

핵심 성능 보고서 Shopify 앱

Core Web Vitals 점수를 향상시킬 수 있다고 주장하는 Shopify 앱이 많이 있습니다. 이러한 앱 중 일부는 효과적이며 성능 향상을 제공합니다. 이렇게 하면 Core Web Vitals 점수가 향상될 수 있지만 효과가 나타날 것이라는 보장은 없습니다. 이는 Core Web Vitals 점수가 모든 Shopify 스토어에 고유하기 때문입니다. 특정 테마 문제로 인해 매장의 Core Web Vitals 점수가 좋지 않은 경우 앱이 별 차이가 없을 것입니다.

앱 경로를 사용하려면 앱을 시험해 보고 성능에 미치는 영향을 관찰하는 것이 좋습니다. 다음은 평가판으로 추천되는 몇 가지 앱입니다.

• https://apps.shopify.com/core-web-vitals-booster
• https://apps.shopify.com/page-speed-optimizer
• https://apps.shopify.com/swift

전자 상거래 비즈니스에 대한 조언이나 지원이 필요한 경우 저희 팀에 전화를 주시면 기꺼이 도와드리겠습니다.