PageSpeed Insights 점수가 유독 낮게 나오는 이유가 따로 있다

모바일 점수만 유독 낮으면 사이트가 나빠진 줄 알기 쉽지만, PageSpeed Insights는 데스크톱과 모바일을 서로 다른 환경으로 측정합니다⠀

새로고침을 몇 번 다시 해도 점수가 오르내리기만 하고, 어디를 먼저 손대야 할지는 화면만 봐서는 감이 오지 않습니다⠀

제 사이트 점수가 정말 유독 낮은 건지, 화면에 뜨는 LCP와 INP, CLS 숫자부터 하나씩 짚어 봅니다⠀

⠀⠀⠀

⠀⠀⠀

데스크톱은 멀쩡한데 모바일만 왜 낮을까⠀

⠀⠀⠀

⠀⠀⠀

처음에는 인터넷 문제인가 싶어서 새로고침을 몇 번 눌러 보게 됩니다⠀

점수가 매번 다르게 뜨는 건 흔한 일이라, 그 자체로는 사이트 문제라는 근거가 되지 않습니다⠀

다른 사이트 점수와 비교하기보다, 내 사이트의 데스크톱과 모바일 점수 차이부터 먼저 봅니다⠀

⠀⠀⠀

PageSpeed Insights 화면에서 같은 페이지의 데스크톱 점수와 모바일 점수를 나란히 보면 차이가 꽤 크게 벌어져 있습니다⠀

두 점수는 서로 다른 조건에서 측정한 결과입니다⠀

모바일 쪽은 4G급 네트워크와 중급 사양 CPU 정도의 처리 속도를 가정해 시뮬레이션합니다⠀

⠀⠀⠀

화면을 더 내려 보면 실험실 데이터와 실사용자 데이터라는 두 영역이 따로 나뉘어 있는 것도 보입니다⠀

실험실 데이터는 그 순간 시뮬레이션으로 잰 값이고, 실사용자 데이터는 그동안 방문자에게서 모인 값이라 두 점수가 다르게 나올 수 있습니다⠀

⠀⠀⠀

밤 11시에 스마트폰으로 접속하는 방문자에게는 모바일 조건이 실제 화면에 더 가깝습니다⠀

⠀⠀⠀

결과 화면 상단에서 데스크톱 탭과 모바일 탭을 눌러 두 점수를 각각 열어 봅니다⠀

두 탭 모두에서 LCP, INP, CLS 세 항목이 초록색인지 빨간색인지부터 봅니다⠀

⠀⠀⠀

무거운 사진부터 열어 봤습니다⠀

⠀⠀⠀

⠀⠀⠀

모바일 점수만 유독 낮다면, 측정 조건 탓만 하기 전에 그 페이지에 올라간 사진부터 열어 봅니다⠀

미디어 라이브러리에서 최근에 올린 사진의 파일 용량이 다른 사진보다 크게 잡혀 있는 경우가 있습니다⠀

메인 화면 맨 위에 걸어 둔 큰 사진일수록 이 LCP 항목에 미치는 영향이 큽니다⠀

⠀⠀⠀

썸네일로 쓰는 대표 사진이 페이지 맨 위에 걸려 있다면, 그 사진이 이 LCP 항목의 기준이 되는 사진일 가능성이 큽니다⠀

새 글 목록 페이지처럼 사진이 여러 장 한 번에 걸리는 화면에서는 그 영향이 한 장짜리 글보다 더 크게 나타나기도 합니다⠀

⠀⠀⠀

크기를 미리 지정하지 않은 사진은 페이지가 열리는 도중에 자리를 밀어내면서 CLS 항목 점수를 깎아 먹습니다⠀

광고 배너나 리뷰 위젯처럼 나중에 끼어드는 요소도 같은 방식으로 레이아웃을 흔듭니다⠀

⠀⠀⠀

지연 로딩을 걸어 두지 않은 사진이 많으면 화면에 보이지도 않는 아래쪽 사진까지 한꺼번에 불러오게 됩니다⠀

서버가 지원할 경우 워드프레스는 WebP나 AVIF 형식의 사진 업로드와 처리를 지원합니다⠀

다만 이미 올려 둔 예전 사진까지 저절로 이 형식으로 바뀌지는 않습니다⠀

⠀⠀⠀

이 사진 파일 형식이 예전부터 쓰던 JPG나 PNG 그대로인지도 함께 봐 둡니다⠀

새 글 하나만 유독 느리다면 그 글에 넣은 사진의 가로세로 픽셀 크기부터 큰 사진 순으로 봅니다⠀

⠀⠀⠀

사진 하나를 원본 크기 그대로 올렸다면, 화면에 보이는 크기로 줄여서 다시 올려 봅니다⠀

사진을 줄여 다시 올리고 나면 미디어 라이브러리에 표시되는 파일 용량 숫자가 눈에 띄게 줄어듭니다⠀

⠀⠀⠀

플러그인 탓은 이제 그만입니다⠀

⠀⠀⠀

⠀⠀⠀

플러그인 목록을 열어 보면 한동안 신경 쓰지 않았던 항목이 꽤 쌓여 있는 경우가 많습니다⠀

코드가 무겁게 짜인 플러그인 몇 개만 같이 켜져 있어도 점수가 낮게 잡히는 대표 원인 가운데 하나로 꼽힙니다⠀

⠀⠀⠀

이 단계에서 봐야 할 기준은 점수보다 화면에 뜨는 세 항목의 실제 숫자입니다⠀

LCP는 2.5초 미만, INP는 200밀리초 미만, CLS는 0.1 미만일 때 통과로 표시됩니다⠀

