전자상거래 사이트 속도를 측정하고 개선하는 방법(11가지 팁) 및 전환율 최적화에 중요한 이유

로딩 속도가 느린 웹 사이트는 순위가 낮고 수익이 적으며 운영 비용이 더 많이 듭니다. 어떤 사업을 하고 있든 온라인에서 사이트 속도를 높이는 것은 이탈률을 줄이고 전자상거래 전환율을 높이기 위해 할 수 있는 가장 유익한 일 중 하나입니다.

전자 상거래 분야에 있는 경우 가능한 가장 빠른 사이트 속도를 달성하기 위해 시간과 자원을 할애하는 것이 훨씬 더 중요합니다. 연구에 따르면 사이트 속도는 제품 순위, 전환 및 방문자당 가치에 직접적으로 상당한 영향을 미칩니다.

그러나 많은 소매업체는 중대한 변화를 약속하는 데 주저하고 있습니다. 사이트 속도 최적화는 복잡해 보일 수 있습니다. 주의를 기울여야 하는 다양한 영역이 있으며 대부분의 사람들이 소유하지 않은 특정 코딩 기술이 필요한 영역이 많습니다.

같은 느낌이 든다면 걱정하지 마십시오. 이 가이드에서는 이미지 압축에서 CDN, 서버 측 데이터베이스 최적화 등에 이르기까지 알아야 할 모든 것을 다룹니다. 기본 사항을 파악하고 나면 사이트 속도를 성층권으로 바로 보낼 수 있을 만큼 자신감과 지식을 갖게 될 것입니다. 기술 개발 또는 최적화 지식이 없더라도.

이 게시물에서 찾을 수 있는 내용은 다음과 같습니다.

사이트 속도란 무엇입니까?
사이트 속도가 중요한 이유는 무엇입니까?
현재 사이트 속도를 확인하는 방법: Google PageSpeed ​​Insights 결과 설명
페이지 속도 향상을 위한 최고의 데이터 기반 방법
1. 호스팅 제공업체의 속도 확인 및 개선
2. 이미지 최적화
3. 브라우저 캐싱 활성화
4. HTML, JavaScript 및 CSS 축소
5. AMP(Accelerated Mobile Pages) 및 PWA(Progressive Web Apps) 활용
6. 성능이 좋지 않은 WordPress 플러그인 제거
7. 콘텐츠 배포 네트워크 사용
8. 서버 응답 시간 최적화
9. 가능한 모든 곳에서 압축 사용
10. 가능한 모든 파일을 비동기식으로 로드
11. 리디렉션 줄이기
사이트 속도를 높이는 데 도움이 되는 도구
전자상거래 사이트 속도를 개선할 준비가 되셨습니까?

좋은 소리? 그럼 파헤쳐보자!

사이트 속도란 무엇입니까?

사이트 속도와 관련하여 몇 가지 일반적인 오해가 있습니다. 포스트의 핵심을 살펴보기 전에 몇 가지 핵심 용어를 정의해 보겠습니다.

먼저 "페이지 속도"와 "사이트 속도"를 구별하는 것이 중요합니다. 페이지 속도는 웹 사이트에서 단일 특정 페이지를 로드하는 데 걸리는 시간입니다. 사이트 속도는 사이트 전체의 샘플 페이지에 대한 평균 속도입니다.

여러 면에서 이 구분은 임의적이지만 혼동을 피하기 위해 이해할 가치가 있습니다. 이 게시물은 페이지별 최적화 팁과 사이트 전체 최적화 팁을 모두 제공하는 것을 목표로 합니다. 앞으로 모든 페이지를 디자인하는 방법을 알려주는 모범 페이지 사례를 구현하면 중요한 지표인 전체 사이트 속도를 향상시킬 수 있습니다.

사이트 속도는 페이지 로드 시간( 페이지가 완전히 렌더링되는 데 걸리는 시간) 또는 첫 번째 바이트 까지 걸리는 시간(브라우저가 서버에서 데이터의 첫 번째 바이트를 수신하는 데 걸리는 시간)으로 측정할 수 있습니다. 일반적으로 말해서 페이지 로드 시간(및 유사한 변형)이 더 정확하고 일반적으로 사용되는 측정값이지만 특정 컨텍스트에서는 첫 번째 바이트까지의 시간도 유용한 수치입니다.

사이트 속도가 중요한 이유는 무엇입니까?

사이트 속도는 검색 순위, 참여, 전환 등과 관련된 여러 가지 중요한 방식으로 웹사이트에 영향을 미칩니다. 그러나 많은 웹마스터, 그 중 전자상거래 소매업체는 사이트의 이 중요한 측면을 간과합니다.

느린 로드 시간은 수익에 직접적인 영향을 미칩니다. 원천

사이트 속도를 높이는 것은 경쟁 우위를 확보하는 가장 확실한 방법 중 하나입니다. 이것이 왜 중요한지 간단히 살펴보겠습니다.

