Ligthhouse란 크롬에서 제공하는 웹사이트의 성능을 측정하는 도구이다. 모바일, 데스크탑 모두 지원하며, 카테고리에는 Perfomance, Progressive web app, seo 등 다양한 지표가 있다.
위 카테고리 중 'Performance'를 집중적으로 살펴보자.
Performance 항목은 말 그대로 웹 사이트의 성능을에 대한 부분이다. 간단하게는 '얼마나 빠르게 불러오느냐'를 측정하는 것이다.
나는 연습삼아 Naver의 성능을 측정해보았고 결과는 아래와 같았다.
조금 더 밑으로 내리면 'Opportunities' 라는 항목이 나온다. Performance 지표에서는 이 항목을 통해 어떻게 하면 웹 페이지의 렌더링 속도를 개선시킬 수 있는지에 대한 설명도 함께 나와 있다(성능 점수에는 직접적인 영향은 주지 않는다고 함).
각 항목에 대해 간단히 살펴보자.
1. Serve images in next-gen formats(차세대 형식을 사용해 이미지 제공하기)
png, jpeg 이미지 보다는 AVIF, WebP 를 사용할 것을 제안하고 있다. AVIF, WebP는 압축률이 좋은 이미지 형식이기 때문에 png, jpeg 이미지 보다 더 빨리 로드되고 데이터 소비를 줄일 수 있다.
2. Efficiently encode images(효율적으로 이미지 인코딩하기)
이미지 사이즈를 최적화하라는 의미이다. 가져오는 이미지의 용량이 현재 보여지는 화면의 용량보다 크기 때문에 과도하게 많은 용량을 가져온다는 의미로 이미지의 사이즈를 줄이라는 뜻이다. 이를 해결 하기 위해 화면에 표시되는 사이즈와 실제 이미지의 용량을 일치시켜야 한다.
해결방안은 다음과 같다.
1) 이미지 CDN 사용
이미지 CDN 이란?
서버로 부터 이미지를 불러오면 image를 크게하거나, 줄이거나, 직사각형을 둥글게 만들어주는 회사에 이미지를 의뢰해서 원하는 형태로 이미지를 바꾸는 방법
2) 이미지를 가져오는 매체 (unsplash, aws s3)에서 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
3. Eliminate render-blocking resources(렌더 차단 리소스 제거)
렌더링 차단 리소스에는 scripts 그리고 stylesheets 이 두 가지 유형이 있다.
- <script> 태그이며, <head> 태그 안에 있고 defer 또는 async 속성이 없는 스크립트
- <link rel="stylesheet"> 태그이며, disabled 속성이 없거나 media 속성이 없거나 media="all"일 경우
이를 해결하기 위해 최적화가 필요한 리소스를 식별해야 한다.
최적화가 필요한 리소스 식별
- 렌더링 차단 리소스의 영향을 줄이기 위한 첫 번째 단계는 FCP에 어떤 파일이 필요하고 무엇이 아닌지 식별하는 것이다. 크롬 개발자 도구의 Coverage 탭을 사용하여 중요하지 않은 CSS 및 JS를 식별한다. 페이지를 로드하거나 실행할 때 탭에는 로드된 코드 수와 사용된 코드가 표시 된다.
- 우측 바를 보면 빨간색 그리고 푸른색이 있는데, 빨간색은 중요하지 않고 주 기능에 사용안되는 코드, 푸른색은 중요하고 영향을 주는 코드 비중을 말한다.
최적화가 필요한 리소스를 식별했으면, 해당 스크립트 또는 스타일시트를 제거한다.
1. 렌더링 차단 스크립트 제거
- 중요한 코드를 식별했으면 해당 스크립트 태그에서 async 또는 defer 속성을 추가하면 된다. 보통 async 속성은 다른 파일보다 순서가 중요할때 사용된다.
<script async src="high-priority.js"></script>
<script defer src="general.js"></script>
- async와 defer는 렌더링 차단 없이 자바스크립트를 비동기적으로 로드하지만 async는 바로 실행되고 defer는 DOMContentLoaded 이벤트 직전에 실행된다. async는 HTML parsing을 잠시 중단하고 실행이 완료되고 다시 HTML parsing이 진행되고, defer는 HTML parsing이 끝난 후에 실행된다.
- 마지막으로 사용 안되는 코드를 식별해서 제거한다.
2. 렌더링 차단 스타일시트 제거
- 스크립트 태그와 동일하게 스타일시트를 비동기로 로드하면 된다. HTML 페이지 <head>에 FCP에만 필요한 스타일만 로드하고, 그 외에는 preload 속성으로 비동기로 처리하게 만든다.
<link rel="preload" href="styles.css" as="style">
- CSS 파일을 미리 로드하여 나중에 페이지 렌더링에 필요한 즉시 사용할 수 있도록 한다.
- as 속성을 사용 하면서 :
- 리소스 로드 우선 순위를 보다 정확하게 지정한다.
- 이후 요청을 위해 캐시에 저장하고 필요한 경우 리소스를 재사용 한다.
- 리소스에 올바른 콘텐츠 보안 정책을 적용한다.
- 올바른 요청 헤더를 설정한다.
참고 블로그)
react - lighthouse를 이용해 성능 최적화 하기 - 이미지 성능 최적화
react - lighthouse를 이용해 성능 최적화 하기, performance, Properly size images, Serve images in next-gen formats, Efficiently encode images
kyounghwan01.github.io
커머스 사이트 속도 개선: 렌더링 차단 리소스 제거
FCP(First Contentful Paint)를 차단하는 모든 URL들이다. 목표는, 중요하지 않은 리소스를 지연하며 사용되지 않는 모든 리소스를 제거하여 이러한 렌더링 차단 URL의 영향을 줄이면서 페이지의 렌더링
velog.io
'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글
| section4/Unit10/[Deploy] CI/CD (0) | 2022.12.07 |
|---|---|
| section4/Unit9/[Deploy] Amazon Web Service(AWS 배포) (0) | 2022.12.06 |
| section4/Unit8/[최적화] Optimization (0) | 2022.12.05 |
| section4/Unit7/[Testing] TDD (0) | 2022.12.02 |
| section4/Unit6/[API] GraphQL (0) | 2022.12.01 |
