Optimization

Lighthouse

다양한 지표를 이용하여 웹페이지의 성능 검사와 그에 대한 개선책을 제공한다.

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

개발자 도구에서 Lighthouse 탭을 눌러 유투브에 대한 여러 검사를 실행해보았다.

Metrics

Speed Index를 높일 수 있는 방법이 있다.

• 메인 스레드 작업을 최소화한다.
• JavaScript 실행 시간을 단축한다.
• 폰트가 로드되는 중에도 텍스트가 계속 표시되도록 한다.

Opportunities

페이지를 빠르게 로드하는 데 도움될 수 있는 해결책을 추천해준다.

Metric의 속도를 느리게 하는 원인일 가능성이 있다. 각 항목을 클릭해 개선해야 할 세부 내용에 확인해보자.

유투브에서 문제되는 Opportunities 항목은 3가지이다.

• Avoid multiple page redirects : 두 개 이상의 리디렉션이 있는 페이지는 이 감사에 실패한다.

• Eliminate render-blocking resources : first paint를 지연시키는 리소스(Render blocking Resources)를 알려준다.

• Preconnect to required origins : 세부 내용을 살펴보면, 아직 가져오기 요청의 우선 순위를 지정하지 않은 모든 주요 요청이 나열되어 있다.

Render-blocking 이슈 해결하기

Render Blocking이란 Render를 멈추게 하는 것이고, Render가 멈추면 초기 화면이 늦게 뜨기 때문에 사용자에게 더 좋은 경험을 주려면 Render Blocking 요소를 최소화 하는 것이 좋습니다.

Eliminate render-blocking resources는 브라우저가 다운로드하고 해석하는 동안 웹 페이지에는 아무것도 보이지 않기 때문에 이런 요인을 제거해야한다고 경고로 알려주고 있다.

Render blocking resources

Render blocking resources의 영향을 줄이기 위해 script태그에 async 혹은 defer 속성을 넣거나

  // 병렬 다운로드, 즉시 실행
  <script async src="script.js"></script>

stylesheet의 link태그에 media 속성을 넣어주면 된다.

<link href="portrait.css" rel="stylesheet" media="print">

만약 media속성이 없다면, 스타일시트를 다운로드하고 해석하는 동안 웹 브라우저 화면에는 아무것도 그려 내지 않는다.