S4 U8 - [최적화] Optimization

딩쓰·2022년 12월 5일

코드스테이츠 TIL

목록 보기

19/19

Lighthouse란?

사이트를 검사하여 성능 측정을 할 수 있는 도구
다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄 뿐만 아니라 이에 대한 개선책도 제공함.
구글에서 개발한 오픈소스로서 웹 페이지의 품질을 개선할 수 있는 자동화 툴
성능, 접근성, PWA, SEO 등을 검사하며 이를 이용해 사용자는 어떤 웹페이지든 품질 검사를 할 수 있음.
Chrome DevTools부터 CLI, 노드 모듈 등 다양한 경로를 통해 사용할 수 있음
검사할 페이지의 url을 Lighthouse에 전달하면 Lighthouse는 해당 페이지에 대한 여러 검사를 실행

Lighthouse 시작하기

1. Chrome 개발자 도구에서 실행하기

크롬에서 검사하고 싶은 페이지의 url을 입력합니다.
개발자 도구를 엽니다.
lighthouse 탭을 클릭합니다.

analyze page load를 클릭. Categories에서 특정한 지표만 선택하여 검사할 수도 있음
대략 30-60초간 검사가 실행됨. 그 후 아래와 같이 리포트가 해당 페이지의 개발자 도구내에 생성됨.

2. Node CLI에서 실행하기

Lighthouse를 설치함. 이때-g 옵션을 사용하여 Lighthouse를 전역 모듈로 설치하는 것이 좋음.

npm install -g lighthouse

다음의 명령어로 검사를 실행할 수 있음.

lighthouse <url>

다음의 명령어로 모든 옵션을 볼 수 있음.

lighthouse --help

Lighthouse 분석 결과 항목

1. Performance

Performance 항목에서는 웹 성능을 측정합니다. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.

2. Accessibility

Accessibility 항목에서는 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인합니다. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

3. Best Practices

Best Practices 항목에서는 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인합니다. HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시 되지는 않는지 등을 확인합니다.

4. SEO

SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인합니다. 애플리케이션의 robots.txt가 유효한지, 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

5. PWA (Progressive Web App)

PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인합니다. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

개선 방향 잡기

Lighthouse는 성능을 측정할 뿐 아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화를 할 수 있을지 해결책도 제시해줌.
Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있음.

각 항목을 열어보면 해당 문제에 대한 상세 설명과 함께 어떤 코드, 어떤 화면에서 문제 상황을 발견했는지 확인할 수 있기 때문에 최적화의 방향을 잡기 좋음.

블로깅

Lighthouse를 직접 사용해보면서 Performance의 Opportunities 항목에는 어떤 것들이 있는지 확인해보고, 각 항목마다 어떤 해결 방법이 있는지 구글링해서 블로깅하기.
난 네이버 사이트를 채택함.

OPPORTUNITIES

Serve images in next-gen formats
Efficiently encode images
Properly size images
Reduce unused JavaScript

원인

세 문제(Reduce unused JavaScript을 제외한)는 모두 동일하게 이미지 사이즈를 최적화하라는 의미입니다. 가져오는 이미지의 용량이 현재 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻으로 받아들이면 됩니다.

해결

화면에 표시되는 사이즈 (예: 120x120)와 실제 이미지의 용량을 일치시켜라!

이미지 용량 확인하는 방법

사이트의 요소검사로 이미지 클릭시 현재 이미지 사이즈와 이미지 용량 확인 가능합니다. (120 × 120 pixels (intrinsic: 1200 × 1200 pixels) → 실제 이미지보다 10배 큰 사이즈로 가져오는 상황, 레티나 디스플레이를 위해 2배(240x240)까지는 넣어줘야한다.)
✅ 내가 요소검사로 확인해본 이미지는 Rendered size: 750 × 135 px (Intrinsic size: 1500 × 270 px) -> 렌더링되는 이미지보다 2배 큰 사이즈로 가져오는 상황이라 문제 없음.

용량을 어떻게 줄일까 → 이미지는 어디서 오는지 먼저 파악해야함

대부분 api의 response 통해 image url을 가져옵니다. api를 통해 받아오면 어떻게 이미지 줄이나? -> imgix 같은 이미지 cdn을 사용합니다.

image cdn 이란?

서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법 imgix

어떻게 이미지 줄이나 → image cdn 사용

이미지를 사용자에게 보내기 전에 jpg의 포맷을 바꾸거나, 용량을 줄여서 사용자에게 전송 (1200짜리를 120으로 줄여서 사용자에게 전달) ex → http://cdn.image.com?src=img.src&width=200&height=100

이미지를 가져오는 매체 (unsplash, aws s3)에서 image cdn을 자체 제공해주면 굳이 사제 이미지 cdn을 사용 안해도 됩니다.

image cdn 사용 안하면 → 이미지 불러오는 웹 코드를 최적화

image를 불러오는 컴포넌트에서 최적화를 합니다.

// unsplash에서 제공하는 image cdn 사용
function getParametersForUnsplash({ width, height, quality, format }) {
  return `?w=${width}&h=${height}&q=${quality}&fm=${format}&fit=crop`;
}

<img
  src={
    props.image +
    getParametersForUnsplash({
      width: 1200,
      height: 1200,
      quality: 80,
      format: "jpg"
    })
  }
  alt="thumbnail"
/>;

또는

// aws s3에서 제공하는 image cdn 사용
https://img.kr/image_${width}x${height}.png

위처럼 이미지 사이즈를 최적화 하면 Properly size images 는 사라집니다!

출처: https://kyounghwan01.github.io/blog/React/optimize-performance/properly-size-images/#%E1%84%92%E1%85%A2%E1%84%80%E1%85%A7%E1%86%AF

Reduce unused JavaScript

원인

React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의 파일에 모든 로직이 담기게 되는데 이에 따라 최초 로딩 시간이 길어지게 된다.

당장에 사용하지 않는 코드가 읽어진다는 뜻이다.

해결

코드 스플리트를 적용해 해당 부분을 해결하고 성능을 향상할 수 있다.
https://muhly.tistory.com/140

딩쓰

Frontend Developer

이전 포스트