Lighthouse

사용법

구글 크롬으로 검사하고싶은 페이지를 연다.
개발자도구->Lighthouse클릭
Analyze page load 버튼 클릭

코드스테이츠 홈페이지에 해보았다.
퍼포먼스가 4밖에 안되다니... 흐억

Lighthouse 분석 항목

1. Performance: 웹성능

Metrics

1. first contentful paint
   첫번째 부분을 렌더링하는데 걸리는 시간. 페이지 로딩속도(1.8초 이하)
2. largest contentful paint
   뷰포트의 가장 큰 부분을 차지하는 콘텐츠의 렌더링 시간 측정.

   LCP time(in seconds)	Color-coding
   0-2.5	Green (fast)
   2.5-4	Orange (moderate)
   Over 4	Red (slow)

3. speed index
   페이지를 로드하는동안 얼마나 빠릴 컨텐츠가 시각적으로 표시되는지.
   페이지 로딩과정을 각 프레임마다 캡쳐한다.
   그리고 프레임 간 화면에 보이는 요소들을 계산하여 그래프의 형태로 나타낸다.

   Speed Index(in seconds)	Color-coding
   0–3.4	Green (fast)
   3.4–5.8	Orange (moderate)
   Over 5.8	Red (slow)

4. time to interactive
   페이지가 로드되는 시점부터 상호작용이 가능한 시점까지의 시간

   TTI metric(in seconds)	Color-coding
   0–3.8	Green (fast)
   3.9–7.3	Orange (moderate)
   Over 7.3	Red (slow)

5. tital blocking time
   페이지가 유저와 상호작용하기까지의 막혀있는 시간 측정
6. cumulative layout shift
   사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지 수치화한 지표.

2. Accessiblilty: 웹접근성

3. Best Practices: 웹표준

4. SEO: 검색엔진최적화

5. PWA: 모바일에서

Opportunities 개선하기

이렇게 개선 방향도 알려준다.
1. png대신 WebP나 AVIF 쓰는 것을 장려하는 것 같음.
2. Next.js에서 next/image 를 사용하라는듯; Next.js는 공부해본적이 없어서 잘 모르겠지만

https://nextjs.org/docs/basic-features/image-optimization

여기로 들어가서 보니

import Image from 'next/image'
export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

이런식으로 사용하는 것 같다.
이미지와 동영상 같은 것들이 가장 큰 비율을 차지해서인지 관련 메시지가 많이 뜨는 것 같다.
위에서 얘기하는 webp, avif가 아니라 jpg 등을 사용할거라면
3. 뷰포트별로 다른 이미지를 제공하는 게 좋다고 함.
화면에 띄우는것보다 더 큰 이미지를 불러오는 것은 리소스 손해이기 때문에... 당연한 얘기긴 하지만 어려운 이야기이기도 한 것 같다. 그래서 일반적으로는 어느정도 타협점을 찾아서 3~5개의 서로 다른 크기의 이미지를 제공하는데, 이렇게 하면 당연히 또 서버에서 공간을 많이 차지하게 되고 html 코드 길이도 좀더 길어진다.
4. 이미지를 쓸때 항상 요소에 width, height를 써주라고 함.
그래야 로드가 되는 동안 브라우저가 공간을 확보해놓기 용이하다.
반응형 웹디자인이 도입되면서 width:100; height: auto; 이런식으로 쓰기 시작했는데 이렇게하면 사용자경험에 좋지 않다고. 이미지가 로드되면 유저가 읽고있던 글이 갑자기 아래로 내려가고 이미지가 그 공간을 차지하게 되기 때문. 레이아웃 이동을 방지하는 목적이 핵심이다.
반응형 이미지 작업을 할때는 srcset을 통해 브라우저에서 이미지의 크기를 선택하도록 허용할 이미지를 정의한다.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="강아지와 풍선"
/>

https://web.dev/optimize-cls/?utm_source=lighthouse&utm_medium=devtools#images-without-dimensions

그리고 HTTP/2를 통해서 리소스를 제공하라고 함.
눌러보니 http/1.1을 사용한 이미지파일들이 나열되어있음.

https://web.dev/uses-http2/?utm_source=lighthouse&utm_medium=devtools