티스토리 PageSpeed Insights 모바일 점수 개선 방법｜LCP·INP·CLS 지표별 점검 순서

티스토리 블로그를 운영하면서 모바일 화면을 점검하다 보면 PageSpeed Insights라는 성능 분석 도구를 접하게 됩니다.

게시글 주소를 입력하면 모바일 성능 점수와 함께 LCP, INP, CLS 같은 낯선 지표가 표시됩니다.

처음 분석 결과를 확인하면 이런 궁금증이 생길 수 있습니다.

“모바일 점수가 낮으면 Google 검색 노출에 문제가 생길까?”

“LCP와 INP, CLS는 각각 무엇을 의미할까?”

“티스토리에서도 성능 점수를 개선할 수 있을까?”

특히 애드센스 광고를 사용하는 블로그라면 이미지와 광고, 스킨 코드가 페이지 속도에 어떤 영향을 주는지도 궁금할 수 있습니다.

하지만 PageSpeed Insights에서 점수가 낮게 나왔다고 해서 반드시 블로그 전체에 문제가 있다는 뜻은 아닙니다.

또한 점수를 높인다고 검색 순위가 자동으로 상승하거나 애드센스 승인이 보장되는 것도 아닙니다.

중요한 것은 점수 자체보다 실제 방문자가 페이지를 얼마나 빠르고 안정적으로 이용할 수 있는지 확인하는 것입니다.

이번 글에서는 PageSpeed Insights의 모바일 분석 방법부터 LCP·INP·CLS의 의미, 티스토리에서 직접 확인할 수 있는 개선 항목, 수정 후 결과를 비교하는 방법까지 정리하겠습니다.

✓ 1. PageSpeed Insights는 어떤 도구인가요?

PageSpeed Insights는 웹페이지의 성능을 분석하고 개선할 수 있는 항목을 보여주는 Google의 도구입니다.

분석하려는 URL을 입력하면 모바일과 데스크톱 환경에 대한 결과를 확인할 수 있습니다.

대표적으로 다음 정보를 제공합니다.

페이지 성능 점수

실제 사용자 경험 데이터가 있는 경우 해당 데이터

실험실 환경에서 측정한 성능 결과

로딩 속도와 화면 안정성 관련 지표

개선할 수 있는 항목에 대한 진단 정보

다만 모든 URL에서 실제 사용자 데이터가 제공되는 것은 아닙니다.

충분한 데이터가 없는 경우에는 실험실 분석 결과만 확인할 수도 있습니다.

따라서 분석 결과를 볼 때는 실제 사용자 데이터와 실험실 데이터를 구분하는 것이 중요합니다.

✓ 2. 모바일 성능 점수는 어떻게 이해해야 할까요?

PageSpeed Insights의 성능 점수는 일반적으로 0점부터 100점까지 표시됩니다.

실험실 성능 점수의 기본 구분은 다음과 같습니다.

90~100점

좋음

50~89점

개선 필요

0~49점

낮음

이 점수는 여러 성능 지표를 바탕으로 계산됩니다.

하지만 한 번 측정한 점수를 블로그의 고정된 성능 수준이라고 생각하면 안 됩니다.

측정 환경과 네트워크 상태, 페이지 구성 등에 따라 결과가 달라질 수 있기 때문입니다.

특히 티스토리는 스킨과 이미지, 외부 스크립트, 광고 등의 영향을 받을 수 있습니다.

따라서 점수가 몇 점인지 확인한 뒤 실제로 어떤 항목에서 문제가 발생했는지 살펴보는 것이 좋습니다.

✓ 3. LCP·INP·CLS의 차이를 이해합니다

Google의 Core Web Vitals는 실제 사용자 경험과 관련된 세 가지 핵심 지표를 중심으로 구성됩니다.

LCP

로딩 속도

페이지에서 가장 큰 주요 콘텐츠 요소가 표시되는 데 걸리는 시간

INP

반응성

방문자의 클릭이나 입력에 페이지가 얼마나 빠르게 반응하는지

CLS

화면 안정성

페이지를 이용하는 동안 화면 요소가 예상치 않게 얼마나 움직이는지

세 지표는 서로 다른 문제를 나타냅니다.

페이지가 느리게 표시되는 문제와 버튼 반응이 늦는 문제, 화면이 갑자기 움직이는 문제는 원인과 개선 방법이 다를 수 있습니다.

따라서 세 지표를 하나의 속도 문제로 생각하지 않는 것이 좋습니다.

✓ 4. LCP는 주요 콘텐츠가 표시되는 속도입니다

