Front-end 성능향상 방법

Performance check

• inspector -> performance || network
• Elastic

Build 단계에서 할 수 있는 것들

1. .js
   • bundling (Page Component Lazy loading)
   • uglify (minify)
2. .css
   • bundling (Page Component Lazy loading)
   • purify
   • minify

Client-side 에서 할 수 있는 것들

1. Loading Spinner
   • 성능향상은 아니고, 유저가 기다릴 수 있도록 도와줌
2. Skeleton UI
3. Rendering 과 관련된 API 를 잘게 쪼개서 API 가 응답하는대로 화면을 각각 렌더링하기
4. API Fetch 시점 점검
5. 자잘한 로직은 API 호출하기 전에 미리 처리
6. 이미지 최적화 (아래 별도 내용)

Server-side 에서 할 수 있는 것들

1. SSR (Server Side Rendering)
2. SSG (Static Site Generation)
3. Back-end System (API) 자체 성능향상

Image 최적화

1. 80% 손실 이미지 사용

   • 일반적으로 사람이 품질 저하를 거의 눈치채지 못하면서 품질을 낮출 수 있는 퍼센트는 100% ~ 75% 사이
   • 구글 이미지 썸네일: 75%, 페이스북 이미지: 85%

2. Lazy loading - img element 단위

<img src="1px.gif" data-src="book.jpg" onload="loadReal(this);" />

function loadReal(img) {
    if (img.style.display !== 'none') {
        img.onload = null;
        img.src = img.getAttribute('data-src');
    }
}

3. Lazy loading - viewport 단위

• Intersection Observer

4. 위의 2, 3 내용이 적용된 Img Component 구현 및 사용

5. CSS Image Sprite
   레이아웃을 구성하는 기본적인 img 의 경우에 sprite 사용 (메뉴의 아이콘 등)

.logo {
  background: url(/img/logo.png) no-repeat;
  background-position: 0 -30px;
}

6. image CDN 사용

• Cache-Control: max-age=600 값을 제어
  • 초 단위, 유저가 웹페이지를 충분히 탐색할 수 있도록 300초(5분)~600초(10분) 정도 권장