INP는 2024년 3월 FID를 대신하게 된 항목으로, 클릭이나 필터 버튼을 눌렀을 때 화면이 반응하는 속도를 잽니다⠀

⠀⠀⠀

플러그인이 자바스크립트를 여러 개 끼얹을수록 이 INP 숫자가 먼저 나빠지는 편입니다⠀

표시 속도보다 반응 속도가 문제라면, 최근에 추가한 상담창이나 채팅 위젯처럼 버튼이 많은 플러그인부터 의심해 봅니다⠀

⠀⠀⠀

이런 플러그인은 화면에 보이자마자 여러 스크립트를 한꺼번에 불러오는 경우가 많습니다⠀

쿠키 동의 배너나 팝업을 띄우는 플러그인도, 페이지가 열리자마자 위에서 떨어지듯 나타나면서 CLS 숫자를 흔듭니다⠀

이런 플러그인은 무작정 끄기보다, 배너가 나타나는 위치에 미리 자리를 잡아 두는 설정이 있는지부터 봅니다⠀

⠀⠀⠀

느려진 날짜 무렵 업데이트되었거나 새로 설치한 플러그인을, 백업해 둔 뒤 하나만 꺼 봅니다⠀

끄고 나서 같은 페이지를 다시 열어 세 항목의 숫자가 어느 쪽으로 움직이는지를 봅니다⠀

이 세 항목은 2021년 6월부터 구글 검색순위에도 반영되는 페이지 경험 신호에 포함되어 있습니다⠀

⠀⠀⠀

서버 탓만 해도 되는 걸까⠀

⠀⠀⠀

⠀⠀⠀

플러그인과 사진을 다 손봐도 점수가 크게 오르지 않는다면 이번에는 서버 응답 속도 쪽을 봅니다⠀

방문자가 몰리는 시간대에는 서버가 페이지를 조립하는 속도가 평소보다 더 늦어질 수 있습니다⠀

캐시가 설정되어 있지 않으면 방문할 때마다 이 조립 과정을 매번 새로 거치게 됩니다⠀

⠀⠀⠀

화면에 뜨는 LCP, INP, CLS 숫자는 실제 방문자 데이터를 모아 75번째 백분위수로 계산한 값입니다⠀

호스팅 회사 관리 화면에도 서버 응답 시간이라는 이름의 항목이 따로 표시되는 경우가 있습니다⠀

이 항목은 대개 짧은 숫자 하나로 표시되어 있어 한눈에 들어옵니다⠀

이 항목의 숫자가 유독 크게 잡혀 있다면, 그때 호스팅 업체에 문의해 볼 만합니다⠀

⠀⠀⠀

캐시 플러그인을 새로 설치하기 전에, 지금 쓰는 테마나 호스팅에 이미 캐시 기능이 포함되어 있는지부터 화면에서 봅니다⠀

두 캐시 기능이 동시에 켜져 있으면 오히려 화면이 깨지는 경우도 있어 하나만 켜 둡니다⠀

서버 캐시와 브라우저 캐시는 서로 다른 저장 위치를 쓰는 기능이라, 설정 화면도 대개 따로 나뉘어 있습니다⠀

⠀⠀⠀

캐시를 새로 켜고 나면, 같은 페이지를 다시 열었을 때 서버 응답 시간 항목의 숫자가 어떻게 바뀌는지를 같은 화면에서 다시 봅니다⠀

개인적으로는 한 번 튀어나온 점수보다 호스팅 관리 화면의 서버 응답 시간 항목 숫자 쪽을 먼저 눈여겨봅니다⠀

⠀⠀⠀

어제 점수를 다시 열어 봤습니다⠀

⠀⠀⠀

⠀⠀⠀

여기까지 손댄 다음에는 표를 하나 만들어 날짜와 점수를 함께 적어 둡니다⠀

같은 날 같은 페이지를 열어도 데스크톱과 모바일 점수는 따로 적어 두는 편이 나중에 비교하기 편합니다⠀

표 칸에는 점수 옆에 LCP와 INP, CLS 세 숫자도 같이 적어 둡니다⠀

점수는 그대로인데 세 숫자 가운데 하나만 유독 나빠졌다면, 그 항목을 다음 점검의 출발점으로 삼습니다⠀

⠀⠀⠀

Lighthouse는 구글이 만든 오픈소스 진단 엔진으로, PageSpeed Insights 점수 계산에 그대로 쓰입니다⠀

이 표의 날짜 칸에 오늘 반영된 Lighthouse 버전을 함께 적어 두면, 나중에 점수 차이가 버전 때문인지 사이트 때문인지 구분하기 쉬워집니다⠀

⠀⠀⠀

2025년 10월 20일에는 Lighthouse가 13.0으로 바뀌었고, 2026년 5월에는 13.3이 나오면서 화면에 새 항목이 추가되기도 했습니다⠀

이 새 항목은 점수 대신 9개 점검 항목을 통과와 미통과로 보여주는 방식이라, 기존 점수표와 헷갈리지 않게 따로 적어 둡니다⠀

표에 적어 둔 지난 점수와 오늘 점수 사이에 이런 버전 변경이 끼어 있었는지도 함께 봐 둡니다⠀

⠀⠀⠀

지금 PageSpeed Insights를 다시 열어서, 결과 화면 아래쪽에 작게 표시된 Lighthouse 버전 번호부터 표 맨 위 칸에 적어 둡니다⠀

오늘 날짜도 그 옆에 함께 남겨 둡니다⠀

다음에 다시 열어 볼 날짜는 그 아래 칸에 따로 표시해 둡니다⠀