요새 성능 최적화를 공부하면서 성능 최적화를 왜 해야하는 지 이유부터 확실하게 짚고 넘어가면 좋을거 같아서 이렇게 포스팅을 하게 됐다.
🤔 성능 최적화는 왜 필요할까?
1. 더 나은 사용자 경험과 기업 수익 창출
이상적인 웹사이트의 로딩 속도는 2초 이내로 유지되는 것이 좋다. 만약 로딩 속도가 3초를 넘어가게 되면, 그에 따른 부정적인 영향이 나타날 수 있다. 예를 들어, 로딩 시간이 1초씩 증가할 때마다 사용자의 이탈률은 10%씩 늘어나고, 전환율은 7%씩 감소한다.
실제로, 우리가 잘 아는 기업인 Walmart의 사례를 보면 로딩 시간이 1초에서 4초로 증가했을 때 전환율이 급격히 감소한 것을 알 수 있다. 반면, Pinterest는 로딩 시간을 40% 단축하면서 가입자가 15% 증가하는 긍정적인 효과를 얻었다.
이처럼 빠르고 원활한 웹사이트는 사용자가 서비스를 계속 이용하도록 유도해 이탈률을 낮추는 데 중요한 역할을 한다. 결과적으로 사용자가 늘어나고 전환율이 높아져, 기업이 수익을 창출할 수 있는 탄탄한 기반을 마련할 수 있다.
2. 웹 개발의 트렌드 변화
과거에는 새로운 기술을 도입하고 다양한 기능을 추가하는 것이 웹 개발의 주요 목표였다. 하지만 최근의 웹 개발 트렌드는 기술 자체보다는 성능 최적화에 중점을 두고 있는 편이다. 단순히 좋은 기술을 선보이는 것을 넘어, 페이지 로딩 속도, 사용자 인터페이스 반응 속도, 네트워크 효율성을 종합적으로 개선하려는 노력으로 나타나고 있다.
특히, 로딩 속도가 몇 초 차이만 나더라도 사용자의 이탈률과 전환율에 큰 영향을 미치는 만큼, 성능 최적화는 현대 웹 개발 트렌드의 방향성을 잘 보여준다.
3. 경쟁력 있는 프론트엔드 개발자로 성장
오늘날 성능 최적화는 프론트엔드 개발자의 핵심 경쟁력으로 자리 잡고 있다. 웹 애플리케이션의 성능은 사용자 경험과 직결되며, 이는 곧 비즈니스 성공에도 영향을 미친다. 따라서, 성능 최적화를 위한 기술적 역량을 갖추고 이를 프로젝트에 적용할 수 있는 개발자는 시장에서 경쟁력 있는 개발자로 성장할 수 있다.
🤔성능을 결정하는 요소는 어떻게 될까?
성능을 결정하는 요소는 크게 두가지로 볼 수 있다.
1. 로딩 성능
로딩 성능은 사용자가 웹페이지에 처음 접근할 때, 브라우저가 페이지를 다운로드하고 사용자에게 보여주기까지 걸리는 시간을 의미한다.
영향을 주는 요소:
-
자원 크기: HTML, CSS, JavaScript, 이미지 파일 크기. 파일 크기가 클수록 로딩에 시간이 더 걸리기 때문에, 다운로드와 렌더링까지의 시간이 증가한다.
-
네트워크 속도: 사용자 환경에서의 다운로드 속도. 느린 네트워크 환경에서는 데이터를 다운로드하는 데 시간이 더 걸리기 때문에 페이지 로드가 지연된다.
-
HTTP 요청: 여러 개의 요청을 하나로 묶으면 서버와의 왕복 횟수를 줄여 로딩 시간을 단축할 수 있다.
2. 렌더링 성능
렌더링 성능은 웹페이지가 사용자에게 시각적으로 표시되기까지의 시간과 관련이 있으며, 페이지 로드 후 브라우저가 DOM을 구성하고 스타일을 적용하고 최종적으로 화면에 표시하는 데 걸리는 시간을 의미한다.
영향을 주는 요소
-
DOM 크기: HTML 문서의 구조와 요소의 개수. DOM 트리가 커지면 브라우저가 DOM을 처리하는 데 시간이 더 걸려 렌더링이 지연될 수 있다.
-
CSS 스타일 적용: CSS 파일의 크기와 복잡도, 적용되는 스타일 규칙의 수. 스타일 계산과 렌더 트리 생성에 시간이 소요되며, 복잡한 스타일 규칙은 렌더링 성능을 저하시킬 수 있다.
-
JavaScript 실행: JavaScript의 실행 속도. 렌더링을 차단하는 JavaScript 코드(예: document.write(), 동기적 스크립트)는 렌더링 흐름을 방해하고, 스크립트가 실행되는 동안 페이지가 표시되지 않게 만들 수 있다.
-
Reflow와 Repaint: DOM이나 스타일이 변경될 때마다 레이아웃 계산(reflow)과 화면 다시 그리기(repaint)가 발생한다. 과도한 Reflow 및 Repaint는 렌더링 성능을 저하시킬 수 있다.
-
컴포넌트 리렌더링: React나 Vue와 같은 프레임워크에서 컴포넌트의 리렌더링이 불필요하게 자주 일어날 경우, 성능 저하를 초래할 수 있다.
-
이미지 및 미디어 요소: 이미지나 비디오 파일이 크거나 처리 과정에서 렌더링에 영향을 줄 수 있다.
✅성능 분석 방법
웹 성능을 분석할때 아래와 같은 도구를 사용한다.
크롬 개발자도구
번들 사이즈 분석 라이브러리
각 도구 사용법에 대한 정리 글을 링크 걸어놨다. 참고하시면 좋을 거 같다.
✅성능 최적화 방법
위에 도구들을 이용하여 현재 개선해야할 성능의 우선순위를 파악했다면 아래에 기법들을 통해 성능 최적화를 할 수 있다.
1. 리소스 최적화
리소스 최적화는 자바스크립트, CSS, 이미지 파일 등 웹 페이지에서 사용하는 리소스의 크기를 최소화하는 작업이다. 이를 통해 페이지 로딩 시간을 단축시키고, 네트워크 대역폭 사용을 줄일 수 있다.
2. 코드 스플리팅 (Code Splitting)
코드 스플리팅은 애플리케이션에서 필요한 코드만 로드하는 방법이다. 이를 통해 초기 로딩 시간을 단축시킬 수 있다. 사용자가 애플리케이션을 사용하는 동안 불필요한 코드가 로드되지 않도록 하여 성능을 개선한다.
3. 이미지 최적화
이미지는 웹 페이지 로딩 시간에 큰 영향을 미친다. 이를 최적화하면 성능을 크게 향상시킬 수 있다.
4. 캐싱 전략
캐싱은 서버나 브라우저에서 이미 요청된 리소스를 저장하여, 같은 리소스를 다시 요청할 때 불필요한 네트워크 요청을 줄이는 방법이다. 효과적인 캐싱 전략은 페이지 로딩 시간을 크게 단축시킬 수 있다.
성능 최적화 방법에 대해서는 간단하게만 적겠다. 위 방법들은 추후에 하나씩 올릴 예정이다!
출처
혹시라도 잘못된 내용이 있거나 질문사항 있으시면 댓글 남겨주세요! 어떤 댓글이든 달게 받겠습니다!