LCP는 Largest Contentful Paint의 약자입니다.

방문자가 페이지를 열었을 때 화면에 보이는 주요 콘텐츠 중 가장 큰 요소가 표시되는 데 걸리는 시간을 측정합니다.

예를 들어 게시글 상단에 큰 대표 이미지가 있다면 해당 이미지가 LCP 요소가 될 수 있습니다.

다른 페이지에서는 큰 제목이나 텍스트 영역이 LCP 요소가 될 수도 있습니다.

LCP가 느리면 방문자는 페이지가 충분히 표시되기까지 오래 기다려야 할 수 있습니다.

일반적인 LCP 평가 기준은 다음과 같습니다.

좋음

### ≤ 2.5초

개선 필요

### ≤ 4초

느림

### ＞ 4초

실제 사용자 경험을 평가할 때 일반적으로 사용하는 기준입니다.

다만 LCP 수치가 느리다고 해서 무조건 이미지가 원인인 것은 아닙니다.

서버 응답과 스타일 파일, 글꼴, 외부 리소스 등이 영향을 줄 수도 있습니다.

✓ 5. 티스토리에서 LCP를 개선할 때 확인할 것

LCP가 느리다면 먼저 게시글 상단에 어떤 콘텐츠가 표시되는지 확인합니다.

특히 큰 이미지가 있다면 파일 크기와 표시 방식을 살펴보는 것이 좋습니다.

확인할 항목은 다음과 같습니다.

상단 이미지의 파일 크기가 지나치게 크지 않은가?

실제 표시 크기보다 훨씬 큰 이미지를 사용하고 있지는 않은가?

불필요하게 많은 이미지가 첫 화면에 배치되어 있지는 않은가?

외부에서 불러오는 글꼴이나 스크립트가 많은가?

스킨에 사용하지 않는 요소가 포함되어 있지는 않은가?

이미지는 필요한 품질을 유지하면서 파일 크기를 줄이는 방법을 검토할 수 있습니다.

다만 무조건 이미지를 삭제하거나 해상도를 낮추는 것이 정답은 아닙니다.

정보 전달에 필요한 이미지라면 가독성을 유지하는 것이 중요합니다.

또한 LCP 요소 자체를 무조건 지연 로딩하도록 변경하는 것은 오히려 표시 속도를 늦출 수 있으므로 주의해야 합니다.

✓ 6. INP는 클릭과 입력에 대한 반응성입니다

INP는 Interaction to Next Paint의 약자입니다.

방문자가 페이지를 이용하면서 클릭하거나 키보드로 입력하는 등의 상호작용을 했을 때 화면이 얼마나 빠르게 반응하는지 평가하는 지표입니다.

예를 들어 모바일 메뉴 버튼을 눌렀는데 메뉴가 늦게 열린다면 반응성 문제를 의심할 수 있습니다.

또는 특정 기능을 실행했을 때 화면이 한동안 반응하지 않는 경우도 있습니다.

INP의 일반적인 평가 기준은 다음과 같습니다.

좋음

### ≤ 200ms

개선 필요

### ≤ 500ms

느림

### ＞ 500ms

INP는 단순히 페이지가 처음 열리는 속도와는 다릅니다.

페이지가 빠르게 표시되더라도 클릭에 대한 반응이 느리다면 INP 문제가 발생할 수 있습니다.

✓ 7. 티스토리에서 INP를 개선할 때 확인할 것

티스토리에서 INP 관련 문제를 확인할 때는 실제로 클릭할 수 있는 요소부터 살펴봅니다.

대표적으로 모바일 메뉴, 검색 버튼, 목차 이동, 댓글 기능 등이 있습니다.

특히 스킨에 별도로 추가한 JavaScript 코드가 있다면 해당 기능이 필요한지 확인할 수 있습니다.

예를 들어 방문자에게 특별한 도움을 주지 않는 애니메이션이나 복잡한 효과가 여러 개 적용되어 있다면 성능에 영향을 줄 가능성이 있습니다.

다만 외부 스크립트가 있다는 사실만으로 반드시 INP 문제가 발생한다고 단정할 수는 없습니다.

먼저 실제로 반응이 느린 기능이 있는지 확인하고 분석 결과와 비교하는 것이 좋습니다.

티스토리 플랫폼 자체에서 제공하는 기능이나 광고 관련 스크립트는 운영자가 직접 제어하기 어려울 수 있다는 점도 고려해야 합니다.

✓ 8. CLS는 화면이 갑자기 움직이는 정도입니다

CLS는 Cumulative Layout Shift의 약자입니다.

