모바일 웹페이지 속도개선 CLS0.25초과 문제 해결하기

사이트의 열악한 사용자 환경문제 해결하기 위한 핵심 성능 보고서 탐구일지 웹페이지 속도 개선 CLS0.25 초과 문제 해결하여 모바일 사용자를 위한 웹페이지 속도 개선해보자.

느린 URL
개선이 필요한 URL
빠른 URL

 

티스토리 초보자에게는 티스토리와 친해지는 과정 과정마다 너무나 많은 어려운 난관들을 직면하게 되는 것 같다. 어떠한 개선시켜야 할 문제가 발생되면 해결방법을 스스로 찾아야 하는데 컴퓨터 사용이 서툴고 기계어를 모르는 일반인들에게 정말 힘든 일인 것 같다.

 

반응형

 

지금 모바일 속도 문제 개선을 위해 맨땅에 헤딩 중인데 해결 기미가 보이지 않고 방법을 찾기 위해 서치 콘솔 도움센터의 도움글들과 사랑에 빠져 하루를 보내고 있다...

페이지의 성능의 중요성은 페이지 로드 시간이 길 수록 이탈률에 심각한 영향을 미쳐 로드시간이 1초에서 3초로 늘어나면 이탈률은 32% 증가하고 1초에서 6초로 늘어나면 이탈률은 106% 증가한다고 하므로 사이트의 전체적인 성능을 확인하고 사이트 내 여러 페이지에 영향을 미치는 문제를 해결해야 하는 것은 당연한 것이겠죠?

 

보고서는 특정 URL의 상태를 찾기 위함이 아니라 전체적인 성능을 확인하고 사이트 내 여러 페이지 영향을 미치는 문제를 해결하기 위하여 만들어졌고 PageSpeed Insights를 사용하여 상태와 문제를 상세히 살펴보고 영향을 받는 특정 URL을 확인할 수 있지만 핵심 성능 보고서를 사용하여 URL을 찾기는 쉽지 않다고 되어 있습니다 이러니 해결이 요원한 것 아닐까 생각해봅니다.

 

'모바일의 URL의 FID가 느림(300밀리 초 초과)이지만 LCP는 개선 필요(4초 이하-2.5초)라면 느림 라벨이 표시
모바일의 URL의 LCP가 개선 필요(4초이하-2.5초)이지만 FID가 좋음(100밀리 초 이하)이라면 개선 필요 라벨이 표시
모바일의 URL의 FID 및 CLS가 좋음(100밀리 초 이하/0.1 이하)이지만 데이터가 없다면 모바일에서 좋음으로 간주
모바일 URL의 FID, LCP, CLS가 좋음이고 데스크탑 URL의 FID, LCP, CLS가 개선 필요라면 모바일에서 좋음 , 데스크톱에서 개선 필요로 표시된다' 고 보고서에 안내되어 있네요.

 

느림, 개선 필요와 좋음이 어떻게 표시되는가는 윗글을 보고 알겠는데, 문제는 '느림' 이 왜 발생이 되고, 발생이 되었다면 어떻게 수정하여 개선을 시켜야 하는지 해결방법에 대하여 해결방법을 찾아가는 길이 알기 쉽게 안내가 되어 있다면 좋지 않을까 생각이 됩니다.

 

이쯤 해서 LCP, FID와 CLS에 대해서 간략하게 집고 넘어갑니다.

* LCP(콘텐츠가 포함된 최대 페인트)는 콘텐츠 렌더링 하는데 걸린 시간으로 이미지, 동영상, 큰 블록 수준의 텍스트가 가장 큰 요소라고 합니다.

 

LCP 불량의 가장 일반적인 원인으로
느린 서버 응답 시간
렌더링 차단 JavaScriptalc Css
느린 리소스 로드 시간
클라이언트 측 렌더링인데 이 말을 100% 이해하는 것은 아니지만 원인이 이렇구나 알게 되었고,

 

속도 개선을 저해하는 요소가 이미지 동영상 큰 블록의 텍스트라고 하므로 이미지를 로드하고 렌더링 하는 데 걸리는 시간을 개선하려면 어떤 조치가 필요한지 알아야 하겠죠?
→처음에는 이미지를 사용하지 않는 것이 좋으며 콘텐츠와 관련 없는 것은 삭제하라.
→이미지 압축(예: imagemin사용)
→이미지를 새로운 형식으로 변환(Jpeg2000, Jpeg XR 또는 Webp)
→반응형 이미지 사용
→임지 CDN사용 고려하라고 합니다 중요한 것 난 할 줄 모른다는 것이죠 ㅎㅎ

이미지 최적화하여 올바른 이미지를 선택하라.

Choose the right image format

* 첫 입력 지연(FID) 페이지와 처음 상호작용 즉 링크 클릭하거나 버튼을 탭 하는 경우 브라우저가 반응할 때까지의 시간이다.
* 누적 레이아웃 변경(CLS) 로드 단계에서 페이지 레이아웃이 변경되는 정도로서 0은 변경 없음, 1은 가장 많이 변경됨을 나타냄
이 정도면 개념은 정리가 되는 것 같습니다. 빠른 로드 시간에 대하여 배움이 필요한 분께서는 아래 링크에서 익혀보세요.

빠른 로드 시간 배우기

web.dev

보고서에 표시된 누계 LCP, FID, CLS란 그룹에 포함된 URL방문수의 75%에 도달하기까지 걸린 시간은 LCP, 75%가 이 값을 나타냄을 의미함은 FID, 그리고 75%에 해당하는 가장 낮은 일반 CLS 값을 의미한답니다. 보고서의 정확성이 달성되려면 방문수가 75%가 되어야 하니 미달일 경우의 현 보고 내용은 크게 걱정할 일은 아닌 것 같기도 합니다 마음은 상쾌하지는 않겠지만요.

 

영향을 받은 URL에 PageSpeedInsights테스트를 실행하여 문제를 해결하기 위한 권장 사항은 이렇습니다.

일반 사용자가 일반적으로 해결해야 하는 페이지 문제는
페이지 크기를 줄여라. 한 페이지와 페이지에 포함된 모든 리소스가 500KB 이하가 권장 사항입니다.
페이지가 모바일에서 최고의 성능을 발 휘하도록 페이지 리소스의 수를 50개 이하로 제한하라
모바일 및 데스크톱 모두에서 대부분의 경우 좋음 페이지 로드를 보장하는 AMP를 사용하는 것이 좋다입니다.

 

해결방법 권고사항은
느림이라는 라벨이 표시된 모든 문제를 먼저 해결한 다음에
가장 많은 URL에 영향을 미치는 문제 또는 가장 중요한 URL에 영향을 미치는 문제 하나를 선택하여 개선 작업 우선순위를 정하는 것이 좋다고 합니다. 개선이 필요라는 라벨이 표시된 URL은 개선의 여지가 있지만 느림 URL 만큼 중요하지 않다고 하니 이점도 고려하세요.

 

PageSpeedInsight 테스트 도구를 사용하여 수정사항을 테스트하여 특정 문제가 해결되었다고 생각되면 Search Console 핵심 성능 보고서의 문제 세부 정보 페이지에서 추적 시작을 클릭하여 유효성 검사 프로세스를 추적하면 되다고 하니 만족스러운 개선이 되면 좋겠네요.[by자료구글서치콘솔]

 

LCP_FID_CLS