모바일 CLS를 0.1초 미만으로 낮추는 방법

Mobile CLS를 0.1초 미만으로 낮추기 위해 고군분투를 하고 있다.

 

이런 지표는 Page Speed Insights가 실행하는 합성 테스트 간에는 주요 차이점이 있다. 예로 구글 크롬에서 작업하는 Addy Osmani의 CLS에 대한 설명에서 언급되어 있는 것처럼 CLS는 실제 웹에서 페이지가 언로드될 때가지 측정된다.

이런 이유로 페이지가 특정 화면 크기에서 제대로 작동하지 않거나(Lighthouse/PSI는 기본적으로 하나의 모바일 화면 크기만 테스트하므로) 실제 환경에서 지연 로딩이 제대로 작동하지 않아 레이아웃을 유발하는 것과 같은 것이 있는 경우 페이지에 대한 CLS가 높을 수 있다. 너무 느리게 로드될 때 나온다.

특정 브라우저, 연결 속도 등일 수도 있다.

 

성능 보고서에 페이지와 근본 원인을 어떻게 찾을까?

Lighthouse 합성 테스트에서는 잘 작동하지만 특정 화면 크기에서 실제 환경에서는 잘 작동하지 않는 페이지가 있다고 가정해 보자. 어떻게 식별할까?

 

이것을 위해 RUM(Real User Metrics) 데이터를 수집해야 한다.

RUM 데이터는 실제 사용자가 귀하의 사이트를 사용할 때 실제 세계에서 수집되고 나중에 분석/문제 식별을 위해 귀하의 서버에 저장되는 데이터다. 웹 바이탈 라이브러리를 사용해 직접 이 작업을 쉽게 수행할 수 있다. 이를 통해 CLS, FID, LCP, FCP 및 TTFB 데이터를 수집할 수 있으며 성능이 좋지 않은 페이지를 식별하기에 충분하다.

수집된 데이터를 자체 API 또는 분석을 위해 Google 애널리틱스로 파이프할 수 있다. Web vitals 정보를 수집한 다음 User Agent 문자열(브라우저 및 OS를 얻기 위해)  및 브라우저 크기 정보(유효 화면 크기를 얻기 위해)와 결합하면 문제가 특정 브라우저로 축소될 경우 범위를 좁힐 수 있다. 특정 화면 크기, 특정 연결 속도(높은 FCP/LCP 수치에서 느린 연결을 볼 수 있다) 등이다.

 

적용해볼 방법 5가지

1. 서버 응답 시간 단축

웹 서버가 너무 느릴 경우 더 나은 ISP/호스트를 얻는 것은 페이지 속도를 크게 높이는 가장 쉬운 방법이다. 이렇게 하면 속도가 약 10배 빨라진다. 워터폴의 모든 600-900ms 응답 시간은 시간의 1/10이어야 한다.

예를 들어 style.css는 7ms 파일을 다운로드하는데 걸리지만 서버는 632ms 첫 번째 바이트를 보낼 때까지 기다리게 된다. 이것은 거의 100배의 불필요한 지연이 생긴 것이다.

URL: https://moreyouthfulskin.com/wp-content/themes/wellness-pro/style.css?ver=1.0.0
Loaded By: https://moreyouthfulskin.com/en/home/:59
Host: moreyouthfulskin.com
Request Start: 5.951 s
Time to First Byte: 632 ms
Content Download: 7 ms
Bytes In (downloaded): 7.9 KB
Uncompressed Size: 36.9 KB
Bytes Out (uploaded): 0.2 KB

위의 데이터는 https://moreyouthfulskin.com/en/home/의 웹 페이지 성능 테스트 링크에서 가져온 것이다.

 

2. 브라우저 캐싱 활용

1일 캐시는 큰 문제가 아니라 작은 문제다. 경고에 가깝다. 웹서버 설정이며 다른 심각한 문제가 너무 많을 때 많은 노력을 기울일 필요는 없다.

 

3. 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링 차단 JavaScript 및 CSS 제거

JS 이후의 CSS는 크다. 일반적으로 WP 플러그인으로 인해 발생하기도 한다. 성능을 저하시키지 않는 플러그인만 사용해본다. 플러그인을 설치한 후 페이지 속도를 확인한다. 그런 다음 그만한 가치가 있는지 생각해본다.

 

4. 리디렉션을 제거하면 약간 속도가 높아진다

웹 서버가 너무 느리기 때문에 리디렉션에 소요되는 시간이 발생하기도 한다. 두 번의 리디렉션은 5초 이상 걸린다. 이는 페이지가 홈 페이지의 첫 번째 바이트를 로드하기 시작하기 전에 불필요한 5초 지연이 있음을 의미한다.

 

5. 이미지 최적화, JavaScript 축소 및 CSS 축소

Google Pagespeed 결과 하단에는 최적화된 이미지, 축소된 JavaScript 및 축소된 CSS에 대한 링크가 있다. 다운로드한 다음 서버의 적절한 디렉터리/폴더에 업로드한다.

 

큰 문제는 JavaScript 이후에 CSS와 글꼴이 로드된다는 것이다.  이로 인해 약 5초의 로드 시간이 소요(어느 WP 사용자의 페이지 로딩 모습)