전자 상거래 사이트의 속도를 높이는 6가지 과소 평가된 트릭

게시 됨: 2022-05-03

사용자 경험과 관련하여 속도는 전자 상거래 웹 사이트의 성공을 결정하는 가장 중요한 요소 중 하나입니다. 1초 1초가 소중해져서 웹사이트 속도가 1초만 향상되면 모바일 거래가 27% 증가할 수 있습니다.

온라인 상점의 속도를 높이는 몇 가지 잘 알려진 시도되고 테스트된 방법이 있습니다. 이미지 크기 최적화, HTTP 요청 읽기 및 호스팅 서비스 전환을 언급하는 많은 리소스를 찾을 수 있습니다.

이 블로그는 이러한 기술에 대해 자세히 설명하고 실제로 전자 상거래 웹 사이트의 속도를 눈에 띄게 증가시킬 수 있는 몇 가지 유용한 과소 평가된 기술을 제공합니다. 시작하자.

1. 타사 확장 평가

모든 전자 상거래 상점은 어떤 방식, 형태 또는 형태로 타사 확장을 사용해야 합니다. 확장 기능을 여러 개 통합하는 것은 사이트 속도와 아무 관련이 없으며 대부분이 온라인 상점의 성능을 합리화하는 결과를 가져오지만 이러한 확장 기능을 항상 확인하는 것이 가장 좋습니다.

엄청난 양의 사용자 정의 기능, 불안정한 코드 및 잘못된 콘텐츠가 제공되면 사이트 속도가 크게 감소합니다. 다음 단계를 통해 이러한 확장을 계속 확인할 수 있습니다.

  • 느린 플래그가 지정된 스크립트 또는 태그를 인식하고 Chrome DevTools를 통해 수정합니다.
  • 로드 시간을 줄이기 위해 가능한 한 async/defer 지침 또는 리소스 힌트를 사용해 보십시오.
  • 라이브로 푸시되기 전에 스테이징 사이트에서 모든 JS 수정 사항을 철저히 테스트하십시오.

2. TTFB(Time To First Byte) 개선

신호등과 전자레인지는 최대 2분 동안 견딜 수 있지만 웹 페이지가 로드되는 시간은 3초 미만입니다. 여기서 "첫 번째 바이트까지의 시간"(TTFB)이 중요해집니다.

TTFB는 반응형 요소로 기능합니다. 사이트가 더 빨리 로드된다는 내용이 아니라 로드가 시작될 뿐입니다. 반면에 낮은 TTFB는 일반적으로 사이트가 더 빠르고 응답성이 높다는 것을 나타냅니다.

좋은 사용자 경험을 위해서는 클릭에 빠르게 반응하는 사이트가 필수적입니다. 실제로 사이트 응답성은 사이트가 완전히 로드되는 데 걸리는 시간보다 SEO에 더 중요할 수 있습니다. Google에 따르면 200밀리초 미만의 TTFB는 우수합니다. 그러나 최신 버전의 PageSpeed ​​도구는 시간이 600밀리초를 초과하지 않는 한 경고를 발생시키지 않습니다.

TTFB가 지연되는 원인을 파악하기 위해 조사해야 할 사항이 많이 있습니다. 자산이 초기 바이트를 생성하는 데 오랜 시간이 걸린다면 문제를 분석하고 필요한 수정을 수행하여 사이트 속도를 개선해야 합니다. 다음은 TTFB가 평소보다 느린 가장 일반적인 이유 중 일부입니다.

  • 네트워킹 문제
  • 서버 용량 문제(디스크 I/O, RAM 및 네트워크 제한)
  • 데이터베이스 구성 및 설계

브라우저 캐싱 또는 콘텐츠 전달 네트워크(앞서 설명)를 통합하여 TTFB를 크게 줄일 수 있습니다.

3. 브라우저 캐싱 사용

브라우저가 사이트를 구성하는 중요한 파일을 캐싱하는 것을 브라우저 캐싱이라고 합니다. 즉, 방문자가 사이트를 다시 방문하면 브라우저가 서버에서 모든 파일을 다시 다운로드할 필요가 없습니다. 특정 파일이나 변경되었을 가능성이 있는 개별 페이지의 일부(예: 로고 이미지)만 요청하면 됩니다. 서버에 대한 쿼리 양이 줄어들기 때문에 로드 시간이 크게 늘어납니다.

특정 파일의 만료 기간을 설정하기 위해 HTTP 헤더에 짧은 코드를 추가하는 것은 캐싱을 활성화하는 합리적으로 간단한 방법입니다. 페이지는 캠페인 기간 동안 가격, 제품에 대한 리뷰, 국제 택배 서비스에서 제공하는 배송 정보 등에 대해 시간에 민감한 조정을 받는 경우가 많기 때문에 브라우저 캐싱은 온라인 판매자에게 다소 어려울 수 있습니다.

