같은 워드프레스인데 휴대폰에서만 느리게 열리는 이유

워드프레스 관리자 화면에서는 사이트가 멀쩡한데, 휴대폰으로 열어보면 유독 느리게 뜨는 순간이 있습니다⠀

PC에서 PageSpeed Insights를 돌리면 점수가 괜찮게 나오는데, 모바일 탭만 유독 낮게 찍혀 있는 걸 보게 됩니다⠀

새로고침을 몇 번을 해도 달라지지 않는 이 숫자는, 사실 회선이 아니라 테스트 조건이 다르게 짜여 있는 탓일 수 있습니다⠀

⠀⠀⠀

⠀⠀⠀

새로고침해도 안 바뀌는 진짜 이유⠀

⠀⠀⠀

처음에는 인터넷 문제인가 싶어서 새로고침을 몇 번 눌러보게 되는데, 숫자는 좀처럼 바뀌지 않습니다⠀

같은 와이파이로 다른 사이트를 열어보면 그쪽은 금방 뜨는 걸 보고서야 내 사이트만의 문제라고 느끼게 됩니다⠀

⠀⠀⠀

퇴근길 지하철에서 휴대폰으로 자기 사이트를 열어보는 운영자라면 이 답답함이 유독 크게 느껴질 수 있습니다⠀

플러그인을 줄이라거나 캐시를 깔라거나 호스팅을 바꾸라는 이야기를 검색해봐도, 방법이 제각각이라 뭐부터 손대야 할지 막막해지기도 합니다⠀

이때 봐야 할 곳은 휴대폰 회선 상태가 아니라, PageSpeed Insights가 모바일 점수를 잴 때 걸어두는 조건 쪽입니다⠀

⠀⠀⠀

⠀⠀⠀

이 도구는 지금 이 순간 휴대폰이 잡고 있는 실제 신호를 재는 게 아니라, 미리 정해둔 가상의 환경에서 페이지를 새로 불러와 시간을 잽니다⠀

결과 화면 위쪽에는 ‘모바일’과 ‘데스크톱’ 탭이 나란히 있고, 그 아래 ‘실험실 데이터’라는 이름으로 측정값이 묶여 있습니다⠀

화면을 더 내려보면 ‘필드 데이터’라는 항목도 따로 있는데, 이쪽은 실제 방문자의 크롬 브라우저에서 최근 28일간 모은 값입니다⠀

실험실 데이터는 도구가 정해진 조건으로 매번 새로 재는 값이고, 필드 데이터는 그동안 사이트를 열어본 사람들의 기록입니다⠀

⠀⠀⠀

새로고침을 반복해도 그대로인 숫자는 대부분 이 실험실 데이터 쪽이라서, 회선을 바꿔봐도 크게 달라지지 않습니다⠀

워드프레스는 모바일과 PC에 같은 코드를 내려주는 경우가 대부분이라, 사이트 설정이 둘을 다르게 갈라놓는 것도 아닙니다⠀

점수 차이의 실마리는 사이트 설정보다, 이 실험실 데이터가 어떤 조건으로 재는지에 있습니다⠀

⠀⠀⠀

모바일 테스트는 1.6Mbps로 잰다⠀

⠀⠀⠀

PageSpeed Insights 모바일 테스트는 실제 4G 신호가 아니라 ‘Slow 4G’라는 이름이 붙은 가상 환경에서 진행됩니다⠀

다운로드 속도는 약 1.6Mbps로 맞춰져 있고, 지연 시간은 150ms로 고정한 채로 페이지를 처음부터 다시 불러옵니다⠀

업로드 속도 역시 750Kbps로 함께 정해져 있어, 세 가지 값이 한 세트로 묶여 있습니다⠀

⠀⠀⠀

⠀⠀⠀

이 수치는 Lighthouse 공식 문서가 권장하는 값으로, 4G 회선 중 하위 25%, 3G 회선 중 상위 25% 수준에 해당한다고 적혀 있습니다⠀

실제로 쓰는 휴대폰이 LTE든 5G든 상관없이, 도구 안에서는 이 정도로 느린 회선을 가정하고 로딩 시간을 잽니다⠀