사이트 속도는 검색 순위에 영향을 미칩니다

사이트 속도는 Google의 주요 순위 요소입니다. Google은 여러 차례 이를 반복했습니다. 그리고 수많은 독립적인 분석에 따르면 사이트 속도는 SEO와 관련하여 최적화를 위한 가장 중요한 영역 중 하나입니다.

Yoast에 기고하는 Edwin Toonen은 다음과 같이 말합니다. 새로운 기사, 백서, Google 담당자 또는 SEO 전문가가 속도 최적화가 지금 당장 할 수 있는 가장 중요한 일 중 하나라고 알려주지 않고는 하루도 지나지 않습니다. 물론 그들이 옳습니다!”

사이트 속도가 이탈률에 영향을 미침

로드하는 데 시간이 오래 걸리면 사람들이 사이트를 떠날 가능성이 더 큽니다. 이 활동은 Google에 부정적인 신호(낮은 고객 참여를 나타냄)일 뿐만 아니라 전환율에도 직접적인 영향을 미칩니다.

고객이 사이트를 로드하는 데 시간이 너무 오래 걸려서 머물지 않는다면 전환에 최적화된 멋진 페이지와 우수한 제품을 볼 기회가 없습니다.

사이트 속도가 고객 가치에 영향을 미침

연구에 따르면 페이지뷰당 가치는 사이트 속도와 함께 증가합니다. 그리고 우리는 여기서 단지 몇 퍼센트 포인트에 대해 이야기하고 있는 것이 아닙니다. 사이트 로드 시간을 1초로 줄이면 페이지뷰당 가치를 최대 100%까지 높일 수 있습니다.

사이트 속도를 1% 미만으로 낮추면 페이지뷰당 가치를 최대 100%까지 높일 수 있습니다. 원천

낮은 사이트 속도를 경험하는 것은 부정적인 심리적 영향을 미칩니다

로딩 속도가 느린 웹사이트는 고객에게 좌절감을 안겨주고 귀하의 전문성 부족을 전달합니다.

사람들은 페이지가 로드되는 데 너무 오래 걸리면 실질적인 스트레스를 느낍니다. 그리고 잠재 고객이 귀하의 브랜드를 부정적인 경험과 연관짓고 나면 미래에 브랜드를 희미하게 볼 가능성이 더 큽니다.

반대로 빠르게 로드되는 사이트는 고객에게 긍정적인 사용자 경험을 제공하고(11가지 UX 팁을 확인하세요!) 매장의 전문성과 품질을 전달합니다.

현재 사이트 속도를 확인하는 방법: Google PageSpeed ​​Insights 결과 설명

사이트 속도를 테스트하는 데 사용할 수 있는 도구가 많이 있습니다. 일부는 DNS 공급자 속도 또는 TTFB(Time to First byte)와 같은 특정 영역에 초점을 맞추고 다른 일부는 보다 포괄적입니다. 시작점으로 Google PageSpeed ​​Insights보다 더 나은 옵션은 없습니다.

사이트에 완전한 의료 정보를 제공하는 방법과 결과가 의미하는 바는 다음과 같습니다.

1. Google PageSpeed ​​Insights로 이동하여 텍스트 표시줄에 URL을 입력합니다. "분석"을 눌러 결과를 얻으십시오. 이 연습에서는 Zappos를 예로 사용합니다. 사이트 속도 테스트에 사용할 수 있는 최고의 도구인 Google PageInsights는 완전 무료이며 매우 포괄적입니다.

2. 페이지 상단에 포함된 전체 결과와 함께 페이지의 순위를 느림, 평균 또는 보통으로 지정하며 모바일 및 데스크톱 모두에 대한 세 가지 결과 세트가 제공됩니다.

• 필드 데이터 – 이는 과거 데이터를 기반으로 하며 Google에서 추적한 사용자 샘플에서 파생됩니다. 특정 테스트 사례에서만이 아니라 과거에 발생했을 수 있는 지속적인 문제를 볼 수 있기 때문에 유용합니다. 아래의 여러 색상 막대는 귀하의 페이지가 Chrome 사용자 경험 보고서의 다른 페이지(Google이 데이터를 보유하고 있는 모든 페이지)와 어떻게 비교되는지 보여줍니다.
• 출처 요약(자동으로 표시되지 않음) – 클릭하여 확장해야 하는 출처 요약은 사이트 전체(개별 페이지가 아님)에 대한 평균 데이터를 표시합니다. "Origin"은 기본 URL을 나타냅니다.
• 랩 데이터 – "분석"을 클릭했을 때의 성능을 기반으로 한 웹 페이지의 즉각적인 결과입니다. 이것은 다른 데이터를 고려하지 않고 일시적인 성능에서 가져온 현재 결과입니다. 페이지 상단의 전체 사이트 속도 점수는 이 실습 데이터를 기반으로 합니다.

