온라인 스토어 속도 개선

이 페이지는 May 19, 2023에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/store-speed/improving-speed에서 확인하십시오.

온라인 스토어 속도는 여러 요인에 영향을 받으며 이중 일부는 제어가 가능합니다.

온라인 스토어의 현재 속도를 알지 못하는 경우에는온라인 스토어 속도보고서에서 확인할 수 있습니다.

이 페이지의 정보

제어할 수 없는 요소

고객의 장치, 네트워크 및 위치

스토어를 방문하는 고객은 전 세계에 있으며 사용하는 장치나 인터넷 연결이 서로 다릅니다. 즉, 이러한 요인으로 인해 고객에 따라 스토어가 더 빠르거나 느리게 로드될 수 있습니다.

고객이 스토어의 속도에 대해 문의하는 경우에는 최신 버전의 브라우저를 사용하는지, 최근에 캐시를 지웠는지, 인터넷 서비스 공급업체에서 중단 또는 성능 저하 문제가 없었는지 여부를 고객에게 확인하십시오.

Shopify 인프라

Shopify는속도가 빠른 글로벌 서버에서 온라인 스토어를 호스팅하며 스토어의 대역폭을 제한하지 않습니다. Shopify 스토어의 상태는Shopify 상태에서 확인할 수 있습니다.

Shopify에서는 코드 및 인프라를 지속적으로 개선하고 있습니다. 이러한 개선 사항의 일부는 속도 점수에 반영될 수 있습니다.

온라인 스토어의 속도에 영향을 주는 몇 가지 기능은 아래와 같습니다.

CDN(콘텐츠 전송 네트워크)

CDN은 콘텐츠 전송 네트워크를 의미합니다. Shopify에서는Cloudflare에서 운영하는 세계적 수준의 CDN을 제공하여 세계 어디서나 온라인 스토어가 빠르게 로드되도록 보장합니다. CDN 상태는Cloudflare 상태 페이지에서 확인할 수 있습니다.

로컬 브라우저 캐시

스토어는 일부 요소를 캐시하거나 일시적으로 고객의 로컬 저장소에 저장합니다. 고객이 온라인 스토어를 다시 방문하면 브라우저는 서버에 요청을 새로 보내는 대신 캐시에서 리소스를 로드할 수 있습니다.

Shopify에서는스토어에서캐시할수있는리소스에대해브라우저캐시의저장을파일당1년으로 설정합니다. 캐시할 수 있는 파일에는 이미지 파일, PDF, JS 파일, CSS 파일 등이 있습니다.

서버 측 페이지 캐시

로컬 브라우저 캐시 외에도 Shopify는 서버 측에 페이지를 캐시합니다. 페이지가 처음 로드 될 때는 속도가 느릴 수 있지만 고객이 캐시된 복사본을 받기 때문에 이후에는 페이지 로드가 빨라집니다.

content_for_headerLiquid 개체 내의 자산

`` Liquid 개체는 성능 분석이나 선택적 기능(예: 동적 결제 버튼)을 포함한 다양한 온라인 스토어 기능에 사용되는 자산을 삽입합니다. 이 개체와 관련 자산을 로드하는 작업은 스토어의 속도에 영향을 줍니다. Shopify에서는 태그와 자산을 최적화하여 속도를 향상합니다.

제어할 수 있는 요소

다음은 온라인 스토어의 속도에 영향을 줄 수 있는 몇 가지 요인과 이러한 요소를 해결하는 방법입니다.

앱

온라인 스토어의 기능이나 모양을 변경하기 위해 앱을 추가하면 테마를 실행하기 위해 코드가 추가될 수 있습니다. 일부 코드를 제거하거나 재주문하면 온라인 스토어의 성능을 개선할 수 있습니다. 사용하지 않는 앱을 제거할 수도 있습니다.

앱으로 인해 스토어 속도가 저하된다면 다음 단계를 수행해 보십시오.

  • 사용하지 않는 앱 기능을 비활성화하거나 필요가 없는 앱을 제거하십시오.온라인 스토어 기능과 속도 사이의 균형을 고려하십시오.
  • 앱을 제거하는 경우 앱 설치 과정에 추가된 코드를 제거하는 것이 좋습니다. 앱 이름을 언급하는{% comment %}태그에 코드를 래핑하는 앱을 사용하면 이 프로세스를 처리하는 데 도움이 됩니다.