결과적으로 CSS 스타일, 로고, 탐색 등 진정으로 안정적인 자료를 제공하는 파일과 변경되기 쉬운 콘텐츠가 포함된 파일을 구별하는 것이 중요합니다. 그런 다음 필요에 따라 코딩할 수 있습니다. 머리글과 바닥글과 같은 특정 페이지 요소는 물론 시간에 민감하지 않은 더 큰 파일(CSS 스타일시트와 같은)을 작성하는 것은 매우 쉽고, 단순히 캐싱을 활성화하면 사이트 속도가 향상된다는 점을 기억하십시오.

4. 콘텐츠 전송 네트워크(CDN) 사용

콘텐츠 전송 네트워크는 전 세계에 위치한 서버 모음으로 정의할 수 있습니다. 그들은 사용자의 위치에서 가장 가까운 서버로 배달 로드를 분산하는 임무를 수행하여 더 빠른 로컬 사용자 경험을 제공합니다. CDN은 더 많은 전자 상거래 비즈니스가 전 세계적으로 진출함에 따라 플랫폼 성능을 위한 타협할 수 없는 구성 요소입니다.

귀하의 웹사이트 파일은 CDN을 사용한 후 이러한 서버에 복사 및 저장됩니다. 다른 대륙(또는 국가)의 소비자가 온라인 상점을 방문하면 모든 데이터가 가장 가까운 서버에서 로드되므로 웹 사이트가 훨씬 빠르게 로드됩니다.

CDN은 트래픽이 많은 전자 상거래 사이트에 탁월한 선택입니다. 고밀도 PoP를 사용하면 캐시에서 더 많은 정적 및 이벤트 기반 정보를 제공할 수 있습니다. 결과적으로 캐시 적중 효율성이 최대 90%-98% 향상되어 사용자에게 더 나은 경험을 제공할 수 있습니다. 또한 성능 메트릭 조정의 결과로 검색 엔진 순위를 향상시킵니다. CDN 연결은 장기적인 웹 사이트 유지 관리를 더 쉽게 만들고 전반적인 웹 사이트 속도를 향상시키는 것을 목표로 합니다.

5. 지연 로딩 시도

웹 사이트를 로드하는 데 몇 초가 걸리는 경우 페이지 상단의 속도를 높여 사용자 경험을 개선할 수 있습니다. 지연 로딩은 스크롤 없이 볼 수 있는 부분에 콘텐츠가 많은 사이트에서 잘 작동하는 방법입니다. API는 2019년에 출시된 웹사이트의 17%에서 채택되고 있으며 이는 2019년에 출시된 것을 감안하면 상당한 수치입니다. 지연 로딩 덕분에 디스플레이 내부의 이미지를 먼저 로드한 다음 나중에 다른 모든 사진을 로드합니다.

사용자는 웹사이트에 액세스하기 위해 오래 기다릴 필요가 없으며 사진이 제공되는 즉시 로드됩니다. 이렇게 하면 사진 수가 많은 기사를 로드하는 데 걸리는 시간이 크게 줄어듭니다. 이 플러그인을 설정하는 것은 간단합니다. Lazy load, BJ Lazy load, WP Rocket 등의 플러그인을 사용할 수 있습니다.

6. AMP 및 PWA 개발

인터넷 트래픽의 52%가 스마트폰에서 발생하므로 해당 장치에 대해 전자 상거래 상점을 최적화하는 것이 중요합니다. AMP(Accelerated Mobile Pages) 및 PWA(Progressive Web Apps)를 사용하면 모바일 장치에서 사이트 속도를 더 쉽게 높일 수 있습니다.

Google은 개발자가 속도 최적화에 상당한 리소스를 투자하지 않고도 번개처럼 빠른 모바일 페이지를 제공할 수 있도록 HTML 하위 집합(AMP HTML), JavaScript 프레임워크 및 선택적 CDN으로 구성된 AMP 개발 프레임워크를 구축했습니다. AMP는 콘텐츠 기반 웹사이트를 염두에 두고 만들어졌지만 온라인 상점에서 점점 인기를 얻고 있습니다.

PWA(Progressive Web App)는 모바일 브라우저를 사용하여 액세스할 수 있는 웹 앱입니다. 모바일 홈 화면의 아이콘을 통한 액세스, 더 나은 참여(최대 400%) 및 푸시 알림과 같은 앱의 많은 기능을 모방하지만 사용자가 휴대폰에 아무것도 설치할 필요가 없습니다.

마무리

이러한 과소 평가된 모든 트릭은 웹 사이트 속도를 향상시키는 가장 효과적인 방법을 제공합니다. 이러한 요소를 전자 상거래 웹 사이트에 통합하여 트래픽을 수익으로 전환하고 이탈률을 최소화하며 탁월한 사용자 경험으로 고객을 기쁘게 해야 합니다.