온라인 스토어 성능 개선
온라인 스토어는 테마 코드, 앱, 이미지, 동영상, 캐러셀, 소셜 미디어 피드, 분석 등 여러 기능으로 구성되어 있습니다. 이러한 기능으로 방문자 환경을 개선하고 사이트 기능을 확장할 수 있습니다.
그러나 온라인 스토어에 추가하는 각 기능은 스토어의 실적에 영향을 줄 수 있습니다. 일부 기능은 사이트 속도를 저하하거나 예상치 못한 동작을 유발하여 사용자 환경에 영향을 줄 수 있습니다.
웹 성능은 사용자 환경을 최적화하는 데 초점을 맞추고 있습니다. 현재 웹 성능은 Core Web Vitals에도 반영되는 세 가지 주요 영역에 초점을 맞추고 있습니다.
- LCP(Largest Contentful Paint)로 측정된 로딩 속도
- CLS(Cumulative Layout Shift)로 측정된 레이아웃 안정성
- FID(First Input Delay) 및 INP(Interaction to Next Paint)로 측정된 사용자 상호 작용에 대한 반응성
웹 성능 최적화는 고객이 사이트에 머물고 전환될 가능성이 더욱 높다는 의미입니다. 웹 성능이 중요한 이유에 대해 자세히 알아보세요.
온라인 스토어 최적화
온라인 스토어에는 웹 최적화가 기본 제공됩니다. 또한 웹 최적화는 새로운 기능에도 모두 제공됩니다. 다음 기능을 활용하려면 특별한 작업을 수행할 필요가 없습니다.
- 귀하의 온라인 스토어는 속도가 빠른 글로벌 서버에서 호스팅되며 스토어의 대역폭을 제한하지 않습니다. Shopify 스토어의 상태는 Shopify 상태에서 확인할 수 있습니다.
- 귀하의 온라인 스토어에는 Cloudflare에서 운영하는 CDN(콘텐츠 전송 네트워크)가 있으며 이를 사용하여 세계 어디서나 온라인 스토어가 빠르게 로드되도록 보장합니다. CDN 상태는 Cloudflare 상태 페이지에서 확인할 수 있습니다.
- 로드 시간을 빠르게 유지하기 위해 이미지는 이미지 CDN을 사용하여 자동으로 최적화됩니다. 테마 코드와 결합되면 이미지 CDN은 파일 크기를 작게 유지하기 위해 크기가 조정되고 압축된 최상의 이미지 형식을 제공합니다.
웹 성능에 영향을 미치는 요소
Shopify 스토어의 경우 웹 성능에 영향을 미치는 가장 큰 요소는 다음과 같습니다.
- 귀하의 온라인 스토어 테마
- 설치한 앱
- 태그 관리자 및 해당 태그 관리자 내 태그를 포함하여 스토어에 수동으로 추가한 추가 타사 코드
즉, 웹 성능을 개선하기 위해 다음에 집중해야 합니다.
- 최적화된 최신 온라인 스토어 2.0 테마를 사용하세요. 모든 온라인 스토어 2.0 Shopify 테마는 무료이며 웹 성능에 최적화되어 있습니다. 또한 다른 많은 타사 테마도 웹 성능에 최적화되어 있습니다. 최신 테마 성능 데이터를 검토할 수 있습니다.
- 설치된 앱과 타사 코드를 평가하여 잠재적인 성능 손실을 상쇄할 만큼 충분한 값을 생성하고 있는지 확인합니다.
- 태그 관리자를 감사하여 사용되지 않거나 낮은 값의 태그를 제거합니다. 태그 및 태그 관리자에 대한 모범 사례에 대해 자세히 알아보세요.
테스트 도구
다음 도구를 사용하여 온라인 스토어의 성능을 조사할 수 있습니다.
웹 성능 대시보드
Shopify의 웹 성능 대시보드 보고서는 Core Web Vitals를 사용하여 실제 사용자가 온라인 스토어를 어떻게 경험하고 있는지 측정합니다.
PageSpeed Insights
Google의 PageSpeed Insights를 사용하여 나만의 보고서를 실행하면 스토어 내 페이지에 대한 자세한 메트릭을 확인할 수 있습니다.
온라인 스토어 성능 관련 지원 받기
Shopify 무료 테마를 사용하는 경우, Shopify 지원팀에서 기본적인 성능 개선에 도움을 드릴 수 있습니다.
타사 테마를 사용하는 중 지원이 필요한 경우에는 해당 테마 개발자에게 문의하거나 Shopify 웹 성능 전문가를 고용하거나 Shopify 파트너를 고용해야 합니다. Shopify 파트너 고용에 대해 자세히 알아보세요.
앱에서 성능 문제가 발생한 경우 앱 개발자에게 문의할 수 있습니다.
개발팀 또는 대행사 파트너가 있는 경우에는 이들에게 문의하여 도움을 받을 수 있습니다.
문제 해결을 위한 기술 정보 및 리소스
귀하가 Shopify 상점, 테마 또는 앱의 실적을 개선하기 위해 노력 중인 개발자라면 각 Core Web Vital에 대해 다음 리소스를 검토할 수 있습니다. Shopify 테마에 대한 실적 모범 사례에 대해 자세히 알아보세요.
로딩 속도
LCP(Largest Contentful Paint)는 화면에서 가장 큰 요소가 표시되는 속도를 기준으로 로딩 속도를 측정합니다. TTFB(Time to first byte) 및 FCP(First Contentful Paint )는 문제의 근본 원인이 어디에서 기인하는지 더 잘 이해할 수 있도록 메트릭을 지원합니다. Shopify Liquid 상점에서 느린 로딩의 일반적인 원인 디버깅에 대해 자세히 알아볼 수 있습니다.
시각적 안정성
CLS(Cumulative Layout Shift)는 로딩 중에 콘텐츠가 예기치 않게 이동하는 정도에 따라 시각적 안정성을 측정합니다. CLS 디버깅에 대한 자세히 알아보려면, Shopify 사이트에서 CLS(Cumulative Layout Shift)를 최적화하는 방법을 읽어보세요.
상호 작용성
FID(First Input Delay)는 페이지가 링크나 버튼 클릭과 같은 첫 사용자 작업에 응답하는 데 걸리는 기간을 기준으로 상호 작용성을 측정합니다. Core Web Vitals에서 이는 INP(Interaction to Next Paint)로 교체됐고, 웹 성능 대시보드에 INP를 추가하는 작업을 진행 중입니다.
저조한 FID 또는 INP로 문제가 겪고 있다면 테마 코드, 앱 코드 또는 타사/태그 관리자 코드에서 너무 많은 JavaScript가 스토어에 있을 가능성이 높습니다. 최악의 주범을 제거하는 작업을 진행하세요. 페이지 로드에 대한 최악의 JavaScript 주범을 찾는 3가지 방법에 대해 자세히 알아보세요. INP 관련 문제가 계속되는 경우 web.dev에서 리소스를 통해 자세히 알아보세요.