July 22, 2023
해당 글은 "프론트엔드 최적화 가이드"라는 도서를 기반하여 작성한 글입니다.프론트엔드라는 개발 분야가 등장한지 오랜 시간이 지났고, 그 후 굉장히 빠르게 발전하고 있습니다. 지금까지는 사람들은 새로운 기술이 나오는데 주목했다면 최근에는 성능 최적화라는 주제에 관심을 갖기 시작했습니다.
성능이 저하되면 사용자가 떠나고 매출이 감소한다.
위 문장을 다르게 해석한다면 성능이 향상되면 그만큼 사용자가 늘고 매출이 오른다는 뜻입니다.
이것이 웹 성능 최적화 중요한 이유입니다.
웹 성능을 결정하는 요소는 크게 로딩 성능과 렌더링 성능으로 나눌 수 있습니다.
로딩 성능 : 서버에 있는 웹페이지와 웹페이지에 필요한 기타 리소를 다운로드할 때의 성능
예를들어 웹페이지에 고화질 이미지가 포함되어 있을 때, 느린 인터넷 환경에서는 이 이미지가 매우 늦게 표시될 것입니다.
만찬가지로 HTML, 자바스크립트, CSS 파일의 크기가 크게된다면 다운로드 하는 데 시간이 오래 걸려 사용자에게 웹 페이지가 느리게 표시 될 것입니다.
따라서 로딩 성능을 개성하는 가장 좋은 방법은 다운로드해야 하는 리소스수를 줄이거나 크기를 줄이는 것입니다. 그 밖에는 코드를 분할하여 댜운로드하거나 리소스에 우선순위를 매겨 중요한 리소스를 먼저 다운로드하는 방법이 있습니다.
렌더링 성능 : 다운로드한 리소스를 가지고 화면을 그릴 때의 성늘을 말합니다.
렌더링 성능에 크게 영향을 주는 것은 자바스크립트 코드입니다. 코드를 얼마나 효율적으로 작성했느냐에 따라 화면이 그려지는 속도와 사용자 인터렉션의 자연스러운 정도가 달라집니다.
렌더링 성능을 개선하는 방법은 매우 다양하며, 서비스의 유형에 따라서도 다릅니다. 그래서 자신의 서비스에 필요한 최적화 기법을 적용하려면 브라우저의 동작 원리나 사용하는 프레임워크의 라이브사이클 등 웹 개발의 기본 지식을 이해하고 있어야 합니다.