NO_LCP 오류로 Google Lighthouse가 실패함

좋아, 자기야, 그래서 당신은 모두 REAL HARD를 검색했고 그들이 당신에게 "캐시 정리/시크릿 모드로 이동"이라고 말했습니다. 고맙습니다. medium.com의 친구입니다. 꽤 통찰력이 있었지만 안타깝게도 도움이 되지 않았습니다.

당신은 계속 쳐다보고 있습니다.

Largest Contentful Paint
Error!
Something went wrong with recording the trace over your page load. Please run Lighthouse again. (NO_LCP)

머리를 긁적이며 또 무엇이 잘못되었을지 생각합니다. 확인할 수 있는 새로운 신선한 단서를 드리겠습니다!

귀하의 페이지에 대해 lighthouse cli를 실행하십시오(도커 컨테이너로도 사용할 수 있으므로 시도할 이유가 없습니다). 오늘이 운이 좋은 날이면 의심스럽게 빨간색으로 표시된 텍스트가 표시됩니다.



웁시 똥, 내 친구! 오늘 현재 an open bug in chromium에서 우연히 발견한 스틸 lighthouse github issues이 있습니다.

불투명도를 0에서 1로 애니메이션화하고 화면 밖에서 애니메이션화하면 크롬이 "가장 큰 콘텐츠 페인트"가 절대 발생하지 않을 것이라고 생각하고 등대 검사를 종료할 수 있습니다.

FIRST 콘텐츠가 포함된 페인트와 달리 상쇄할 구성이 없습니다. maxWaitForFcp - 있음, maxWaitForLcp - 없음. pauseAfterFcpMs , networkQuietThresholdMs , pauseAfterLoadMs , cpuQuietThresholdMs 에 대해 0이 아닌 값으로 재생할 수 있습니다. 모두 도움이 되지 않았습니다.

다음에 내가 한 일은 sass 파일에서 opacity: 0 및 transition를 검색하는 것이었습니다. 삭제해도 도움이 되지 않았습니다.

범인은 우리가 사용한 내부 디자인 라이브러리에 있었습니다. 이 라이브러리에는 반응형 스켈레톤 애니메이션을 위한 멋진 클래스가 있었습니다.

background-size: 400%, 100%;
animation: xxxx 6s linear infinite;

@keyframes xxxx {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}

이 클래스의 모든 멘션을 ""로 찾기-바꾸기 한 번, 나중에 다시 빌드하면 내 측정항목이 정상적으로 표시되었습니다.

가상 맥주를 보내면 모두 수락하겠습니다.