전자 상거래 상점에 대한 90개 이상의 핵심 Web Vitals 점수를 얻는 방법(사례 연구)

이 게시물에서는 플러그인을 많이 사용하더라도 전자 상거래 상점의 Google 핵심 성능 평가(데스크톱 및 모바일)에서 90점 이상을 얻는 방법을 배웁니다.

Google이 핵심 웹 핵심 평가를 처음 발표했을 때 많은 전자 상거래 상점 소유자는 당황하기 시작했습니다.

기본 콘텐츠 사이트나 블로그와 달리 전자 상거래 상점은 이미지가 무겁고 판매를 성사시키기 위해 더 많은 기능적 요소 가 필요합니다 . 그리고 추가된 각 기능으로 인해 사이트 속도가 느려집니다.

예를 들어 라이브 채팅은 자체적으로 로드하는 데 6-10초가 걸릴 수 있습니다. Klaviyo로 기본 이메일 추적을 로드하는 데 1-2초가 소요될 수 있습니다. Facebook 픽셀을 추가해도 로드하는 데 100밀리초가 걸릴 수 있습니다.

코드가 지연 로딩을 사용하는지 비동기 로딩을 사용하는지 여부는 중요하지 않습니다. 웹사이트의 모든 추가 요소는 핵심 웹 바이탈에 부정적인 영향을 미칩니다.

현재 Searchmetrics에 따르면 , 미국에서 테스트한 사이트의 96%가 데스크톱, 모바일 또는 둘 다에 대한 Google의 핵심 핵심 성능 평가 에 실패 했습니다.

그리고 전자 상거래 상점 의 경우 거래를 온라인으로 가져오는 데 필요한 기능 때문에 실패율이 훨씬 더 높습니다 .

이 게시물에서는 7개의 숫자로 된 전자상거래 상점 웹사이트에 대해 90+ Google Core Vitals 등급 을 달성하기 위해 취한 정확한 단계를 보여 드리겠습니다.

성공적인 전자 상거래 상점을 시작하는 방법에 대한 무료 미니 과정 받기

전자 상거래 비즈니스를 시작하는 데 관심이 있다면 처음부터 온라인 상점 을 시작하는 데 도움이 되는 포괄적인 리소스 패키지 를 준비했습니다 . 떠나기 전에 꼭 챙기세요!

다운로드하려면 여기를 클릭하십시오

Google 핵심 활력이란 무엇입니까?

Google Core Web Vitals는 Google 이 사용자 경험의 품질 을 측정 하기 위해 검색 순위에 통합하는 일련의 요소입니다 .

Google Core Vitals는 3가지 구성요소로 구성됩니다.

• 가장 큰 콘텐츠가 포함된 페인트(Google은 2.5초 이하 필요) – 화면에 표시된 가장 큰 콘텐츠를 보는 데 걸리는 시간을 측정한 것입니다. 기본적으로 사이트가 로드되는 속도입니다.
• 첫 번째 입력 지연(Google은 100밀리초 이하 필요) – 페이지의 응답성과 유용성을 측정한 것입니다. 특히 Google은 방문자가 대화형 기능을 클릭하는 시간과 페이지가 해당 클릭에 응답하는 속도 사이의 지연을 측정하고 있습니다.
• 누적 레이아웃 이동(Google은 0.1점 이하 필요) – 페이지가 로드될 때 페이지가 얼마나 안정적인지를 측정합니다. 페이지가 렌더링될 때 콘텐츠가 위아래로 이동합니까? 이것은 페이지 속도와 관련이 없는 유일한 Google Core Web Vital 측정항목입니다. 또한 자신이 무엇을 하고 있는지 모르는 경우 디버그하기 가장 어려운 것입니다.

이 게시물의 나머지 섹션에서는 데스크톱과 모바일 모두에서 90+ Google 핵심 핵심 점수 를 달성하기 위해 전자 상거래 상점에 대해 이 3가지 측정항목 을 정확히 수정한 방법 을 자세히 설명합니다 .

이 사례 연구에 사용된 전자 상거래 상점

대부분의 전자 상거래 상점 소유자는 Shopify, WooCommerce, BigCommerce 또는 Shift4Shop에 있으며 이러한 모든 전략은 사용 중인 플랫폼에 관계없이 적용됩니다.

내 7 피규어 매장은 BumblebeeLinens.com에 있습니다. 내 결과를 직접 보기 위해 이 게시물을 읽을 때 내 상점에서 Google 페이지 속도 테스트를 자유롭게 실행 하십시오.