⠀⠀⠀

사무실이나 집 와이파이가 아무리 빠르더라도, PageSpeed Insights 모바일 탭 점수에는 그 속도가 반영되지 않습니다⠀

스피드테스트 앱으로 잰 실제 회선 속도와는 완전히 별개로, 이 값은 도구 안에 고정되어 있습니다⠀

이 조건은 결과 화면 ‘실험실 데이터’ 아래, 네트워크 처리량이 적힌 자리에서 볼 수 있습니다⠀

페이지 안에 있는 사진과 스크립트를 이 느린 회선으로 하나씩 내려받는 시간까지 합쳐서 전체 로딩 시간이 계산됩니다⠀

⠀⠀⠀

사진 용량이 크거나 외부 스크립트가 많이 걸려 있을수록, 이 구간에서 걸리는 시간이 눈에 띄게 늘어나게 됩니다⠀

서버가 지원할 경우, 사진을 WebP나 AVIF 형식으로 새로 올리면 같은 화면이라도 받아야 할 용량이 줄어듭니다⠀

⠀⠀⠀

CPU는 4배 느려진다⠀

⠀⠀⠀

네트워크만 느리게 잡아놓는 게 아니라, Lighthouse는 모바일 측정에서 CPU 처리 속도까지 기본 4배 낮춰서 계산합니다⠀

데스크톱 컴퓨터에서 100ms 만에 끝나는 자바스크립트 실행이, 모바일 시뮬레이션에서는 약 400ms짜리 작업으로 바뀌어 잡힙니다⠀

워드프레스 페이지 하나가 여러 플러그인과 테마 스크립트를 합쳐 1메가바이트에서 3메가바이트가량의 자바스크립트를 불러오는 경우가 흔합니다⠀

데스크톱 CPU라면 200ms에서 500ms 안에 처리될 양이, 이 4배 감속 아래에서는 800ms에서 2초까지 늘어나 잡힙니다⠀

⠀⠀⠀

⠀⠀⠀

페이지 빌더나 모든 글에 스크립트를 붙이는 플러그인을 쓰고 있다면, 이 구간에서 모바일 점수가 유독 더 낮게 나올 수 있습니다⠀

이 CPU 감속은 결과 화면 진단 항목 가운데 ‘기본 실행 스레드 작업’ 부근에 걸린 시간으로 나타납니다⠀

그 항목 옆 세부 내역을 펼쳐보면, 어떤 스크립트가 시간을 얼마나 쓰고 있는지 이름과 함께 적혀 있습니다⠀

⠀⠀⠀

플러그인 목록에서 최근에 새로 설치한 것들을 살펴보면, 페이지마다 스크립트를 붙이는 항목이 눈에 띄기도 합니다⠀

백업을 해둔 뒤, 최근 설치한 플러그인 하나를 잠깐 꺼보고 같은 페이지를 다시 재는 방식으로 영향을 가늠해볼 수 있습니다⠀

한 번에 여러 플러그인을 껐다 켜면 무엇 때문에 시간이 줄었는지 알기 어려워지니, 하나씩 바꿔가며 다시 재는 쪽이 원인을 가려내는 데 도움이 됩니다⠀

이 작업 시간이 유독 큰 페이지일수록, 모바일 탭 점수가 데스크톱보다 크게 벌어지는 경우가 많습니다⠀

⠀⠀⠀

데스크톱은 봐주고 모바일은 안 봐준다⠀

⠀⠀⠀

같은 페이지를 데스크톱 탭으로 재면 전혀 다른 조건이 적용됩니다⠀

데스크톱 테스트는 다운로드 약 10Mbps, 지연 40ms 수준의 광대역 환경에서 진행됩니다⠀

여기에는 CPU 감속도 걸리지 않아서, 자바스크립트 실행이든 화면 렌더링이든 컴퓨터가 가진 처리 속도 그대로 계산됩니다⠀

⠀⠀⠀

⠀⠀⠀

