SEO웹문서최적화라우드아이

사이트 속도란?

손님이 식사를 위해 식당에 앉아 있는데 웨이터의 서비스가 느리다면 Yelp에서의 리뷰가 불량하고 미래 고객이 줄어들 수 있습니다. 마찬가지로 사이트의 속도가 느리면 검색 엔진 순위가 떨어지고 전반적인 사이트 트래픽이 줄어들며 부정적인 사용자 경험이 생길 수 있습니다.

웹 사이트 속도 또는 웹 사이트 성능이란 브라우저가 특정 사이트의 완전히 작동하는 웹 페이지를 얼마나 빨리 로드하는가를 의미합니다. 성능이 불량한 사이트는 브라우저에 느리게 표시되며 이러한 사이트에서는 사용자가 떠나게 됩니다. 반대로 신속하게 로드되는 사이트는 일반적으로 트래픽이 많으며 전환율도 높습니다.

현장 데이터 섹션

실험실 데이터 섹션

사이트 속도가 중요한 이유

전환율:

다양한 연구 결과에 따르면 사이트 속도는 전환율에 영향이 있습니다(전환율이란 사이트에서 원하는 행동을 고객이 취하는 비율을 말합니다). 빠르게 로드되는 사이트에는 느린 사이트에 비해 머무는 사용자가 많기도 하지만 이 사용자들의 전환율도 높습니다. 페이지 로드 시간을 수 밀리초 줄이면 전환율이 높아진다는 사실은 많은 회사에서 밝혀졌습니다.

• Mobify의 경우 홈페이지 로드 시간을 100밀리초 줄였더니 세션 기반 전환이 1.11% 상향되었습니다
• 소매업체인 AutoAnything은 페이지 로드 시간을 반으로 줄이고 나서 매출이 12-13% 증가했습니다
• Walmart에서는 페이지 로드 시간을 1초 개선함으로써 전환이 2% 많아졌습니다

결과적으로 사이트 성능을 개선하는 일은 전환율 최적화에서 매우 중요한 부분입니다.

반송률

반송률은 한 페이지만 보고 웹 사이트를 떠나는 사용자의 비율을 말합니다. 사용자들은 페이지가 몇 초 이내에 로드되지 않으면 창을 닫거나 다른 곳을 클릭할 가능성이 큽니다. BBC의 경우 페이지 로드 시간이 1초 늘어날 때마다 전체 사용자의 10%를 잃어버린다는 사실을 알아냈습니다.

SEO 모범 사례:

Google은 최대한 빠른 시간 내에 사용자에 관련 정보를 제공하는 것을 중시하는 경향이 있으므로 사이트 성능은 Google 검색 순위의 중요한 요소입니다. SEO에는 모바일 장치에서의 사이트 성능이 특히 중요합니다.

사용자 경험:

페이지 로드 시간이 길고 사용자의 행동에 대해 반응 시간이 열악하면 사용자 경험이 저하됩니다. 사용자는 콘텐츠가 로드되기를 기다리면서 좌절감을 느끼며 해당 사이트나 응용 프로그램을 완전히 떠나게 될 수도 있습니다.

사이트 속도에 대한 영향 요인

페이지의 무게:

웹 사이트가 로드되기 위해 필요한 리소스의 양은 사이트 성능에 큰 영향이 있습니다. 큰 JavaScript 파일, 비디오 콘텐츠, 무거운 CSS 파일, 고화질 이미지 등은 모두 웹 페이지에 '무게' 즉 로드 시간을 더합니다. 식당의 예로 돌아와 보면,식탁에 요리를 2-3가지가 아니라 10가지를 가져와서 서빙한다고 하면 서비스 속도가 느려질 것입니다. 마찬가지로 로드하기 위해 리소스가 많이 필요한 페이지는 느리게 로드될 것입니다.

웹 기술로 용량이 증가하고 웹 사이트가 복잡해지고 있으므로 웹 사이트를 가볍게 하는 일(파일 사이즈를 줄이고 빠르게 로드되는 페이지를 만드는 것)은 더욱 어려워지고 있습니다. 다수의 JavaScript 함수가 있는 단일 페이지 응용 프로그램에서부터 제삼자 팝업 광고가 있는 페이지와 배경이 이동하는 홈 페이지에 이르기까지 개발자들은 과거와 달리 웹 페이지에 다양한 기능을 추가할 수 있으며 결과적으로 평균적인 전체 페이지 무게는 증가하고 있습니다.

