잘 나가던 클라이언트의 블로그 트래픽이 갑자기 30%나 곤두박질친 적이 있습니다. 콘텐츠는 여전히 훌륭했지만, 문제는 구글 서치 콘솔의 ‘환경’ 탭이었습니다. INP(상호작용 후 다음 페인트) 점수가 500ms를 넘겨 ‘불량’ 판정을 받고 있었던 거죠. 사용자가 메뉴를 눌렀는데 0.5초 동안 아무 반응이 없으니 구글이 페널티를 준 겁니다.
밤새 원인을 파헤친 결과, 범인은 무거운 자바스크립트였습니다. 오늘 소개할 이 ‘플러그인 조합’을 적용하자마자, 거짓말처럼 점수는 100ms 이하의 녹색불로 돌아왔고 트래픽도 회복되었습니다. 여러분의 블로그도 지금 당장 ‘반응하는 사이트’로 심폐 소생술을 시작해 봅시다.
1. FID는 잊으세요, 이제는 INP의 시대입니다
과거의 FID가 “문 열고 들어갈 때 얼마나 걸리나”를 쟀다면, INP는 “가게 안에서 점원을 불렀을 때 얼마나 빨리 대답하나”를 측정합니다. 즉, 페이지 로딩이 끝난 후에도 사용자가 버튼을 클릭하거나 메뉴를 열 때 버벅거림이 없어야 합니다.
“솔직히 고백하자면, 저도 처음엔 단순히 ‘캐시 플러그인’만 쓰면 되는 줄 알았습니다. 하지만 INP는 다릅니다. 아무리 로딩이 빨라도, 백그라운드에서 무거운 스크립트가 돌아가고 있다면 클릭 반응 속도는 느려집니다. 핵심은 CPU를 쉬게 해주는 것입니다.”
2. [무료] INP 해결을 위한 최강의 플러그인 조합
유료인 WP Rocket을 쓰면 편하겠지만, 무료로도 충분히 가능합니다. 제가 수백 번의 테스트 끝에 찾아낸 ‘황금 조합’은 다음과 같습니다.
- ✅ 기반: LiteSpeed Cache (또는 W3 Total Cache): 기본적인 페이지 캐싱과 이미지 최적화를 담당합니다. 하지만 이것만으로는 부족합니다.
- ✅ 핵심: Flying Scripts (또는 Debloat): 바로 이 녀석이 주인공입니다. 무거운 자바스크립트(애드센스 광고, 통계 코드 등)의 실행을 ‘사용자 상호작용 이후’로 미뤄줍니다.
3. 실전 설정: 자바스크립트 지연(Delay JS)이 답이다
INP 점수를 갉아먹는 주범은 대부분 ‘무거운 테마의 기능’이나 ‘외부 광고 스크립트’입니다. 이들이 메인 스레드(Main Thread)를 점유하고 있어서 클릭해도 반응이 없는 거죠.
Flying Scripts 플러그인을 설치하고 설정 메뉴로 가세요. 그리고 Delay JavaScript 입력란에 다음 키워드들을 넣으세요.
adsbygoogle.js
google-analytics
fbq
/wp-content/plugins/some-heavy-plugin/
이렇게 설정하면 해당 스크립트들은 페이지가 뜨자마자 실행되는 게 아니라, 사용자가 마우스를 움직이거나 스크롤을 할 때 비로소 로드됩니다. 그 결과, 초기 반응 속도(INP)가 비약적으로 빨라집니다.
💡 코드캠의 실전 TIP
많은 분들이 놓치는 디테일이 있습니다. 바로 ‘메뉴와 기능 확인’입니다. 자바스크립트를 너무 과하게 지연시키면 모바일 햄버거 메뉴가 안 열리거나 슬라이더가 작동하지 않을 수 있습니다. 설정 후 반드시 시크릿 모드에서 사이트가 정상 작동하는지 눌러보세요.
결국은 ‘사용자 경험’입니다
구글이 지표 이름을 FID에서 INP로 바꾼 이유는 명확합니다. 기계적인 속도보다 ‘사용자가 느끼는 쾌적함’이 더 중요하기 때문입니다. 오늘 알려드린 플러그인 조합은 단순히 점수놀이를 위한 것이 아닙니다. 내 블로그에 방문한 손님에게 “이 사이트는 정말 빠릿빠릿하네?”라는 기분 좋은 경험을 주기 위함입니다.
지금 바로 서치 콘솔을 열어보세요. 혹시 INP 경고가 떠 있다면, 당장 이 플러그인들을 설치하고 28일 뒤의 변화를 기다려 보십시오. 녹색 불이 켜지는 순간, 여러분의 애드센스 수익 그래프도 함께 우상향할 것입니다.
