기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

고객을 만족시키는 것이 소매업 성공의 비결입니다. 빠르고 일관된 온라인 경험을 제공하면 전환율과 수익부터 유지율과 브랜드 인지도에 이르기까지 소매업체가 관심을 갖는 모든 지표가 크게 향상되는 것으로 입증되었습니다.

이 기사의 개요:

• 페이지 속도는 온라인 소매 비즈니스 데이터에 영향을 미칩니다

• 귀하의 웹사이트 속도를 경쟁사와 비교하는 방법

• 성능 최적화 시작하기: 이미지, 제3자, 스타일시트, 사용자 정의 글꼴 등 페이지 속도를 저하시키는 요인과 이에 대해 취할 수 있는 조치를 분석합니다.

페이지 속도는 온라인 소매 비즈니스 데이터에 영향을 미칩니다

대부분의 온라인 소매업체의 경우 페이지 속도는 수익에 상당한 영향을 미칩니다. 작은 개선이라도 전환율과 같은 지표를 크게 향상시킬 수 있습니다.예를 들어

웹사이트 성능과 비즈니스 전환 데이터 간의 관계를 분석하는 방법

하지만 귀하의 웹사이트는 어떻습니까? 사이트의 페이지 속도 향상이 미치는 영향을 이해하려면 자체 RUM(실제 사용자 모니터링) 데이터를 살펴봐야 합니다.연관 다이어그램 비즈니스의 모든 사람에게 성과를 알릴 수 있는 좋은 방법입니다. RUM을 사용하면 기술적 지식이 없는 이해관계자라도 성능이 사용자 참여 및 이탈률, 전환율과 같은 비즈니스 지표와 어떻게 상관관계가 있는지 쉽게 확인할 수 있는 시각화를 만들 수 있습니다.

상관 관계 차트는 모든 사용자 트래픽에 대한 히스토그램 보기를 제공하며, 렌더링 시작, 최대 콘텐츠 그리기, 다음 그리기까지의 상호 작용 수와 같은 성능 지표를 기반으로 여러 그룹으로 분류됩니다. 차트에는 각 그룹과 관련된 사용자 참여 지표 또는 비즈니스 지표(예: 이탈률 또는 전환율)를 보여주는 오버레이가 포함되어 있습니다. 이렇게 하면 성과, 사용자 참여, 비즈니스 간의 관계를 한눈에 확인할 수 있습니다.

이 상관관계 그래프에서 볼 수 있듯이 최대 콘텐츠 그리기(LCP) 시간이 1.1초일 때 전환율은 6%를 약간 넘는 최고치를 기록합니다. LCP가 느려짐에 따라 전환율이 급격히 떨어지며 2초에 3% 미만으로 떨어집니다. 위에서 볼 수 있듯이 LCP 시간을 줄이기 위해 웹사이트 성능을 최적화하면 전반적인 전환율과 수익이 높아질 수 있습니다.

귀하의 웹사이트는 경쟁사와 어떻게 비교됩니까?

속도 곡선 사용 인조 종합 성능 모니터링과 마찬가지로 다른 웹사이트에서도 직접 페이지 속도 테스트를 실행할 수 있습니다. 이는 비교를 위해 동일하고 풍부하며 훌륭한 데이터, 스크린샷 및 슬라이드를 모두 얻을 수 있음을 의미합니다.

당신의경쟁 벤치마킹 대시보드를 사용하면 페이지 작성과 같은 작업에 드릴다운하고 집중할 수도 있습니다. 해당 페이지는 귀하의 페이지보다 두 배 빠르게 렌더링됩니다. 무엇이 다르게 수행되었습니까? JavaScript가 더 있나요? 더 적은? 당신은 400개의 요청을 했는데 그들은 80개만 요청했습니까? 알아보는 곳이 여기 있습니다.

페이지 속도 벤치마크 미국, EU, 영국 및 일본의 주요 소매업체의 현재 성과를 보여주는 공개 대시보드입니다.

성능 최적화 시작하기

훌륭하고 빠른 온라인 경험을 제공하려면 다음 두 가지 질문부터 시작하십시오.

• 내 페이지가 사용자에게 느리게 나타나는 이유는 무엇입니까?

• 어떡해?

좋은 소식은 쇼핑객 페이지 속도를 저하시키는 대부분의 문제가 귀하의 페이지에서 발생하므로 이를 제어할 수 있다는 것입니다. 다음은 소매 웹사이트에서 가장 흔히 발생하는 성능 문제와 이를 추적하고 해결하는 방법에 대한 개요입니다.

웹페이지 속도가 느려지는 원인은 무엇입니까? 대부분의 성능 문제는 다음 네 가지 이유로 인해 발생합니다.

• 추적기 및 분석기와 같은 제3자

• 스타일시트

• 맞춤 글꼴

• 페이지 크기, 특히 이미지 크기

타사 스크립트

오늘날 일반적인 소매 웹 페이지에는 추적기 및 분석 비콘과 같은 타사 스크립트가 최대 75개까지 포함될 수 있습니다.

제3자는 위치 비콘을 통해 전환율을 높이고 분석 태그를 통해 이전과는 전혀 다른 방식으로 사용자를 이해하도록 도움으로써 엄청난 가치를 추가하므로 사용자가 조만간 사라지지 않습니다. 그러나 이는 페이지가 렌더링되는 방식(또는 렌더링 여부에도 영향을 미칠 수 있음)에 큰 영향을 미칠 수 있습니다.

