블로깅 과제

Light house 사용해보기

lap_mu 2023. 2. 1. 13:59

Light house

  • Lighthouse는 구글에서 개발한 어떤 웹페이지라도 품질 검사를 할 수 있는 오픈소스이다.
  • 개발자도구, CLI, 노드 모듈 등 다양한 경로로 사용할 수 있다.

 

  • 위의 사진과 같이 결과에 따른 리포트를 생성하고 개발자는 리포트를 기반으로 웹페이지를 개선할 수 있다.

 

Light house의 분석 결과 항목

 

1. Performance(성능)

  • 웹의 성능을 측정하며 콘텐츠가 표시되는데 걸리는 시간, 표시된후 사용자와 상호작용하기까지 걸리는 시간, 등을 확인한다.

2. Accessibility(접근성)

  • 웹이 접근성을 잘 갖추고 있는지 확인하며 대체 택스트가 잘 작성되어있는지, 배경색과 콘텐츠 색상의 대비가 충분한지 등을 확인한다.

3. Best Practices(권장사항)

  • 웹 페이지가 웹 표준 모법 사례를 잘 따르고 있는지 확인하며 HTTPS프로토콜을 사용하는지, 콘솔 창에 오류가 표시 되지 않는지 등을 확인한다.

4. SEO(검색 엔진 최적화)

  • 웹 페이지가 검색 엔진에 대해 최적화가 되어있는지 확인하며 어플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성 되어 있는지 등을 확인한다.

5. PWA(Progressive Web App)

  • 웹 페이지가 모바일 어플리케션으로서도 잘 작동하는지 확인하며 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면의 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 확인한다.

Zep.us에 사용해보기

zep 메인 홈페이지

 

온라인으로 부트캠프를 진행하면서 가장 많이 사람들을 만나고 무엇보다도 스터디를 진행하는 곳이다. 이곳 젭(https://zep.us/home/spaces)을 검사해보기로 했다. 

 

젭의 성능이 굉장히 낮게 나왔다. 생각보다 의외였다. 페이지의 내용이 많지 않아서 높은 점수를 받을 줄 알았지만 내용과는 다른 곳에서 문제가 발생한듯 하다.

 

어떻게 개선하여 최적화를 할 수 있는지 해결책을 제시해 주는 oppertunities(추천)를 확인한 내용이다. 이제 각각의 해결법들을 알아보자!

 

 

해결법

1. 렌더링 차단 리소스 제거하기

 

  렌더링 차단 리소스란?

  -  HTML을 읽는 과정에서 CSS나 JavaScript의 코드를 만나 HTML의 렌더링을 차단하고 CSS나 JavaScript의 코드를 우선으로 읽는 것을 말한다.

 

  JS가 렌더링을 차단할 경우

// body 마지막에 script적용
<html>
    <head>
    .....
    </head>
    <body>
    .....
        <script src="index.js"/>
    </body>
</html>

// async, defer
<script src="index.js" async/>
<script src="index.js" defer/>
  • 대부분 BODY 요소 내부의 마지막에 넣어주면 된다 => 로딩속도의 개선일뿐 렌더링 차단은 여전할 수 있다.
  • 위의 경우 ASYNC(비동기)와 DEFER(지연)를 사용한다.(스크립트를 불러오는 태그에 async나 defer를 속성으로 넣으면 된다.)
  • async의 경우 비동기적으로 JS를 처리하므로 동시에 처리된다.
  • defer의 경우 HTML의 렌더링이 끝난 후 JS를 읽기 시작한다.

 

  CSS가 렌더링을 차단할 경우

 

<head>
	<link rel="stylesheet" href="크리티컬css파일경로"/>
</head>
<body>
코드들
	<link rel="stylesheet" href="css파일경로" media="print" onload="this.media='all'; this.onload=null;">
</body>
  • 개발자들이 내놓은 해결책은 중요한 CSS와 중요하지 않은 CSS를 분리하여 작성하는 방법이다.
  • 중요한 CSS는 HTML의 head에 작성하고 중요하지 않은 CSS는 비동기적으로 처리하는 방법이다.
  • media = 'print' 속성을 줘서 다운로드 할때 렌더링을 차단하지 않게하고 onload(모두 다운받을시)속성을 이용하여 media = 'all'로 바꾸어 주어 CSS를 적용하는 방법이다.

 

2. 사용하지 않는 자바스크립트 줄이기

   - 쓰지않는 코드를 불러오는 것이 있다는 의미이다.

 

  • React의 경우 메인 페이지를 페이지 코드에 작성되어 있는 모든 컴포넌트를 불러오기 때문에 페이지의 첫 로드가 길어지게 된다. => 전에 배웠던 React.lazy를 사용하면 현재 사용하지 않는 컴포넌트는 불러오지 않을수 있기 때문에 첫페이지의 로드하는 시간이 짧아진다.
  • 효과적으로 트리쉐이킹을 해준다
  1. 필요한 모듈만 import하기
  2. Babelrc 파일 설정하기
  3. sideEffects 설정하기
  4. ES6 문법 사용하는 모듈 사용하기