Web Vitals, 프론트엔드의 필수 역량
Web Vitals, 프론트엔드의 필수 역량프론트엔드 개발자에게 Web Vitals는 더 이상 '알면 좋은 교양'이 아닌, 반드시 갖춰야 할 '필수 역량'이다.웹페이지는 단순히 CSS의 플로우에 따라 순서대로 페인팅되어 사용자에게 제공되지 않는다. JavaScript는 동적으로 DOM을 조작하고, 수많은 API는 데이터를 요청하며, CDN에서는 거대한 이미지와 동영상을 불러온다.Web Vitals은 사용자의 UX를 구글이 객관적으로 평가하기 위해 정의한 기준으로 수치를 측정하고 방해 요소들을 미리 파악하여 개선하여 사용자 UX와 성능을 개선할 수 있게 해주는 중요 지표이다.간단하지만 치명적인 예시 하나를 살펴보자.좀 극단적인 예로 초기 히어로 페이지의 배너 이미지로 WebP나 JPG 대신, 30MB짜리 PNG 파일을 그대로 사용했다고 가정해 보자. 이미지 로딩은 비동기로 처리되기에 다른 영역은 먼저 페인트될 수 있다. 하지만 정작 사용자의 시선이 가장 먼저 머무는 핵심 배너는, 거대