페이지를 이용하는 동안 화면 요소가 예상하지 못하게 이동하는 정도를 나타냅니다.

예를 들어 게시글을 읽고 있는데 이미지가 뒤늦게 나타나 본문이 아래로 밀리는 상황을 생각할 수 있습니다.

또는 메뉴를 누르려는 순간 광고 영역이 나타나 버튼 위치가 바뀔 수도 있습니다.

이러한 변화는 방문자가 콘텐츠를 읽거나 클릭하는 데 불편을 줄 수 있습니다.

CLS의 일반적인 평가 기준은 다음과 같습니다.

좋음

### ≤ 0.1

개선 필요

### ≤ 0.25

높음

### ＞ 0.25

CLS는 초 단위가 아닌 점수로 표시됩니다.

CLS가 높다면 페이지가 열리는 동안 어떤 요소가 움직이는지 확인하는 것이 중요합니다.

✓ 9. 티스토리에서 CLS를 개선할 때 확인할 것

CLS 문제는 이미지와 광고, 글꼴, 동적으로 표시되는 요소 등 다양한 원인으로 발생할 수 있습니다.

먼저 실제 스마트폰에서 게시글을 열어봅니다.

그리고 로딩 중 화면이 움직이는지 확인합니다.

특히 다음 상황을 살펴봅니다.

이미지가 늦게 나타나면서 본문이 밀리는가?

광고가 표시되면서 화면 위치가 바뀌는가?

글꼴이 변경되면서 문단 높이가 달라지는가?

상단 배너가 뒤늦게 나타나는가?

스킨의 특정 요소가 로딩 후 크기를 변경하는가?

이미지 영역에 적절한 크기 정보가 제공되면 레이아웃 이동을 줄이는 데 도움이 될 수 있습니다.

다만 티스토리 자동 광고처럼 표시 방식이 동적으로 결정되는 요소는 운영자가 모든 상황을 직접 제어하기 어려울 수 있습니다.

따라서 실제로 조정 가능한 요소와 플랫폼이나 광고 시스템에서 관리하는 요소를 구분해야 합니다.

✓ 10. 실제 사용자 데이터와 실험실 데이터를 구분합니다

PageSpeed Insights에서는 실제 사용자 데이터와 실험실 분석 결과를 함께 확인할 수 있습니다.

두 결과는 측정 방식이 다릅니다.

실제 사용자 데이터는 조건을 충족하는 경우 Chrome 사용자 경험 데이터를 바탕으로 제공됩니다.

일반적으로 최근 28일 동안의 데이터를 활용하며, 핵심 지표는 75번째 백분위수 기준으로 평가합니다.

반면 실험실 데이터는 정해진 환경에서 분석을 실행한 결과입니다.

따라서 두 결과가 서로 다르게 나타날 수 있습니다.

예를 들어 실험실 점수는 낮지만 실제 사용자 데이터에서는 양호한 결과가 나타날 수도 있습니다.

반대 상황도 가능합니다.

중요한 것은 두 데이터를 같은 의미로 생각하지 않는 것입니다.

실제 사용자 데이터는 방문자 경험을 이해하는 데 활용하고, 실험실 결과는 구체적인 개선 항목을 찾는 데 활용하는 것이 좋습니다.

✓ 11. 광고가 모바일 성능에 미치는 영향을 확인합니다

애드센스 광고를 사용하는 티스토리 블로그라면 광고가 페이지 성능에 영향을 줄 수 있습니다.

광고를 불러오는 과정에서 외부 리소스가 사용될 수 있기 때문입니다.

또한 광고가 늦게 표시되면서 화면 배치가 바뀌는 상황도 발생할 수 있습니다.

하지만 광고가 있다는 이유만으로 모든 성능 문제가 발생한다고 판단해서는 안 됩니다.

이미지와 스킨, 외부 스크립트 등 다른 요소도 함께 영향을 줄 수 있습니다.

광고 관련 점검에서는 다음 내용을 확인합니다.

광고가 본문을 가리지 않는가?

광고 때문에 화면이 크게 움직이는가?

광고와 클릭 가능한 요소가 지나치게 가까운가?

자동 광고 설정에서 불필요한 형식을 사용하고 있지는 않은가?

성능 점수를 높이기 위해 광고를 무조건 제거하기보다 실제 방문자 경험과 광고 정책을 함께 고려하는 것이 좋습니다.

✓ 12. 티스토리에서 직접 개선할 수 있는 범위를 구분합니다

티스토리는 자체 서버를 운영하는 웹사이트와 달리 플랫폼에서 관리하는 영역이 있습니다.