"실험실 데이터" 섹션에는 사이트 속도 측정항목에 대한 가장 자세한 드릴다운이 있습니다.

3. 서로 다른 데이터를 표시하는 두 개의 탭(헤더의 파란색 메뉴)이 있다는 것을 잊지 마십시오. 하나는 모바일용이고 다른 하나는 데스크탑용입니다. 종종 각각과 관련된 최적화 제안을 개별적으로 적용해야 합니다.

4. 각 섹션에는 "실험실 데이터" 섹션에 5개의 개별 측정과 함께 두 가지 주요 속도 측정(FCP 및 FID)이 있습니다.

• First Contentful Paint FCP – 웹 성능 컨텍스트에서 "첫 번째 페인트"라는 용어는 브라우저 사용자에게 표시되는 첫 번째 웹 요소를 의미합니다. "첫 번째 콘텐츠가 있는 페인트"는 콘텐츠의 첫 번째 응집력 있는 부분이 나타날 때입니다. 여기서 "컨텐츠"의 정의는 문서 개체 모델에서 개별적으로 정의된 모든 것입니다. 본질적으로 이미지나 텍스트 블록과 같이 페이지 계층의 일부를 구성하는 개별적이고 개별적인 요소입니다. 콘텐츠는 웹 사용자가 "소비"할 수 있는 모든 것입니다. 이런 식으로 배경 변경이나 단일 픽셀과 같이 단순한 것일 수 있는 "첫 번째 페인트"와 구별됩니다.
• 첫 번째 입력 지연(FID) – 첫 번째 입력 지연은 사이트가 반응하는 속도를 측정한 것입니다. 방문자가 링크 클릭, 이미지 확대, 제품 옵션 선택 등을 통해 사이트와 상호 작용할 때 대화형 사이트 요소를 효과적으로 "비활성화"하는 백그라운드 브라우저 프로세스로 인해 응답을 받는 데 시간이 더 걸릴 수 있습니다. FID는 Google에서 수집한 실제 사용자 데이터를 기반으로 하므로 Lab Data에 포함되지 않습니다.
• 첫 번째 의미 있는 페인트 – 본질적으로 시청자가 콘텐츠를 실제로 소비하기 시작할 수 있는 시점을 측정합니다. 첫 번째 의미 있는 페인트는 스크롤 없이 볼 수 있는 주요 콘텐츠와 웹 글꼴이 모두 로드되었을 때 발생했습니다. Google은 사이트 속도에 대한 기본 사용자 경험 측정항목이라고 밝혔습니다.
• 속도 지수 – 페이지가 시각적으로 완전히 로드되는 데 걸리는 시간입니다. 프레임별 비교에서 브라우저 렌더링이 변경되지 않는 시간을 기준으로 합니다.
• 첫 번째 CPU 유휴 – 첫 번째 CPU 유휴는 웹 사이트가 적어도 어느 정도 상호 작용하는 시간을 나타냅니다. 모든 대화형 요소가 준비된 것은 아니지만 몇 가지는 준비가 될 것입니다.
• 대화형 시간 – 사이트가 완전히 로드되고 완전히 대화형 상태가 되어 방문자의 모든 작업에 응답할 준비가 되는 데 걸리는 시간입니다.
• Max Potential First Input Delay – 테스트할 경우 가능한 가장 높은 FID에 대한 예측 수치입니다. 이 수치는 실제 데이터가 아닌 실험실 데이터를 기반으로 합니다.

5. 이 세 섹션 아래에는 사이트 속도를 줄일 수 있는 시간과 함께 "기회" 라는 섹션이 있습니다. 이것이 바로 테스트의 핵심이며 사이트 속도 향상을 위한 실용적인 제안입니다. 구현 지침에 대한 각 제안을 확장할 수 있습니다.

아래 스크린샷에서 몇 가지 예를 살펴보겠습니다(아래 섹션에서 이들 대부분에 대해 더 자세히 살펴보겠습니다).

"기회" 섹션은 사이트 속도 향상을 위한 구체적인 제안을 제공하는 곳입니다.

• JavaScript 축소 – 축소는 코드(HTML, CSS, JavaScript 등)가 포함된 파일을 압축하여 서버에서 브라우저로 더 빠르게 전송할 수 있도록 하는 프로세스입니다.
• 오프스크린 이미지 연기 – 오프스크린 이미지를 연기하면 스크롤 없이 볼 수 있는 이미지의 로드 시간을 지연시켜 첫 번째 서버 요청의 크기를 줄이고 전반적인 초기 로드 시간을 더 빠르게 제공합니다. 스크롤 없이 볼 수 있는 모든 이미지가 로드되면 페이지의 나머지 이미지가 렌더링됩니다.
• 사용하지 않는 CSS 제거 – .css 스타일시트에 불필요한 코드가 많이 포함되는 것은 매우 일반적입니다. 이 코드를 제거하면 CSS 파일 크기를 줄일 수 있습니다. 하나의 파일에 모든 CSS를 포함하면 브라우저가 데이터를 해석하는 데 걸리는 시간도 줄일 수 있습니다.
• 차세대 형식으로 이미지 제공 – JPEG 2000, JPEG XR 및 WebP(일부 다른 형식과 함께)와 같은 이미지 형식은 품질 저하 없이 대안보다 더 나은 압축을 제공합니다.
• TTFB(서버 응답 시간 단축) – CMS를 최적화하고 더 빠른 호스팅 제공업체를 선택하는 등 다양한 방법으로 서버 응답 시간을 단축할 수 있습니다.
• 텍스트 압축 활성화 – 서버에서 gzip 기능을 활성화하면 파일의 텍스트가 압축되어 크기가 줄어들고 전송 속도가 빨라집니다. 압축된 파일은 브라우저에서 처리할 수 있습니다.

