구글이 ‘속도’의 기준을 바꿨다? INP(상호작용) 완벽 정복하고 SEO 점수 올리기

안녕하세요! 구글의 속마음을 읽어내는 SEO 디렉터입니다.

“내 블로그는 로딩도 빠르고 이미지도 최적화했는데, 왜 구글 서치 콘솔에서 ‘코어 웹 바이탈(CWV)’ 점수가 노란색(개선 필요)일까?”

혹시 이런 고민 해보셨나요? 그렇다면 범인은 바로 **INP(Interaction to Next Paint)**일 확률이 높습니다. 2024년 3월, 구글은 기존의 FID(First Input Delay)를 폐기하고, 더 까다로운 기준인 INP를 정식 지표로 도입했습니다.

이제는 ‘빨리 뜨는 것’만으로는 부족합니다. **’빠릿빠릿하게 반응하는 것’**이 핵심입니다.

1. INP가 도대체 뭔가요? (쉽게 이해하기)

INP는 사용자가 페이지와 상호작용(클릭, 탭, 키보드 입력) 했을 때, 화면이 실제로 반응을 보이기까지 걸리는 시간을 의미합니다.

  • 예시: 모바일 메뉴 버튼(≡)을 눌렀는데, 메뉴가 바로 안 나오고 0.5초 뒤에 스르륵 나온다면? 사용자는 “아, 답답해”라고 느낍니다. 이 답답한 0.5초가 바로 INP 시간입니다.

구글은 이 반응 시간이 200ms(0.2초) 이하여야 ‘좋음(Good)’으로 평가합니다. 그 이상 넘어가면 사용자가 답답함을 느끼고 사이트를 이탈할 확률이 높아지기 때문에 SEO 점수를 깎습니다.

2. INP의 주범: 무거운 자바스크립트(JS)

왜 반응이 느릴까요? 십중팔구 ‘자바스크립트(JavaScript)’ 때문입니다.

브라우저는 사용자가 버튼을 클릭하면 ①클릭을 감지하고, ②관련된 자바스크립트 코드를 실행하고, ③그 결과로 화면을 다시 그립니다. 그런데 실행해야 할 자바스크립트 코드가 너무 많고 무거우면, ②번 단계에서 병목현상이 발생해 화면이 멈칫거리는 것입니다.

워드프레스는 테마, 플러그인, 광고 스크립트 등 수많은 JS 파일이 얽혀 있어 INP에 특히 취약합니다.

3. 워드프레스 INP 최적화 실전 가이드

A. 범인 찾기: 어떤 스크립트가 문제인가?

먼저 구글의 PageSpeed Insights에 내 블로그 주소를 넣어보세요. 진단 결과 중 ‘기본 스레드 작업 최소화’ 또는 ‘자바스크립트 실행 시간 단축’ 항목을 보면, 어떤 파일이 브라우저를 바쁘게 만들고 있는지 범인을 알려줍니다. (보통 무거운 플러그인이나 광고 코드가 범인입니다.)

B. 해결책 1: 불필요한 플러그인 삭제 (다이어트)

가장 확실한 방법입니다. INP를 망치는 무거운 슬라이더 플러그인, 화려한 효과를 주는 디자인 플러그인 등을 꼭 필요한 게 아니라면 과감히 삭제하세요. 기능이 많을수록 사이트는 느려집니다.

C. 해결책 2: 자바스크립트 지연 로딩 (Defer/Delay)

당장 필요 없는 스크립트는 나중에 불러오게 하세요.

  • WP Rocket (유료 추천): ‘파일 최적화’ 탭에서 **’Load JavaScript deferred(JS 지연 로드)’**와 ‘Delay JavaScript execution(JS 실행 지연)’ 옵션을 켜는 것만으로 INP 점수가 극적으로 개선됩니다.
  • 무료 대안: ‘Autoptimize’나 ‘Async JavaScript’ 같은 무료 플러그인으로도 비슷한 효과를 낼 수 있지만, 설정이 조금 더 복잡할 수 있습니다.

D. 해결책 3: 가벼운 테마 사용

테마 자체가 무거우면 아무리 최적화해도 한계가 있습니다. ‘GeneratePress’, ‘Astra’, ‘Kadence’ 같이 속도에 최적화된 가벼운 테마를 사용하는 것이 INP 개선의 기본입니다.


💡 실제 경험담

“제 블로그는 페이지 로딩 속도(LCP)는 1초대로 빨랐는데, 서치 콘솔에서 자꾸 INP 문제가 떴습니다. 확인해 보니 모바일에서 ‘카카오톡 공유 버튼’ 플러그인이 클릭 반응을 0.6초나 잡아먹고 있었죠.

고민 끝에 무거운 공유 플러그인을 삭제하고, 가벼운 HTML 코드로 된 공유 버튼으로 교체했습니다. 그리고 애드센스 광고 코드도 ‘지연 로딩’을 적용했죠.

결과는 놀라웠습니다. INP 시간이 600ms에서 150ms로 줄어들었고, 서치 콘솔의 ‘코어 웹 바이탈’ 그래프가 노란색에서 **모두 초록색(좋음)**으로 바뀌었습니다. 사용자들은 더 쾌적하게 사이트를 이용하게 되었고, 덩달아 페이지뷰도 올랐습니다.”


❓ 자주 묻는 질문 (FAQ)

Q1. INP랑 LCP(최대 콘텐츠 풀 페인트)랑 다른 건가요? A. 네, 완전히 다릅니다. LCP는 ‘화면이 얼마나 빨리 보이는가(로딩 속도)’이고, INP는 ‘버튼을 눌렀을 때 얼마나 빨리 반응하는가(반응 속도)’입니다. 둘 다 좋아야 진정한 최적화입니다.

Q2. 애드센스 광고가 INP를 망치는데 어떡하죠? A. 광고 스크립트는 외부에 있어서 통제가 어렵습니다. 최선은 광고가 페이지 로딩을 막지 않도록 ‘지연 로딩’하거나, 광고 개수를 줄이는 것입니다. 특히 본문 상단 광고가 INP에 악영향을 줄 수 있습니다.

Q3. 제 컴퓨터에선 빠른데 왜 점수가 낮게 나오죠? A. 구글 CWV 데이터는 실제 사용자(그중에서도 성능이 낮은 모바일 기기 사용자)의 데이터를 바탕으로 합니다. 내 고사양 PC와 빵빵한 와이파이 환경이 아닌, 저사양 폰과 느린 데이터 환경에서도 쾌적해야 진짜 빠른 사이트입니다.


결론

INP는 구글이 우리에게 던지는 메시지입니다. “화려한 기능보다, 사용자의 클릭 한 번에 즉각 반응하는 쾌적함을 제공하라.”

무거운 자바스크립트라는 짐을 덜어내세요. 사용자의 손가락 끝에 날개를 달아주는 순간, 구글은 여러분의 사이트를 더 높은 곳으로 올려줄 것입니다.

Leave a Comment