[웹 성능 최적화] 웹 성능 이란?

💻 웹 성능이란?

웹 성능은 콘텐츠가 신속하게 전달되어 사용자가 원하는 콘텐츠를 빠르게 받아볼 수 있는 성능을 의미한다. 사용자가 브라우저 주소창에 URL을 입력 → 특정 사이트에 접속→ 웹 페이지가 로드되기까지 걸리는 시간을 말한다. 즉, 웹 로딩 시간을 의미한다.

✅ 웹 성능이 중요한 이유

웹 로딩 속도가 느리면 사용자가 이탈할 확률이 증가한다는 조사 결과가 있다. 특히 온라인 쇼핑몰 같은 경우 웹 페이지 로딩 속도가 매출과 직결되기도 한다.

웹 페이지 성능이 좋다는 것은 페이지 로딩 속도가 그만큼 빠르다는 것이고, 성능이 좋지 않다는 것은 사용자가 만족할 수 없을 정도로 로딩 속도가 오래 걸린다는 걸 의미한다. 그럼 얼마 만에 페이지가 로드되어야 사용자가 만족할까?

구글 조사 자료에 따르면 페이지가 3초 안에 로딩되지 않으면 53%의 사용자가 이탈한다고 한다. 3초 안에 사용자의 시선을 끌어야 한다고 해서 3초의 법칙이라고도 한다.

🔍 웹 성능 측정 방법

성능에 영향을 주는 요소

웹 성능을 측정하려면 성능에 영향을 주는 요소들을 파악해야 한다. 다양한 요소가 있지만 크게 3가지로 나눠보면 다음과 같다.

• 사용자 환경 : 거주 지역, 4G/5G/Wi-fi 등 네트워크 환경, 브라우저 종류
• 공급자 환경 : 웹 서버 응답 속도, 웹 사이트 백엔드 처리 속도, 프론트엔드 최적화 여부
• 전달 환경 : 유선망과 모바일망 등

웹 성능 측정 도구

성능을 측정할 수 있는 여러 가지 도구가 존재하는데, 그중에서도 대표적인 몇 가지를 살펴보자.

• 크롬 브라우저의 개발자도구

  여러 개발자 도구 중에서도 가장 편리하고 강력한 기능을 제공한다. F12 나 Ctrl + Shift + I 단축키를 통해 개발자 도구를 열 수 있다.

  네트워크 탭을 열면 각 리소스의 크기와 소요된 로딩 시간을 waterfall 차트로 확인할 수 있는데, 어떤 리소스가 로딩 시간을 많이 차지하는지 판단할 수 있다.

  그리고 하단에 보면 DOMContentLoaded 와 Load 시간이 각각 파란색, 빨간색으로 표시된다.

  Chrome 개발자 도구 네트워크 탭

  그 외에도 Performance, Profiler, Lighthouse탭 등에서도 성능을 측정할 수 있다. 자세한 내용은 다른 포스트에서 다룰 예정이다.

• WebPageTest 서비스

  웹 성능에 영향을 주는 6가지 항목을 기준으로 A~F까지 등급을 매겨 알려준다.

  실제 유선망이나 모바일 네트워크, 다양한 기기, 브라우저를 세계 곳곳에 설치하여 실제 사용자 환경에서 테스트해 볼 수 있다.