먼저 Profitable Online Store에서 전자 상거래 과정을 가르치기 때문에 내 상점은 최신 전자 상거래 종소리와 휘파람을 많이 사용합니다.

사실, 나는 내 상점을 실험실처럼 취급 하여 새로운 기능이 나오면 테스트하고 이 블로그에 보고합니다.

다음은 이 사례 연구를 위해 매장에서 실행 중인 플러그인과 서비스 입니다.

• Klaviyo – 내 이메일 마케팅 플랫폼
• Postscript – 나의 SMS 마케팅 플랫폼
• Vizury – 내 푸시 알림 제공자
• ManyChat – 내 라이브 채팅을 구현하는 My Facebook Messenger 마케팅 제공자
• Gorgias – 모든 고객 서신을 처리하는 내 고객 서비스 소프트웨어입니다.
• Spin To Win Popup – 내 상점의 주요 리드 자석
• Facebook Pixel – Facebook 에서 내 모든 판매를 추적합니다.
• Google Analytics – 내 웹사이트 판매 추적
• Notify Slide Up – 판매가 들어오는 대로 표시하여 사회적 증거 제공

재미를 위해 최적화 없이 내 사이트가 로드되는 속도입니다.

이것이 내가 구현 방법을 가르치려고 하는 최적화와 함께 실행되는 속도입니다.

LCP(Large Contentful Paint) 및 FID(First Input Delay) 문제를 해결하는 방법

낮은 LCP 및 FID 점수는 느린 페이지 속도 로 인해 발생합니다 . 웹사이트를 더 빠르게 만들 수 있다면 LCP와 FID 점수가 모두 자동으로 수정됩니다.

99%의 전자 상거래 상점에서 LCP 및 FID 문제는 다음으로 인해 발생합니다.

• 렌더링을 차단하는 JavaScript 및 CSS 로드 – 최적화 없이 페이지의 시각적 렌더링을 차단할 수 있는 javascript 및 css 파일이 순차적으로 로드됩니다. 자바스크립트 속도를 높이는 가장 좋은 방법은 코드를 지연 로드하거나 렌더링을 지연하여 아무 것도 차단하지 않도록 하는 것입니다.
• 큰 사진 및/또는 비디오 로드 – 이미지가 더 크고 해상도가 높을수록 로드하는 데 더 오래 걸립니다. 웹사이트에 표시된 것보다 큰 이미지를 로드해서는 안 됩니다. 또한 화면에 표시되지 않는 이미지를 로드해서는 안 됩니다.
• 느린 서버 – 느린 서버는 Shopify, BigCommerce 또는 Shift4Shop과 같은 완전히 호스팅된 플랫폼에서 문제가 되지 않아야 하지만 WooCommerce를 사용하는 경우 WPEngine과 같은 더 빠른 호스트를 사용하면 사이트 속도가 크게 향상될 수 있습니다.

높은 수준에서 위에서 언급한 3가지 문제를 해결하면 번개같이 빠른 웹사이트를 갖게 됩니다.

1초 페이지 로드 속도를 달성하는 방법

아래는 1-5 등급 과 함께 속도 최적화 의 전체 목록입니다. 여기서 5는 속도 향상에 가장 큰 영향을 미칩니다.

일반적으로 시간이 있거나 슈퍼 애널 인 경우에만 5에 집중 하고 1과 2를 구현해야합니다. :)

내가 1초 페이지 로드 속도를 달성한 방법 을 알고 싶다면 평점 5:)로 바로 이동할 수 있습니다!

브라우저 캐싱 활성화(5점 만점에 1점)

브라우저 캐싱은 클라이언트 브라우저가 사용자의 로컬 컴퓨터에 웹사이트의 이미지 및 기타 요소 를 캐시 하도록 지시 하여 초기 페이지 로드 후 웹사이트를 훨씬 더 빠르게 탐색할 수 있도록 합니다 .

브라우저 캐싱은 항상 켜져 있어야 하지만 브라우저 캐싱 은 Google Core Web Vitals에 영향을 미치지 않습니다 . Google은 웹사이트가 완전히 콜드 상태에서 로드되는 방식에만 관심이 있습니다.

CSS/JS 파일 최소화(5점 만점에 1점)

CSS/JS를 최소화 하면 CSS 및 자바스크립트 파일에서 모든 공백이 제거 되어 여기저기서 몇 바이트를 절약할 수 있습니다.

일반적으로 CSS/JS 파일을 축소 해도 페이지 속도가 크게 향상되지 는 않습니다.

