Curt Poem

프론트 엔드 공부와 지식 나눔을 위한 블로그

웹사이트 성능 개선 2

웹성능은 어떻게 개선할수 있을까요?

많은 개발자들의 성능 개선을 위해 자바스크립트의 코드를 개선하는 데 집중합니다. 하지만 웹 페이지의 성능에는 자바스크립트 뿐만 아니라 HTML, CSS, 파일의 크기, 네트워크 등 다양한 요소가 영향을 미칩니다. 물론 자바스크립트의 성능에 끼치는 영향이 다른 요소에 비해 큰 경우가 많지만 CSS 또한 분명히 성능에 영향을 끼칩니다. 오늘은 자바스크립트를 제외한 웹 성능을 개선할 때 신경 쓸만한 요소를 살펴보겠습니다.HTML 구조Dom의 깊이HTML 문서의 DOM(Document Object Model) 구조가 복잡하고 깊이가 깊을수록 브라우저가 문서를 렌더링하는 데 더 많은 시간을 소요하게 됩니다. 단순히 DOM에 포함된 HTML 요소의 개수도 영향을 끼치지만 그보다는 어떻게 배치되어 있는 지가 더 큰 ..

개발/기타 2024.09.02

웹사이트 성능 개선 - 파일 크기 줄이기(코드스플리팅과 압축)

웹사이트의 성능은 여러 가지 요소를 이용해 평가할 수 있습니다. 웹사이트의 성능을 개선하기 위한 한 가지 방법으로는 HTML이나 JavaScript 파일의 크기를 줄여 전송 시간을 줄이는 것입니다. 파일의 크기가 작을 수록 파일을 빨리 받아오니 로딩 속도가 빨라지겠죠?실제로 이번에 진행한 프로젝트의 경우 몇몇 라이브러리들로 인해 크기가 상당히 커지게 되었습니다.vite를 이용해 build를 진행하면 코드의 크기가 나오게 되는데, 위의 사진과 같이 2,255.79 kb나 되는 JavaScript 파일로 빌드된 것을 알 수 있죠.코드 스플리팅SPA의 단점 중 하나는 초기 로딩 시간이 길다는 것입니다. SPA는 하나의 페이지로 구성된 웹 애플리케이션이기 때문에 첫 로딩 시에 페이지에서 사용하는 모든 파일을 서..

개발/기타 2024.02.18