페이지 로드 속도가 사이트 가시성에 미치는 영향 및 가시성을 높이기 위한 팁

키워드 및 페이지 디자인과 같은 검색 엔진 최적화(SEO) 전략의 "유형" 측면에만 집중하고 있습니까? 페이지 로딩 시간은 어떻습니까? Google이 웹사이트 로드 속도를 중요한 순위 요소로 간주한다는 사실을 알고 계셨나요?

느린 로드 속도는 다양한 방식으로 비즈니스에 영향을 미칠 수 있습니다. 가장 중요한 두 가지는 순위와 전환 능력입니다. 사이트 서버의 응답 시간이 2초 미만이면 Google 은 사이트를 방문하는 크롤러 수를 줄입니다 .

이를 바탕으로 페이지 로드 속도가 다양한 사이트 매개변수에 어떤 영향을 미치는지 자세히 살펴보겠습니다.

페이지 로딩 속도가 가시성에 영향을 미치는 5가지 방법

1. 사용자 경험에 영향을 미칩니다.

오늘날 사용자는 웹 사이트 성능 저하에 대해 변명의 여지가 없습니다. 그리고 그들은 사이트의 로딩 속도에 대해 매우 까다롭습니다.

사실을 믿는다면 사용자의 47%는 페이지가 2초 이내에 로드될 것으로 예상합니다. 한편 보고서에 따르면 로딩 시간이 3초를 초과하면 방문자의 75%가 이탈(페이지 이탈)합니다.

이것은 페이지 로딩 시간이 지연될 때마다 고객에게 상당한 손실을 초래한다는 것을 알려줍니다.

Think With Google 설문조사 에 따르면 이탈률(한 페이지에 도달한 후 사이트를 떠나는 방문자의 비율)은 페이지 로드 시간이 증가함에 따라 증가합니다. 증가한 이탈률은 전반적인 사용자 참여 및 상호 작용 지표에도 영향을 미칩니다.

2. 온라인 가시성과 SEO에 직접적인 영향을 미칩니다.

2018년 모바일 장치는 전체 웹사이트 트래픽의 53% 이상을 차지했습니다. 그리고 같은 해 Google은 공식적으로 모바일 페이지 속도를 순위 요소로 도입했습니다. 그 이후로 페이지 로드 속도가 더욱 중요해졌습니다.

Google이 몇 년 전 모바일 우선 인덱싱에 중점을 두겠다고 발표했을 때 기업은 모바일 장치에 맞게 사이트를 최적화하는 것 외에는 선택의 여지가 없었습니다. 모바일 성능이 좋지 않은 사이트는 이후 검색 엔진 결과 페이지(SERP)에서 급락했습니다.

간단히 말해서 모바일 페이지 속도가 표준에 미치지 못하면 더 높은 순위를 달성하는 것이 사실상 불가능합니다.

3. 판매 및 전환율이 떨어지거나 급증합니다.

페이지 로딩 시간이 1초 지연되면 전환율이 7% 감소한다는 사실을 알고 계십니까?

귀하의 사이트가 저조한 실적에 시달린다면 피할 방법이 없습니다. 상당한 판매 손실을 보고 있는 것입니다. 낮은 사이트 속도로 인한 이탈률 증가는 이미 많은 잠재 고객을 밀어내고 방문자 전환 가능성을 최소화합니다.

Amazon은 페이지 로드 속도가 판매에 미치는 영향을 조사했습니다. 사이트 로드 시간이 1초 증가하면 회사는 연간 16억 달러의 수익을 잃을 수 있다고 판단했습니다 . Search Engine Journal 의 데이터에 따르면 소비자의 70%는 사이트 속도가 구매 결정에 상당한 영향을 미친다고 생각합니다.

따라서 사이트 속도를 최적화하면 순위, 전환 및 궁극적으로 판매에서 상당한 성장을 기대할 수 있습니다.

4. 고객 충성도를 위태롭게 합니다.

위에서 강조한 점을 다시 생각해 보겠습니다. 느린 페이지 로딩 속도는 소비자를 멀어지게 하고 전환율을 낮춥니다.

이 외에도 고객은 열악한 사용자 경험(UX)을 제공하는 사이트를 다시 방문할 가능성이 적습니다. 따라서 느린 웹 사이트 속도는 고객 충성도에도 영향을 미칩니다.

실제로 HubSpot은 사이트의 낮은 성능에 불만을 품은 고객의 80%가 해당 사이트에서 다시는 구매하지 않을 것이라고 말합니다. 이는 느린 로딩 페이지가 반복 주문을 크게 줄인다는 것을 증명합니다. 느린 페이지는 수익이 반복 판매에 크게 의존하는 전자 상거래 사이트에 특히 큰 손실입니다.

