최적화(optimization)

최적화

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정
최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이다. 수익과 관련되는 분야에서는 이익을 최대로 내는 과정을 말하기도 한다
최적화는 보통 주어진 조건으로 최대 효율을 낼 수 있도록 하는 것을 의미

최적화의 필요성 및 효과

1. 이탈률 감소
   웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것
   페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈
   또한 페이지 로드 시간이 길어지면 사이트 방문자가 이탈률이 폭발적으로 증가
   반대로, 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면, 사용자의 이탈률을 효과적으로 줄일 수 있다는 의미

2. 전환율 증가
   전환율이란, 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미

3. 수익 증대
   빠른 웹 사이트 로딩 속도는 수익 증대까지 이어질 수 있습니다

4. 사용자 경험(UX) 향상
   최적화는 효과적인 UX 개선 수단

HTML, CSS 코드 최적화하기

HTML 최적화 방법

1. DOM 트리 가볍게 만들기
   DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커집니다
   불필요하게 깊이를 증가시키는 요소가 있다면 삭제
   ex) < div > 태그가 쓸때없이 있음

2. 인라인 스타일 사용하지 않기
   인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에, 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생긴다. 이처럼 불필요한 코드 중복은 가독성을 떨어뜨릴 뿐 아니라 파일 크기를 증가시킨다
   ex ) < div style= ~~ > 가 쓸때없이 많음

CSS 최적화 방법

1. 사용하지 않는 CSS 제거하기
   CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성됩니다. 그만큼 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어집니다.

2. 간결한 셀렉터 사용하기
   셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 됩니다
   ex ) .cart_page .cart_item #firstItem { ... } 이렇게 X
   .cart_item { ... } 이렇게 O

리소스 로딩 최적화하기

1. CSS 파일은 HTML 파일 상단의 head 요소 안에서 불러오는 것이 좋습니다.
2. JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋습니다.

브라우저 이미지 최적화하기

1. 이미지 스프라이트
   이미지 스프라이트 기법은 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법

2. 아이콘 폰트 사용하기
   Font Awesome 사용

3. WebP 또는 AVIF 이미지 포맷 사용하기
   전통적으로 사용하는 JPEG 또는 PNG 형식이 아닌 새롭게 등장한 이미지 포맷인 WebP 또는 AVIF를 사용하여 용량을 더욱 감소

4. CDN 사용하기

캐시 사용

캐시(Cache)는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용

1. 서버에서 logo.jpg라는 이미지를 받아오는 요청을 보낸다고 해봅시다. 첫 번째 요청에서는 이미지를 통째로 받아오게 됩니다 (이미지 파일이 60초동안 유효)

2. 두 번째 요청부터는 캐시를 우선 조회하게 됩니다 캐시에 데이터가 존재하면서 아직 60초가 지나지 않아 유효하다면 캐시에서 해당하는 데이터를 가져와서 사용

3. 만약 유효 시간이 60초가 지났다면? 서버에서 다시 이미지를 받아오게 됩니다

캐시 검증 헤더와 조건부 요청

캐시 유효 시간은 지났지만, 서버에서 다시 받아와야하는 파일이 캐시에 저장되어 있는 파일과 완전히 동일한 경우 이때도 똑같은 파일을 다시 받아와야하는 경우가 발생합니다. 이럴 땐 유효 시간이 지났다고해도 굳이 똑같은 파일을 다시 받아올 필요 없이 서버의 파일과 캐시의 파일이 동일한지 확인해서 재사용 할 수 있다.

트리쉐이킹

트리쉐이킹(Tree Shaking)은 말 그대로 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미

1. 필요한 모듈만 import 하기

2. Babelrc 파일 설정하기
   Babel은 자바스크립트 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리

3. sideEffects 설정하기

4. ES6 문법을 사용하는 모듈 사용하기

Lighthouse

사이트를 검사하여 성능 측정을 할 수 있는 도구
Lighthouse는 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공

Lighthouse 시작하기

1. 크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
2. 개발자 도구를 엽니다.
3. lighthouse 탭을 클릭합니다.
4. Generate report를 클릭합니다. Categories에서 특정한 지표만 선택하여 검사할 수도 있습니다.
5. 대략 30-60초간 검사가 실행됩니다. 그 후 아래와 같이 리포트가 해당 페이지의 개발자 도구내에 생성됩니다.

Lighthouse 분석 결과 항목

1. Performance
   Performance 항목에서는 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.

2. Accessibility
   Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

3. Best Practices
   Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.

4. SEO
   SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, < meta > 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

5. PWA (Progressive Web App)
   PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

Lighthouse의 Performance 측정 메트릭

1. First Contentful Paint
   First Contentful Paint, 줄여서 FCP는 성능(Performance) 지표를 추적하는 메트릭입니다.
   FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다
   우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 합니다.

2. Largest Contentful Paint
   Largest Contentful Paint, 줄여서 LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정합니다

3. Speed Index
   Speed Index는 성능(Performance) 지표를 추적하는 메트릭입니다. Speed Index는 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정합니다.

4. Time to interactive
   Time to interactive, 줄여서 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정합니다.

5. Total Blocking Time
   대부분의 사용자는 0.05초가 넘는 작업에는 응답이 올때까지 계속 키보드를 두드리거나 마우스를 클릭하기 때문에 페이지가 느리다고 인식합니다. 이를 개선하기 위한 지표가 TBT입니다

6. Cumulative Layout Shift
   Cumulative Layout Shift, 줄여서 CLS는 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표입니다. 이 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는 지를 측정할 수 있습니다.