[코어 웹 바이탈 최적화] FID 최적화하기

FID(First Input Delay, 최초 입력 지연)은 사용자가 페이지와 처음 상호 작용한 시점부터 브라우저가 실제로 해당 상호 작용에 응답한 시점까지의 시간을 측정한다.
사용자에게 사이트의 첫인상을 제공할 수 있다는 점에서 중요한 메트릭이라 할 수 있다.

더욱 자세한 사항은 아래 포스팅에서 확인하실 수 있습니다!

[코어 웹 바이탈 최적화] FID(First Input Delay, 최초 입력 지연)란?

FID를 개선하는 방안을 알아보자!

우선 FID를 예측하는 데 활용할 만한 메트릭으로 TBT(Total Blocking Time, 총 차단 시간)가 있다.
TBT는 FCP(First Contentful Paint, 최초 콘텐츠풀 페인트)와 TTI(Time to Interactive, 상포 작용까지의 시간)사이 총 시간을 측정한다.
사용자와 상호작용하기 전에 블라킹된 시간을 알려주기 때문에 TBT를 개선하면 FID에도 긍정적이 영향이 있다.

또한, 주로 FID가 열악해지는 원인은 자바스크립트를 과도하게 실행하는 것이다. 메인 스레드가 자바스크립트를 처리하느라 바쁘다면 당연히 사용자의 입력은 브라우저에서 그 응답을 받기까지 오래 걸릴 것이다.

집약적 자바스크립트 실행

메인스레드가 사용중인 경우에는 사용자의 입력에 응답하기 어렵다. 아래 방법을 통해 개선해볼 수 있다.

긴 작업 세분화

긴 작업이란 장기 실행되는 자바스크립트 작업을 의미한다. 50ms 이상 메인 스레드를 차단하는 모든 코드는 긴 작업이라고 할 수 있다.
긴 작업을 분할하면 사이트의 입력 지연을 줄일 수 있다.

자바스크립트 실행 시간 단축

페이지의 자바스크립트 양을 제한하면 실행 시간 또한 단축되며, 브라우저가 사용자 상호 작용에 응답할 수 있는 속도도 빨라진다.
페이지에서 실행되는 자바스크립트의 양을 줄이는 방법은 다음과 같다.

• 사용하지 않는 Javascript 지연

사용하지 않는 Javasciprt 지연

기본적으로 모든 JavaScript는 렌더링을 차단합니다. 브라우저가 외부 JavaScript 파일에 연결되는 스크립트 태그를 만나면 수행 중인 작업을 일시 중지하고 해당 JavaScript를 다운로드, 구문 분석, 컴파일 및 실행해야 합니다. 따라서 페이지 또는 사용자 입력에 응답하는 데 필요한 코드만 로드해야 합니다.

출처: 최초 입력 지연 최적화

개발자 도구의 Coverage 탭을 보면 웹 페이지에서 사용되지 않는 자바스크립트 코드 및 비율을 확인할 수 있다.
사용하지 않는 자바스크립트를 줄이는 방법은 다음과 같다.

• 번들을 여러 청크로 코드 분할
• async 또는 defer를 사용하여 타사 스크립트를 비롯한 중요하지 않은 자바스크립트 지연

예를 들어, 리액트에서는 React.lazy 함수를 사용해서 지연 로드를 지연할 수 있다. React.lazy

코드 분할 이외에도 중요 경로 또는 스크롤 없이 볼 수 있는 콘텐츠에 필요하지 않은 스크립트에는 항상 async 또는 defer를 사용한다.

---

참고
최초 입력 지연 최적화