afterInteractive, lazyOnLoad

 

lazyOnLoad와 afterInteractive를 사용하는 이유

GTM, Naver Script, 채널톡 등 마케팅툴들은 html 이후에 로드되어도 무방한 써드파티 라이브러리이다.

(반대로 말하면 일단 빨리 페이지를 로드해서 사용자에게 보여주는 것이 중요하다.)

 

하지만 이 써드파티 라이브러리들이 html 로드를 차단하고 있었다.

 

lazyOnLoad와 afterInteractive는 Next.js의 라우팅과 페이지 로딩 관련 옵션인데, 이 둘을 이용하면 써드파티 스크립트를 비동기 로드 시켜서 써드파티 스크립트가 html 로딩을 차단 시키지 않도록 할 수 있다.

 

결과적으로 초기 로딩 속도를 빠르게 하여 사용자 경험을 개선할 수 있다.

 

lazyOnLoad와 afterInteractive의 차이

• lazyOnLoad : 초기 페이지 로딩 속도를 향상시키는 것이 목적이다. 일단 불러오기만 하면 그 이후 동작은 신경 쓸 필요가 없는 라이브러리에 사용 (ex : 채널톡은 불러오기만 하면 그 이후 작동에는 우리 코드가 관여하지 않음 -> lazyOnLoad 사용)

 

• afterInteractive : 어플리케이션이 인터랙티브 상태에 도달한 후 추가 작업을 수행할 수 있게 하는 것이 목적. (ex : GTM의 작동방식은 코드에 입력함. 즉 우리 코드를 기반으로 추가 작업을 하기 때문에 afterInteractive에 속한다.)

---

참고  공식문서