할 수 있는 일: 타사 성능 모니터링

제3자가 야기할 수 있는 잠재적인 성능 저하를 이해하기 위해 사전 예방적인 접근 방식을 취하는 것부터 시작하십시오.

측정되지 않은 것은 고칠 수 없습니다.이것이 우리가 SpeedCurve에서 만드는 것입니다.전용 타사 대시보드제3자의 실적을 한 눈에 확인하고, 개별 스크립트를 추적하고,성능 예산을 설정합니다.

타사 스크립트의 성능을 이해한 후에는 기록 데이터를 사용하여 공급업체와 SLA를 개발할 수 있습니다.

사례 연구: M&S는 제3자 콘텐츠에 집중하여 성과를 혁신했습니다.

이미지 및 페이지 크기

페이지 크기가 항상 느린 사용자 경험과 연관되는 것은 아니지만 종종 그렇습니다. 최적화되지 않은 큰 이미지가 원인인 경우가 많습니다.

이미지를 최적화하는 것 외에도(사용자에게 1MB의 리소스를 제공하지 않도록 하기 위해!) 가장 중요한 이미지(예: 기본 제품 이미지)가 최대한 빨리 렌더링되도록 해야 합니다.

할 수 있는 일: 이미지 관련 지표에 대한 성능 예산 만들기

성능 예산 및 경고는 성능 저하를 처리하는 좋은 방법입니다. . 성과 예산 책정은 팀(마케터, 디자이너, 개발자 등 모든 사람)이 사용자 경험 및 사이트 속도에 대한 원칙에 동의하는 것부터 시작됩니다. 먼저, 추적할 지표를 결정한 다음 과거 성과를 기반으로 임계값을 설정해야 합니다.

이미지의 경우 고려해야 할 몇 가지 측정항목은 다음과 같습니다.

• 최대 콘텐츠 그리기 – 뷰포트에서 가장 큰 시각적 요소(이미지 또는 비디오)의 크기입니다. LCP는 Google의 제품입니다.핵심 네트워크 지표우선, Google의 검색 순위 알고리즘에 대한 일련의 측정 항목이므로 추적하는 것이 좋습니다.

• 이미지 크기 – 페이지에 있는 모든 이미지의 전체 크기입니다. 이는 최적화되지 않은 큰 이미지가 페이지에 추가되었는지 한 눈에 확인할 수 있는 좋은 방법입니다.

• 이미지 요청 – 페이지의 총 이미지 수입니다.

사례 연구: Zillow가 적은 예산으로 더 크고, 더 빠르고, 더 많은 참여를 이끌어낸 방법

스타일시트

스타일 시트는 현대 웹에 큰 도움이 됩니다. 브라우저 호환성부터 디자인 유지 관리 및 업데이트에 이르기까지 광범위한 디자인 문제를 해결합니다. 스타일시트가 없었다면 반응형 디자인과 같은 훌륭한 기능은 없었을 것입니다.

그러나 잘못 실행된 스타일 시트는 많은 성능 문제를 일으킬 수 있습니다. 이러한 문제에는 다운로드 및 구문 분석에 너무 오랜 시간이 걸리는 CSS, 페이지의 나머지 부분이 렌더링되지 못하게 하는 부적절하게 배치된 스타일시트 등이 포함됩니다.

할 수 있는 일: 페이지 렌더링을 방해할 수 있는 스타일 시트 알아보기

다시 말하지만, 측정하지 않는 것은 고칠 수 없습니다. 포괄적인 모니터링 도구를 통해 다음을 알 수 있습니다.

• 내 페이지에는 몇 개의 스타일시트가 있으며, 그 중 몇 개가 페이지 렌더링을 방해하고 있습니까?

• 이 숫자가 올랐나요, 내려갔나요?

• CSS 요청은 얼마나 큽니까?

• 스타일시트는 각 제3자에 대해 어떻게 작동합니까?

맞춤 글꼴

사용자 정의 글꼴을 사용하면 디자이너는 디자인에 사용되는 글꼴을 전례 없이 제어할 수 있습니다. 제어에 대한 이러한 욕구는 사용자 정의 글꼴의 인기가 치솟는 이유입니다. 그러나 이러한 인기 뒤에는 성능 가격이 따릅니다.

일부 글꼴에는 많은 CSS 코드가 필요하고 다른 글꼴에는 많은 JavaScript 또는 외부 호스팅이 필요합니다. 이 모든 글꼴은 페이지 렌더링 속도를 크게 저하시킬 수 있습니다.

할 수 있는 일: 글꼴 크기 및 렌더링 속도 추적

글꼴 크기 및 요청 수를 추적하는 것 외에도 SpeedCurve를 사용하여 첫 번째 H1 요소가 렌더링을 완료한 시기를 측정할 수도 있습니다. (SpeedCurve에서는 이 지표를 Hero H1이라고 부릅니다.영웅 렌더링 시간 하나. ) 웹 사이트에서 사용자 정의 글꼴을 사용하는 경우 해당 글꼴이 H1 사본에 적용될 가능성이 높으므로 이 측정항목은 사용자 정의 글꼴이 얼마나 빨리 렌더링되는지 측정하는 효과적인 방법입니다.

우리가 추적하는 다른 모든 측정항목과 마찬가지로 다음을 수행할 수 있습니다.성능 예산을 만들고 임계값을 초과하면 알림을 받습니다.

사례 연구: NerdWallet은 H1 렌더 측정항목을 사용하여 글꼴 로딩 속도를 30% 향상시킵니다.