따라서 PageSpeed Insights에 표시된 모든 개선 항목을 직접 수정할 수 있는 것은 아닙니다.

운영자가 비교적 직접 확인할 수 있는 부분은 다음과 같습니다.

게시글 이미지 크기와 파일 용량

불필요한 외부 콘텐츠 삽입 여부

스킨에 직접 추가한 JavaScript

사용하지 않는 스킨 효과

외부 글꼴 사용 여부

이미지와 본문 배치

모바일 화면에서 불필요한 요소

반면 서버 응답 방식이나 플랫폼 내부에서 제공하는 일부 리소스는 직접 변경하기 어려울 수 있습니다.

따라서 분석 도구에 개선 항목이 표시되었다는 이유만으로 모두 해결해야 한다고 생각할 필요는 없습니다.

먼저 직접 관리할 수 있는 부분부터 확인하는 것이 현실적입니다.

✓ 13. 점수 개선은 한 번에 하나씩 진행합니다

모바일 점수가 낮으면 여러 설정을 동시에 수정하고 싶어질 수 있습니다.

하지만 한꺼번에 많은 요소를 변경하면 어떤 수정이 실제로 도움이 되었는지 판단하기 어렵습니다.

따라서 다음 순서로 진행하는 것이 좋습니다.

첫 번째, 개선하려는 게시글 URL을 정합니다.

두 번째, 현재 분석 결과를 기록합니다.

세 번째, 가장 영향이 큰 것으로 의심되는 항목을 확인합니다.

네 번째, 직접 수정할 수 있는 부분 하나를 개선합니다.

다섯 번째, 동일한 URL을 다시 분석합니다.

여섯 번째, 실제 스마트폰에서도 문제가 개선되었는지 확인합니다.

단, PageSpeed Insights 점수는 측정할 때마다 달라질 수 있습니다.

따라서 한 번의 점수 변화만으로 개선 효과를 확정하기보다 여러 번 확인하고 실제 사용자 데이터의 변화도 살펴보는 것이 좋습니다.

✓ 14. 실제 상황별로 판단해 봅니다

A 사례｜상단 이미지가 너무 큰 경우

티스토리 게시글의 모바일 LCP 결과가 느리게 나타납니다.

분석 결과를 살펴보니 상단의 큰 이미지가 주요 요소로 확인됩니다.

이 경우 이미지 파일 크기와 실제 표시 크기를 점검합니다.

필요한 화질을 유지하면서 불필요한 용량을 줄일 수 있는지 확인합니다.

단, 이미지를 무조건 삭제하거나 지연 로딩하도록 변경하는 것이 정답은 아닙니다.

B 사례｜모바일 메뉴 반응이 느린 경우

게시글은 비교적 빠르게 표시됩니다.

하지만 모바일 메뉴 버튼을 누르면 반응이 늦습니다.

이 경우 INP와 관련된 문제를 확인할 수 있습니다.

스킨에 추가한 JavaScript나 복잡한 화면 효과가 있는지 살펴봅니다.

실제로 반응이 느린 기능을 중심으로 원인을 확인하는 것이 좋습니다.

C 사례｜광고가 나타나면서 본문이 움직이는 경우

게시글을 읽는 도중 광고가 나타나면서 본문 위치가 바뀝니다.

이 경우 CLS와 관련된 문제를 확인할 수 있습니다.

실제 모바일 화면에서 어느 위치에서 이동이 발생하는지 살펴봅니다.

광고 형식과 배치 설정을 검토하되, 광고 시스템에서 자동으로 결정하는 부분까지 모두 직접 제어할 수 있다고 생각해서는 안 됩니다.

D 사례｜점수는 낮지만 실제 화면은 정상적인 경우

PageSpeed Insights에서 모바일 성능 점수가 낮게 표시됩니다.

하지만 실제 스마트폰에서는 게시글이 정상적으로 열리고 주요 기능도 문제없이 작동합니다.

이 경우 점수만 보고 스킨 전체를 변경하지 않습니다.

실제 사용자 데이터가 제공되는지 확인하고, 실험실 결과에서 어떤 항목이 영향을 주는지 살펴봅니다.

직접 개선할 수 있는 문제가 확인될 때 필요한 부분부터 수정하는 것이 좋습니다.

✓ 15. PageSpeed Insights 최종 체크리스트

□ 모바일 성능 점수와 실제 사용자 경험을 구분했다.

□ LCP가 주요 콘텐츠 표시 속도와 관련된다는 점을 이해했다.