모바일 탭은 1.6Mbps 회선에 CPU 4배 감속까지 얹어 재고, 데스크톱 탭은 10Mbps 회선에 감속 없이 잽니다⠀

앞서 본 100ms짜리 자바스크립트 작업이 데스크톱에서는 그대로 100ms로 남지만, 모바일 조건에서는 400ms로 늘어나 잡힙니다⠀

100KB 정도인 CSS 파일 하나도 데스크톱에서는 약 80ms면 받아지지만, 모바일 조건에서는 약 500ms까지 걸리는 것으로 알려져 있습니다⠀

Lighthouse는 기본값으로 ‘시뮬레이션 스로틀링’이라는 방식을 써서, 실제 느린 환경을 통째로 재현하는 대신 계산으로 그 상황을 다시 만들어냅니다⠀

⠀⠀⠀

렌더링을 막는 CSS가 있는 페이지라면, 이 계산 방식 위에서 대기 시간이 한 번 더 쌓이게 됩니다⠀

결과 화면에서 데스크톱 탭과 모바일 탭을 나란히 눌러보면, 같은 항목이라도 걸린 시간이 몇 배씩 차이 나는 것을 눈으로 보게 됩니다⠀

사이트 코드를 한 줄도 바꾸지 않았는데도, 어느 탭을 누르느냐에 따라 이만큼 다른 조건 위에서 시간이 매겨지고 있습니다⠀

Core Web Vitals 항목인 LCP나 CLS 값도 이 두 탭에서 서로 다른 조건 위에서 각각 계산됩니다⠀

⠀⠀⠀

같은 사이트인데 점수는 왜 다를까⠀

⠀⠀⠀

결국 같은 워드프레스 사이트라도 모바일 탭과 데스크톱 탭이 서로 다른 환경을 가정하고 점수를 매기기 때문에 성적표가 갈리게 됩니다⠀

다만 이 차이를 전부 측정 조건 탓으로 돌리기는 어렵습니다⠀

⠀⠀⠀

반응형 이미지 없이 데스크톱용 원본 사진을 그대로 올려두면, 휴대폰이 그 큰 파일을 받아 줄여서 표시하느라 시간이 더 걸립니다⠀

렌더링을 막는 CSS나 무거운 플러그인 스크립트도 느린 조건 위에서는 그 무게가 훨씬 크게 드러나게 됩니다⠀

필드 데이터 칸에는 LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하를 ‘좋음’ 구간으로 나눈 표도 함께 뜹니다⠀

⠀⠀⠀

⠀⠀⠀

이 표는 앞서 본 28일치 실제 방문자 값을 백분위수로 묶어 판정한 결과라서, 실험실 데이터와는 따로 봐야 합니다⠀

개인적으로는 자바스크립트 용량이 1메가바이트를 넘는 페이지라면, 점수 차이를 테스트 조건 탓만으로 보기는 어렵다고 봅니다⠀

⠀⠀⠀

WP Rocket이라는 캐시 플러그인에는 모바일 기기에 별도 캐시 파일을 만드는 옵션이 있어, 반응형 테마가 아니거나 모바일 전용 요소를 쓰는 사이트에 도움이 된다고 안내되어 있습니다⠀

최근 버전에서는 이 옵션이 ‘모바일 캐시’ 항목에 합쳐져 기본으로 켜진 채로 제공되고 있습니다⠀

플러그인을 쓰고 있다면 설정 화면의 ‘모바일 캐시’ 항목이 켜져 있는지 그 화면에서 살펴볼 수 있습니다⠀

반응형 테마를 쓰고 있고 모바일 전용 요소가 따로 없다면, 이 옵션을 굳이 켜두지 않아도 되는 경우가 많다고 문서에 적혀 있습니다⠀

⠀⠀⠀

오늘 본 모바일 탭 점수와 옆에 있는 데스크톱 탭 점수를 화면 그대로 스크린샷으로 남겨두면, 나중에 무엇이 달라졌는지 비교할 기준이 됩니다⠀

결과 화면 맨 위에는 테스트를 돌린 날짜와 시각도 함께 찍혀 있어, 이 기록과 나란히 남겨두면 좋습니다⠀