Shopify 웹사이트 속도를 높이는 방법은 무엇입니까?

게시 됨: 2021-08-16

Shopify에서 성공적인 비즈니스를 운영하는 것은 상당한 작업이 될 수 있습니다. 처리해야 할 많은 측면이 있으며 대부분은 시간, 관심 및 전문 지식이 필요합니다.

주의가 필요한 측면 중 하나는 매장의 속도입니다. 이 기사에서는 Shopify 스토어의 속도를 높여 전환을 개선하고 고객을 만족시킬 수 있는 방법을 보여줍니다.


페이지 속도란 무엇입니까?

페이지 속도는 사용자의 브라우저가 HTML 웹 페이지를 완전히 렌더링하는 데 걸리는 시간으로 정의됩니다. 여기에는 이미지와 스크립트를 포함한 웹페이지의 모든 콘텐츠가 포함됩니다. 페이지 속도 측정항목은 전체 웹사이트가 아니라 특정 페이지에 대한 것임을 이해하는 것이 중요합니다.

야간에 도로를 빠르게 주행하는 자동차가 빛줄기를 빠르게 남깁니다.

Fast Store가 중요한 이유는 무엇입니까?

빠른 매장은 잠재 고객의 사용자 경험에 영향을 미치기 때문에 중요합니다. 실제로 느린 웹사이트는 이탈률이 높고 전환율이 낮습니다.

느린 웹 사이트는 비즈니스에 심각한 문제입니다. 이는 고객 불만족으로 이어지기 때문이며 아무도 자신의 비즈니스가 그런 종류의 부정적인 감정과 관련되기를 원하지 않기 때문입니다.

왜요? 칠판에 적힌

내 사이트에 문제가 있는지 어떻게 알 수 있습니까?

온라인에서 사용할 수 있는 도구가 많이 있으므로 웹사이트의 페이지가 로드되는 데 걸리는 예상 시간을 알 수 있습니다. 그런 다음 페이지 로드에 병목 현상이 있는 위치를 확인하고 이를 개선하기 위해 수행할 수 있는 작업을 결정할 수 있습니다.

컴퓨터 화면을 열심히 보고 있는 사람

Shopify 웹사이트 속도를 높이는 방법은 무엇입니까?

이미지 최적화 및 압축

사이트에서 사용하는 모든 이미지를 압축하여 이미지 파일의 크기를 줄이십시오. 그러나 품질을 낮추고 로드 시간에 영향을 줄 수 있으므로 너무 많이 압축하지 마십시오. Adobe Photoshop, TinyPNG 또는 기타 사진 편집 소프트웨어를 사용하여 이미지를 압축할 수 있습니다.

이미지를 올바른 크기로 만드는 것도 중요합니다. 너무 크면 페이지에 로드하고 표시하는 데 시간이 더 오래 걸립니다. 100 x 100 썸네일만 필요한 경우 5000 x 5000 이미지를 업로드할 필요가 없습니다.

빅커머스 웹사이트의 속도를 높이는 방법에 대한 포스트를 살펴보세요!

이미지 최적화 프로그램의 스크린샷

브라우저 캐싱 사용

로드 시간을 줄일 수 있는 한 가지 방법은 필요할 때마다 다운로드하는 대신 웹 페이지 사본을 로컬에 저장하는 브라우저의 캐시 기능을 사용하는 것입니다. 즉, 동일한 페이지를 두 번 이상 방문하면 브라우저가 다시 다운로드하는 대신 캐시에서 해당 페이지를 로드합니다.

Google은 노트북에 열려 있습니다.

AMP 구현

AMP(Accelerated Mobile Pages)는 HTML로 작성된 콘텐츠로 빠르고 쉬운 모바일 웹 브라우징을 만드는 것을 목표로 하는 비교적 새로운 오픈 소스 프로젝트입니다. AMP를 구현하면 Shopify 웹사이트의 속도를 높이고 고객이 원하는 제품을 더 빨리 찾을 수 있습니다!

AMP 그래픽

왕복 줄이기

서버와의 왕복 횟수를 줄이는 가장 좋은 방법은 여러 파일을 하나로 결합하는 것입니다. 이 모든 파일이 관련되어 있으면 대역폭과 시간이 많이 절약됩니다! 브라우저는 단 한 번의 요청으로 로드 시간을 줄입니다.

화살표가 있는 컴퓨터는 서버로 이동하고 화살표가 있는 서버는 컴퓨터로 이동합니다.

CDN이 있는 호스트

Cloudflare와 같은 CDN(콘텐츠 전송 네트워크)은 콘텐츠를 가져와 더 빠른 로딩을 위해 전 세계 서버에 복제합니다. 사용자가 웹 페이지 로드를 요청하면 CDN이 사용자와 지리적으로 가장 가까운 서버로 리디렉션하여 더 빠른 시간 내에 페이지를 다운로드할 수 있으므로 시간을 절약할 수 있습니다.

클라우드 플레어 로고

CSS/JavaScript 축소

Shopify 웹사이트에서 페이지가 느리게 로드되는 경우 사이트 구성 방식에 대한 보다 기술적인 측면을 살펴보고 싶을 수 있습니다. 느린 페이지 로드 시간과 관련된 한 가지 일반적인 문제는 코드 팽창 때문일 수 있습니다.