사이트에서 모든 마지막 밀리초의 속도 를 추출 하려는 경우 이 최적화를 수행하십시오.

HTML, CSS 및 JS 파일 결합(5점 만점에 2점)

HTML, CSS 및 JS 파일을 더 적은 수의 파일로 결합하면 서버에서 더 적은 수의 파일을 가져와야 하므로 페이지 속도에 영향을 줄 수 있습니다.

그러나 최신 웹 서버 기술을 사용하면 여러 파일을 동시에 병렬로 가져올 수 있으므로 이러한 최적화가 크게 완화 됩니다. 나는 이것에 너무 많은 시간을 할애하지 않을 것입니다.

리디렉션 정리(5점 만점에 2점)

귀하의 웹사이트는 지속적으로 변화 하고 있으며 때때로 특정 이미지 및/또는 페이지에서 다른 페이지로 리디렉션될 수 있습니다.

예를 들어, 몇 년 전에 내 모든 페이지를 http://에서 https://로 마이그레이션할 때 빠른 수정을 위해 특정 페이지와 이미지에서 보안 대응물로 301 리디렉션을 발행했습니다.

페이지의 모든 리디렉션은 사이트 속도를 저하 시키므로 GTMetrix와 같은 도구를 사용하여 페이지 요소의 리디렉션을 감지하고 제거해야 합니다.

더 빠른 웹호스트 사용(5점 만점에 3점)

WooCommerce 또는 Magento와 같은 오픈 소스 플랫폼 을 사용하는 경우 첫 번째 본능은 페이지 속도 문제를 해결하기 위해 새로운 서버에 돈을 투자하는 것일 수 있습니다.

그러나 대부분의 경우 더 빠른 서버 는 속도 문제를 해결하지 못합니다 . 그러나 현재 저렴한 공유 호스팅을 사용 하는 경우 VPS 또는 전용 서버가 상당한 차이를 만들 수 있습니다.

A CDN 사용(5점 만점에 2-3점)

콘텐츠 전송 네트워크 또는 CDN은 웹사이트의 여러 복사본과 전 세계 여러 서버에 이미지를 저장하여 지리적으로 가장 가까운 서버에서 콘텐츠를 전달합니다.

전 세계에 고객이 있고 사이트가 이미지가 많은 경우 CDN을 사용하면 페이지 속도에 상당한 영향을 미칠 수 있습니다.

그러나 주로 미국에 서비스를 제공하는 저와 같은 소규모 사이트의 경우 CDN을 사용하면 페이지 속도에 미미한 영향 만 미칩니다 .

더 큰 이미지와 스크립트 미리 로드(5점 만점에 3점)

"가장 큰 콘텐츠가 포함된 페인트"와 같은 측정항목은 페이지 에서 가장 큰 요소의 속도를 측정합니다 . 결과적으로 HTML 코드에 힌트를 제공 하여 페이지에서 가장 큰 요소를 "미리 로드"하는 것이 합리적 입니다.

미리 로드 힌트는 페이지에 가장 중요한 리소스를 브라우저에 알려주는 HTML 코드의 지침입니다 .

예를 들어 큰 스플래시 이미지가 있는 경우 이 이미지를 먼저 로드하여 LCP를 개선하는 것이 좋습니다.

사이트에 중요한 요소를 미리 로드하면 LCP 점수에 도움이 될 수 있지만 전체 페이지 속도에는 영향을 미치지 않습니다.

이미지 축소(5점 만점에 4점)

대부분의 새로운 전자상거래 상점 소유자 는 필요한 것보다 훨씬 큰 이미지 크기를 사용 합니다 . 온라인 상점 테마가 1000×1000 이미지를 사용하는 경우 1000 x 1000보다 큰 이미지를 업로드해서는 안 됩니다.

웹사이트 에서 크기가 다른 여러 페이지에 동일한 이미지를 사용하는 경우 각 버전에 대해 별도의(그리고 더 작은) 이미지를 만들어야 합니다.

예를 들어 내 가게의 상품 이미지는 페이지에 따라 전체 크기, 50% 크기, 33% 크기, 25% 크기로 표시됩니다.

결과적으로 내 사이트에는 4개의 다른 이미지 파일(각 크기당 1개)이 있으며 품질 손실 없이 필요한 가장 작은 이미지만 표시합니다 .

또한 Photoshop(또는 사용하는 이미지 프로그램)에서 모든 JPG 파일을 최대 50 품질 로 압축해야 합니다.

