Lighthouse - 웹 개선

Perfomance

성능 점수는 메트릭 점수의 가중치 평균이다. 가중치가 더 높은 메트릭이 전체 성능 점수에 더 큰 영향을 미친다.

Metrics

- First Contentful Paint

FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간

- Largest Contentful Paint

LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정
주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.

- Speed Index

페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정

- Time to interactive

페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정

• 페이지에 FCP로 측정된 컨텐츠가 표시
• 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록
• 페이지가 0.05초안에 사용자의 상호작용에 응답

- Total Blocking Time

페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정

- Cumulative Layout Shift

사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표

---

개선 방향

⚠️ Properly size images

• 사용자 화면에 렌더링된 버전보다 큰 이미지가 페이지에 제공된 곳을 수정
• 이미지 CDN을 사용 - 이미지 파일 크기를 40~80% 줄일 수 있습니다. 포맷을 webp로 변환해주기도 함.
• SVG와 같은 벡터 기반 이미지 형식을 사용 - SVG 이미지는 한정된 양의 코드를 사용해 어떤 크기로든 확장이 가능하다.

⚠️ Serve images in next-gen formats

• 새로운 형식의 이미지를 제공할 것

1. WebP
2. JPEG 2000
3. JPEG XR
   

⚠️ Eliminate render-blocking resources

Lighthouse는 두 종류의 렌더링 차단 리소스를 찾는다. script와 stylesheet입니다.

Render-blocking scripts를 제거하는 방법

• 필수적인 코드를 HTML 페이지 내부의 inline script태그에 넣어라. 페이지를 불러올 때 페이지의 핵심 기능을 처리하는데 필요한 코드를 바로 사용할 수 있다.
• 필수적이지 않은 Render-blocking URL이 있다면, 그것을 그대로 두고 script태그에 async 혹은 defer속성을 넣는다.

Render-blocking stylesheets를 제거하는 방법

• first paint에 필수적인 스타일 요소들을 HTML의 head태그 내부에 style태그를 생성하고 안에 기재. 그리고 나머지 스타일 요소를 link 태그에 preload를 사용하여 비동기적으로 불러올 것.
• media query로 정리하여 서로 다른 파일로 나누어 기기에 맞는 스타일시트만 불러오도록 할 것.

⚠️ Reduce unused CSS

• 코드 분할
  중요하지 않은 CSS를 분리하여 중요한 CSS만 먼저 로드되고 나머지 중요하지 않은 CSS는 나중에 로드되도록 한다.
• CSS 코드 검토
  더 이상 필요하지 않은 CSS 규칙을 제거
  도구 패널에서 Coverage 에서 사용하지 않는 빨간색 부분 제거

⚠️ Reduce unused JavaScript

• 코드 분할
  번들 JavaScript를 중요 JavaScript와 중요하지 않은 JavaScript로 분리한다. 중요한 JavaScript만 먼저 로드되므로 렌더링 차단 동작을 줄일 수 있다.
• 죽은코드 제거
  트리 쉐이킹 프로세스를 활용하여 죽은 JavaScript 코드를 제거
• 죽은 라이브러리 코드 제거
  라이브러리에서 사용하지 않는 코드를 자동으로 제거하는 데 도움이 되는 플러그인 활용
• React.lazy()(으)로 자바스크립트 번들을 분할해 보세요. 또는 로드 가능한 구성요소와 같은 타사 라이브러리를 사용하여 코드를 분할 : 현재 라우터에 필요한 컴포넌트만 Import 해 초기 번들의 크기가 작아진다.

⚠️ Reduce initial server response time (초기 서버 응답시간 단축)

• 애플리케이션 코드 최적화(데이터베이스 쿼리 포함)
  1.코드베이스를 간소화하여 기능을 보다 효율적으로 만듭니다.
  2.복잡한 작업을 줄이거나 필요할 때만 실행되도록 코드를 묶음
  3.데이터베이스 쿼리를 보다 효율적으로 만들고 불필요한 쿼리 제거

• 서버 측 캐싱 구현
  캐싱은 요청 시 서버가 처리하고 요청 시 페이지를 생성하는 대신 미리 생성된 버전의 페이지를 요청하는 방식으로 제공

• 효율적인 캐시 정책 => 캐시의 max-age속성을 조정해 정적 파일 캐싱

• preconnect 또는 dns-prefetch 리소스 힌트를 추가하여 중요한 타사 원본에 대한 조기 연결을 수립하는 것이 좋습니다. Link

• 웹폰트가 로드되는 동안 텍스트가 계속 표시되는지 확인
  CSS에 font-display: swap; 요소를 지정하면 웹폰트 파일이 로드되는 동안 시스템 글꼴을 사용하여 텍스트를 바로 표시할 수 있다. 웹폰트 파일을 더 일찍 가져오려면 <link rel="preload" as="font">를 사용

⚠️ Remove duplicate modules in JavaScript bundles

javaScript 번들은 일반적으로 인기 있는 라이브러리, 종속성 및 패키지에서 코드를 가져와 빌드하기 때문에 페이지가 여러 소스에서 중복 모듈을 상속하는 경우가 많다.

• webpack-stats-duplicates 도구를 사용하여 중복 모듈을 식별

npx webpack-stats-duplicates stats.json

//webpack-stats-duplicates의 출력 예시
//warning이 도구는 모듈 이 루트에서 한 번
//패키지 node_modules아래에서 한 번, 두 번 발견되었다.
Duplicate module warning found in webpack configuration 0
        ./node_modules/warning
        ./node_modules/react-router/node_modules/warning