또한 Akamai 의 연구에서는 기업에 대한 또 다른 중요한 우려 사항을 밝혔습니다. 불만족스러운 방문자의 40%가 부정적인 경험을 연락처에 공유했습니다. 이 부정적인 사회적 증거는 전반적인 전환 및 고객 충성도에 영향을 미칠 수 있습니다.

5. 사이트의 유기적 트래픽에 영향을 미칩니다.

낮은 사이트 속도는 SERP의 순위를 낮출 뿐입니다. 그리고 이것은 또한 귀하의 사이트에 대한 유기적 트래픽이 적다는 것을 의미합니다. Google의 상위 5개 순위가 전체 자연 클릭의 67.6%를 차지한다는 사실을 알고 계셨습니까 ?

로딩이 이상적이지 않다면 이미 상당한 양의 유기적 트래픽을 잃고 있는 것입니다. 한편, 모바일 페이지 속도가 최적화되지 않으면 잠재 고객의 최대 50%를 차지할 수 있는 모바일 트래픽을 잃게 됩니다.

이상적인 페이지 로딩 속도는 무엇입니까?

2015년 Mobilegeddon 업데이트 출시 이후 기업들은 페이지 로드 시간에 초점을 맞추고 있습니다. 또한 모바일 친화성과 모바일 페이지 속도에 더 많은 시간과 노력을 투자했습니다 .

그러나 문제는 이상적인 페이지 로딩 속도는 얼마이며 얼마나 빠른 것이 충분히 빠른가 하는 것입니다.

Google에 따르면 권장 페이지 로드 시간은 데스크톱 및 모바일 장치 모두에서 3초 미만 입니다. 그러나 모바일 장치의 모든 사이트에서 평균 페이지 로딩 시간은 현재 22초입니다. Screaming Frog는 Google의 PageSpeed ​​평가를 통과했는지 확인하기 위해 20,000개의 URL을 조사했습니다. 모바일 결과의 12%와 데스크톱 결과의 13%만이 테스트를 통과한 것으로 나타났습니다.

또한 사용자가 전자 상거래 웹 사이트에서 더 빠른 로드 시간을 기대한다는 점을 고려해야 합니다. Google의 Maile Ohye가 Google 웹마스터 동영상 에서 전자상거래 페이지 로드 속도에 대해 이야기합니다 . 그녀는 “ 2초 는 전자 상거래 웹 사이트 수용의 임계값입니다. Google에서는 0.5초 미만을 목표로 합니다.”

이제 0.5초가 비현실적으로 보일 수 있습니다. 그러나 전자 상거래 웹사이트 소유자라면 최대 3초 미만의 페이지 로드 속도를 목표로 해야 합니다. 이 벤치마크는 모바일 및 웹 장치 모두에 대한 것입니다.

최신 업데이트: 핵심 성능 보고서

Google은 UX와 관련하여 모든 수단을 사용하기를 원합니다. 이것이 바로 최근 Core Web Vitals를 중요한 순위 요소로 등록한 이유입니다 .

이러한 Core Web Vitals는 다른 중요한 UX 신호와 조화를 이루어 이제 순위에 영향을 미칩니다. LCP(Largest Contentful Paint)라는 지표 중 하나는 페이지 로드 속도와 관련이 있습니다.

LCP는 페이지에서 가장 큰 콘텐츠 요소를 렌더링하는 데 걸리는 시간을 나타냅니다. 이미지, 비디오 또는 기타 요소가 될 수 있습니다.

Google에 따르면 페이지에서 이상적인 가장 큰 콘텐츠가 포함된 페인트는 2.5초 이하 또는 최대 2.5초입니다. 2.5초에서 4초까지는 개선이 필요하며 그 이상은 좋지 않은 것으로 간주됩니다.

페이지 로딩 속도를 높이는 기술 팁

콘텐츠 전송 네트워크 사용

웹 사이트 로딩 시간을 줄이는 모범 사례 중 하나는 콘텐츠 전송 네트워크(CDN)를 사용하는 것입니다. CDN은 사이트 로딩 시간을 20%에서 51%로 줄이는 데 도움이 될 수 있습니다 .

기존 설정에서는 단일 서버에서 전체 웹사이트를 호스팅합니다. 그리고 이 서버는 사이트 사용자의 모든 요청을 처리합니다. 이제 사이트에 트래픽이 많으면 요청 수가 크게 증가합니다. 그리고 이것은 서버의 부하를 증가시킵니다. 결과적으로 요청 처리 시간이 증가하여 페이지 로드 시간이 지연됩니다.

