티스토리 페이지 속도 개선 | LCP FID CLS - 꿀팁다라

티스토리 페이지 속도 개선 네이버, 다음, 구글 등 사이트에 LCP, FID, CLS 등 높은 평가를 받게 되면 같은 내용일 경우 좀 더 SEO 점수를 높게 주어 노출시켜주는 결과를 만들어 냅니다. 그게 어떤 것인지 알아보도록 합니다.

 

티스토리 페이지 속도 개선

웹 지표라는 것이 존재하며 그 지표에 점수를 측정하여 해당 사이트 및 웹이 사용자로 하여금 불필요한 링크 없는지, 로딩 속도 등 확인하는 점수로 이와 같은 점수를 개선하였을 때 조금 더 지표 점수가 높아지게 됩니다.

 

크게 3가지로 분류되며 각 지표는 아래의 값에 따라 좋음 보통 나쁨 단계로 나뉘게 됩니다.

 

• LCP(Largest ContentFul Paint): 페이지 로드 성능 측정합니다 2.5초 이내 LCP 로드가 되어야 좋음 단계입니다.
• FID(First Input Delay):첫 입력 지연입니다. 상호작용을 측정하며 페이지 첫 지연시간이 100ms 이내이어야 좋음입니다.
• CLS(Cumulateive Layout Shift):시각적 안정성을 측정합니다. 페이지에서 0.1 미만의 CLS 유지하여야 합니다.

 

 

위의 말만 봐서는 무슨 뜻인지 어렵습니다 조금 더 쉽게 알려드리도록 하겠습니다.

 

LCP FID CLS 의미

LCP 뜻

페이지에서 가장 큰 시각적 요소를 띄우는데 소요되는 시간입니다.

FID 뜻

페이지가 사용자 동작에 반응하는 데 걸리는 시간을 나타냅니다.

CLS 뜻

페이지 로드 중 페이지 UI(화면 구성)이 이동하는 정도입니다.

 

구글 웹 지표 점수 반영

Google 2021년 5월 검색 순위에 페이지의 웹 지표 점수를 반영을 발표했습니다. 따라서 웹 지표 점수가 낮으면 구글 검색에서 노출될 확률이 낮아지나는 것을 의미하게 됩니다.

 

페이지의 성능(PerFormance) 낮아지면 이탈률에도 심각한 영향을 미치게 됩니다. 페이지 로드 시간이 1초에서 3초로 늘어나면 이탈률이 32%나 증가하게 되고 페이지 로드 시간이 1초에서 6초로 늘어나면 페이지 이탈률이 100% 증가한다고 합니다. 이는 열심히 조사하고 유익한 글을 도움 되는 글을 작성하더라도 이탈을 해버리면 아무 의미가 없다는 것을 뜻합니다.

 

콘텐츠 고민도 매우 중요하지만 페이지 환경 개선 퍼포먼스 신경을 쓰도록 하여 웹 페이지 개선에 조금 더 신경을 써야 하는 것이 이것입니다.

 

 

웹 페이지 속도 개선 방법

사이트 핵심적인 웹 페이지 지표 점수를 알 수 있는 방법이 있습니다. 이를 통해 웹 페이지의 문제점 파악 및 개선을 시행하면 됩니다.

https://pagespeed.web.dev/ 해당 사이트에 접속하여 원하는 링크(블로그) 페이지를 검색하게 되면 점수가 나오게 됩니다. 

해당 웹 지표에 LCP, CLS 등 문제 있는 부분을 나타나게 되고 그 부분을 개선할 수 있습니다.

 

CLS 개선 방법

개선 방법은 의외로 간단합니다. 늦게 로딩되는 리소스를 레이아웃 변화 최소화시켜주면 됩니다. 간단히 할 수 있는 것 중에선 기본 글꼴 사용 이 있습니다. 이쁜 웹 글꼴을 다운 또는 웹 링크를 통해 사용하지 않고 기본 글꼴을 사용하거나, 꼭 필요한 이미지만 사용하여야 합니다. 수익 창출을 위해 하지 않아도 될 광고 게재를 통해 CLS 점수를 내리는 행위를 하여선 안됩니다. 다만 현재를 유지하면서 스타일 개선 방법이 몇 가지 있습니다.

 

광고 위치 및 크기 미리 설정하기

아주 좋은 방법 중 하나는 고정 크기의 광고만 게재하는 것입니다. 최근에는 PC 모바일 모두 중요하기에 글의 같은 위치에 같은 크기의 광고를 띄우는 것은 모니터와 스마트폰 화면의 크기가 달라 불편할 수 있습니다. 

정말 다행인 것은 표시 영역 안에서 보이는 요소만 측정하게 되므로 최초 로딩 시 보이는 상단 부분만 신경을 쓰면 됩니다.