22.08.04_TIL

📌 이제 프로젝트까지 남은 시간이 2주정도 남았다.... 어떤 문제가 있더라도 해낼수 있도록 해보자!

📗 오늘 학습한 내용

최적화(Optimization)

주어진 상황에서 원하는 가장 알맞은 결과를 얻을 수 있도록 처리하는 과정

허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정

 

최적화의 필요성 및 효과

1. 이탈률 감소
   • 웹 개발에서의 최적화는 화면을 최대한 빠른 속도로 표시하게 하는 것이다.
   • 페이지 로드가 3초이상 걸리면 53%의 사용자가 사이트를 이탈한다. 그렇다면 화면을 불러오는 시간을 짧게 하여 사용자가 페이지를 이탈할 확률을 낮출 수 있다.
2. 전환율 증가
   • 이탈률이 줄어드면 자연스럽게 전황율이 높아질 확률이 커진다.
   • 전환율: 웹 사이트를 방문한 사용자 중 회원가입, 상품 구매, 게시글 조회, 다운로드 등의 행위를 한 방문자의 비율을 의미
3. 수익 증대
   • 빠른 웹 사이트의 로딩 속도는 이탈률 감소, 전환율 증가, 트래픽 증대, 회원 수 증가로 곧 수익의 증대를 의미한다.
   • 실제 사례로 아마존 로딩 속도가 1초 빨라졌을 때 아마존 판매량은 1%, 구글 검색량은 0.2%가 증대했다.
4. 사용자 경험(UX) 향상
   • 최적화는 효과적인 UX 개선 수단이다.
   • 로딩이 오래 걸릴 경우 스피너, 프로그레스바 같이 로딩 중임을 알려주는 UI를 먼저 표시하여 사용자가 인내심을 갖고 기다리게 하는 방법이 있다.

HTML, CSS 코드 최적화 하기

• 화면을 렌더링 할 때 필요한 HTML, CSS 파일의 코드를 최적화함으로써 렌더링 성능을 향상시킬 수 있다.

HTML 최적화 방법

1. DOM 트리 가볍게 만들기
   • DOM 트리가 깊을수록, 자식 요소가 많을수록 DOM 트리의 복잡도는 커진다. 복잡도가 클 수록 DOM 트리가 변경되었을 때 계산해야 하는 것이 많아짐으로 불필요한 요소를 삭제한다.
2. 인라인 스타일 사용하지 않기
   • 인라인 스타일은 개별 요소에 스타일 속성을 작성해주는 것이기 때문에 클래스로 묶어서 한 번에 작성해도 될 스타일 속성을 중복으로 작성하게 되는 경우가 생기는데 이처럼 불필요한 코드 중복은 가독성을 떨어뜨리며 파일 크기를 증가 시킨다.
   • CSS 파일을 따로 작성하면 단 한 번의 리플로우만 발생하여 렌더링 완료 시점을 단축시킨다.

CSS 최적화 방법

1. 사용하지 않는 CSS 제거하기
   • CSS 파일의 모든 코드의 분석이 끝난 후에 CSSOM 트리가 생성되는데 이때 불필요한 CSS 코드가 있다면 CSSOM 트리의 완성이 늦어진다.
   • 위의 단점 때문에 사용하지 않는 CSS 코드는 제거하는 것이 좋다.
2. 간결한 셀렉터 사용하기
   • 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 되므로 간결하게 사용하는 것이 좋다.

리소스 로딩 최적화하기

1. CSS 파일 불러오기
   • CSSOM 트리는 CSS 코드를 모두 해석해야 구성할 수 있으므로 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.
2. JavaScript 파일 불러오기
   • JavaScript 파일을 다운받아와서 사용하는 경우에는 다운로드 및 스크립트 실행이 완료될 때까지 DOM 생성이 중단된다. 이 시간만큼 렌더링 완료 시간이 늦춰지게 되므로 JavaScript 파일은 DOM 트리 생성이 완료되는 시점인 HTML 문서 최하단에 배치하는 것이 좋다.

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

• 페이지의 대부분의 용량은 코드가 아닌 이미지 파일, 미디어 파일이 차지하기 때문에 용량을 줄이거나 요청의 수를 줄여 사용자 경험을 빠르게 개선할 수 있다.

1. 이미지 스프라이트
   • 박스에 표시한 아이콘 이미지의 경우 각각의 이미지를 서버에 요청할 경우 웹 사이트의 로딩시간이 늘어나게 될 때 사용하는 기법
   • 여러 개의 이미지를 모아 하나의 스프라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.
2. 아이콘 폰트 사용하기
   아이콘 사용이 많을 때, 모든 아이콘을 이미지로 사용하지 않고 아이콘 폰트를 사용하여 용량을 줄일 수 있다.(Font Awesome)
   1. CDN으로 사용하기
      
      • Font Awesome에 가입할 때 발급받은 키트를 HTML 파일 head 요소에 넣어주면 CDN으로 사용할 수 있다.
   2. Font Awesome 모듈 설치하기

WebP 또는 AVIF 이미지 포맷 사용하기

• 전통적인 이미지 포맷 방식은 JPEG, PNG 형식이 아닌 새롭게 등장한 WebP, AVIF를 사용하여 용량을 더욱 감소시킬 수 있다.(20~35%)
• 하지만, 모든 브라우저에서 호환되지 않는다는 단점이 있지만 HTML의 picture 태그를 이용하여 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다.
  • *<picture>: img 요소의 다중 이미지 리소스를 위한 컨테이너를 정의할 때 사용한다.

캐시 사용하기