코드 팽창은 개발자가 코드에 불필요한 줄이나 파일을 포함할 때 발생하며, 이러한 모든 기능이 필요하지 않은 방문자의 페이지 로딩 시간이 느려집니다! 운 좋게도 YUI Compressor 또는 CleanCSS와 같은 도구가 있어 웹 페이지에서 이러한 추가 코드를 제거하여 더 가볍고 빠르게 만들 수 있습니다.

CSS 및 JavaScript 압축기 로고

빠른 테마 사용

테마는 사이트의 기초이며 비즈니스를 성사시키거나 망칠 수 있습니다. 대부분의 사람들은 웹사이트의 테마를 선택할 때 속도에 신경 쓰지 않습니다. 왜냐하면 미학이 다른 무엇보다 그들에게 더 중요하기 때문입니다. 그러나 온라인에서 성공을 거두려면 페이지를 빠르게 로드해야 합니다.

Shopify에서 상점을 운영할 때 사용 중인 테마로 인해 웹사이트 속도가 느려질 가능성이 매우 높습니다. 이것은 두 가지 주요 이유로 발생합니다. 테마가 속도를 염두에 두고 설계되지 않았거나 테마 코드가 제대로 최적화되지 않아 불필요한 파일이 포함됩니다.

이 문제를 피하려면 자신의 철학에서 가장 앞서가는 속도를 가진 코더의 테마를 사용하십시오. 또한 모든 테마가 데스크탑과 스마트폰 모두에서 제대로 작동하는 것은 아닙니다. 따라서 모든 장치에서 작동하는 반응형 Shopify 테마를 찾는 데 시간을 할애하십시오!

스쿠터를 타고 누군가의 머리에 Shopify 가방

캐시 웹 글꼴

웹 글꼴은 페이지를 방문할 때마다 다운로드되므로 로드 시간이 늘어납니다. 운 좋게도 웹 글꼴을 캐싱하여 이 문제를 해결할 수 있습니다. 웹 글꼴은 브라우저의 캐시에 글꼴을 저장하므로 페이지를 방문할 때마다 다운로드할 필요가 없습니다.

구글 글꼴 검색 결과

PageSpeed ​​Insights로 분석

PageSpeed ​​Insights 도구는 Shopify 웹사이트에서 개선이 필요한 부분을 확인하는 완벽한 방법입니다. 이 편리한 도구는 페이지가 얼마나 잘 최적화되고 빠른지에 대한 점수를 제공합니다. 사이트는 0(최적화 없음)에서 100(완벽하게 최적화됨)까지 페이지의 순위를 매깁니다!

컴퓨터에서 웹 페이지 속도 테스트를 하는 사람

리디렉션 및 끊어진 링크 최소화

Shopify 웹사이트와 사용자 브라우저 간의 간섭으로 인해 로딩 시간이 느려질 수 있습니다. 이는 예를 들어 사이트의 페이지로 연결되는 작동하지 않는 리디렉션이나 링크가 많아 방문자가 원하는 것을 찾기가 어려울 때 발생합니다.

화면에 404 페이지가 있는 컴퓨터

이미지 슬라이더를 사용하지 마십시오

상점에 있는 이미지 슬라이더를 알고 있습니까? 네, 사이트 로딩 속도를 높이는 데는 별로 도움이 되지 않습니다. 이미지가 하나씩 로드되기 때문이며 슬라이드 쇼에 슬라이드가 많으면 시간이 오래 걸릴 수 있습니다! 슬라이더를 유지하려면 최소한 지연 로드 또는 미리 로드되는 이미지 슬라이더를 사용하여 사용자가 각 슬라이드가 로드될 때까지 기다릴 필요가 없도록 하십시오.

이미지 슬라이더의 스크린샷

더 적은 수의 앱 사용

속도 최적화와 관련하여 Shopify 스토어에서 실행되는 다양한 앱의 수를 제한하고자 합니다. 앱이 백그라운드에서 실행되는 스크립트가 많을수록 웹사이트 로드 속도가 느려지므로 특정 애플리케이션 사용을 잠시 쉬어야 할 수도 있습니다.

여러 앱의 스크린샷

지연 로딩 기능 사용

일부 Shopify 테마에는 필요할 때만 페이지의 코드와 콘텐츠를 로드하는 지연 로드 기능이 있습니다. 이것은 브라우저가 아무것도 표시하기 전에 미리 다운로드할 필요가 적다는 것을 의미하므로 웹 페이지의 속도를 높일 수 있습니다!

위에 화살표가 있는 흐릿한 Shopify 로고

결론

휴! 이것은 Shopify 스토어의 속도를 높이는 방법의 긴 목록이었습니다. 이 기사가 도움이 되었기를 바라며 이 팁을 구현하여 상점을 원활하고 효율적으로 운영할 수 있기를 바랍니다! 어쨌든 느린 로딩 시간은 올바른 도구와 지식으로 피할 수 있으므로 먼저 위의 모든 트릭을 시도하지 않고 안주하지 마십시오!

관련 게시물: Joomla 3.10.1이 출시되었습니다.