사용하지 않는 앱 코드를 제거하는 것은 사용하지 않는 기능의 코드 실행을 방지하고 사용되는 테마 코드를 읽기 쉽게 해주는 모범 사례입니다.

  • 앱 개발자에게 문의합니다.
  • Shopify 전문가를 고용하여 도움을 받습니다.Shopify 전문가고용에 대해 자세히 알아보십시오.

테마

테마는 Liquid, HTML, CSS, JavaScript 코드로 구성됩니다. 테마를 편집하거나 사용자 지정하는 경우에는 파일 크기가 커지면서 스토어 속도에 영향을 줄 수 있습니다.

테마로 인해 스토어 속도가 느려진다고 생각되면 다음 단계를 수행하십시오.

테마 또는 앱 기능

특정 기능을 사용하도록 설정하면 스토어 속도에 영향을 줄 수 있습니다. 예를 들어, 일부 빠른 보기 팝업은 컬렉션 페이지가 로드될 때마다 각 제품 페이지에서 정보를 미리 로드합니다. 고객이 사용하지 않는 추가 데이터를 로드하면 가치가 추가되지 않으면서 스토어 속도에 영향을 받을 수 있습니다.

어느 기능으로 인해 스토어 속도가 느려지는 것 같다면 다음 단계를 수행해 볼 수 있습니다.

  • 고객이 특정 기능을 사용하는지 여부를 확인하려면heatmap 도구를사용해보십시오。사용하지않는기능은비활성화하십시오.
  • 기능이 필요하지 않으면 기능을 비활성화하십시오.온라인 스토어 기능과 속도 사이의 균형을 고려하십시오.
  • 테마 및 앱 개발자에게 연락하여 데이터가 미리 로드되는지 여부를 문의하십시오.
  • Shopify 전문가를 고용하여 도움을 받습니다.Shopify 전문가고용에 대해 자세히 알아보십시오.

복잡하거나 비효율적인 Liquid 코드

스토어를 렌더링할 때 사용되는 거의 모든 Liquid는 편집이 가능합니다. Liquid 코드를 작성하는 방식은 효율적이거나 비효율적일 수 있습니다. 복잡한 작업이 반복해서 수행되면 Liquid 렌더링 시간이 증가하게 되어 전체 스토어 속도에 영향을 미칩니다.

예를 들어, 가격을 기준으로 컬렉션에서 제품을 정렬하려는 경우에는 루프 코드의 일부에 포함시키지 않고 컬렉션의 제품이 루프 코드를 시작하기 전에 정렬해야 합니다. 제품의 정렬 순서는 제품 자체에 변경을 일으키지 않지만 제품 순서를 계산하는 작업에는 요청을 처리하는 시간이 추가되기 때문입니다.

코드가 최적화되지 않은 것이 우려되는 경우 다음 단계를 수행할 수 있습니다:

  • Chrome용 Shopify 테마 검사기를 실행하여 온라인 스토어에서 페이지 속도를 느리게 하는 코드 라인을 식별하십시오.
  • 비효율적이거나 쓸모없는 코드를 찾는 데 도움을 줄 Shopify 전문가를 고용합니다.

이미지 및 동영상

사이즈가 큰 이미지나 숨겨진 이미지는 페이지에서 더 중요한 다른 이미지의 로드에 방해가 될 수 있습니다. 큰 이미지가 로드될 때까지 기다리는 동안 사용자는 스토어 속도가 느리다고 느낄 수 있습니다.

이미지나 비디오로 인해 온라인 스토어가 과부하되지 않도록 하기 위해 Shopify에서 몇 가지 안전 장치를 추가합니다. 이러한 예는 다음과 같습니다.

  • 컬렉션 페이지에 50개 이상의 제품 또는 홈페이지에 25개 이상의 섹션을 추가할 수 없습니다.
  • 대부분의 테마는 현재 화면에 표시되어 있지 않은 이미지를 로드할 때지연이 발생합니다.
  • 또한 많은 테마에서 표시되는 화면 크기에 따라 특정 크기의 이미지를 로드합니다.

