사이트 속도가 중요한 이유 | 웹 페이지 속도 개선

사이트 속도란?

손님이 식사를 위해 식당에 앉아 있는데 웨이터의 서비스가 느리다면 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 파일을 오하이오주에 있는 데이터 센터에서 호스팅하고 이미지 파일은 플로리다주에 있는 데이터 센터에서 호스팅하는 경우를 생각해 보면, 미국 서부에 있는 사용자는 이 모든 파일들이 자신의 장치까지 수 천 킬로미터를 이동해야 하므로 상당 시간 기다려야만 합니다.

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

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

Cloudflare의 무료 웹 사이트 속도 테스트에 대한 정보는 여기에서 확인할 수 있습니다.

중요한 성능 지표

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

Cloudflare를 이용해 웹 사이트 속도가 빨라지는 방법

콘텐츠 전송 네트워크(CDN: Content Delivery Network)를 이용하는 웹 사이트는 로드 속도가 훨씬 빠릅니다. Cloudflare CDN은 콘텐츠를 최종 사용자와 가까운 곳에 저장하기 위해 전 세계 330개 도시에 콘텐츠를 캐시합니다. 이렇게 하면 사용자 장치에서 출발한 요청이 원본 서버까지 먼 길을 가지 않기 때문에 대기 시간이 감소하며 결과적으로 로드 시간 및 RTT가 훨씬 짧아집니다.