누적 레이아웃 변화 분석

누적 레이아웃 변화 분석(Cumulative Layout Shift Analyse)을 Lighthouse, WebPageTest 및 Chrome DevTools와 비교
누적 레이아웃 변화 분석	등대	웹페이지테스트	크롬 개발자 도구
산출: 이 기능은 뷰포트에서 움직이는 요소를 보여주는 GIF를 생성하고 CLS 점수를 반환합니다. 세로 방향으로 움직임이 많은 페이지에서는 어떤 요소가 이동했는지 파악하기 어려울 수 있습니다.	산출: 이 보고서는 First Contentful Paint, Speed Index, Total Blocking Time 및 Largest Contentful Paint와 함께 CLS를 나열합니다. 기본 출력 형식은 HTML이며, 특정 플래그를 사용하면 JSON 형식으로도 제공됩니다.	산출: 필름 스트립에는 로딩의 주요 프레임이 표시되고, 워터폴에는 필름 스트립과 동기화된 빨간색 선이 나타납니다. 문서에서는 CLS를 페이지 로딩 중 뷰포트 내 레이아웃이 얼마나 변하는지를 나타내는 척도로 정의합니다.	산출: 성능 패널의 레이아웃 변경 트랙에는 변경 사항이 보라색 마름모꼴로 그룹화되어 표시됩니다. 마우스를 올리면 뷰포트에서 해당 요소가 강조 표시되고, 요약 탭에서 변경 시간, 점수, 영향을 받는 요소 및 잠재적 원인을 확인할 수 있습니다.
테스트 조건: 데스크톱 화면 해상도는 1920x1080으로 고정되어 있습니다. 모바일 환경에서는 Lighthouse Nexus 5X 프로필을 사용하며, CPU와 네트워크 사용량을 제한하여 우수한 3G 환경을 시뮬레이션합니다.	테스트 조건: 이 도구는 로컬 Chrome, 개발자 도구, 명령줄, Node 모듈 또는 PageSpeed Insights에서 실행됩니다. 명령줄에서 사용하려면 Node 22 이상이 필요합니다.	테스트 조건: 전 세계 여러 지역의 실제 브라우저에서 사용자 지정 가능한 네트워크 환경 하에 테스트를 실행했습니다. Chrome에서 가장 많은 정보를 제공합니다.
CLS 정의: 버전 1.2.0은 최대 세션 윈도우 메트릭을 사용합니다. 테스트 중에는 스로틀링이 적용됩니다.	CLS 정의: Lighthouse와 같은 실험실 도구는 페이지 로드 중에만 변화를 포착하므로 실제 사용자가 경험하는 값보다 낮게 나타날 수 있습니다.	CLS 정의: 동일한 실험실 제한 사항이 적용됩니다. 점수는 충격률과 거리률의 곱이며, 0.1 이하가 목표 점수입니다.	CLS 정의: 각 근무조는 요약 탭에서 고유한 점수를 갖습니다. CLS는 근무조를 최대 5초 간격의 세션 창으로 그룹화하며, 간격은 1초 미만입니다.
개방성과 자동화: npm(layout-shift-gif)을 사용하여 명령줄 버전을 설치할 수 있습니다. URL, 장치 및 출력 옵션을 제공하며, 선택적으로 쿠키 파일을 사용할 수 있고 자체 서명된 HTTPS 인증서를 지원합니다. 페이지에서는 선택적으로 Ko-fi 기부를 요청할 수 있습니다.	개방성과 자동화: Lighthouse는 Apache 2.0 라이선스를 따릅니다. Lighthouse CI를 통해 CI 환경에서 실행할 수 있으며, Node 모듈로도 사용할 수 있습니다.	개방성과 자동화: 해당 저장소에는 Polyform Shield 1.0.0 아래의 master 브랜치와 Apache 2.0 아래의 apache 브랜치가 있습니다. 여기에는 자체 인스턴스 실행 및 REST API에 대한 문서가 포함되어 있습니다. 대부분의 실험에는 WebPageTest Pro가 필요합니다.

