웹 성능 최적화 왜 필요한가?

정진범·2024년 10월 27일

글또 웹 성능 최적화 프론트엔드

시작하면서

웹 성능 최적화란 웹페이지를 빠르고 효율적으로 동작하는 작업입니다.
이번에는 프론트 엔드에서 웹 성능 최적화에 대해 이야기하려고 합니다.

웹 성능 최적화 작업을 통해 사용자에게 더 나은 사용자 경험(UX)를 제공할 수 있으며
좋은 사용자 경험 제공하므로써 이는 매출과 수익에 영향 줍니다.

이처럼 웹 성능 최적화 작업 사용자에게 좋은 사용자 경험을 제공하고 비즈니스에도
긍정적인 기여를 할 수 있습니다.

웹 성능 최적화를 해야 하는 이유

비즈니스 관점

웹 성능 최적화는 비즈니스 관점으로 바라볼 수 있습니다.

성능 최적화로 성능이 향상되면 페이지가 빠르게 로드되고 서비스 사용자에게 더 나은 사용자 경험(UX) 제공 할수 있으며 이로 인해 가입률과 전환율을 높이고 이탈률은 낮춰 더 많은 수익 창출이 가능해지면 자연스레 비즈니스에 긍정적인 기여를 할 수 있습니다.

반대로 성능이 저하되어 페이지의 로딩 속도 느리거나 제대로된 화면을 보여주지 못하면 사용자가 이탈률이 높아지고 이는 매출 감소 이어지게 됩니다.

2017년 Think with Google에서 발표한 웹페이지 표시 시간 증가에 따른 이탈률을 나타낸 자료입니다.

페이지 표시 시간이 1초에서 3초 느려진 경우 이탈률이 32% 증가하였고 10초로 느려진 경우 123% 증가 하였습니다.

검색 엔진 최적화(SEO) 관점

SEO는 Google 및 Bing과 같은 검색 엔진에서 웹 페이지를 평가하고 검색 결과에서 순위를 매기는 방법에 맞게 콘텐츠 및 웹 사이트 경험을 조정합니다.

Google에서는 사이트 속도가 검색 순위에 반영된다고 발표하였습니다. SEO의 관점에서는 사용자가 필요한 정보를 쉽게 찾게하는 것이 목표이기 때문에 사용자 경험(UX)가 큰 비중을 차지하여 중요합니다.

사용자가 페이지를 들어갔는데 페이지 로드시간이 길어지면 사용자가 이탈하게 되고 이는 사용자 경험에 부정적인 영향을 미치게 되고 SEO의 평가에도 부정적인 평가를 반영하게 됩니다. 이처럼 성능 최적화는 SEO 관점에서도 큰 부분을 차지하게 되었습니다.

그중 실제 사용자 데이터로 측정된 세 가지 측정항목 LCP, INP, CLS 기반합니다.

사용자 경험(UX) 관점

성능 최적화는 사용자 경험 측면에서도 중요합니다. 웹 페이지가 초기에 빠르게 로딩되어야하고 화면의 로딩되는 순서도 중요한 부분을 차지합니다. 레이아웃이 예상되로 로드 되지 않으면 사용자에게 안좋은 경험을 제공 할 수 있기 때문입니다. 이러한 안좋은 경험은 웹 성능 수치에도 영향을 주는데 웹 성능 지표중 CLS라 지표로 측정이 가능합니다

사용자의 시선은 위에서 아래로 이동하는게 일반적인데 웹 페이지의 로딩 순서도 이에 맞게 위에서 아래로 자연스럽게 로딩되는게 좋은 사용자 경험을 제공 할 수 있습니다.

핵심적인 웹 성능 지표

코어 웹 바이탈은 Google이 웹사이트의 사용자 경험을 측정하기 위해 도입한 주요 웹 성능 지표입니다. 코어 웹 바이탈은 페이지 로딩 속도, 인터랙션, 시각적 안정성 등 사용자 경험에 큰 영향을 미치는 핵심 요소들을 평가합니다. 이 지표는 검색 순위에도 영향을 미치기 때문에 웹사이트의 품질을 높이고, 사용자가 더 나은 경험을 할 수 있도록 관리하는 것이 중요합니다.

코어 웹 바이탈은 세 가지 주요 지표로 구성되어 있습니다.

1.LCP(Largeest Contents Paint)

사용자가 페이지를 로드 했을 때, 가장 큰 컨텐츠(예: 이미지, 텍스트 블록 등)가 완전히 표시되는데 걸리는 시간입니다. 2.5초 이내가 반영되는것이 이상적이며 LCP가 빠를수록 페이지가 빠르게 로드된다고 사용자는 느끼기 때문에 개선이 중요한 지표입니다.

2.FID(First Input Delay)

사용자가 페이지에서 첫 번째로 상호작용(예: 버튼 클릭 등)했을 때, 브라우저가 반응하기까지의 시간입니다. 100ms이하가 이상적이며 사용자가 페이지와 상호작용할 때 지연 없이 반응하도록 하여 페이지의 인터렉티브성을 높여줍니다

3.CLS(Cumulative Layout Shift)

페이지가 로드되거나 콘텐츠가 추가되면서 레이아웃이 변경되는 정도를 측정합니다. 0.1 이하가 이상적이며 페이지의 시각적 안정성을 보장해 사용자가 의도하지 않은 클릭을 하여 불편을 겪지 않도록 합니다.

마치면서

최근 개발을 하면서 기능 구현 만이 아닌 성능 최적화, 사용자 경험(UX)에 대해 많은 관심이 생겼고 이번 글은 프론트 엔드에서 웹 성능 최적화를 해야 하는 이유와 관점, 성능 지표에 대한 간단한 지식들을 정리 해보았는데 웹 성능 최적화를 통해 서비스의 성능을 높이고 비즈니스 적으로 기여 할 수 있다는 것에 대해 인상 깊었습니다.

다음 글은 웹 성능 지표 최적화 또는 성능 최적화 방법에 대해 작성할 예정입니다.