네트워크 상태:

웹 사이트를 가볍게 설계했다고 해도 네트워크가 느리다면 브라우저에 빠르게 로드되지 않을 수 있습니다. 로컬 네트워킹 장치와 ISP 서비스의 품질은 네트워크 연결성에 영향이 있습니다. 또한 WiFi를 이용하지 않고 3G나 4G를 이용하여 인터넷에 접속하는 모바일 장치도 일반적으로 네트워크 연결 속도가 느립니다. 개발자에 좌우되는 면이 크긴 하지만 연결이 느린 경우에도 웹 리소스를 빠르게 전달하는 기법이 있습니다. 이러한 기법에는 축소, 압축, CDN을 이용한 콘텐츠 호스팅 등이 있습니다.

호스팅 위치:

콘텐츠를 필요로 하는 곳에 해당 콘텐츠가 도착하기까지 긴 거리를 이동해야 한다면 네트워크 대기 시간이 증가할 것입니다. 예를 들어 한 웹 사이트의 HTML과 CSS 파일을 오하이오주에 있는 데이터 센터에서 호스팅하고 이미지 파일은 플로리다주에 있는 데이터 센터에서 호스팅하는 경우를 생각해 보면, 미국 서부에 있는 사용자는 이 모든 파일들이 자신의 장치까지 수 천 킬로미터를 이동해야 하므로 상당 시간 기다려야만 합니다.

웹 사이트의 속도를 측정하려면 어떻게 해야 할까요?

많은 속도 테스트에서는 성능 지표를 제공하는 외에도 페이지 속도를 느리게 하는 웹 페이지의 개별 요소들을 파악할 수 있습니다.

중요한 성능 지표

• 로드 시간은 전체 웹 페이지가 브라우저에 표시될 때까지 걸리는 시간으로 모든 HTTP 요청이 처리되는 시간을 말합니다. 인터넷의 거의 모든 페이지를 로드하기 위해서는 다수의 HTTP 요청이 필요합니다. 페이지의 기본 HTML 이외에도 다수의 리소스를 로드해야 하기 때문입니다.
• 페이지 크기는 해당 페이지가 작동하기 위해 로드되어야 하는 모든 리소스의 파일 크기를 말합니다. 페이지 크기는 브라우저가 해당 페이지를 로드하기 위해 걸리는 시간에 영향을 미치며 웹 페이지를 로드하면서 데이터 요금을 내는 모바일 사용자에게 큰 영향이 있을 수 있습니다.
• 첫 번째 바이트 시간(TTFB: Time To First Byte)는 브라우저가 웹 페이지를 요청한 후 응답의 첫 바이트가 도착할 때까지의 시간을 말합니다. 전체적인 로드 시간이 더욱 중요하지만, 웹 사이트 성능을 평가할 때는 TTFB도 고려되며, 이에 따라 SEO에도 영향이 있습니다.
• 왕복 이동수는 요청/응답이 원본 서버까지 몇 번이나 오가는가를 측정합니다. 웹 페이지에 필요한 왕복 이동수가 많다면 대기 시간이 커집니다.
• 왕복 이동 시간(RTT: Round Trip Time)은 요청이 왕복 이동하는 데 걸리는 시간을 말합니다. 즉 요청이 원본 서버에 도착하고 다시 요청을 한 장치로 돌아올 때까지의 시간입니다.

웹 성능은 측정 가능하고 인지 가능한 웹 사이트 사용자 경험의 품질을 총칭하는 용어로, 특히 페이지의 속도와 안정성에 중점을 둡니다.

개발자와 웹 사이트 소유자는 웹 사이트의 성능을 개선하기 위해 여러 조치를 실행할 수 있습니다. 이러한 조치에는 이미지 크기, 코드 형식, 외부 스크립트 사용 등의 웹 디자인 요소를 최적화하고 호스팅, 콘텐츠 캐싱, 부하 분산에 적합한 공급자를 선택하는 것이 포함됩니다.

웹 페이지가 더 빠르고 안정적으로 로드되면 더 나은 사용자 경험이 제공될 뿐만 아니라 유기적 검색 결과에서 더 높은 순위를 차지하고 잠재적인 웹 방문자에게 더 잘 노출되며 전환율이 높아지는 경향이 있습니다.

