Chapter1. Optimization
1.최적화의 개념에 대해 학습합니다.
2.최적화가 분야 별로 어떤 의미로 사용이 되는지 학습하고, 컴퓨터 공학에서의 최적화에 대해 이해합니다.
3.최적화의 필요성 및 효과에 대해 학습하고, 최적화가 효과적인 UX 개선 수단임을 이해합니다.
Chapter2. Optimization 기법
Chapter2-1. 최적화 기법
4.HTML, CSS 코드를 최적화하는 방법에 대해 학습합니다.
5.HTML 파일에서 JavsScript 파일과 CSS 파일을 불러오는 적절한 위치에 대해 학습하고 그 이유를 이해합니다.
6.브라우저 이미지를 최적화하는 방법에 대해 학습하고, 브라우저 이미지를 최적화할 시 어떤 것을 우선으로 고려해야 하는지에 대해 이해합니다.
7.아이콘 폰트를 사용하는 법에 대해 학습하고, 각 사용법에 대해 이해합니다.
8.캐시를 사용해야하는 이유와 사용 방법을 이해합니다.
9.CDN의 개념에 대해 학습하고, CDN의 특징을 이해합니다.
Chapter2-2. Tree Shaking
10.Tree Shaking의 개념에 대해 학습하고, 어떤 이유로 해당 방법을 이용해 최적화를 진행하면 되는지에 대해 이해합니다.
11.Tree Shaking을 이용한 최적화 방법에 대해 학습하고, 어느 때에 적용할 수 있는지에 대해 이해합니다.
Chapter2-3. Lighthouse
12.Lighthouse의 개념에 대해 학습하고, Lighthouse의 특징에 대해 이해합니다.
13.Lighthouse 사용법을 학습하고, 실제로 어떻게 사용할 수 있는지에 대해 이해합니다.
14.Lighthouse의 분석 결과 항목과 Performance 측정 메트릭에 대해 학습하고, 개선 방향을 잡는 법에 대해 이해합니다.
1.최적화는 허용된 자원의 한계 내에서 주어진 요구사항을 만족시키면서 최선의 결과를 얻는 과정이라고 할 수 있다.
2.컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 한 빠르게 원하는 결과를 얻을 수 있도록 하는 것을 의미한다. 메모리를 조금이라도 덜 소모하거나 연산 횟수가 한 번이라도 더 적은 코드가 더 효율적이고 최적화된 코드라고 할 수 있지만 단순히 메모리나 연산 횟수 외의 트릭을 이용해 더 많은 메모리와 시간을 소모하지만 원하는 데이터는 더 빠르게 얻게 만드는 것도 일종의 최적화라고 볼 수 있을 것 같다.(우선순위 배정, 비실행 코드는 실행 전까지 받아오지 않는 등)
3.최적화는 컴퓨터를 이용해본 사람이라면 구체적인 수치가 없어도 다 공감할 수 밖에 없는데 페이지를 들어갔을 때 일정 시간 반응이 없다면 서비스 자체에 대한 이용욕구가 사라진다. 또한 검색, 반응 등에 일정 시간 이상의 로딩이 계속해서 지속될 경우 선호도, 디자인 등에 관계 없이 더 빠르지만 투박한 대체제를 원할 수 밖에 없게되는 등 UX에서 상당히 높은 부분을 차지하고 있다.
4.HTML의 최적화는 DOM트리를 가볍게 만들고 인라인 스타일을 사용하지 않는(우선순위를 위해 몇몇의 사용은 허용된다) 등이 있으며 CSS의 최적화는 당연하지만 사용하지 않는 CSS제거와 셀렉터 부분을 간단하게 사용해 레이아웃 시간을 단축할 수 있다.
5.CSS는 보여주는 이미지와 관련되어 있기 때문에 HTML 가장 윗부분에 넣어주는게 좋으며(물론 해당 없는 부분들은 쪼개서 실행시, 또는 아래로 내리는 등의 처리를 해주는게 더 좋다.) JS파일은 즉각적인 반응이 필요하지 않은 이상은 HTML 가장 아랫부분에 넣어주는게 일반적이다.
6.이미지 최적화에는 다음과 같은 방법들이 있다.
1.이미지 스프라이트 (많은 양의 이미지를 사용할 경우)
2.아이콘 폰트 사용 (아이콘용 이미지를 자주 사용할 경우)
3.WebP 또는 AVIF 이미지 포맷 사용 (호환되지 않는 경우 대체이미지 사용됨)
7.Font Awesome 모듈을 설치한 후 Font Awesome 사이트에서 사용하고 싶은 아이콘의 정보를 확인한 후에, 알맞게 불러와서 사용하면 된다.
npm i --save @fortawesome/fontawesome-svg-core// 핵심 패키지 설치
npm i --save @fortawesome/free-solid-svg-icons// 아이콘 패키지 설치 (무료)
npm i --save @fortawesome/free-regular-svg-icons// 아이콘 패키지 설치 (무료)
npm i --save @fortawesome/free-brands-svg-icons// 아이콘 패키지 설치 (무료)
npm i --save @fortawesome/react-fontawesome@latest// Font Awesome React 구성 요소 설치
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
<FontAwesomeIcon icon="check-square" />
https://fontawesome.com/v5/docs/web/use-with/react#features참조하기
8.캐시는 한번 받았던 데이터를 그대로 사용할 수 있기 때문에 데이터를 주고받는 시간을 아낄 수 있어 데이터를 절약할 수 있지만 그 외에 즉각적인 반응을 가능하게 하기 때문에 UX면에서도 우수하기 때문에 일반적으로는 사용하는 것이 좋다.
9.CDN은 물리적 거리의 한계(latency)를 극복하기 위해 세계 곳곳에 분산된 서버에 콘텐츠를 저장했다. 이를 통해 유저는 가까운 곳에서 더 적은 서버를 거치고 데이터를 빠르게 받을 수 있다.
10,11.Tree Shaking은 나무를 흔든다는 이름처럼 뼈대를 남긴 채 쓸모없는 코드(잔가지)를 제거하는 것을 의미한다. 사용법은 아래와 같다.
1. 필요한 모듈만 import 하기 //불러오지 않은 코드는 빌드할 때 제외되므로 코드의 크기를 줄일 수 있게 된다.
2. Babelrc 파일 설정하기 //ES5문법은 import를 지원하지 않기 때문에 commonJS 문법의 require로
변경시키는데, 이 과정은 트리쉐이킹에 큰 걸림돌이 되므로 Barbelrc 파일에 modules 값을 false로
설정하면 ES5로 변환하지 않는다.
3. sideEffects 설정하기 //package.json 파일에서 sideEffects를 설정하여 사이드 이펙트가 생기지
않을 것이므로 코드를 제외시켜도 됨을 웹팩에게 알려줄 수 있다.
4. ES6 문법을 사용하는 모듈 사용하기 //필요한 부분만 import 해서 사용하지 않는 코드는 빌드할 때
제외되기 때문에 ES6가 유리하다.
12.Lighthouse는 구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴로서 성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있다.
13.크롬 개발자도구에서 console이 있는 메뉴바 우측으로 이동하면 존재하는 Lighthouse를 누르면 현재 페이지를 측정한다. 나온 값에는 각자 설명이 있기 때문에 해당하는 방향으로 최적화를 진행할 수 있다.
14.Performance의 측정 메트릭에는 다음과 같은 항목들이 있다.
1. First Contentful Paint - 첫 번째 랜더링 시간 (1.8초 이하)
2. Largest Contentful Paint - 가장 큰 콘텐츠 랜더링 시간 (2.5초 이하)
3. Speed Index - 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지 측정 (3.4초 이하)
4. Time to interactive - 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간 (3.8초 이하)
5. Total Blocking Time - 페이지가 유저와 상호작용하기까지의 막혀있는 시간으로 모든 항목마다
각 0.05초가 초과되는 시간만 합해서 계산한다.
6. Cumulative Layout Shift - 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표
15(추가).코드스테이츠에서 Lighthouse를 실행하니 Performance의 Opportunities에는 다음과 같은 항목들이 있었다.
1.Defer offscreen images 17.7 s
Consider lazy-loading offscreen and hidden images after all critical
resources have finished loading to lower time to interactive.
문제 - 화면에 나오지 않는 이미지까지 로딩한다.
해결법 -무거운 이미지들 및 상호작용이 되지 않은 애들의 로딩 시간을 중요한 리소스의 뒤로 미루기
2.Reduce unused JavaScript
Reduce unused JavaScript and defer loading scripts until they are required
to decrease bytes consumed by network activity.
문제 - 안쓰는 자바스크립트가 많다.
해결법 - 사용하지 않는 자바스크립트를 줄이고 네트워크의 활동?에 필요할 때 까지 로딩을 지연시킨다?
3.Use HTTP/2 5.44 s
HTTP/2 offers many benefits over HTTP/1.1, including binary headers and
multiplexing.
문제 - HTTP/2 미사용.
해결법 - 이진 헤더 등 여러가지 기능이 있는 HTTP/2를 사용하기
4.Minify JavaScript 1.65 s
Minifying JavaScript files can reduce payload sizes and script parse time.
//React
If your build system minifies JS files automatically, ensure that you are
deploying the production build of your application. You can check this with
the React Developer Tools extension.
문제 - 자바스크립트가 크다!
해결법 - 파일을 축소하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있으며 리액트에서는
개발자 도구에서 배포시 자동 축소 여부를 확인할 수 있다.
5.Eliminate render-blocking resources 1.26 s
Resources are blocking the first paint of your page. Consider delivering critical
JS/CSS inline and deferring all non-critical JS/styles. Learn more.FCPLCP
문제 - 리소스가 렌더링을 막고있음
해결법 - 중요한 JS/CSS는 인라인을 제공해 우선순위를 두고 나머지 모든 JS/CSS는 후순위로 미루는방법을 고려하기
6.Properly size images 0.75 s
Serve images that are appropriately-sized to save cellular data and improve load time.
문제 - 이미지가 너무 무겁다.
해결법 - 로딩시간과 실시간 데이터 사용량을 줄이기 위해 이미지 크기를 적절하게 조절하기
7.Enable text compression 0.65 s
Text-based resources should be served with compression (gzip, deflate or
brotli) to minimize total network bytes.
문제 - 텍스트 미압축?
해결법 - 텍스트 기반 리소스는 압축을 해서 제공되야 한다.
8.Reduce unused CSS 0.43 s
Reduce unused rules from stylesheets and defer CSS not used for
above-the-fold content to decrease bytes consumed by network activity.
문제 - 미사용 CSS
해결법 - 사용하지 않는 CSS를 제거하고 즉각 로딩이 필요하지 않은 CSS(페이지네이션 밖의 데이터 CSS 등)의 로딩을 연기한다.
9.Preconnect to required origins 0.36 s
Consider adding `preconnect` or `dns-prefetch` resource hints to establish
early connections to important third-party origins.
문제 - 오리진에 조기연결을 하지 않음
해결법 - 'preconnect' 또는 'dns-prefetch'를 사용해 조기연결방법을 사용하기
오늘은 과정 내에서 시킨 블로깅이 회고의 내용과는 살짝 동떨어져 있어서 15번으로 추가를 해봤다.