• 캐시는 다운도르 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용하며, 필요한 리소스를 캐시에서 꺼내와 재사용하면 되기 때문에 네트워크 리소스, 로딩시간을 줄일 수 있다.
• HTTP 요청을 보낼 때 조건부 요청 헤더를 작성하여 캐시를 재사용해도 되는지 확인하면 된다.
  • If-Modified-Since: 캐시된 리소스의 Last-Modified 값 이후에 서버 리소스가 수정되었는지 확인하고, 수정되지 않았다면 캐시된 리소스를 사용한다.
  • If-None-Match: 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.

CDN 사용하기

• CDN? 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다. 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져오기 때문에 데이터가 전달되기 위해 거쳐야하는 서버의 갯수가 크게 줄기 때문에 로딩 속도가 빨라진다.
• 사용가능 서비스
  • CloudFront, Cloudflare 등

트리쉐이킹(Tree Shaking)

나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것을 의미한다.

1. JavaScript 파일의 크기
   • JavaScript 파일 크기의 증가, 요청 횟수의 증가는 렌더링이 늦어진다는 것을 뜻하고, 네트워크 속도가 느린 환경에서 더 큰 병목현상을 유발 합니다. 트리쉐이킹을 통해 파일 크기를 줄여서 최적화를 시킬 수 있다.
2. JavaScript 파일의 실행 시간
   • 다운로드부터 필요한 경우에는 우선 요청을 보내어 파일을 다운받아 온 다음 압축을 해제해야 하고, JS코드를 파싱하여 DOM 트리를 생성한다. 파싱이 끝나면 컴파일을 진행하여 코드를 실행할 수 있는 일련의 과정을 거쳐야 한다.
   • 파일이 커질수록 실행 시간이 점차 늘어날 때, 트리쉐이킹을 통해 최적화를 해야한다.

JavaScript 트리쉐이킹

웹팩 4버전 이상을 사용하는 경우 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.

1. 필요한 모듈만 import 하기
   • import 구문을 사용하여 라이브러리를 불러와서 사용할 때, 라이브러리 전체를 불러오지 않고 필요한 모듈만 불러와서 트리쉐이킹이 가능하다.
2. Babelrc 파일 설정하기
   • Babel은 JS 문법이 구형 브라우저에서도 호환이 가능하도록 ES5 문법으로 변환하는 라이브러리이다.
   • 이때, ES5문법은 require를 사용하여 모든 라이브러리를 불러오기 때문에 Babelrc 파일에 modules: false로 작성하여 ES5문법으로 변환되는 것을 막아주면 된다.
3. sideEffects 설정하기
   • 웹팩은 사이드 이펙트를 일으킬 수 있는 코드의 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다.
   • package.json 파일에서 sideEffects:false를 설정하여 사이드 이펙트가 생기지 않는다고 알려 코드를 제외시킬 수 있도록 한다.(sideEffects:false는 전체 파일에서의 설정이고 특정 파일만 설정할 수도 있다.)
4. ES6 문법을 사용하는 모듈 사용하기
   • ES5 문법을 사용하는 모듈을 통째로 사용하는 경우가 아니라면 ES6 문법을 사용하여 필요한 부분만 사용하는 것이 좋다.

Lighthouse

• 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책을 제공한다.
• 구글에서 개발 한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴이다.
• 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.

Lighthouse 시작하기

1. Chrome 개발자 도구에서 실행하기
2. 크롬에서 검사하고 싶은 페이지의 url을 입력한다.
3. 개발자 도구를 연다.
4. lighthouse 탭을 클릭한다.
5. Generate report를 클릭한다. (Categories에서 특정 지표만 선택하여 검사할 수도 있다.)
6. 검사가 실행 된 후, 결과가 해당 페이지의 개발자 도구내에 생성된다.

Node CLI에서 실행하기

Lighthouse를 설치한다.  → 명령어로 검사르 수행한다. → 명령어로 모든 옵션을 본다.

npm install -g lighthouse

lighthouse <url>

lighthouse --help

Lighthouse 분석 결과 항목

• Performance
  • 웹 성능을 측정한다. 화면에 컨텐츠가 표시되는데 걸리는 시간과 표시된 후 사용자와 상호작용하기 까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다.
• Accessibility
  • 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인한다. 대체 텍스트를 잘 작성했는지, 배경색과 컨텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다.
• Best Practices
  • 웹 페이지가 웹 표준 모법 사례를 잘 따르고 있는지 확인한다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인한다.
• SEO
  • 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인한다. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인한다.
• PWA (Progressive Web App)
  • 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인한다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 컨텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.

Lighthouse의 Performance 측정 메트릭

1. First Contentful Paint
   
   • 성능(Performance) 지표를 추적하는 메트릭이다.
   • 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정한다.
   • 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다.
2. Largest Contentful Paint
   • 뷰포트를 차지하는 가장 큰 컨텐츠의 렌더 시간을 측정한다.
   • 주요 컨텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.
3. Speed Index
   • 성능(Performance) 지표를 추적하는 메트릭이다.
   • 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정한다.
4. Time to interactive
   • 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한다.
     • 페이지에 FCP로 측정된 컨텐츠가 표시되어야 한다.
     • 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록된다.
     • 페이지가 0.05초안에 사용자의 상호작용에 응답한다.
5. Total Blocking Time
   • 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다.
   • FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정한다.
6. Cumulative Layout Shift
   • 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표이다.

 

📘 추가로 공부할 내용

[udemy] React 완벽 가이드 강의 보기 (매일 조금씩 이라도 꾸준히 듣기)

Study원과 함께 진행중인 프로젝트 구현

• 마이페이지 드롭다운 메뉴 구성

📝 중요한 내용

• 최적화란?
• 최적화의 필요성과 효과
• 프론트엔드에서의 최적화 방법
• Ligthhouse를 통한 웹 페이지 개선