페이지 압축 및 캐시(5점 만점에 4점)

Shopify, BigCommerce 또는 Shift4Shop과 같이 완전히 호스팅된 플랫폼에 있는 경우 페이지 가 제공되기 전에 이미 압축되어 완전히 캐시되었을 수 있습니다.

그러나 WooCommerce와 같은 오픈 소스 플랫폼에 있다면 WP Rocket과 같은 플러그인을 사용해야 합니다.

WP Rocket은 모든 웹 페이지 를 사전 렌더링 하여 상점에서 CPU 사용량이 거의 또는 전혀 필요하지 않은 정적 페이지를 제공할 것입니다.

WP Rocket은 또한 웹 페이지 를 크기의 90%로 압축합니다 .

외부 코드를 로드하는 플러그인을 적게 사용(5점 만점에 4점)

웹사이트에 추가하는 모든 플러그인 은 속도를 늦춥니다 . 따라서 새 소프트웨어 도구를 설치하기로 결정할 때마다 각별히 주의해야 합니다.

무해해 보이는 기능 이 때때로 사이트 속도를 크게 저하시킬 수 있습니다!

예를 들어 , Facebook 공유 버튼 또는 Pinterest 고정 버튼을 추가하면 잠재적으로 외부 소스에서 새로운 자바스크립트 코드 조각이 다운로드될 수 있습니다.

Twitter, Facebook 또는 Pinterest와 같은 버튼의 경우 외부에서 로드된 코드가 필요하지 않은 "비 자바스크립트" 버전 을 항상 사용 합니다.

사이트에 Facebook 공유 버튼을 추가 하려면 아래와 같이 하이퍼링크 버전 을 사용해야 합니다 .

https://www.facebook.com/sharer/sharer.php?m2w&u=https://mywifequitherjob.com/the-best-way-to-find-vendors-for-your-online-store/

이미지와 자바스크립트 코드를 지연 로드(5점 만점에 5점) – 가장 중요합니다!

페이지 로드 속도를 개선하려면 사이트에서 필요하거나 표시되는 요소만 로드 해야 합니다.

예를 들어 페이지에 5개의 스크롤 아래로 묻혀 있는 이미지가 있는 경우 고객이 볼 수 있을 만큼 충분히 아래로 내려갈 때까지 해당 이미지를 표시해서는 안 됩니다.

마찬가지로 자바스크립트 코드의 경우 실제로 로드해야 할 때까지 웹사이트에 대한 기능을 로드해서는 안 됩니다 .

자바스크립트와 CSS 코드를 지연 로드하는 방법

이미지 지연 로딩은 매우 간단 하며 대부분의 테마에는 이미 이미지 지연 로딩이 내장되어 있습니다.

그러나 사이트 에서 자바스크립트 코드를 안전하게 지연 로드 하는 방법은 무엇입니까?

여기 내가 하는 방법의 비밀이 있습니다.

내 사이트의 모든 페이지에 대해 내 사이트 의 시각적 요소를 먼저 로드합니다 . 그런 다음 사용자가 페이지에서 작업을 수행한 후에만 내 사이트에 기능적인 자바스크립트 코드를 로드합니다.

예를 들어 , 지금 Bumblebee Linens로 이동하면 내 웹사이트가 매우 빠르게(때로는 1초 미만) 로드되는 것을 알 수 있습니다.

그러나 페이지를 클릭하거나 마우스를 이동하거나 스크롤 하면 라이브 채팅이 내 상점의 다른 "쇼핑" 기능과 함께 로드됩니다.

즉, 사용자가 내 상점에서 작업을 하거나 쇼핑을 할 때만 내 사이트의 장바구니 기능을 게으르게 로드합니다 .

결과적으로 내 사이트 의 그래픽 HTML/CSS 요소만 로드 하기 때문에 내 페이지가 매우 빠르게 로드 됩니다.

사용자 관점에서는 모든 페이지가 번개처럼 빠르게 로드되기 때문에 쇼핑 경험이 완벽 합니다. 한편, Google은 또한 빠른 로딩 페이지도 봅니다.

자바스크립트 지연 로딩을 구현하는 방법

자바스크립트를 지연 로드하는 데 필요한 첫 번째 단계는 사이트를 손상시키지 않고 지연 로드할 수 있는 항목 을 파악하는 것 입니다.

고객의 "시각적" 쇼핑 경험이 영향을 받지 않도록 모든 "필수" 코드 를 사이트에 로드 해야 합니다.