6. 마지막으로 "기회" 섹션 아래에는 "진단" 및 통과된 감사 섹션이 있습니다. 여기에는 귀하가 통과한 모범 웹 사례 및 기준을 기반으로 더 빠른 기회를 (각각) 다룹니다.

다음 섹션에서는 사이트 속도 향상을 위한 더 많은 제안과 통과한 감사를 볼 수 있습니다(변경 사항이 제대로 구현되었는지 확인하는 데 유용).

Google PageSpeed ​​Insights에는 모든 기능과 제안 사항에 대한 유익하고 명확한 문서가 있으며 추가로 불확실한 사항이 있는 경우 유용한 리소스입니다.

이와 같은 통찰력을 더 원하십니까?

주간 전자상거래 팁, 전략 및 업계 최고의 지식을 받아 보십시오. 받은 편지함으로 바로 전달됩니다.

on 개인정보 보호정책을 읽었으며 뉴스레터 이용약관에 동의합니다.

계속하려면 이 확인란을 선택하세요.

우후! 방금 가입했습니다. 구독을 확인하려면 받은 편지함을 확인하세요.

다른 도구는 어떻습니까?

모든 기능에 대해 PageSpeed ​​Insights는 완벽하지 않습니다.

그것이 걸려 넘어지는 한 영역은 지리적 영역과 관련이 있습니다. 테스트 서버의 위치를 ​​알 수 없으므로 결과가 균일하지 않을 수 있습니다. 예를 들어 서버가 영국에 있고 테스트 서버가 미국 서부 해안에 있는 경우 이전 국가에서 사이트를 방문하는 사람의 경우 결과가 더 빠릅니다.

PageSpeed ​​Insights에서 제공하는 그림을 보완하기 위해 테스트 서버의 위치를 ​​설정할 수 있는 Pingdom 및 GTmetrix를 사용합니다.

페이지 속도 향상을 위한 최고의 데이터 기반 방법

자, 이제 몇 가지 실용적인 팁을 살펴보겠습니다.

눈 깜짝할 사이에 사이트가 로드되도록 하기 위해 취할 수 있는 상위 10단계는 다음과 같습니다.

1. 호스팅 제공업체의 속도 확인 및 개선

짧은 버전: 서버에 긍정적인 변경을 할 수 있고 공유 플랜에서 전용 플랜으로 전환하는 것이 유리할 수 있지만 때로는 공급자를 변경해야 하는 경우도 있습니다. 귀하가 통제할 수 있는 작업으로 이동하기 전에 서비스 제공자의 서비스 품질을 확인하십시오.

호스팅 제공업체의 서버가 느린 경우 문제를 극복하기 위해 할 수 있는 일은 거의 없습니다. 원천

Bitcatcha와 같은 도구를 사용하여 웹사이트 호스팅 서버의 속도를 테스트하고 다른 회사와 비교하십시오.

호스팅 제공업체가 느리다면 이에 대해 할 수 있는 일이 많지 않습니다. 새로운 공급자로 변경하는 것을 고려해야 할 수도 있습니다. 온라인 상점을 운영하는 경우 일반적으로 전자 상거래 경험이 있는 전용 또는 관리 호스팅 제공업체로 전환하는 것이 좋습니다.

속도 측면에서 호스팅 계획 간의 주요 차이점은 다음과 같습니다.

