온라인 스토어 성능 개선

온라인 스토어는 테마 코드, 앱, 이미지, 동영상, 캐러셀, 소셜 미디어 피드, 분석과 같은 기능들로 구성됩니다. 이러한 기능은 방문자 환경을 개선하고 사이트의 기능을 확장할 수 있습니다.

그러나 온라인 스토어에 추가하는 각 기능은 스토어 성능에 영향을 줄 수 있습니다. 일부 기능은 사이트 속도를 저하하거나 사용자 환경에 영향을 줄 수 있는 예기치 않은 동작을 생성할 수 있습니다.

웹 성능은 사용자 환경 최적화에 중점을 둡니다. 현재 웹 성능은 핵심적인 웹 지표(Core Web Vitals)에도 반영되는 세 가지 주요 영역에 초점을 맞추고 있습니다.

최대 컨텐츠풀 페인트(LCP)로 측정되는 로드 속도
누적 레이아웃 이동(CLS)으로 측정되는 레이아웃 안정성
다음 페인트에 대한 상호작용(INP)으로 측정되는 사용자 상호작용에 대한 응답성

웹 성능을 최적화하면 고객이 사이트에 더 오래 머물고 전환할 가능성이 높아집니다.

이 페이지의 내용

온라인 스토어 최적화

온라인 스토어에는 웹 최적화 기능이 내장되어 있습니다. 웹 최적화는 새로운 기능에도 내장됩니다. 다음 기능을 활용하기 위해 특별한 조치를 취할 필요는 없습니다.

온라인 스토어는 빠른 글로벌 서버에서 호스팅되며 스토어의 대역폭을 제한하지 않습니다. Shopify 상태에서 Shopify 스토어의 상태를 확인할 수 있습니다.
온라인 스토어에는 Cloudflare에서 운영하는 CDN(콘텐츠 전송 네트워크)이 있어 전 세계 어디에서나 온라인 스토어를 빠르게 로드할 수 있습니다. Cloudflare 상태 페이지에서 CDN 상태를 확인할 수 있습니다.
로드 시간을 단축하기 위해 이미지는 이미지 CDN을 사용하여 자동으로 최적화됩니다. 이미지 CDN은 테마 코드와 결합하여 파일 크기를 작게 유지하도록 크기가 조정되고 압축된 최상의 이미지 형식을 제공할 수 있습니다.

웹 성능에 영향을 미치는 요인

Shopify 스토어의 경우 다음은 웹 성능에 가장 큰 영향을 미치는 요인입니다.

온라인 스토어 테마
설치한 앱
태그 관리자 및 그 안의 태그를 포함하여 스토어에 수동으로 추가한 추가 타사 코드

이는 웹 성능을 개선하기 위해 다음에 집중해야 함을 의미합니다.

최신의 최적화된 테마를 사용하십시오. 모든 Horizon 테마 제품군 및 Shopify의 Online Store 2.0 테마는 무료이며 웹 성능에 최적화되어 있습니다. 또한 다른 많은 타사 테마도 웹 성능에 최적화되어 있습니다. 최신 테마 성능 데이터를 검토할 수 있습니다.
테마가 페이지 전환 또는 기타 애니메이션을 제공하는 경우 활성화 전후의 웹 성능을 비교하십시오. 애니메이션은 페이지 속도를 저하시킬 수 있습니다.
테마의 페이지 템플릿에 너무 많은 섹션을 추가하지 마십시오. 페이지의 섹션 수가 많으면 웹 성능이 저하될 수 있습니다.
제품이 많은 컬렉션이 있는 경우 페이지 매김을 활성화하여 한 번에 로드되는 제품 수를 제한하는 것을 고려하십시오.
설치된 앱과 타사 코드를 평가하여 잠재적인 성능 저하를 상쇄할 만큼 충분한 가치를 창출하는지 확인하십시오.
태그 관리자를 감사하여 사용하지 않거나 가치가 낮은 태그를 제거하십시오. 태그 및 태그 관리자 모범 사례에 대해 자세히 알아보십시오.