그러나 이러한 보호 장치가 있더라도 이미지나 비디오로 인해 온라인 스토어 성능이 영향을 받는 것을 완전히 방지할 수는 없습니다.

이미지로 인해 스토어 속도가 느려지는 것 같다면 다음 단계를 수행하십시오.

  • 이미지 최적화 가이드를 검토합니다.
  • 추천 이미지의 슬라이드 쇼를 2~3장으로 유지하거나 추천 이미지를 한 장만 사용합니다.
  • 해당 테마에 맞는 최적의 이미지 사용법에 대해 테마 개발자에게 문의
  • Shopify 전문가를 고용하여 도움을 받습니다.Shopify 전문가고용에 대해 자세히 알아보십시오.

글꼴

온라인 스토어에서 텍스트용 여러 글꼴 중 선택하실 수 있습니다. 그러나 고객 컴퓨터에 아직 존재하지 않는 글꼴을 사용하는 경우 해당 글꼴은 텍스트가 표시되기 전에 다운로드되어야 합니다. 이는 스토어가 로드되는 데 걸리는 시간에 영향을 미칩니다.

고객의 컴퓨터에 새 글꼴이 다운로드되지 않도록 하려면 시스템 글꼴을 사용하면 됩니다. 시스템 글꼴은 대부분의 컴퓨터에 이미 설치된 글꼴입니다.

모노, 세리프 또는 산 세리프 글꼴 패밀리를 선택할 수 있습니다. 이러한 글꼴 패밀리를 사용하는 경우에도 굵게 또는 기울임꼴 등의 글꼴 스타일을 사용할 수 있습니다.

고객 컴퓨터에 표시되는 글꼴은 운영 체제에 따라 다릅니다. 다음은 시스템 글꼴 패밀리를 선택할 때 텍스트를 렌더링하는 데 사용할 수 있는 글꼴의 몇 가지 예입니다.

  • 모노: Menlo, Consolas, Monaco, Liberation Mono 또는 Lucida Console
  • 산 세리프: BlinkMacSystemFont, Segoe UI, Roboto, Ubuntu 또는 Helvetica Neue
  • 세리프: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times 또는 Source Serif Pro

문제 해결 도구

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

개발자는 Shopify 도구 및 모범 사례를 사용하여 테마 성능을 더욱 최적화할 수 있습니다.Shopify.dev에서 자세히 알아보십시오.

Lighthouse

Shopify의온라인 스토어 속도보고서는 Lighthouse를 사용하여 스토어 속도를 측정합니다.Google PageSpeed Insights를 사용하여 나만의 Lighthouse 보고서를 실행하면 스토어 내 페이지에 대한 자세한 메트릭을 확인할 수 있습니다. 이러한 메트릭의 의미에 대해 자세히 알아보려면Google Lighthouse 성능 점수 문서를 참조하십시오. 또한 Shopify 전문가를 고용하여 이러한 메트릭의 이해를 돕고 개선 방법의 조언을 얻을 수도 있습니다.Shopify 전문가고용에 대해 자세히 알아보십시오.

Chrome용 Shopify 테마 검사기

Chrome용 Shopify 테마 검사기는 플레임 그래프(flame graph)를 사용하여 Liquid 렌더링 성능을 표시하는 프로파일링 도구입니다. 이 도구를 사용하면 온라인 스토어에서 페이지 속도를 저하시키는 코드 라인을 식별할 수 있습니다. Shopify 테마 검사기의사용 방법을 알아보십시오.

온라인 스토어 속도 관련 지원 받기

Shopify 무료 테마를 사용하는 경우, Shopify 지원팀에서 기본적인 성능 개선에 도움을 드릴 수 있습니다.

타사 테마를 사용하는 중 지원이 필요한 경우에는 해당테마의 개발자에게 문의하거나 Shopify 전문가를 고용해야 합니다.Shopify 전문가고용에 대해 자세히 알아보십시오.

개발팀 또는 대행사 파트너가 있는 경우에는 이들에게 문의하여 도움을 받을 수 있습니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험