• 공유 호스팅 – 공유 호스팅은 가장 저렴하고 느린 호스팅 형태입니다. 귀하의 웹사이트는 다른 사용자의 웹사이트와 함께 서버에 저장됩니다. 이와 같은 배열의 가장 큰 단점은 모든 서버 리소스, 특히 CPU와 RAM도 공유된다는 것입니다. 이는 사이트 속도에 해로운 영향을 줄 수 있으며 많은 처리 능력이 필요한 대규모 사이트의 경우 특히 부정적인 결과를 초래할 수 있습니다.
• 가상 사설 서버(VPS) – 가상 사설 서버는 여러 면에서 공유 서버와 유사합니다. 여러 사이트가 단일 서버에서 호스팅되지만 가상 장벽으로 분리되어 실제로 자신의 서버가 있는 것과 같은 모습을 재현합니다. 이것의 주요 이점은 모든 서버 리소스가 울타리로 둘러싸여 있다는 것입니다. 플랫메이트 중 한 명이 모든 뜨거운 물을 사용하고 당신을 건조하고 건조하게 만들 가능성이 없습니다. 가상 사설 서버를 사용하면 서버 관리자보다 더 높은 수준의 자유도를 얻을 수 있습니다. 또한 공간이 더 필요하면 구입하면 됩니다.
• 전용 호스팅 – 전용 호스팅은 VPS 호스팅의 다음 단계입니다. 전용 요금제를 사용하면 사이트를 운영하는 데만 사용되는 서버를 임대하게 됩니다. 또한 기술적인 서버 사이트 속도 최적화를 가능하게 할 수 있는 완전한 관리자 및 루트 제어(운영 체제 및 보안 설정 선택 포함)를 갖게 됩니다. 전용 호스팅은 전담 기술 팀이 있는 대규모 사이트 및 회사에 이상적입니다.

일반적으로 전자 상거래 사이트를 운영하는 경우 전용 또는 VPS 호스팅을 선택하는 것이 좋습니다.

다음은 온라인 소매업체에 대해 가장 높은 평가를 받은 몇 가지 제공업체입니다.

SiteGround – SiteGround에는 Magento, WooCommerce 및 PrestaShop을 포함하여 전자 상거래 플랫폼을 위한 여러 전용 계획이 있습니다.

Liquid Web – Liquid Web의 핵심 제안 중 하나는 우수한 고객 서비스입니다. 이 회사는 종종 1분 미만의 응답 시간으로 고문에 대한 연중무휴 액세스를 제공합니다. 다양한 전자상거래 전용 요금제가 제공되며(WooCommerce 전용 호스팅 포함) 이는 향후 확장이 예상되는 중소 소매업체에게 훌륭한 옵션입니다.

InMotion 호스팅 – InMotion은 전자 상거래 소매업체에서 매우 인기가 있으며 사용 가능한 가장 저렴한 옵션 중 하나입니다.

Rackspace – Rackspace는 엔터프라이즈 전자상거래를 위한 최고의 솔루션 중 하나로 다양한 전용 및 클라우드 호스팅 솔루션을 제공합니다. 고객 서비스 및 보안 인프라는 업계 최고입니다.

호스팅 제공업체를 아끼지 마십시오. 그것은 당신의 통제하에 있지 않은 한 영역입니다. 그리고 성능보다 비용을 우선시하는 것은 장기적으로 더 낮은 수익으로 이어질 뿐입니다.

2. 이미지 최적화

짧은 버전: 이미지 최적화는 사이트 속도를 향상시키는 가장 쉽고 빠른 방법 중 하나입니다. 이미지가 웹에 적합한 형식인지 확인합니다. 더 빠른 이미지 로드 시간을 위해 CSS 스프라이트를 사용하십시오.

사이트 속도와 관련하여 이미지가 주요 원인입니다. 불필요하게 큰 이미지 파일은 서버 공간을 불필요하게 차지하며 방문자의 브라우저로 보내는 데 더 많은 시간이 필요합니다.

이미지 품질을 완전히 제어하려면 Photoshop 또는 GIMP와 같은 프로그램에서 이미지를 최적화해야 합니다. 다양한 형식은 다양한 유형의 이미지에 가장 적합합니다. 예를 들어 일반적으로 말해서 JPEG는 사진에 이상적이며 스톡 색상이 있는 단순한 이미지는 PNG로 더 빨리 렌더링됩니다.

다음은 가장 일반적인 형식과 사용 시기에 대한 간략한 설명입니다.

• JPEG(Joint Photographics Expert Group) – JPEG는 고품질 사진과 디테일이 풍부한 이미지에 가장 널리 사용되는 형식일 것입니다. 주요 이점은 JPEG 이미지가 높은 수준의 압축을 제공하면서 잘 렌더링된다는 것입니다. 사진의 경우 JPEG가 선호되는 옵션입니다. 또한 더 높은 수준의 압축을 제공할 수 있는 JPEG 2000 및 JPEG XR과 같은 최신 JPEG 변형 사용을 고려해야 합니다.
• PNG(Portable Network Graphics) – 형식으로서 PNG는 JPEG와 GIF 사이에 위치합니다. 다양한 색상과 크기를 지원하는 품질 사이에서 좋은 균형을 이룹니다. PNG는 JPEG보다 작은 경향이 있지만 색상과 디테일 면에서 용량은 거의 동일하지 않습니다. 이전 브라우저와의 호환성에 대한 우려가 있었지만 지금은 대부분 중복됩니다.
• GIF(Graphic Interchange Format) – GIF(웹에서 가장 오래된 형식 중 하나)는 로고와 같이 색상 팔레트가 제한된 이미지에 가장 적합합니다. 주로 텍스트로 구성된 이미지를 업로드해야 하는 경우 GIF를 선택할 수 있는 형식입니다. GIF 파일의 주요 이점은 매우 작은 경향이 있다는 것입니다. 제한된 색상 용량 때문에 GIF는 풍부한 이미지나 사진에 사용되어서는 안 됩니다. 기본 애니메이션에 GIF를 사용할 수도 있습니다. 리치 미디어에 GIF를 사용하지 마세요. YouTube와 같은 타사 호스팅 콘텐츠를 사용하면 사이트 속도에 더 유리합니다.

