웹 성능 최적화 필요성 이해하기

웹 성능 최적화 경험이 있으신가요?

참 답변하기 어렵게 느껴지는 것 같아요. 내가 한 게 웹 성능 최적화라고 말해도 되는 부분인가? 확신이 서지 않아 뭔가 항상 더 배워야 할 것 같은 기분이 드는 것 같습니다. 사실 제가 그런 기분입니다.

그래서 웹 성능 최적화에 대해 제가 학습했던 내용들을 훗날의 저를 위해 또 이 글을 볼 누군가를 위해 다시 정리해서 남겨보려고 합니다.

 

우선 최적화란 무엇일까요?

위키백과에서 보면 시스템을 수정해 어떤 면의 작업이 더 효과적으로, 또는 자원을 덜 사용하게 만드는 작업을 말합니다. 캐시, 메모이제이션 등을 통한 방법도 있겠고, 자원 자체를 덜 사용할 수 있는 방법이 있겠죠.

 

왜 최적화 작업이 왜 필요할까요?

인내심의 한계의 시간은 '3초'라고 합니다. 구글 리서치 자료에 따르면 로딩 시간이 3초 이상일 때 32%, 5초 이상일 때 90%, 6초 이상일 때 106%, 10초 이상일 때 123%의 유저 이탈률이 발생했다고 합니다.

우리의 서비스를 이용하고자 하는 유저가 느린 속도로 인해 인내심의 한계로 열심히 만들어놓은 것들을 경험해 버리고 이탈해 버린다면 비즈니스 성장에 큰 문제가 되겠죠? 그러니 최적화 작업은 아주 중요하다고 볼 수 있습니다.

개발 초기 단계부터 성능 최적화를 고려하고, 다양한 환경에서 테스트를 실시하며, 꾸준하게 성능을 모니터링하는 것은 중요합니다. 사용자 경험을 향상하고, 시스템의 확장성을 보장하며, 장기적인 애플리케이션 유지 관리 비용을 줄일 수 있기 때문입니다.

즉, 우리의 애플리케이션을 사용할 사용자를 위해 더 빠른 로딩, 더 나은 사용자 경험, 자원의 효과적인 사용을 제공하기 위해서입니다.

 

그럼 왜 최적화의 중요성을 인지하지 못할까요?

우선 개발하는 환경 속 성능은 너무 좋기 때문입니다. 우리는 고성능의 컴퓨터와 빠른 인터넷 속도로 애플리케이션을 개발하고 테스트를 합니다. 하지만 지하철 안이라던지, 해외 환경으로 인터넷 연결 속도가 느리다던지 실제 사용자들은 다양한 장치와 네트워크 환경에서 애플리케이션을 사용하게 됩니다. 하지만 개발할 당시에는 그 당시 상황을 가정하고 개발하지 않으니 실제 유저의 불만이 오기 전까지는 인지하지 못하고 무심코 지나가게 됩니다.

이미 커져버린 애플리케이션을 최적화 해야할 경우 부담이 되기 때문입니다. 성능의 최적화가 필요하다고 실제 느끼게 되는 시점은 애플리케이션이 점차 거대하고 복잡해졌을 때입니다. 이때는 시스템의 복잡성에 부담감을 느끼게 된다. 최적화를 위해 코드를 수정하는 일이 부담스럽게 다가오기 시작한다.

일이 너무 바빠 최적화를 신경쓸 수 없다. 사실 현업에서 가장 많이 마주치는 상황이 바로 이 경우 아닐까 싶습니다. 빠르게 개발을 만들어내야 하는 입장에서 성능까지 고려하며 개발하기 어렵다고 생각할 수 있을 것 같아요. 하지만 이는 위 커져버린 애플리케이션을 최적화하기 부담스럽게 만드는 상황으로 가는 길일뿐입니다.

 

SPA 관점에서 바라보는 최적화가 필요한 이유

오늘날 우리는 SPA 방식으로 작업을 진행합니다. SSR의 도입이 되었지만, 무조건 SSR이 좋은 게 아니다 보니 CSR의 방식으로도 많이 개발되고 있습니다. (물론 SPA에서도 Next.js와 같은 프레임워크를 사용해 CSR과 SSR을 결합해 초기 로딩에는 SSR, 이후 로딩은 CSR로 사용하는 등 조합해서 사용하기도 합니다.)

SPA(Single Page Application)은 하나의 HTML 페이지에서 자바스크립트를 통해 동적으로 전환하는 방식입니다. 이 방식을 사용하기 위해서는 최초 로딩 시에 필요한 자바스크립트 파일을 모두 불러오고, 이후 페이지 이동이 필요할 때마다 서버 요청 없이 자바스크립트로 렌더링을 진행해 사용자 경험을 끊김 없이 제공합니다. 하지만, 여기서 알 수 있는 문제는 서비스가 커질수록 최초 로딩 시에 불러오는 이 자바스크립트 파일도 같이 무거워지기 때문에 용량을 줄이는 것이 필수적이 되었다는 것입니다.

 

최적화 방법들엔 어떤 것들이 있을까요?

초기 로딩 성능 최적화 : 코드 스플리팅, Dynamic Import, Lazy Loading, 정적 리소스 최적화(이미지, 동영상, 폰트), Pre-rendering, Critical CSS

렌더링 성능 최적화 : memo, useMemo, useCallback을 사용한 가상 DOM 최적화 방식과 컴포넌트 분할 방식, 애니메이션 최적화, 가상화 기법 사용 (보이는 요소만 렌더링), Throttling과 Debouncing, Web Worker(복잡한 연산 백그라운드에서 처리해 메인 스레드 부담 줄이기)

번들 크기를 줄이기 : Tree Shaking(webpack 등을 활용해 사용하지 않는 코드 제거), Third-Party 라이브러리 관리

리소소 낭비를 막기 : 서비스 워커, HTTP 캐시 제어, Pre-fetching과 Pre-loading

SEO 최적화 : 메타 태그와 구조화된 데이터, Lighthouse로 SEO 진단 및 최적화

그 외에도 더 많은 방법이 존재합니다. 결국 성능을 최적화할 수 있는 방법이라면 모두 최적화의 방법이니까요!

상황에 맞는 방법을 하나씩 적용해 사용자 경험을 개선해 나가 보는 것들이 중요할 것 같습니다!

 

이제 이어서 작성할 글들에서 최적화의 방법들에 대해 적용할 수 있는 쉬운 것부터 하나씩 공유해 보도록 하겠습니다!

[FRONT-END/React] - 웹 성능 최적화 - 정적 리소스 최적화