채팅 상담 위젯 때문에 홈페이지가 느릴 때, 첫 스크롤 뒤에 불러오는 법

채팅 상담 버튼을 달고 나서 PageSpeed 점수가 눈에 띄게 떨어진 경험, 생각보다 흔합니다.
위젯 스크립트는 첫 화면에 꼭 필요하지 않은데도 페이지와 함께 내려받아 실행되기 때문입니다.
방문자가 처음 스크롤하거나 화면을 누른 뒤에 위젯을 불러오면 상담 기능은 그대로 두고 첫 로딩만 가볍게 만들 수 있습니다.

1. 첫 동작이 생길 때 스크립트를 넣기

업체가 준 설치 코드에서 스크립트 파일을 불러오는 부분만 아래처럼 함수로 감쌉니다. scroll, pointerdown, keydown 중 하나라도 생기면 한 번만 실행되고, 아무 동작 없이 머무는 방문자를 위해 몇 초 뒤 타이머로도 불러옵니다. { once: true }를 주면 이벤트 리스너가 한 번 실행된 뒤 스스로 빠집니다.

<!-- head에 바로 넣던 위젯 스크립트 대신 body 끝에 -->
<script>
(function () {
  var loaded = false;
  function loadChat() {
    if (loaded) return;
    loaded = true;
    var s = document.createElement('script');
    s.src = 'https://업체가-준-주소/plugin.js'; /* 안내받은 주소 그대로 */
    s.async = true;
    document.body.appendChild(s);
  }
  /* 첫 스크롤, 터치, 키 입력 중 하나만 생겨도 불러오기 */
  ['scroll', 'pointerdown', 'keydown'].forEach(function (ev) {
    window.addEventListener(ev, loadChat, { once: true, passive: true });
  });
  /* 아무 동작이 없어도 6초 뒤에는 불러오기 */
  setTimeout(loadChat, 6000);
})();
</script>

설치 코드가 boot나 설정 함수를 먼저 호출하고 그 호출을 큐에 쌓아 두는 구조라면, 그 부분은 원래 자리에 두고 스크립트 삽입 부분만 위 함수로 옮기면 됩니다. 구조가 헷갈리면 업체 개발 문서에서 지연 로딩이나 수동 초기화 항목을 먼저 찾아보세요. 공식으로 지원하는 방법이 있다면 그쪽이 가장 안전합니다.

2. 미뤄도 되는 것과 미루면 안 되는 것 나누기

이 방식은 다른 외부 스크립트에도 쓸 수 있지만, 전부 미루면 오히려 손해입니다. 저희가 작업할 때 쓰는 기준은 "첫 화면을 보는 데 필요한가, 바로 나가는 방문자도 기록해야 하는가" 두 가지입니다.

3. 정말 늦게 불러오는지 확인하기

크롬 개발자 도구 Network 탭을 열고 위젯 도메인으로 필터를 건 뒤 새로고침합니다. 화면을 건드리기 전에는 아무 요청도 없다가 스크롤하는 순간 줄줄이 찍히면 제대로 적용된 겁니다. 그다음 PageSpeed Insights로 다시 재 보세요. 한 번만 재면 편차가 크니 두세 번 측정해 비교하는 게 좋습니다. 마지막으로 휴대폰에서 상담 버튼을 직접 눌러 대화창이 정상적으로 열리는지까지 봐야 끝입니다.