성능 최적화 기준

• 성능을 판단할 수 있는 기준은 여러가지이다.

• 구글에서 제안하는 성능 파악을 위한 지표

  • web.vital : 웹이 건강한지, 웹이 사용자에게 우수한 경험을 제공하는지???

  Web Vitals

Core Web Vital

1. LCP

   

   • 가장 중요한 콘텐츠인 이미지가 보여지기까지 걸리는 시간

2. FID 1.

3. CLS (시각적 안정성)

   1. 페이지 레이아웃이 얼마나 변경되는가??? 근데 예측하지 못한 변화
   2. 페이지를 보고 있는데 위에 광고가 떠서 내가 보고 있는 페이지가 아래로 밀리는 경우 ⇒ 유저 사용자 경험이 저하된다.

각 특성별 개선 방안

1. LCP 😍

1. 서버가 응답이 늦어지면 텍스트나 사진의 응답 속도가 느리다. ⇒ CDN
2. 웹 사이트가 표시될때 html을 먼저 받고, link되어있는 JS나 CSS 파일이 크다면 LCP가 느려질 수 있다. (코드 스플리팅) ⇒

• 브라우저 렌더링 과정

How browser rendering works — behind the scenes - LogRocket Blog

<aside> 🔥 css파일이 크거나 JS 연산이 크다면 유저가 화면을 보는 시간이 느려진다…

</aside>

1. 이미지 자체가 너무 크게 되면 아무리 CSS가 빠르더라도, 리소스가 커버리면 보여주는 시간이 너무 느리다.
   1. 이미지 최적화
   2. 캐싱
   3. 우선 사용되는 이미지 preload

2. FID 😍

• 브라우저는 하나의 쓰레드로만 작동하기 때문에 자바스크립트에서 오래걸리는 로직이 추가되면 다음 작업을 수행하지 못하게 된다.
  • 복잡한 연산이 걸리면,(반복문 돌면서 1000번 콘솔찍는것) 그것을 처리하느라 다른것이 동작하지 못하게 된다. (다른 동작이라함은 input 입력이나, 클릭같은 것을 한동안 못하게 된다.)
  • input도 안쳐지고,… 클릭도 안되고