누적 레이아웃 변화 분석(Cumulative Layout Shift Analyse)을 Lighthouse, WebPageTest 및 Chrome DevTools와 비교

누적 레이아웃 변화 분석

등대

웹페이지테스트

크롬 개발자 도구

산출: 이 기능은 뷰포트에서 움직이는 요소를 보여주는 GIF를 생성하고 CLS 점수를 반환합니다. 세로 방향으로 움직임이 많은 페이지에서는 어떤 요소가 이동했는지 파악하기 어려울 수 있습니다.

산출: 이 보고서는 First Contentful Paint, Speed Index, Total Blocking Time 및 Largest Contentful Paint와 함께 CLS를 나열합니다. 기본 출력 형식은 HTML이며, 특정 플래그를 사용하면 JSON 형식으로도 제공됩니다.

산출: 필름 스트립에는 로딩의 주요 프레임이 표시되고, 워터폴에는 필름 스트립과 동기화된 빨간색 선이 나타납니다. 문서에서는 CLS를 페이지 로딩 중 뷰포트 내 레이아웃이 얼마나 변하는지를 나타내는 척도로 정의합니다.

산출: 성능 패널의 레이아웃 변경 트랙에는 변경 사항이 보라색 마름모꼴로 그룹화되어 표시됩니다. 마우스를 올리면 뷰포트에서 해당 요소가 강조 표시되고, 요약 탭에서 변경 시간, 점수, 영향을 받는 요소 및 잠재적 원인을 확인할 수 있습니다.

테스트 조건: 데스크톱 화면 해상도는 1920x1080으로 고정되어 있습니다. 모바일 환경에서는 Lighthouse Nexus 5X 프로필을 사용하며, CPU와 네트워크 사용량을 제한하여 우수한 3G 환경을 시뮬레이션합니다.

테스트 조건: 이 도구는 로컬 Chrome, 개발자 도구, 명령줄, Node 모듈 또는 PageSpeed Insights에서 실행됩니다. 명령줄에서 사용하려면 Node 22 이상이 필요합니다.

테스트 조건: 전 세계 여러 지역의 실제 브라우저에서 사용자 지정 가능한 네트워크 환경 하에 테스트를 실행했습니다. Chrome에서 가장 많은 정보를 제공합니다.

CLS 정의: 버전 1.2.0은 최대 세션 윈도우 메트릭을 사용합니다. 테스트 중에는 스로틀링이 적용됩니다.

CLS 정의: Lighthouse와 같은 실험실 도구는 페이지 로드 중에만 변화를 포착하므로 실제 사용자가 경험하는 값보다 낮게 나타날 수 있습니다.

CLS 정의: 동일한 실험실 제한 사항이 적용됩니다. 점수는 충격률과 거리률의 곱이며, 0.1 이하가 목표 점수입니다.

CLS 정의: 각 근무조는 요약 탭에서 고유한 점수를 갖습니다. CLS는 근무조를 최대 5초 간격의 세션 창으로 그룹화하며, 간격은 1초 미만입니다.

개방성과 자동화: npm(layout-shift-gif)을 사용하여 명령줄 버전을 설치할 수 있습니다. URL, 장치 및 출력 옵션을 제공하며, 선택적으로 쿠키 파일을 사용할 수 있고 자체 서명된 HTTPS 인증서를 지원합니다. 페이지에서는 선택적으로 Ko-fi 기부를 요청할 수 있습니다.

개방성과 자동화: Lighthouse는 Apache 2.0 라이선스를 따릅니다. Lighthouse CI를 통해 CI 환경에서 실행할 수 있으며, Node 모듈로도 사용할 수 있습니다.

개방성과 자동화: 해당 저장소에는 Polyform Shield 1.0.0 아래의 master 브랜치와 Apache 2.0 아래의 apache 브랜치가 있습니다. 여기에는 자체 인스턴스 실행 및 REST API에 대한 문서가 포함되어 있습니다. 대부분의 실험에는 WebPageTest Pro가 필요합니다.