웹사이트의 대용량 자바스크립트 실행 때문에 INP(Interaction to Next Paint) 점수가 악화될 때, SEO 랭킹 하락을 막으려면 스크립트 지연 로딩(defer)을 어떻게 세팅하나요?

구글은 상위 75퍼센타일 기준 200ms 이하를 '양호'로 정의하고, 이 기준을 넘기면 검색 랭킹 신호 중 페이지 경험 요소에서 불리하게 작용할 수 있습니다.

script 태그의 defer 속성은 HTML 파싱이 끝난 뒤 스크립트를 실행하도록 지연시키지만, 실행 자체는 여전히 메인 스레드에서 일어납니다. 즉 defer는 초기 렌더링을 막지 않는다는 이점은 있지만, 실행될 때 메인 스레드를 점유하는 건 동일해서 무거운 스크립트의 실행 자체가 INP를 악화시키는 문제는 defer만으로 완전히 해결되지 않습니다.

그래서 실무에서는 defer와 함께 세 가지를 보완적으로 씁니다. 코드 분할로 즉시 필요하지 않은 기능은 별도 번들로 분리하고, 동적 import()로 유저 상호작용이 실제 발생한 시점에만 관련 스크립트를 로드하며, requestIdleCallback API로 우선순위가 낮은 작업을 브라우저가 유휴 상태일 때 실행하도록 스케줄링하는 것입니다. defer가 '언제 실행을 시작할지'를 늦춘다면, 이 기법들은 '얼마나 많은 코드를 한 번에 실행할지' 자체를 줄이는 접근이라 서로 보완됩니다.

마지막으로 핵심은 장시간 실행되는 자바스크립트 작업(50ms 이상 메인 스레드를 점유하는 롱태스크)을 여러 개의 작은 작업으로 쪼개는 것입니다. setTimeout이나 scheduler.yield() 같은 API로 긴 작업 사이사이에 브라우저가 사용자 입력에 반응할 틈을 만들어주면, 전체 작업 완료 시간은 비슷해도 사용자가 느끼는 반응성은 크게 개선됩니다.