테스트 도구

다음 도구를 사용하여 온라인 스토어의 성능을 조사할 수 있습니다.

웹 성능 보고서: Shopify의 웹 성능 보고서는 핵심적인 웹 지표(Core Web Vitals)를 사용하여 실제 사용자가 온라인 스토어를 어떻게 경험하는지 측정합니다.
PageSpeed Insights: Google의 PageSpeed Insights를 사용하여 자체 보고서를 실행하고 스토어 페이지에 대한 더 자세한 지표를 볼 수 있습니다.

타사 성능 권장 사항 이해

타사 성능 스캔 도구는 스토어 속도를 개선하기 위한 변경 사항을 제안할 수 있습니다. 그러나 이러한 권장 사항 중 다수는 이미 Shopify에 의해 구현되었거나 Shopify 스토어에 적용되지 않습니다.

Shopify에 이미 포함된 최적화

Shopify 스토어에는 다음과 같은 성능 최적화가 자동으로 포함됩니다.

CDN(콘텐츠 전송 네트워크): Shopify는 추가 비용 없이 세계적 수준의 CDN을 제공하여 빠른 글로벌 성능을 보장합니다. 모든 자산은 HTTP/2를 사용하여 제공되므로 이전 프로토콜에 비해 오버헤드가 줄어듭니다.

브라우저 캐싱: Shopify는 캐시 가능한 리소스에 대한 브라우저 캐싱을 가능한 최대 기간인 1년으로 설정합니다. 즉, 스토어를 다시 방문하는 방문자는 더 빠른 로드 시간을 경험하게 됩니다.

Gzip 압축: Shopify는 CSS, JavaScript, 문서 및 페이지에 Gzip 압축을 사용하여 대역폭을 줄이고 로드 시간을 개선합니다. 여러 파일을 검색할 수 있도록 Keep-alive도 활성화됩니다.

이미지 최적화: Shopify는 고급 알고리즘을 사용하여 JPG 이미지를 자동으로 압축하여 압축과 시각적 매력을 균형 있게 조절합니다. 이미지는 더 나은 압축과 빠른 로딩을 위해 WebP 형식으로 제공되는 경우가 많습니다.

파일 축소: Shopify는 스토어프론트에서 요청할 때 CSS 및 JavaScript 파일을 자동으로 축소하여 기능에 영향을 주지 않고 파일 크기를 줄입니다.

타사 권장 사항이 적용되지 않는 경우

타사 스캔 도구는 Shopify 스토어와 관련이 없는 변경 사항을 제안할 수 있습니다.

서버 수준 구성: 서버 설정, HTTP 헤더 또는 캐싱 정책에 대한 권장 사항은 Shopify의 인프라에서 이미 최적화되어 있습니다.
CDN 구현: Shopify는 기본적으로 고성능 CDN을 포함하므로 CDN을 추가하라는 제안은 불필요합니다.
압축 설정: 압축 활성화에 대한 권장 사항은 Shopify 플랫폼 전반에 이미 구현되어 있습니다.

느리게 로드되는 페이지 문제 해결

스토어가 느리게 로드되는 경우 다음 단계에 따라 문제를 파악하고 해결하십시오.

1단계: 문제 확인

다양한 장치 및 인터넷 연결에서 스토어 로딩 속도를 직접 테스트하십시오.
다른 사람에게 스토어 테스트를 요청하여 인터넷 연결의 로컬 문제가 아닌지 확인하십시오.
PageSpeed Insights와 같은 테스트 도구를 사용하여 특정 성능 지표를 확인하십시오.

2단계: 원인 파악

과도한 앱 확인: 스토어프론트에서 너무 많은 앱이 자산을 로드하면 성능이 저하될 수 있습니다. 설치된 앱을 검토하고 판매에 필수적이지 않은 앱은 제거하십시오.