웹 사이트 성능을 테스트하는 방법

웹 사이트의 성능을 개선하기 위한 중요한 첫 단계는 현재 성능을 측정하는 것입니다. 사용자(및 다른 당사자)가 웹 사이트의 속도와 안정성을 인식하는 방식은 다양한 요인에 의해 결정되며, 이러한 요인을 측정해야만 어떤 조치가 가장 개선 효과가 클지 알 수 있습니다.

성능 측정을 위한 다양한 무료 도구가 존재하며, 여기에는 Google Lighthouse(Google Chrome 웹 브라우저의 개발자 도구 제품군에서 사용 가능

웹 사이트 소유자는 이들 도구를 사용하여 무엇을 평가해야 할까요? 중요한 웹 성능 측면을 측정하는 세 가지 지표로 구성된 핵심 웹 바이탈을 살펴보는 것도 좋은 방법입니다.

• 최대 콘텐츠풀 페인트는 페이지에서 가장 큰 요소가 얼마나 빨리 로드되는지 측정합니다
• 첫 번째 입력 지연은 페이지가 사용자 입력에 얼마나 빨리 반응하는지 측정합니다
• 누적 레이아웃 이동은 페이지 요소의 시각적 안정성을 측정합니다

페이지의 핵심 웹 바이탈을 개선하면 가치 있는 사용자 경험 신호가 제공될 뿐만 아니라 Google 유기적 검색 결과에서 페이지의 순위가 높아질 수 있습니다.

평가해야 할 다른 중요한 지표로는 첫 번째 바이트 시간(페이지 로딩 시작 속도), DNS 조회 속도(페이지의 도메인 이름 서비스가 도메인 이름을 IP 주소로 변환하는 속도), 인터랙티브 시간(사용자가 페이지와 상호 작용할 수 있는 속도) 등이 있습니다.

이러한 메트릭을 측정하는 것이 어떻게 실행으로 이어질 수 있는지 알아보려면 다음 예를 살펴보세요.

• 최대 콘텐츠풀 페인트가 느린 웹 페이지는 사용자에게 가장 큰 구성 요소를 표시하는 데 너무 오래 걸립니다. 웹 페이지 소유자는 해당 구성 요소 이전에 불필요한 코드가 로드되고 있는지 조사하고 해당 코드를 제거할지 여부를 고려할 수 있습니다.
• 첫 번째 바이트 시간이 느린 웹 페이지의 경우 웹 사이트 리소스를

원본 서버에서 가져오는 데 너무 오래 걸립니다. 웹 페이지 소유자는 DNS 공급자와 웹 사이트 호스트의 응답 시간을 조사하여 서비스 중 하나 또는 두 서비스를 재구성하거나 교체할 수 있습니다.

웹 사이트 성능 개선 방법

강력한 웹 성능을 보장하는 청사진은 없지만, 웹 사이트 소유자는 다음과 같은 모범 사례를 사용하여 사이트 속도와 안정성을 높일 수 있습니다.

이미지 최적화

이미지 파일은 HTML 및 CSS 파일보다 크기가 큰 경향이 있으므로 웹 사이트에서 이미지가 로드되는 데 가장 오래 걸리는 경우가 많습니다. 다행히 이미지 최적화를 통해 이미지 로드 시간을 줄일 수 있는데, 이 과정에는 일반적으로 이미지의 해상도와 크기를 줄이고 이미지 파일 자체를 압축하는 것이 포함됩니다.

HTTP 요청 수 제한

대부분의 웹 페이지에서는 브라우저가 이미지, 스크립트, CSS 파일 등 페이지의 다양한 자산에 대해 여러 차례 HTTP 요청을 해야 합니다. 실제로 많은 웹 페이지에서 이러한 요청을 수십 개씩 필요로 합니다. 각 요청은 리소스를 호스팅하는 서버를 왕복하게 되므로 웹 페이지의 전체 로드 시간이 늘어날 수 있습니다.

이러한 잠재적인 문제 때문에 각 페이지에 로드해야 하는 총 자산 수는 최소한으로 유지해야 합니다. 속도 테스트는 어떤 HTTP 요청이 가장 시간이 많이 걸리는지 파악하는 데 도움이 됩니다.

브라우저 HTTP 캐싱 사용

브라우저 캐시는 브라우저에서 정적 파일의 사본을 저장하는 임시 저장 위치이므로, 최근에 방문한 웹 페이지를 더 빠르게 로드할 수 있습니다. 개발자는 자주 변경되지 않는 웹 페이지의 요소를 캐싱하도록 브라우저에 지시할 수 있습니다. 브라우저 캐싱에 대한 지침은 호스팅 서버의 HTTP 응답 헤더에 있습니다. 이렇게 하면 서버가 브라우저로 전송해야 하는 데이터의 양이 크게 줄어들어 특정 페이지를 자주 방문하는 사용자의 로드 시간이 단축됩니다.

불필요한 렌더링 차단 JavaScript 제거

웹 페이지에 더 중요한 페이지 콘텐츠보다 먼저 로드되는 불필요한 코드가 있을 수 있으며, 이로 인해 전체 로드 시간이 느려질 수 있습니다. 이는 특히 많은 소유자가 독자적으로 코드와 콘텐츠를 추가하는 대규모 웹 사이트에서 흔히 발생합니다. 웹 페이지 소유자는 웹 성능 도구를 사용하여 성능이 좋지 않은 페이지에서 불필요한 코드를 파악할 수 있습니다.

외부 스크립트 사용 제한

외부 댓글 시스템, CTA 버튼, CMS 플러그인, 리드 생성 팝업 등 다른 곳에서 로드되는 스크립팅된 웹 페이지 요소는 페이지가 로드될 때마다 로드해야 합니다.

스크립트의 크기에 따라 외부 스크립트 때문에 웹 페이지 속도가 느려지거나 웹 페이지가 한꺼번에 로드되지 않을 수 있습니다(이를 '콘텐츠 점프' 또는 '레이아웃 이동'이라고 하며, 전체 웹 페이지를 보기 위해 스크롤해야 하는 모바일 사용자에게 특히 불편할 수 있습니다).

리디렉션 사용 제한

리디렉션은 한 웹 페이지 방문자가 다른 페이지로 이동하는 것을 말합니다. 리디렉션 때문에 페이지 로드 시간이 몇 분의 1초, 때로는 몇 초까지 추가될 수 있습니다. 리디렉션은 때때로 피할 수 없지만, 과도하게 사용될 수 있으며, 소유자가 여러 명인 대규모 웹 사이트에서는 시간이 지남에 따라 누적될 수 있습니다. 웹 사이트 소유자는 리디렉션 사용에 대한 명확한 가이드라인을 마련하고 중요한 웹 페이지에 불필요한 리디렉션이 있는지 주기적으로 검사해야 합니다.

CSS 및 JavaScript 파일 최소화

코드 최소화란 코드 주석, 공백, 불필요한 세미콜론 등 컴퓨터가 코드를 이해하고 실행하는 데 필요하지 않은 모든 것을 제거하는 것을 의미합니다. 이렇게 하면 CSS 및 JavaScript 파일의 크기가 약간 작아져 브라우저에서 더 빠르게 로드되고 대역폭을 덜 차지합니다. 최소화하면 일반적으로 성능이 미미하게 향상되지만, 그래도 중요한 모범 사례입니다.

중요한 웹 사이트 기능에 효과적인 타사 서비스 사용

• 호스팅: 아무리 잘 디자인된 웹 사이트라 해도 원본 서버가 요청에 느리게 응답하면 로딩 속도가 느려집니다. 웹 사이트 소유자는 평균 응답 시간이 200ms 미만이고 안정성이 좋은 서버를 선택해야 합니다.
• DNS: DNS는 도메인(예:example.com)을 페이지 로딩 프로세스의 중요한 부분인 IP 주소로 변환하는 시스템입니다. 웹 사이트 소유자는 웹 호스트의 DNS에 의존하는 대신 결과를 빠르고 안정적으로 제공('확인')하는 DNS 서비스를 선택해야 합니다.
• 캐싱: 웹 사이트 콘텐츠가 요청하는 사용자에게 더 가까이 위치할수록 사용자는 더 빨리 콘텐츠를 받을 수 있습니다. 웹 사이트 소유자는 콘텐츠 전송 네트워크(CDN)를 사용하여 전 세계 여러 위치에 웹 콘텐츠를 캐시해야 사용자 요청이 웹 사이트의 원본 서버에 도달하기 위해 수백 또는 수천 마일을 이동하거나 여러 자율 네트워크를 거치지 않아도 됩니다.
• 사이버 보안: DDoS 공격, 악성 봇, 기타 사이버 공격으로 인해 웹 사이트의 성능이 저하될 수 있습니다. 이 주제는 너무 광범위하여 여기서 자세히 다루기 어렵지만, 웹 사이트 소유자는 정상적인 트래픽의 속도를 저하시키지 않으면서 악성 트래픽을 걸러내는 웹 애플리케이션 보안 제공자를 선택해야 합니다.

웹 페이지의 전환율이란?

웹 전문 용어에서, 사용자는 웹 페이지 디자이너가 원하는 작업을 수행할 때 전환을 하게 됩니다. 예를 들어, 유모차를 디스플레이하는 전자 상거래 페이지에서 사용자는 유모차를 구매하기로 결정하고 '구매' 버튼을 클릭할 때 전환을 합니다. 그러나 웹 페이지는 다양한 목적을 가질 수 있으므로 사용자는 전환을 하기 위해 무언가를 구입할 필요는 없습니다. 사용자 전환의 다른 예로는 연락처 양식 작성 및 제출, 설문 조사 질문에 대한 답변, 웹 사이트의 다음 페이지를 클릭하는 것이 포함됩니다.

전환율은 웹페이지 방문자 중 전환을 한 총 방문자의 비율입니다. 100명의 사용자가 유모차를 광고하는 페이지를 방문하고 그 중 2명의 사용자가 실제로 '구매' 버튼을 클릭하면 전환율은 2%입니다. 전환율 최적화(CRO)는 이 수치를 최대한 높이는 행동입니다. 전환율 최적화는 지속해서 진행해야 하는 프로세스입니다. 페이지의 전환율이 100%가 아닌 한 가능성이 매우 낮기 때문입니다.

전환율과 페이지 트래픽의 비교

전환율은 페이지에 대한 총 트래픽 또는 방문자 수와는 별도로 측정됩니다. 페이지의 전환율이 감소하면 페이지 트래픽이 정확히 동일하게 유지되더라도 전환을 하는 총 사용자 수가 감소합니다. 반대로 페이지의 트래픽이 동일하게 유지되지만, 전환율이 증가하면 총 전환 수가 증가합니다.

사이트 속도는 전환율에 어떤 영향을 미칠까요?

웹 사이트 성능은 전환율에 크고 측정 가능한 영향을 미칩니다.연구에 따르면 페이지 속도가 빠르면 전환율이 향상됩니다.즉, 웹 페이지가 더 빨리 로드될수록 사용자가 해당 웹 페이지에서 대상 작업을 수행할 가능성이 높아집니다.

웹 페이지는 얼마나 빨리 로드되어야 할까요?skilled.co에 따르면 고객의 47%는 웹 페이지가 2초 이내에 로드되기를 기대합니다.또한 skilled.co에 따르면,AI 헬스케어 소프트웨어 회사인 mPulse Mobile의 테스트 결과는 다음과 같습니다.

• 2.4초 만에 로드된 페이지의 전환율은 1.9%였습니다
• 3.3초에서 전환율은 1.5%였습니다
• 4.2초에서 전환율이 1% 미만이었습니다
• 5.7초 이상에서 전환율은 0.6%였습니다
• Walmart에서는 페이지 로드 시간이 1초 개선될 때마다 전환이 2% 증가한다는 사실을 발견했습니다
• COOK에서는 페이지 로드 시간을 0.85초 줄여 전환율을 7% 높였습니다
• Mobify에서는 홈페이지 로드 시간이 100ms 개선될 때마다 전환율이 1.11% 증가한다는 사실을 발견했습니다

이처럼 겉보기에는 작은 전환 증가도 사이트에서 창출하는 수익에 큰 영향을 미칩니다.

전자 상거래 사이트에서 연간 1,000만 달러의 매출을 올리고 웹 사이트의 로드 시간이 1초 개선된 후 전환율이 2% 증가하면(Walmart 사례 연구와 같이) 수익이 200,000달러 증가합니다.