올바른 형식을 사용하는 것 외에도 사이트 속도에 맞게 이미지를 최적화하기 위해 수행할 수 있는 몇 가지 작업이 더 있습니다.

• 이미지를 필요 이상으로 크게 만들지 마십시오. 많은 디자이너와 개발자가 큰 이미지(종종 수천 픽셀을 초과)를 서버에 업로드한 다음 페이지 코드를 사용하여 크기를 조정하는 실수를 범합니다. 이것은 큰 실수입니다. 5,000픽셀 너비의 이미지를 제품 페이지에 1000픽셀로만 표시하려는 경우 방문자의 브라우저에 보내는 것은 의미가 없습니다. 종종 이미지는 확대/축소 기능을 활성화하기 위해 상대적으로 커야 하지만 가능한 한 작게 유지해야 합니다. 이미지를 업로드하기 전에 크기를 조정하십시오.
• 업로드하기 전에 이미지 압축 – 압축은 이미지 파일에서 불필요한 정보를 모두 제거하여 크기를 줄입니다. 이미지를 찍은 시간과 같은 특정 "보이지 않는" 세부 정보가 파일에 포함될 수 있습니다. TinyPNG, JPEG Optimizer와 같은 도구 및 WPSmush와 같은 플러그인을 사용하여 이 작업을 빠르게 수행할 수 있습니다. 헤비 사용에 필요한 모든 유료 요금제는 매우 합리적입니다.
• 페이지에 불필요한 이미지를 사용하지 마십시오 – 모든 이미지는 사이트를 완전히 로드하는 데 걸리는 시간을 부담하므로 절대적으로 필요한 것보다 더 많은 이미지를 사용하지 마십시오. 단지 그것을 위해 이미지를 포함시키는 함정에 빠지기 쉽습니다. 한 번 더 제품 샷은 아프지 않을 것입니다. 그러나 제품 페이지를 만들 때 불필요한 이미지를 제거하는 것이 좋습니다(훌륭한 제품 페이지 템플릿 확인). 페이지의 모든 이미지를 동시에 표시하는 대신 스크롤 없이 볼 수 있는 이미지를 먼저 렌더링하기 위해 "지연 로딩"을 활용할 수도 있습니다. HTML 코드에서 "지연 로드"로 설정한 이미지는 페이지 상단의 정보가 방문자에게 표시된 후 또는 방문자가 스크롤을 시작할 때만 로드됩니다.

마지막으로 적절한 경우 CSS 스프라이트로 서버에 이미지를 업로드합니다. CSS 스프라이트는 단일 파일로 결합된 여러 이미지의 모음입니다. 서버에서 개별적으로 이미지를 로드하는 대신 브라우저에서 단일 이미지에 해당하는 이미지를 다운로드할 수 있으므로 여러 서버 요청이 필요하지 않습니다. 그런 다음 필요할 때마다 특정 개별 이미지만 표시하도록 페이지 코드를 조정할 수 있습니다. 제품 이미지부터 CTA(클릭 유도문안) 버튼 및 소셜 미디어 아이콘에 이르기까지 모든 항목에 이 기술을 사용할 수 있습니다.

3. 브라우저 캐싱 활성화

짧은 버전: 사용자가 돌아올 때마다 사이트 파일을 저장하고 재사용하도록 브라우저에 "요청"합니다. 이렇게 하면 사용자의 입력이 거의 없이 반복 방문자의 페이지 로드 시간이 줄어듭니다.

브라우저 캐싱은 브라우저가 사이트를 구성하는 중요한 파일을 저장할 때 발생합니다. 즉 , 방문자가 사이트를 다시 방문하면 브라우저가 서버에서 직접 모든 파일을 검색할 필요가 없습니다. 업데이트되었을 가능성이 있는 특정 파일만 요청하거나 개별 페이지의 특정 부분(예: 로고 이미지)만 요청하면 됩니다. 이렇게 하면 서버에 대한 요청 수가 줄어들기 때문에 로드 시간이 상당히 늘어납니다.

캐싱을 활성화하는 것은 매우 간단한 프로세스이며 특정 파일의 만료 기간을 설정하기 위해 HTTP 헤더에 소량의 코드를 추가하는 작업을 포함합니다. 사이트가 WordPress에서 호스팅되는 경우 이 프로세스를 간소화하기 위해 W3 Total Cache와 같은 수많은 플러그인이 있습니다.