큰 이미지 검토: 고품질 이미지가 많은 페이지는 느리게 로드될 수 있습니다. 이미지를 최적화하거나 표시되는 이미지 수를 줄이십시오. 권장 이미지 사이즈에 대해 자세히 알아보십시오.

느린 스크립트 식별: 사이트가 한 번에 모두 로드되기 전에 빈 페이지로 멈추는 경우 브라우저의 개발자 도구를 사용하여 느리게 로드되는 스크립트를 식별하십시오. 해결을 위해 앱 또는 테마 개발자에게 문의하십시오.

3단계: 조치 수행

불필요한 앱 제거: 앱을 제거해도 테마에서 해당 코드가 자동으로 제거되지는 않습니다. 전체 제거 지침은 앱 개발자에게 문의해야 할 수 있습니다.

이미지 최적화: 적절한 파일 형식(사진은 JPG, 투명도가 있는 그래픽은 PNG)을 사용하고 표시 사이즈에 맞게 이미지 크기를 조정하십시오.

테마 성능 평가: 현재 테마로 인해 속도가 크게 저하되는 경우 성능에 최적화된 테마로 전환하는 것을 고려하십시오.

온라인 스토어 성능 관련 지원받기

Shopify에서 제공하는 무료 테마를 사용하는 경우 Shopify 지원팀에서 기본적인 성능 개선에 대한 지원을 제공할 수 있습니다.

타사 테마를 사용하며 지원이 필요한 경우 테마 개발자에게 문의하거나 Shopify 웹 성능 전문가 또는 사이트 성능 및 속도를 위한 Shopify 파트너를 고용해야 합니다. Shopify 파트너 고용에 대해 자세히 알아보십시오.

성능 문제가 앱에서 비롯된 경우 앱 개발자에게 문의할 수 있습니다.

개발팀이나 대행사 파트너가 있는 경우 해당 팀에 문의하여 추가 지원을 받을 수도 있습니다.

문제 해결을 위한 기술 정보 및 리소스

Shopify 스토어프론트, 테마 또는 앱의 성능 개선을 원하는 개발자는 각 코어 웹 바이탈에 대한 다음 리소스를 검토할 수 있습니다. Shopify 테마의 성능 모범 사례에 대해 자세히 알아보십시오.

로드 속도

최대 콘텐츠풀 페인트(LCP)는 화면에서 가장 큰 요소가 얼마나 빨리 표시되는지를 기준으로 로드 속도를 측정합니다. 첫 바이트까지의 시간(TTFB) 및 첫 콘텐츠풀 페인트(FCP)는 문제의 근본 원인을 더 잘 이해하는 데 도움이 되는 보조 지표입니다. Shopify Liquid 스토어프론트에서 느린 로딩의 일반적인 원인을 디버깅하는 방법에 대해 자세히 알아볼 수 있습니다.

시각적 안정성

누적 레이아웃 이동(CLS)은 로딩 중 콘텐츠가 예기치 않게 얼마나 많이 이동하는지를 기준으로 시각적 안정성을 측정합니다. CLS 디버깅에 대한 심층 분석은 Shopify 사이트에서 누적 레이아웃 이동(CLS)을 최적화하는 방법을 참조하십시오.

상호 작용성

다음 페인트에 대한 상호 작용(INP)은 대부분의 사용자 작업에 페이지가 응답하는 데 걸리는 시간을 기준으로 상호 작용성을 측정합니다. 예를 들어 링크나 버튼을 클릭하는 것과 같은 사용자 작업이 있습니다.

INP가 좋지 않은 경우 테마 코드, 앱 코드 또는 타사/태그 관리자 코드의 JavaScript가 스토어에 너무 많을 가능성이 높습니다. 가장 큰 원인이 되는 부분을 정리하는 작업을 하십시오. 페이지 로드에 가장 큰 영향을 미치는 JavaScript를 찾는 3가지 방법에 대해 자세히 알아보십시오. 여전히 INP에 문제가 있는 경우 web.dev의 리소스를 통해 자세히 알아보십시오.