웹성능 최적화 네이버 UI개발
사용자에게 최적의 인터넷 환경을 제공하기 위해서 프론트엔드 UI개발에서 고려해야할 점들은 생각보다 많습니다. 이번 포스팅에서는 필자가 웹성능을 향상 시키기 위해 사용했던 다양한 방법을 정리하여 소개하고자 합니다.
- 서비스에서 프로젝트 작업시 불필요한 CSS라이브러리를 베재하고 꼭 필요한 스타일 요소만 추가하였습니다. CSS 리소스는 랜더링을 차단하는 요소이기 때문에, 브라우저에서 필요한 기본 스타일만 사용해야합니다. 물론, 리액트로 작업 환경이 바뀌면서 CSS in JS구현이 가능해졌지만, 자바스크립트 프레임워크를 지원하지 않는 서비스에서는 꼭 고려해야할 요소 입니다. 실제로 CSS in JS를 구현하기 위해 styled-components 테스트 및 사용을 고려하였습니다.
2. HTTP2.0을 사용하고 있지만, 아직까지 개별 이미지 보다는 스프라이트 이미지를 적용하고 있습니다. 이미지 최적화를 위해 사용한 방법 중 하나는 아이콘 폰트이며, 다른 하나는 SVG 입니다. 아이콘폰트는 텍스트로 인식되어 CSS 스타일이 적용되며 자유롭게 사이즈를 변형할 수 있습니다. SVG 또한 벡터 기반으로 사이즈 변형과 퍼포먼스에서 뛰어난 성능을 보여 줍니다. 다만 브라우저 캐시가 되지않는 다는 단점이 있습니다.
3. 로딩 애니메이션을 사용하기 위해 기존에는 GIF를 많이 사용해 왔습니다. 실제 서비스에서 GIF는 HTTP요청을 증가시킬 뿐만 아니라, 디자인 변경이 유연하지 않아서 수정이 매우 번거로운게 사실입니다. 그래서 업무 시 GIF를 제거하고 CSS애니메이션을 최대한 활용하여 로딩바를 구현하였습니다. 그 결과 PC, 모바일 모두 하나의 코드로 대응이 가능해졌으며 컬러값이나 위치 수정이 편리해졌습니다.
4. 마크업상에서 성능 최적화를 위한 노력에도 불구하고 더 빠른 SPA 환경 구축이 필요했으며 이를 위해 등장한 것이 자바스크립트 모던 프레임워크(Angular, React, Vue etc..)입니다. 현재 제가 서비스하는 곳은 리액트 환경으로 작업을 진행하고 있으며 Virtual DOM을 활용하여 필요한 부분만 랜더링이 되는 방식을 도입하였습니다. 이는 불필요한 랜더링 과정을 생략하고 성능 향상을 가져왔습니다.