따라서 사이트 의 그래픽 요소 렌더링에 영향 을 미치는 모든 코드를 로드해야 합니다.

무엇이 필수적인지 알아내는 방법은 다음과 같습니다.

GTMetrix로 이동 하여 폭포수 차트를 분석합니다 . 폭포 차트는 페이지에 로드된 모든 항목과 로드하는 데 걸리는 시간을 알려줍니다.

위의 차트에 따르면 klaviyo_subscribe.js는 로드 하는 데 450ms가 걸립니다 . 또한 klaviyo_subscribe.css는 420ms가 더 걸립니다.

Klaviyo는 제 이메일 마케팅 도구이며 Klaviyo가 제 사이트 렌더링에 전혀 영향을 미치지 않는다는 사실을 알고 있습니다.

결과적으로 페이지의 시각적 요소에 영향을 주지 않고 Klaviyo 를 쉽게 지연 로드 할 수 있습니다.

사실, Klaviyo 코드를 제거하면 페이지 속도가 거의 1초가 단축됩니다!

GTMetrix를 사용 하여 사이트의 시각적 요소를 렌더링하는 데 필요하지 않은 모든 느린 로드 코드 목록을 만든 다음 다음 이벤트 중 하나 라도 발생할 때 코드 를 지연 로드합니다.

• 마우스 움직임
• 페이지 스크롤
• 화면 터치

다음은 내 자바스크립트 구현을 보여주는 작은 코드 조각입니다.


