TOAST UI

응답성(페이지가 사용자의 입력에 얼마나 빨리 응답하는지)은 사용자 경험에 매우 중요하다. Chrome 사용 데이터에 따르면 사용자 시간의 대략 90%가 페이지가 로드된 후에 사용되므로 응답성을 신중하게 측정하는 것이 중요하다. 특히 웹 사이트가 상호작용을 제공하기 위해 자바스크립트에 의존하는 경우가 많아짐에 따라 더 중요해졌다. 이것이 INP가 측정하는 것이며, 이는 페이지의 전체 라이프사이클을 포함한다.

최대 컨텐트풀 페인트(LCP)는 내가 가장 좋아하는 코어 웹 바이탈이다. 가장 쉽게 최적화할 수 있으며, 3가지 중에 유일하게 실제와 똑같이 동작한다. 하지만 놀랍게도 크롬UX(CrUX)에서 가장 최적화되지 않은 코어 웹 바이탈이다. 작성 당시 데이터의 절반만 좋은 LCP를 가졌다.

Lighthouse는 새로운 모드인 User Flow API를 통해 페이지의 생애를 테스트할 수 있게 해줄 것이다. Puppeteer는 정해진 각본대로 페이지를 로드하고 사용자 인터랙션을 유발해 주는 역할을 했고, Lighthouse는 그런 인터랙션이 일어날 때 주요 지표를 측정하기 위해 다양하게 이용되었다. 즉, 성능은 페이지가 로드 될 때와 페이지의 인터랙션 중일 때만 측정 가능하다. 접근성 측정은 CI를 통해서 수행될 수 있다. 첫 화면은 물론이고 하나라도 놓치지 않기 위해 개발자 각자의 복잡한 순서로도 확인할 수 있다.

추론적인 프리렌더링(Speculative prerendering)과 크롬 체험판(Chrome origin trial)에 참여하는 방법에 대해 알아보자.

크롬 개발자도구로 하는 디버깅과 해결책을 찾아서!

super 키워드는 부모 객체의 함수나 속성에 접근하는 데 사용된다. 이전에는, 상위 속성으로 접근하는 것(super.x와 같은)은 런타임 실행으로 구현되어있었다. V8 v9.0부터는 최적화되지 않은 코드에 인라인 캐시(IC) 시스템을 재사용하여, 상위 속성에 접근하는 코드를 적절히 최적화된 코드를 생성한다. 이제 런타임 실행을 하지 않는다.

최신 자바스크립트로 작성된 의존성 모듈과 결과물 중심으로 성능을 개선한다.

Largest Contentful Paint(LCP)는 Core Web Vitals의 지표이며 뷰포트에서 가장 큰 콘텐츠 엘리먼트가 나타날 때 측정한다. 페이지의 주요 내용이 화면에 렌더링이 완료되는 시기를 결정하는데 사용된다.

브라우저 이전/다음 페이지 버튼으로 이동할 때 페이지가 순간적으로 로드되게 최적화 해보자.

리액트 훅의 useEffect를 사용할 때 꼭 알아야 할 네 가지를 공유하려고 한다.