웹 APP의 최적화 (Optimaization)
최적화는 주어진 조건 내에서 최대한의 효율을 낼 수 있도록 하는 것을 의미한다.
이때, 프론트엔드에서 최적화는 얼마나 빠르게 화면을 띄울 수 있는지 를 의미한다.
최적화 (optimaization) 의 필요성
1) 이탈율 감소
최적화가 잘 되지 않은 웹페이지의 경우, 화면 로딩에 오랜 시간이 걸린다.
이처럼 페이지 이동 간의 화면 로딩 시간이 길어질 경우 사용자의 웹 이탈 확률이 증가한다.
2) 전환율 증가
반대로, 이탈율이 감소할 경우 전환율은 증가하게 된다.
이때, 전환율은 해당 웹을 이용중인 사용자가 회원가입, 상품구매, 다운로드 등의 단순한 웹 방문자에서 웹 서비스 이용자가 되는 비율을 의미한다.
최적화에 실패하여 좋지 않은 UX를 제공한 경우, 이용자는 금새 웹을 이탈하게 되고 이는 웹 서비스를 이용하는 이용자가 많지 않음을 의미한다.
3) 수익 증대
웹 사이트의 빠른 로딩 속도는 단지 위와 같은 사항만 연관되는 것이 아니라 수익 증대와도 깊은 연관성을 가진다.
이탈률 감소, 전환율 증가는 웹 사이트의 트래픽 증대와 회원 수 증가로 이루어지고 이는 수익 증대를 의미한다.
4) 사용자 경험(UX) 향상
사실, 위에서 언급한 최적화의 목적은 궁극적으로 사용자 경험(UX)을 향상시키는 것이 중점 이다.
최적화는 웹 APP의 UX를 개선하는 효과적인 수단이다.
만약, 웹 APP의 페이지 로딩 시간을 더 이상 개선할 수단이 남지 않은 경우 로딩의 상태를 알려주는 UI를 통해 방문자의 이탈 시간을 조금 늦추는 방법도 존재한다.
하지만, 해당 수단은 방문자의 웹 사이트 체류 시간을 늘릴 뿐 궁극적인 개선이라고 볼 수는 없다.
따라서 위와 같은 사항들에 대한 고민이 있는 경우, 웹 APP의 페이지 로딩을 개선하는 것이 가장 좋다.
최적화 (Optimaization) 의 기법
HTML을 통한 최적화 (Optimaization)
1) DOM 트리 경량화하기
DOM 트리의 Deps가 깊고 자식 node의 갯수가 많을수록 DOM 트리의 복잡도는 증가한다.
따라서, 불필요하게 DOM 트리를 복잡하게 하는 node의 경우 제거 해야 한다.
2) inline으로 Style 정의하지 않기
인라인 스타일은 개별 요소에 스타일을 작성하는 것이므로 보다 상위의 스타일 시트에서 중복되는 속성을 설정하는 경우가 곧잘 존재한다.
이처럼, 중복되거나 불필요한 스타일의 적용은 가독성을 감소시키고 파일 크기를 증가시킨다.
CSS를 통한 최적화 (Optimaization)
1) 사용하지 않는 CSS 제거하기
웹 사이트의 렌더링은 DOM 트리와 CSSOM 트리의 생성 이후 시작된다.
즉, CSS 내 불필요한 코드의 존재는 CSSOM 트리의 완성을 늦추는 요소로 제거해야 한다.
2) 간결한 Selector 사용하기
CSS Selector가 복잡할 수록 스타일의 계산과 레이아웃에 더 많은 시간을 소모하게 된다.
따라서, CSS 작성 시 최대한 간결한 Selector를 이용하는 것이 좋다.
// 특별한 목적 없이 다중으로 클래스를 선택할 경우
.class1 .class2 .class3 {
...
}리소스 로딩 최적화 (Optimaization)
1) HTML 내 CSS 파일의 호출
화면을 렌더링할 때 브라우저는 DOM 트리와 CSSOM 트리를 생성한다.
HTML 문서를 파싱하는 과정에서 DOM 트리는 순차적으로 구성되지만
CSSOM 트리는 호출된 CSS 파일이 모두 읽혀졌을 때 구성할 수 있다.
따라서, CSSOM 트리를 가능한 빠르게 생성할 수 있도록 HTML 문서의 최상단에 배치하는 것이 좋다.
2) HTML 내 JS 파일의 호출
JavaScript는 DOM 트리와 CSSOM 트리를 동적으로 변경할 수 있다.
이는 HTML 파싱 중에 <script> 요소를 만날 경우 JavaScript가 실행되며 이전까지 생성된 DOM 만 접근할 수 있다.
또한, 해당 <script>가 해당 요소 이후에 렌더링 될 DOM을 수정하는 경우 의도대로 반영되지 않을 수 있다.
즉, <script> 요소는 실행 시 해당 요소 이전까지의 DOM에만 접근할 수 있고 실행이 완료되기 전까지 브라우저의 HTML 파싱을 통한 DOM 트리 생성은 중단된다.
따라서 JavaScript 파일의 호출을 HTML 문서 내 최하단에 배치하는 것이 좋다.
브라우저 이미지 최적화 (Optimaization)
1) 이미지 스프라이트 사용하기
2) 아이콘 폰트 사용하기
3) Webp 또는 AVIF 이미지 포맷 사용하기
캐시(Cache) 관리하기
JavaScript 트리쉐이킹
Lighthouse