function activity(){
defer(//Add all of your slow javascript stuff here);
activityEvents.forEach(function(eventName) {
document.removeEventListener(eventName, activity, true);
});
}

// 다음과 같이 해석되어야 하는 DOM 이벤트의 배열
//사용자 활동.
var 활동 이벤트 = [
'마우스다운', '마우스무브', '키다운', '스크롤',
'터치스타트'
];

window.onload = 함수(){
//이 이벤트를 문서에 추가합니다.
// 액티비티 함수를 리스너 매개변수로 등록합니다.
activityEvents.forEach(함수(이벤트 이름) {
document.addEventListener(eventName, 활동, true);
});
}

이 한 단계를 구현하면 모바일 및 데스크톱에서 1초 미만의 페이지 로드 속도 를 달성 할 수 있습니다!

누적 레이아웃 이동 문제를 해결하는 방법

누적 레이아웃 이동 문제의 90% 는 다음 두 가지 이유로 인해 발생합니다.

치수 없이 요소 로드

이미지 크기 매개변수는 웹 브라우저가 콘텐츠가 로드될 때 크기 를 알 수 있도록 합니다.

예를 들어, HTML 코드에서 이미지 크기를 정의하는 경우 브라우저는 페이지가 건너뛰지 않도록 로드할 때 이미지를 위한 공간을 예약합니다.

그러나 크기 매개변수가 없으면 예약이 수행되지 않으며 이미지가 최종적으로 로드될 때 페이지가 자체적으로 재정렬되어야 합니다.

이 문제에 대한 간단한 해결책은 아래와 같이 사이트에 있는 모든 요소의 크기 를 지정하는 것 입니다.

<img width="400" height="300" class="" src="images/Hankie_HLW-009.jpg" border="0" alt="Wedding Handkerchiefs" title=" Wedding Handkerchiefs ">

자바스크립트로 동적으로 콘텐츠 추가하기

많은 Shopify 플러그인은 자바스크립트를 사용하여 웹사이트에 기능 을 동적으로 표시합니다 . 때로는 이 코드가 늦게 로드되어 페이지를 위아래로 밀 수 있습니다.

예를 들어 사이트에 광고를 표시하는 경우 광고가 로드될 때 사이트가 위아래로 이동할 수 있습니다.

이를 방지하는 가장 좋은 방법은 추가된 콘텐츠가 표시될 페이지 공간 을 미리 할당 하는 것입니다.

사전 렌더링된 공백을 추가하는 것은 특정 플러그인에 문제가 될 수 있으므로 이것이 상점에 문제가 있는 경우 플러그인 작성자 에게 연락 해야 합니다.

더 복잡한 CLS 문제를 해결하는 방법

앞서 언급했듯이 CLS 문제의 90%는 요소에 차원을 추가하여 해결할 수 있습니다. 그러나 나머지 10%는 특정 도구 세트를 사용하지 않고 해결하기가 매우 어려울 수 있습니다 .

내 사이트의 경우 Google Page Speed ​​테스트가 현장에서 측정된 CLS 점수를 반영하지 않기 때문에 문자 그대로 CLS 문제를 해결하는 데 3주가 ​​걸렸습니다 .

예를 들어 MyWifeQuitHerJob.com에 있는 내 블로그는 페이지 속도 랩 테스트에서 완벽한 CLS 점수를 받았지만 현장에서 CLS 테스트에 실패했습니다.

무슨 말인지 모르겠다면 여기 Google Page Speed ​​Test에 대한 간략한 설명이 있습니다.

최고 점수는 Chrome 브라우저를 사용하는 실제 사용자로부터 수집된 데이터 입니다. 가장 낮은 점수는 이상적인 조건에서 실행 한 테스트 입니다 .

2개의 점수가 일치 하지 않으면 Google에서 무엇이 잘못되었는지 알려주지 않기 때문에 수정하는 것이 고통 스럽습니다 . 사실, 실험실에서는 완벽한 CLS 점수를 얻을 수 있지만 현장에서는 CLS에 완전히 실패 할 수 있습니다 .

다음은 Google에서 CLS에 대해 알려주지 않는 내용입니다.

페이지 속도 테스트는 이상적인 조건 에서 스크롤 없이 볼 수 있는 부분의 CLS 만 측정합니다 . 실생활에서 사용자는 잠재적으로 훨씬 느린 인터넷 연결에서 위아래로 스크롤 합니다.

CLS 문제를 해결하려면 느린 연결을 에뮬레이트하고 실제 사용자처럼 행동해야 합니다!

CLS를 수정하기 위해 실제 사용자를 에뮬레이트하는 방법

이를 수행하는 가장 좋은 방법은 내장된 Chrome 디버거를 사용하는 것 입니다.

CLS 문제를 단계별 로 디버깅하는 방법은 다음과 같습니다 .

1단계: Chrome 디버거 불러오기

2단계: 네트워크 속도 낮추기

"네트워크" 탭 에서 페이지 속도 를 "느린 3G"로 낮추십시오. 이렇게 하면 페이지 속도 로드가 크게 느려져 레이아웃 이동을 쉽게 감지할 수 있습니다.

3단계: 레이아웃 전환 영역 렌더링

"성능" 탭을 클릭한 다음 "렌더링"에서 "레이아웃 이동 영역" 상자가 선택 되어 있는지 확인 합니다.

4단계: 페이지 새로고침

Chrome 디버거를 설정했으면 페이지를 새로고침하고 실제 사용자처럼 페이지를 위아래로 스크롤합니다 .

레이아웃 변경을 나타내는 파란색으로 강조 표시된 영역 을 찾으 십시오.

5단계: 성과 타임라인 분석

로드 시 사이트에서 레이아웃이 변경되는 경우 페이지 로드 타임라인 을 확대 하여 자세히 살펴보세요.

아래 예에서는 새 글꼴이 더 크기 때문에 페이지를 약간 아래로 이동 하는 다른 글꼴로 로드 하기 때문에 레이아웃이 이동하고 있습니다.

페이지의 다른 영역에서 이러한 테스트를 여러 번 실행하면 누적 레이아웃 이동 문제를 쉽게 찾아 수정할 수 있습니다.

가장 어려운 부분은 Google Page Speed ​​테스트가 페이지의 접힌 부분 위만 설명 하기 때문에 CLS 문제가 있는 위치를 진단하는 것 입니다.

전자 상거래 상점의 경우 90개 이상의 핵심 Web Vital Score를 달성할 수 있습니다.

위의 모든 지침을 따르면 1초 미만의 페이지 로드 속도 를 달성하고 모바일 및 데스크탑 모두에 대한 핵심 성능 평가에서 90+ 등급을 달성할 수 있습니다.

일반적으로 항상 웹사이트를 가능한 한 단순하게 유지 하고 플러그인 사용을 피해야 합니다!

구현하기 전에 특정 기능이 절대적으로 필요한지 자문해 보십시오 . 그런 다음 사이트에 추가 자바스크립트 코드 를 추가할 필요가 없는 솔루션을 찾으십시오.

나는 슈퍼 애널이기 때문에 실제로 발생 하는 네트워크 호출 외에도 설치하는 모든 플러그인의 소스 코드를 검사합니다.

한 번은 말 그대로 내 웹사이트 정보를 여러 광고 네트워크에 보내고 나도 모르게 내 고객 정보 를 판매 하는 플러그인을 맹목적으로 사용했습니다!

대부분의 페이지 속도 문제는 테마가 아니라 설치한 플러그인 에 의해 발생합니다. 조심하고 행복한 판매!