Browser 캐싱은 가격, 재고 수준, 리뷰, 배송 정보 등과 관련하여 페이지가 종종 시간에 민감한 업데이트의 대상이 되기 때문에 온라인 소매업체에게 약간 까다로울 수 있습니다. 이 때문에 CSS 스타일, 로고, 탐색 등 진정으로 안정적인 콘텐츠를 저장하는 파일 과 변경될 수 있는 콘텐츠 를 구별하는 것이 중요합니다 . 그런 다음 그에 따라 코딩할 수 있습니다. 시간에 민감하지 않은 더 큰 파일(예: CSS 스타일시트)과 함께 머리글 및 바닥글과 같은 특정 페이지 요소를 코딩하는 것은 전적으로 가능하며 이러한 요소에 대한 캐싱을 활성화하는 것만으로도 사이트 속도에 긍정적인 영향을 미칩니다.

4. HTML, JavaScript 및 CSS 축소

짧은 버전: CDN(콘텐츠 전달 네트워크)을 사용하여 자동 축소를 활성화하고 파일 크기를 최대 60%까지 줄이십시오. CDN 설정은 CloudFlare 및 Amazon AWS와 같은 잘 알려진 서비스를 통해 가능해진 비교적 간단한 프로세스입니다.

축소는 웹 파일에서 코드를 최소화하는 프로세스입니다. 사이트 로드 시간을 크게 줄이는 것으로 나타났습니다. 더 작은 파일은 더 빠른 속도로 요청한 다음 브라우저에서 해석할 수 있습니다. 이 최적화 전략은 종종 페이지 속도 도구에 의해 강조 표시되며 구현할 수 있는 가장 효과적인 방법 중 하나입니다.

개발자가 이해할 수 있는 길이와 복잡성의 불일치(일반적으로 주석, 공백, 쉼표 등 포함)와 브라우저가 페이지를 렌더링하는 데 필요한 최소한의 코드 종류 때문에 작동합니다. 때때로 이 축소된 버전은 원래 버전의 40%만큼 작을 수 있습니다.

축소는 웹 파일의 크기를 크게 줄일 수 있습니다. 원천

그러나 중요한 문제가 있습니다. 수동 축소는 절대 금물입니다. 시간이 너무 많이 걸리고 실수할 여지가 너무 많습니다. 자동화된 도구를 사용하더라도 모든 대체 코드를 처리하고 구현하려면 개발 단계에서 높은 수준의 수동 입력이 필요합니다.

대신 가장 좋은 방법은 코드를 브라우저에 전달하기 전에 자동으로 축소하는 CDN(콘텐츠 전달 네트워크)을 사용하는 것입니다. 원본 파일은 자체 서버에 보관되고 축소된 버전은 CDN 서버에 저장됩니다. 페이지를 변경할 때마다 CDN 서버와 동기화됩니다. CDN은 다른 다양한 이유로도 유용하지만 나중에 이에 대해 설명하겠습니다.

5. AMP(Accelerated Mobile Pages) 및 PWA(Progressive Web Apps) 활용

짧은 버전: Google에서 개발한 AMP와 PWA는 모바일 페이지 로드 속도를 크게 높일 수 있습니다. 개발 비용이 많이 들기 때문에 PWA 또는 AMP로의 전환은 다른 긍정적인 요소를 고려하여 취해져야 합니다(원하는 경우). 계속 진행하기로 결정하면 사이트 속도에 미치는 영향이 상당할 수 있습니다.

모바일 페이지를 AMP로 변환하는 것은 큰 작업일 수 있으며 모든 사람에게 해당되는 것은 아닙니다. 그러나 장기적 전략으로 탐구할 가치가 있습니다.

AMP와 PWA가 정확히 무엇인가요? 다음은 간략한 개요입니다.

• AMP(Accelerated Mobile Page) – AMP는 HTML 하위 집합(AMP HTML), JavaScript 프레임워크 및 선택적 CDN(콘텐츠 전달 네트워크)으로 구성된 개발 프레임워크로, 개발자가 번개를 전달할 수 있도록 Google에서 만든 것입니다. 속도 최적화에 상당한 리소스를 투자할 필요 없이 빠른 모바일 페이지. AMP는 처음에 콘텐츠 기반 사이트용으로 개발되었지만(많은 뉴스 페이지의 검색 결과에서 작은 번개 화살표를 볼 수 있음) 온라인 소매업체 사이에서 점점 인기를 얻고 있습니다.
• 프로그레시브 웹 앱(PWA) – PWA 는 모바일 브라우저를 통해 액세스되는 모바일 앱과 같습니다. 모바일 홈 화면의 아이콘을 통한 액세스 및 푸시 알림과 같은 앱의 많은 기능을 복제하지만 사용자 지정 소프트웨어를 구축하거나 사용자가 휴대폰에 무엇이든 설치할 필요가 없습니다.

