속도를 위해 전자 상거래 사이트를 최적화하는 11가지 방법

전자 상거래 비즈니스로서 사이트 성능을 최적화하는 것이 최우선 순위 중 하나여야 합니다.

페이지 로드 속도가 전환에 직접적인 영향을 미치기 때문입니다. 오늘날의 소비자는 엄청나게 빠른 사이트를 기대합니다. 어떤 이유로든 온라인 상점이 느려지면 고객을 잃고 궁극적으로 수익을 잃을 위험이 있습니다.

실제로 Aberdeen Group의 2016년 연구에 따르면 페이지 로드 시간이 3초 지연되면 방문자의 20%를 잃게 됩니다.

얼마나 빠릅니까? 디지털 성과 관리 회사 Dynatrace에 따르면 2017년 블랙 프라이데이와 1월 3일 사이에 운영되는 글로벌 소매 웹사이트는 평균적으로 2.5초 이내에 시각적으로 완성되었으며 사용할 준비가 되었습니다.

다음은 사이트가 속도에 최적화되어 있는지 확인하는 몇 가지 주요 방법입니다.

1. DNS 조회 수 제한

전자 상거래 사이트가 로드될 때마다 브라우저는 도메인 이름에 해당하는 IP 주소를 찾아야 합니다. 이것을 DNS(도메인 이름 시스템) 조회라고 합니다.

브라우저는 기본 도메인뿐만 아니라 Twitter 피드 또는 포함된 YouTube 동영상과 같은 외부 소스에서 가져온 페이지의 모든 도메인을 조회해야 합니다. 따라서 사이트의 외부 소스에 대한 쿼리 수를 줄이면 클라이언트가 수행해야 하는 다양한 DNS 조회가 최소화되어 페이지의 초기 로드가 지연될 수 있습니다. 예를 들어 이미지에 대한 하이퍼링크 대신 서버에서 호스팅할 수 있습니다.

또한 더 빠른 DNS 공급자를 찾거나 TTL(time-to-live) 값을 변경하여 DNS 캐싱을 활용하거나 가능한 한 많은 리소스를 콘텐츠 전송 네트워크로 이동할 수 있습니다(자세한 내용은 나중에 설명).

2. 더 나은 웹 호스팅 검색에 투자

안정적이고 빠른 웹 호스팅은 사이트 속도의 중요한 요소입니다. 그리고 모든 웹 호스트가 동일하게 생성되는 것은 아닙니다. 웹 트래픽 및 트랜잭션의 급증을 처리할 수 있는 서비스를 찾고 싶을 것입니다(예: 대규모 제품 출시 또는 블랙 프라이데이에서 사이버먼데이 기간).

방문자가 액세스할 수 없는 것보다 전자 상거래 사이트에 더 나쁜 운명은 없습니다. 좋은 호스팅 서비스는 99.5% 이상의 가동 시간을 보장합니다. 프리미엄 호스트는 최대 99.99%의 가동 시간을 약속합니다.

의심의 여지 없이 SSL 인증과 전용 IP 주소가 필요합니다.

3. 사진 압축

이미지는 전체 웹사이트 무게의 50-75%를 차지하지만 놀랍게도 상위 100대 전자 상거래 사이트 중 약 45%가 이미지 압축을 하지 않습니다. 그들은 그래야 하고 당신도 그래야 합니다. 품질을 자르지 않고 파일 크기를 줄이는 무손실 압축을 선택할 수 있습니다.

브라우저가 페이지의 다른 요소로 이동하기 전에 이미지가 완전히 렌더링될 때까지 기다릴 필요가 없도록 항상 코드에서 이미지 크기를 설정해야 합니다. 사전 설정된 치수가 있는 상자를 그대로 두고 사이트 로드 작업을 계속합니다.

Photoshop 내에서 이미지를 압축하거나 TinyPNG 또는 Kraken.io와 같은 이미지 압축기를 사용하십시오.

4. 스크롤 없이 볼 수 있는 부분에 우선 순위 지정

방문자는 사이트 상단을 가장 먼저 보게 되므로 "스크롤 없이 볼 수 있는 부분"이 웹사이트의 나머지 부분보다 더 빨리 로드되는 것이 합리적입니다. 이 프로세스의 또 다른 용어는 지연 로딩입니다. 많은 브랜드에서 인기 있는 디자인 선택이 된 단일 페이지, 이미지가 많은 웹 사이트의 속도를 높이는 데 특히 유용합니다.

지연 로딩을 활성화하는 방법에 대한 지침은 여기로 이동하십시오.

5. 페이지 캐시

사용자가 방문할 때마다 모든 페이지의 모든 구성 요소를 다운로드하도록 강요하는 대신 캐싱을 사용하면 브라우저에서 전역 요소를 캐시할 수 있으므로 새 요소에만 브라우저 요청이 필요합니다.