또한 사용자가 서버 위치에서 물리적으로 멀리 떨어져 있으면 페이지 로드 시간이 더 길어집니다. 이는 데이터가 더 먼 거리를 이동해야 하므로 로드 시간이 늘어나기 때문입니다.

CDN은 이러한 문제를 해결할 수 있습니다. CDN은 글로벌 서버 네트워크에서 웹 사이트를 호스팅하여 작동합니다. 이제 사용자가 요청을 보내면 해당 위치에서 가장 가까운 서버에서 데이터가 라우팅됩니다.

또한 파일이 여러 서버에 걸쳐 캐시되므로 대역폭이 최대 60%까지 절약됩니다. 이제 단일 서버가 모든 요청을 처리할 필요가 없습니다.

HTTP 요청 수 줄이기

사용자가 페이지를 요청하면 각 페이지 구성 요소에 대해 HTTP 요청이 전송됩니다. Yahoo는 웹 서버가 이러한 구성 요소를 다운로드하는 페이지 로드 시간의 80%를 사용한다고 보고합니다. 여기에는 페이지 이미지, 스크립트, 미디어, 스타일시트 등이 포함됩니다 . 따라서 많은 수의 페이지 구성 요소가 있는 경우 페이지 렌더링 시간이 늘어납니다.

그렇다면 페이지 구성 요소의 수와 각 구성 요소를 로드하는 데 걸리는 시간을 어떻게 확인할 수 있습니까?

Chrome 사용자는 다음 단계를 따를 수 있습니다.

참고: Chrome 브라우저의 개발자 도구를 사용하여 HTTP 요청 수를 확인하십시오.

• 페이지를 마우스 오른쪽 버튼으로 클릭하여 "검사" 탭을 따르십시오.
• 왼쪽 테두리를 드래그하면 나타나는 "네트워크" 탭을 클릭합니다.
• 여기에서 "이름" 열에는 모든 페이지 구성 요소가 표시됩니다.
• "크기" 열에는 각 관련 구성 요소의 크기가 나열됩니다.
• 또한 "시간" 열을 통해 로드할 때마다 소요된 시간을 확인할 수 있습니다.
• 총 요청 수는 왼쪽 하단 모서리에 표시됩니다.

이제 유용하지 않은 요소와 로드하는 데 걸리는 시간을 확인할 수 있습니다.

또한 HTTP 요청 수를 줄여야 합니다. 이를 수행하는 한 가지 방법은 웹 페이지 파일을 축소하고 결합하는 것입니다. 다음 항목에서 방법을 알아보십시오.

HTML, CSS 및 JavaScript 축소 및 결합

HTML, CSS 및 JavaScript 파일은 사이트의 모양과 기능을 형성합니다. 그리고 이러한 파일은 HTTP 요청의 중요한 부분을 구성합니다. 따라서 HTTP 요청 수를 줄이려면 페이지 파일을 축소해야 합니다.

HTML, CSS 및 JavaScript 파일을 축소하면 크기가 상당히 줄어듭니다. 이 프로세스를 통해 이러한 파일을 더 빠르게 로드할 수 있습니다. 또한 코드에 여분의 공백, 들여쓰기 및 서식이 있어 페이지가 무거워집니다.

페이지를 축소하면 이러한 불필요한 요소를 모두 제거하고 페이지를 더 간결하게 만들 수 있습니다.

템플릿 기반 웹 사이트가 있을 때 더욱 중요해집니다. 템플릿 기반 웹 사이트는 개발하기 쉽지만 사이트 성능을 저하시키는 지저분한 코드 조각을 제공할 수 있습니다.

축소는 이러한 문제를 해결하고 코드 파일 크기를 줄이는 올바른 방법입니다. 축소와 함께 이러한 파일을 결합하여 총 파일 수를 줄여야 합니다. 따라서 여러 CSS 및 JavaScript 파일이 있는 경우 단일 파일로 결합할 수 있습니다. WordPress가 귀하의 사이트를 지원하는 경우 WP Minify 플러그인 또는 WP Rocket 플러그인을 사용할 수 있습니다.

이러한 모든 도구는 HTML, CSS 및 JavaScript 파일을 쉽게 축소하고 결합하는 데 도움이 됩니다.

브라우저 캐싱을 위해 만료 헤더를 추가하는 것을 잊지 마십시오.

브라우저는 페이지 파일의 상당 부분을 캐시할 수 있습니다. 여기에는 이미지, JavaScript 파일, 동적 요소 등이 포함됩니다.

