컴퓨터 공학에서의 최적화는 가능한 적은 리소스를 소모하면서 가능한 빠르게 원하는 결과를 얻을 수 있도록 하는 것
웹 개발에서의 최적화는 주어진 조건 아래에서 최대한 빠르게 화면을 표시하도록 만드는 것이다.
▶ 최적화의 필요성 및 효과
1. 이탈률 감소
화면을 불러오는 시간이 길어지면 사용자가 페이지를 이탈할 확률이 높아진다.
페이지 로드가 3초 이상 걸리면 53%의 사용자가 사이트를 이탈한다고 하는데, 웹 사이트의 성능 최적화를 통해 페이지 로딩 속도를 줄이면 사용자의 이탈률을 효과적으로 줄일 수 있다.
2. 전환율 증가
이탈률이 줄어들면 전환율이 높아질 확률이 커지는데, 전환율은 웹사이트를 방문한 사용자 중 회원가입, 상품 구매, 등의 행위를 한 방문자의 비율을 의미한다.
3. 수익 증대
이 또한 이탈률과 연관이 되어 있다. 이탈률 감소로 인한 전환율 증가는 트래픽 증대 및 회원 수 증가로 이어지고, 곧 수익 증대를 의미한다.
4. 사용자 경험(UX) 향상
최적화는 효과적인 UX 개선 수단이다. 페이지 로딩이 빠를수록 UX는 향상되기 때문에 이미 페이지 로드 속도가 빠른 편이라고 해도 최적화를 통해 UX가 더욱 향상할 수 있다. UI를 통해 로딩중일 때 로딩 중임을 알려줌으로써 UX를 향상 시킬 수 있지만, 임시방편일뿐이다. 결국 이탈률 감소와 UX 향상 효과를 동시에 보기 위해서는 웹 사이트 성능 최적화를 진행하는 것이 가장 좋다.
▶ HTML, CSS 코드 최적화
1. HTML 최적화 방법
DOM 트리 가볍게 만들기 - 불필요하게 깊이를 증가시키는 요소가 있다면 삭제한다.
인라인 스타일 사용하지 않기 - 클래스로 묶어서 한 번에 작성할 수있는 것은 묶어서 사용한다.
2. CSS 최적화 방법
사용하지 않는 CSS 제거하기 - CSS파일의 모든 코드 분석이 끝난 후에 CSSOM 트리가 생성되는데, 그만큼 불필요한 CSS코드가 있다면 CSSOM 트리의 완성이 늦어진다.
간결한 셀렉터 사용하기 - 셀렉터가 복잡할수록 스타일 계산과 레이아웃에 시간을 더 많이 소모하게 된다.
▶ 리소스 로딩 최적화하기
1. CSS 파일 불러오기
화면을 렌더링 할 때는 DOM트리와 CSSOM 트리가 필요한데, DOM은 한 줄 한 줄 읽으면서 구성가능하지만 CSSOM은 모두 해석해야 구성할 수 있다. 따라서 CSSOM 트리를 가능한 빠르게 구성할 수 있도록 HTML 문서 최상단에 배치하는 것이 좋다.
2. JavaScript 파일 불러오기
Js를 불러 올 때 HTML 코드 중간에 있으면 이후 생성될 DOM을 수정하는 코드가 있을 경우 의도대로 표시되지 않는다.
또한 Script 실행이 완료되기 전까지 DOM 트리 생성이 중단되기 때문에 HTML 문서 최하단에 배치하는 것이 좋다.
▶ 브라우저 이미지 최적화하기
페이지의 대부분 용량은 이미지 파일과 같은 미디어 파일이 차지한다. 따라서 이미지의 용량을 줄이거나 요청의 수를 줄여야한다.
1. 이미지 스프아리트
클라이언트에서 서버 요청이 증가할수록 로딩 시간은 늘어난다. 따라서 웹 페이지를 로드하는데 필요한 서버 요청 수를 줄이기 위해 이미지 스프라이트 기법을 사용할 수 있다.
여러 개의 이미지를 모아 하나의 스픙라이트 이미지로 만들고 CSS의 background-position 속성을 사용해 이미지의 일정 부분만 클래스 등으로 구분하여 사용하는 방법이다.
2. 아이콘 폰트 사용하기
이미지가 아니라 아이콘 폰트를 사용하여 용량을 줄일 수 있다. 대표적으로 Font Awesome이 있다.
가입해서 받은 키트를 HTML 파일에서 <head> 요소에 넣고 사용한다.
// 핵심 패키지 설치
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
// Font Awesome React 구성 요소 설치
npm i --save @fortawesome/react-fontawesome@latest
npm 설치 후 i 태그를 이용해 사용한다.
3. Webp 또는 AVIF 이미지 포맷 사용하기
새롭게 등장한 이미지 포맷으로, 용량을 기존 이미지 파일보다 더 감소시킬 수 있다.
모든 브라우저에서 호환되지 않는다는 단점이 있다.
<picture> 태그를 이용해 각 브라우저의 호환에 맞도록 분기를 대체할 수 있다. <source> 태그 내의 srcset에 정희한 WebP 포맷을 지원하지 않는다면 <source> 태그는 무시된다.
캐시는 다운로드 받은 데이터나 값을 미리 복사해 놓는 임시 장소를 뜻하며, 데이터에 접근하는 시간이 오래 걸리는 경우나 값을 다시 계산하는 시간을 절약하고 싶은 경우에 사용한다. 캐시를 사용하면 리소스를 매번 다운로드 받을 필요 없이 캐시에서 꺼내와 재사용하면 되기 때문에 네트워크 리소스는 물론 로딩 시간을 줄일 수 있다.
HTTP 요청을 보낼 때 조건부 요청 헤더를 작성해 캐시를 재사용해도 되는지 확인해주면 된다.
If-Modified-Since : 리소스 수정됐는지 확인하고 수정 안됐으면 캐시된 리소스 사용
If-None-Match : 캐시된 리소스의 ETag 값과 현재 서버 리소스의 ETag 값이 같은지 확인하고, 같으면 캐시된 리소스를 사용한다.
보통 위 두 종류의 헤더를 동시에 사용한다. 매칭되는 응답 헤더가 없는 경우 재사용할 수 있는 경우에도 리소스를 다시 받아와야하는 경우가 생길 수 있기 때문이다.
▶ CDN 사용하기
CDN은 콘텐츠를 좀 더 빠르고 효율적으로 제공하기 위해 설계되었다.
물리적 거리의 한계로 인한 네트워크 지연을 해결하기 위해 분산된 서버에 콘텐츠를 저장한다.
CDN은 유저가 가까운 곳에 위치한 데이터 센터의 데이터를 가져오기 때문에 거치는 서버의 개수가 적어져 로딩 속도가 빨라진다.
▶ Tree Shaking
나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것
Js 비중이 높아지면서 Js 파일의 크기를 줄일 필요가 생김
웹팩 4버전 이상을 사용하는 경우 ES6 모듈을 대상으로 기본적인 트리쉐이킹을 제공한다.
Create React App을 통해 만든 react 애플리케이션도 트리쉐이킹이 가능하다.
React에서 필요한 것만 import를 해서 트리쉐이킹을 해준다.
Barbelrc 파일을 이용해 "modules"를 false로 설정해 ES5로 변환되는 것을 막을 수 있다.(ES5는 import를 지원하지 않아 require로 불러오는데 모든 모듈을 불러오기 때문에 따로 안불러올 것들을 지정해줘야 한다.)
웹팩은 sideEffect를 일으킬 수 있는 경우, 사용하지 않는 코드라도 트리쉐이킹 대상에서 제외시킨다. 따라서 package.json 파일에서 따로 설정하여 사이드 이펙트가 생기지 않을 코드는 제외시켜도 됨을 웹팩에게 알려줄 수 있다.
▶ Lighthouse
다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 그에 대한 개선책도 제공해준다.
구글에서 개발한 오픈소스. 웹 페이지의 품질을 개선할 수 있는 자동화 툴(성능, 접근성, PWA, SEO 등 검사)
검사할 페이지의 url을 Lighthouse에 전달하면 해당 페이지에 대한 여러 검사를 실행한다.
Chrome 개발자 도구에서 실행하기
크롬에서 검사하고 싶은 페이지의 url을 입력
개발자 도구 열고 lighthouse 탭을 클릭 -> generate report를 클릭 -> 30-60 초간 검사 실행됨
Node CLI에서 실행하기
npm install -g lighthouse 로 설치 (-g는 전역 모듈로 설치하는 것)
lighthouse <url> 검사 실행
lighthouse --help로 모든 옵션 볼 수 있음
Lighthouse 분석 결과 항목
Performance - 웹 성능을 측정. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 사용자와 상호작용하기 까진 얼마나 걸리는지 , 화면에 불안정한 요소는 없는지 등을 확인
Accessibility - 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인(대체 텍스트, 배경색과 콘텐츠 색상의 대비, 적절한 WAI-ARIA)
Best Practices - 웹 표준 모범 사례를 잘 따르고 있는지 확인(HTTPS 프로토콜 사용 여부, 콘솔 창에 오류 뜨지 않는지 등)
SEO - 검색 엔진 최적화가 잘 되어있는지 확인(robots.txt 유효여부, <meta> 요소 잘 작성되어 있는지, 텍스트 크기 등)
PWA(Progressive Web App) - 모바일 크기에서도 잘 작동하는지 확인(체크리스트로 확인)
Performance 측정 메트릭
FCP(First Contentful Paint) - 성능 지표를 추적하는 메트릭. 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는데 걸리는 시간 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야함.
LCP(Largest Contentful Paint) - 뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정. 이를 이용해 주요 콘텐츠가 유저에게 보이는 시간까지 가늠할 수 있다.
Speed Index - 성능 지표를 추적하는 메트릭. 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는지 측정.
TTI(Time to interactive) - 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정.
TBT(Total Blocking Time) - 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정
CLS(Cumulative Layout Shift) - 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표
개선 방향
Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있다.
Defer offscreen images
Lighthouse 보고서의 기회 섹션에는 페이지의 모든 오프스크린 이미지 또는 숨겨진 이미지와 함께 KiB 단위 의 잠재적 절감 효과가 나열됩니다. 상호 작용까지 시간을 낮추기 위해 모든 중요한 리소스가 로드를 완료한 후에 이러한 이미지를 지연 로드하는 것이 좋습니다.
Reduce unused JavaScript
사용하지 않는 자바스크립트 유형 줄이기
Non-critical JavaScript - 스크롤 없이 볼 수 있는 콘텐츠에는 필요하지 않지만 페이지 또는 다른 페이지의 다른 곳에서 계속 사용될 수 있는 JavaScript
Dead JavaScript - 더 이상 사용되지 않는 코드. 이전 버전의 사이트에 남아 있거나 더 이상 참조되지 않거나 테스트의 일부로 사용되었던 코드나 다른 모듈에서 가져온 부분이 포함 될 수 있다.
Use HTTP/2
이제 Chrome 에서 Google의 SPDY 프로토콜에 대한 지원이 중단 되었기 때문에 사용자가 기존 HTTP/1.1보다 코드에 더 빠르게 연결하도록 하려면 HTTP/2로 전환해야 한다.
