[프로그래밍인사이트] 프론트엔드 성능 최적화는 왜 필요할까?

이미지 클릭 시 도서 구매 링크로 이동합니다. [이미지출처: yes24]

 

성능 최적화, 왜 필요할까?

현재 웹 개발은 빠른 속도로 성장하고 있습니다. 지금까지 새로운 기술에 집중했다면 이제는 성능 최적화 이슈에 집중하고 있는 추세입니다. 프론트엔드 개발자라면 아마 한 번씩을  고민하게 되는 성능 최적화, 도대체 성능 최적화가 무엇이고 어떻게 해야 하는 것일까요? 실제 기업 JD를 살펴보면 "최적화 기법을 이해하고 활용할 수 있는 개발자"를 요구하고 원하고 있습니다. 이러한 지원자격에 충족하고자 성능 최적화 기법을 배우고 실습을 통하여 최적화 경험을 쌓아보고자 합니다.

저는 "프론트엔드 성능 최적화 가이드" 책을 통해 최적화 기법을 학습하고자 하며 해당 도서 정보는 링크로 남겨놓겠습니다.

 

성능 최적화는 어떻게 이루어질까?

웹 성능을 결정하는 요소는 로딩 성능와 렌더링 성능로 구분할 수 있습니다. 

 

로딩 성능

로딩 성능은 서버에 있는 웹 페이지와 필요한 리소스를 다운로드할 때의 성능을 말합니다.

예를 들어 웹 페이지가 고화질 이미지를 포함하고 있을 때 브라우저는 이미지를 로드하는 데에 많은 시간을 소요하여 이미지가 늦게 나타나는 현상을 볼 수 있습니다.

웹 페이지의 로딩성능을 개선하는 방법으로는 HTML 코드를 최적화하고, CSS 파일의 크기를 줄이는 등 다양한 방법들이 존재합니다. 또한 불필요한 처리나 중복 작업을 줄이고 필요한 요소만 먼저 다운로드하는 등의 방법을 통해 최적화를 적용할 수 있습니다.

 

렌더링 성능

렌더링 성능은 다운로드한 리소스를 가지고 사용자에게 웹 페이지를 제공하는 데 걸리는 시간을 의미합니다. 이때 렌더링 성능에 크게 영향을 주는 것은 자바스크립트 코드로 개발자가 얼마나 건강한 코드를 작성하고 중복 작업을 줄였는지에 따라 파일을 파싱하고 렌더링 하는 속도와 인터랙션의 자연스러운 정도가 달라집니다.

 

 

프론트엔드 성능 최적화 가이드를 읽게 된 계기

단순히 기능만 구현하는 것이 아니라 유지보수성을 고려한 코드 작성과 최적화 기법에 대한 이해는 개발자로서 중요한 역량입니다. 또한, 다른 전문성이 높은 개발자들과 경쟁하기 위해서는 기초적인 기술에 충실하면서도 자신만의 차별화된 기술을 개발하고 발전시켜 나가는 노력이 필요합니다. 가이드 실습을 통해 여러 최적화 기법을 습득하고 적용해 보면서 코드의 효율성과 성능을 개선하여 실무 개발에 큰 도움이 되고자 합니다.