□ INP가 사용자 입력에 대한 반응성과 관련된다는 점을 확인했다.

□ CLS가 화면의 예상치 못한 움직임과 관련된다는 점을 이해했다.

□ 실제 사용자 데이터와 실험실 결과를 구분했다.

□ 상단 이미지의 파일 크기와 표시 상태를 확인했다.

□ 모바일 메뉴와 버튼의 반응성을 점검했다.

□ 이미지와 광고로 인한 화면 이동을 확인했다.

□ 직접 수정할 수 있는 항목과 플랫폼 관리 영역을 구분했다.

□ 수정 전후 결과를 비교하고 실제 스마트폰에서도 확인했다.

자주 묻는 질문

Q1. PageSpeed Insights 모바일 점수가 50점이면 검색 노출에 문제가 있나요?

점수가 50점이라는 사실만으로 검색 노출에 문제가 있다고 단정할 수 없습니다. 검색 순위는 다양한 요소의 영향을 받습니다. 다만 성능 분석 결과에서 실제 방문자에게 불편을 주는 문제가 확인된다면 개선할 가치가 있습니다.

Q2. LCP·INP·CLS를 모두 좋은 상태로 만들어야 하나요?

세 지표는 중요한 사용자 경험 지표이지만 모든 페이지에서 즉시 좋은 결과를 달성해야 한다는 뜻은 아닙니다. 현재 상태를 확인하고 실제 문제가 발생하는 항목부터 개선하는 것이 좋습니다.

Q3. 티스토리 스킨을 바꾸면 모바일 점수가 올라가나요?

스킨에 따라 성능 차이가 발생할 수 있지만 변경만으로 점수 상승이 보장되는 것은 아닙니다. 기존 스킨의 어떤 요소가 성능에 영향을 주는지 먼저 확인하는 것이 좋습니다.

Q4. 애드센스 광고 때문에 CLS가 높아질 수 있나요?

가능합니다. 광고가 뒤늦게 표시되면서 화면 요소의 위치가 바뀌면 CLS에 영향을 줄 수 있습니다. 다만 이미지나 글꼴, 다른 동적 요소도 원인이 될 수 있으므로 실제 발생 위치를 확인해야 합니다.

Q5. PageSpeed Insights 점수가 높으면 애드센스 승인에 유리한가요?

성능 점수가 높다는 사실만으로 애드센스 승인이 보장되거나 승인 가능성을 수치로 판단할 수는 없습니다. 다만 방문자가 콘텐츠를 편리하게 이용할 수 있도록 성능을 관리하는 것은 블로그 운영에 도움이 됩니다.

마무리｜모바일 점수보다 실제 불편한 문제를 먼저 개선합니다

PageSpeed Insights는 티스토리 블로그의 모바일 성능을 점검하는 데 유용한 도구입니다.

하지만 분석 결과에 표시되는 점수 자체가 블로그의 품질이나 검색 순위를 결정하는 절대적인 기준은 아닙니다.

LCP는 주요 콘텐츠가 표시되는 속도를 나타냅니다.

INP는 방문자의 클릭이나 입력에 대한 반응성을 평가합니다.

CLS는 페이지를 이용하는 동안 화면이 예상치 않게 움직이는 정도를 보여줍니다.

이 세 가지 지표는 각각 다른 문제를 나타내므로 원인에 맞게 점검해야 합니다.

특히 티스토리에서는 운영자가 직접 수정할 수 있는 부분과 플랫폼에서 관리하는 영역을 구분하는 것이 중요합니다.

먼저 이미지와 스킨, 외부 스크립트, 광고 배치처럼 확인 가능한 항목부터 살펴봅니다.

그리고 실제로 불편한 문제가 발견되면 필요한 부분을 하나씩 개선합니다.

모바일 최적화의 목표는 모든 게시글에서 100점을 받는 것이 아닙니다.

방문자가 페이지를 빠르게 열고, 필요한 정보를 읽고, 원하는 기능을 불편 없이 사용할 수 있도록 만드는 것이 더 중요합니다.

함께 보면 좋은 글

티스토리 모바일 화면 직접 점검하는 방법｜글자 크기·가로 스크롤·버튼 간격·광고 배치 확인하기

티스토리 모바일 화면 직접 점검하는 방법｜글자 크기·가로 스크롤·버튼 간격·광고 배치 확인

다음 글 예고

티스토리 이미지 용량 줄이는 방법｜화질 유지하면서 모바일 로딩 속도 개선하기

다음 글에서는 티스토리 게시글에 사용하는 이미지의 파일 크기를 줄이는 방법을 알아보겠습니다.