브라우저 캐싱을 활성화하면 브라우저가 캐시 메모리에 페이지를 저장할 수 있습니다. 따라서 이 페이지를 다시 방문하면 HTTP 요청을 보내지 않고 캐시에서 로드됩니다.

사이트에 대한 브라우저 캐싱을 활용하는 한 가지 방법은 "expires" 헤더를 추가하는 것입니다.

"expires" 헤더는 웹 브라우저에게 캐시 메모리에서 페이지를 로드하도록 지시합니다. 따라서 "expires" 헤더는 이전에 사이트를 방문한 사용자에게만 적용됩니다. 또한 캐시 메모리에 페이지를 저장해야 합니다.

이 사용자가 사이트를 다시 방문하면 "expires" 헤더가 브라우저에 페이지의 캐시된 버전을 로드하도록 지시합니다.

이제 많은 페이지 구성 요소가 이미 캐시 메모리에 있기 때문에 더 빨리 로드됩니다. 그리고 브라우저는 몇 가지 페이지 구성 요소만 요청하므로 페이지 로드 시간이 감소합니다.

브라우저 캐싱은 HTTP 요청 수를 줄여 페이지 로드 속도를 더욱 높입니다.

비동기 로딩 사용

CSS 및 JavaScript 파일이 로드되는 방식을 선택하여 페이지 로드 속도를 높일 수 있습니다. CSS 및 JavaScript 파일은 동기식 및 비동기식으로 로드되며 웹 페이지에 로드할 방법을 결정할 수 있습니다.

단어에서 알 수 있듯이 스크립트가 동기식으로 로드되면 차례로 로드됩니다. 그리고 각 스크립트는 페이지에서의 위치에 따라 로드 순서를 따릅니다. 반면 비동기식으로 로드하면 여러 스크립트가 동시에 로드될 수 있습니다.

브라우저가 페이지를 로드할 때 위에서 아래로 로드하는 패턴을 따릅니다.

예를 들어:

• 브라우저가 동기식 CSS 또는 JavaScript 파일을 발견하면 더 이상 이동하기 전에 파일을 완전히 로드합니다. 이 순서는 로드 프로세스를 느리게 합니다.
• 한편, 비동기 파일을 만나면 다른 요소를 동시에 로드하기 시작합니다. 따라서 요소가 더 이동하기 전에 로드가 완료될 때까지 기다릴 필요가 없습니다.

이것은 더 빠른 로드 시간을 달성하기 위해 비동기적으로 로드할 CSS 및 JavaScript 파일을 선택해야 함을 알려줍니다. WordPress 사이트가 있는 경우 WP Rocket이 비동기 로딩을 활성화하는 데 도움이 됩니다.

WP Smush를 사용하여 사이트 이미지 압축

이미지 최적화 또는 압축은 페이지 로드 시간을 줄이는 데 중요합니다. 종종 이미지 파일이 크기 때문에 페이지 로드 시간이 지연됩니다. 그러나 이미지의 사용을 제한하거나 제거할 수는 없습니다. 이미지는 사이트의 사용자 경험, 특히 전자상거래 사이트에 매우 중요합니다. 설문 조사에 따르면 소비자의 66%가 제품을 구매하기 전에 최소 3개의 제품 이미지가 필요합니다.

WordPress 웹사이트의 사이트 이미지를 압축하는 간단한 방법은 WP Smush 플러그인을 사용하는 것입니다. 이 플러그인은 이미지를 업로드하는 동안 백그라운드에서 작동하여 이미지를 압축합니다. 그 결과 품질 저하 없이 이미지 크기가 줄어듭니다.

페이지를 로드하는 동안 JavaScript 파일 연기

JavaSscript 파일을 연기하는 것은 사이트의 이탈률을 줄이는 좋은 방법입니다. 다른 페이지 요소가 로드될 때까지 JavaScript 파일 로드의 우선 순위를 낮추는 프로세스입니다. 일반적으로 JavaScript 파일은 크기가 크며 로드 시간이 더 오래 걸릴 수 있습니다. 이를 연기하면 다른 페이지 요소가 지연 없이 더 빨리 로드될 수 있습니다.

WordPress 사이트 소유자는 WP Rocket 플러그인을 사용하여 연기를 활성화할 수 있습니다 . "Load JS files deferred"를 체크 표시하고 변경 사항을 저장하기만 하면 됩니다.

HTML 사이트의 경우 </body> 태그 위에서 외부 JavaScript 파일을 호출합니다.

그래서, 당신은 그것을 가지고 있습니다! 페이지 속도를 높이고 검색 엔진에서 가시성을 높이려면 웹 사이트에 다음 팁을 구현하십시오.