둘 사이에는 몇 가지 중요한 차이점이 있지만(많은 논쟁이 있습니다) 둘 다 모바일 사이트 속도를 향상시킵니다. Google의 포괄적인 문서에서 AMP 및 PWA의 실용성에 대해 배울 수 있습니다.

6. 성능이 좋지 않은 WordPress 플러그인 제거

짧은 버전: 플러그인은 로드 시간을 크게 소모하는 역할을 할 수 있습니다. 전자 상거래 사이트가 WordPress에서 호스팅되는 경우 플러그인에 대한 포괄적인 검토를 수행하고 필요하지 않은 플러그인을 제거하고 "무거운" 플러그인에 대한 대체 솔루션을 찾으십시오.

사용하기 쉬운 플러그인 의 가용성은 많은 소매업체가 WooCommerce 및 Shopify와 같은 플랫폼을 선택하는 이유 중 하나입니다. 대부분의 경우 플러그인은 소매업체에 유용합니다. 성능을 높이고 복잡한 개발 작업이 필요하지 않으며 무료인 경우가 많습니다.

그러나 잘못 코딩되었거나 사이트의 다른 요소와 충돌하거나 오래된 플러그인은 사이트 로드 시간에 많은 부담을 줄 수 있습니다. 유사하게, 대형 플러그인은 종종 자체 스타일시트 또는 JavaScript를 검색하기 위해 여러 파일 요청을 보내야 합니다.

다행히 플러그인 문제 해결은 매우 간단합니다. 종종 가장 간단한 방법은 속도 보고서를 사용하여 플러그인과 관련될 수 있는 문제를 정확히 찾아내고 비활성화된 후 다시 테스트하는 것입니다.

또는 P3와 같은 WordPress 플러그인을 사용할 수 있습니다. 플러그인을 스캔하고 성능이 낮은 영역을 강조 표시합니다.
플러그인에 대한 또 다른 흥미로운 점은 플러그인이 해결하는 많은 문제가 종종 웹 파일의 코드를 간단히 변경하여 수정할 수 있다는 것입니다. 플러그인의 남용은 개발자 지식이 없다는 확실한 신호입니다. 투박한 플러그인으로 비교적 작은 문제를 해결하는 함정에 정기적으로 빠지면 사이트 속도를 크게 높일 수 있습니다.

7. 콘텐츠 배포 네트워크 사용

짧은 버전: CDN(Content Distribution/Delivery Networks)은 가입 비용이 저렴하고 구현하기 쉽습니다.

CDN은 많은 공급자가 자동 ​​축소 옵션도 제공하기 때문에 이미 언급했지만 자동 축소 이상의 추가 이점을 제공하기 때문에 여기에서 다시 언급할 가치가 있습니다.

CDN은 넓은 지리적 거리에 걸친 데이터 전송의 부정적인 영향을 완화합니다. 원천

CDN의 이면에 있는 아이디어는 매우 영리합니다. CDN은 웹사이트의 캐시된 버전을 저장하는 글로벌 서버 네트워크입니다. 이를 통해 다양한 지리적 위치에 있는 방문자가 귀하의 사이트에 더 빠르게 액세스할 수 있습니다. 방문자가 브라우저를 통해 귀하의 사이트에 요청할 때마다 귀하의 사이트 사본을 저장하는 가장 가까운 서버에 연락합니다.

CDN을 사용하면 대역폭 비용(지불하는 경우)을 제어하고 트래픽 급증을 처리하는 데 도움이 될 수도 있습니다.

8. 서버 응답 시간 최적화

짧은 버전: 나쁜 서버를 변경할 수는 없지만 성능이 좋은 서버를 최적화할 수 있습니다. 데이터베이스 정리, CMS에 대한 올바른 설정 선택, 빠른 DNS 공급자 선택에 집중하세요.

TTFB(Time to First byte)는 브라우저가 서버로부터 정보의 첫 번째 바이트를 수신하는 데 걸리는 시간을 측정한 것입니다. 기본적으로 서버 요청에는 최적화를 위한 잠재적 영역을 나타내는 세 부분이 있습니다. 요청을 보내는 데 걸리는 시간, 서버가 요청을 처리하는 데 걸리는 시간, 요청된 정보를 다음 주소로 보내는 데 걸리는 시간 브라우저.

WebPageTest를 사용하여 첫 번째 바이트까지의 시간을 확인할 수 있습니다. 200ms 미만이어야 합니다.

CDN을 사용하는 것은 네트워크가 서버와 방문자의 브라우저 사이의 거리를 줄여주기 때문에 첫 번째 및 세 번째 단계를 개선하는 가장 좋은 방법 중 하나입니다.

여기서 우리가 관심을 갖는 것은 두 번째 영역입니다. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. 원천
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. 그러나 그것은 그만한 가치가있다. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.