캐싱은 사이트 검색 색인, 카탈로그 정보, 사용자 정보, 사이드바 블록, 레이아웃 지침 및 번역 파일과 같은 페이지 요소가 브라우저에 저장되기 때문에 로딩 시간을 단축합니다. 이러한 요소는 일반적으로 모든 페이지에서 동일하게 유지되므로 방문자가 새 페이지를 클릭할 때마다 브라우저에서 이러한 리소스를 요청할 필요가 없습니다.

브라우저 캐싱을 활성화하려면 특정 유형의 파일에 대해 더 긴 만료 시간을 설정하도록 HTTP 헤더를 편집해야 합니다. 다음은 Google 개발자의 몇 가지 권장 사항입니다.

6. HTTP 요청 줄이기

웹사이트 응답 시간의 약 80%는 이미지, 스타일시트, 스크립트, Flash 요소 등과 같은 프런트 엔드용 요소를 다운로드하는 데 사용됩니다. 요소 수를 줄이면 페이지를 완전히 렌더링하는 데 필요한 HTTP 요청 수가 줄어듭니다. .

이를 수행하는 가장 쉬운 방법은 웹사이트 디자인을 더 단순하게 만드는 것입니다. 그러나 그것은 많은 경우에 실행 가능한 옵션이 아닙니다. CSS 스프라이트와 이미지 맵을 사용하여 여러 이미지를 단일 이미지로 결합하여 이미지 요청 수를 줄일 수 있습니다. 또한 모든 스타일시트를 단일 파일로 결합하고 모든 CSS를 단일 스타일시트로 결합할 수도 있습니다.

7. Gzip 압축 사용

방문자가 사이트를 방문하면 서버에 파일 전달을 요청합니다. 파일이 클수록 브라우저에 도달하는 데 더 오래 걸립니다.

Gzip 압축을 사용하면 서버에서 사이트 파일을 브라우저로 반환하기 전에 압축하여 전송 시간을 크게 줄일 수 있습니다. 사실, gzip은 페이지와 스타일시트의 크기를 90%까지 줄일 수 있습니다!

압축은 웹 서버 구성을 통해 활성화됩니다. 각 웹 서버에는 다른 지침이 있습니다. 자세한 내용은 이 Google 자습서를 따르십시오.

8. 콘텐츠 전송 네트워크 활용

전 세계에서 온 방문자가 있는 글로벌 전자 상거래 비즈니스라면 반드시 콘텐츠 전송 네트워크를 사용하여 사이트 성능을 최적화해야 합니다. CDN은 전 세계에 서버 노드를 분산시켜 작동하므로 사이트 방문자가 가장 가까운 노드에서 캐시된 리소스를 다운로드할 수 있으므로 효율성이 향상되고 로딩 대기 시간이 단축됩니다.

CDN 제공업체는 더 큰 네트워크 파이프, 전 세계에 위치한 더 많은 서버 및 네트워크 피어링 기능을 귀하가 가질 가능성이 있는 것보다 자랑합니다. 또한 인프라를 지속적으로 모니터링하고 최적화하는 전담 팀이 있습니다.

올바른 CDN을 선택하는 것은 까다로울 수 있습니다. 이 가이드로 시작하십시오.

9. 코드 축소

축소는 기능에 영향을 미치지 않으면서 소스 코드에서 공백 및 줄과 같은 불필요한 문자를 모두 제거하여 브라우저가 페이지를 더 빠르게 로드할 수 있도록 하는 프로세스입니다. 이 프로세스에는 HTML, CSS 및 JavaScript 파일이 포함되며 로드 시간을 단축하는 데 큰 차이를 만들 수 있습니다. 축소는 파일 크기와 필요한 파일 수를 모두 줄입니다.

다음 리소스를 따라 코드를 정리하고 브라우저에서 페이지를 더 쉽게 렌더링할 수 있습니다.

10. 비동기 로딩 사용

브라우저가 페이지를 로드할 때 페이지는 위에서 아래로 이동합니다. CSS 및 Javascript와 같은 스크립트를 동시에 로드하여 작업 속도를 높일 수 있습니다. 이것을 비동기 로딩이라고 합니다. 스크립트가 동기식으로 로드되면 페이지에 나타나는 순서대로 로드되므로 프로세스가 느려질 수 있습니다.

비동기 로딩을 활성화하는 방법에 대한 기본적인 이해를 위해 이 가이드를 따르십시오.

11. 사이트 속도를 지속적으로 모니터링

마지막으로, 우리가 시작한 곳에서 마치겠습니다. 매일 사이트 성능을 우선순위에 두어야 합니다. 즉, 문제가 있는지 사이트를 지속적으로 모니터링하고 속도와 효율성을 최적화할 수 있는 방법을 찾아야 합니다.

Google의 PageSpeed ​​Insights는 모바일 및 데스크톱에서 사이트 속도를 분석하는 좋은 도구를 제공합니다.

사이트 속도를 검사하는 또 다른 훌륭한 도구는 Pingdom에서 사용할 수 있습니다.

경험 법칙을 기억하십시오. 사이트를 로드하는 데 걸리는 시간이 1초가 길어질 때마다 방문자의 10%를 잃게 됩니다. 아야.