Lighthouse 점수 최적화가 빠른 웹 사이트에 충분하지 않은 이유 – Smashing Magazine
우리 모두는 그 순간을 가졌습니다. 현재 페이지가로드되기까지 필요한 모든 밀리 초를 면밀히 조사하고 일부 웹 사이트의 성능을 최적화하고 있습니다. Chrome의 DevTools에서 Google Lighthouse를 해고했습니다. 모든 사람과 삼촌이 성능을 평가하기 위해 사용하기 때문입니다.
151 번째 보고서를 실행하고 권장되는 모든 개선 사항을 완료 한 후에는 Nirvana를 경험합니다. 완벽한 100% 성능 점수!
잘한 일을 위해 등을 두드리는 시간. 어쩌면 당신은 이것을 사용하여 당신이 원했던 급여 인상을 얻을 수 있습니다! 예외적으로 – 최소한 Google Lighthouse를 유일한 증거로 사용하지 마십시오. 나는 완벽한 점수가 모든 종류의 좋은 감정을 만들어 낸다는 것을 알고 있습니다. 그것이 우리가 목표로하는 것입니다.
Google Lighthouse는 단지뿐입니다 하나 완전한 성능 툴킷의 도구. 그것이 아닌 것은 당신의 웹 사이트가 실제 세계에서 어떻게 수행되는지에 대한 완전한 그림입니다. 물론, 우리는 사이트의 성과에 대한 많은 통찰력과 심지어 속도를 높이기 위해 해결되어야하는 스팟 문제까지도 수집 할 수 있습니다. 그러나 다시, 그것은입니다 불완전한 그림.
Google Lighthouse가 훌륭합니다
다른 개발자들이 완벽한 등대 점수에 대해 자랑하고 있으며 소셜 전역에 발표 된 스크린 샷을 봅니다. 이 기사의 소개에서 방금 스스로 해냈습니다!
등대는 가장 널리 사용되는 웹 성능보고 도구 일 수 있습니다. 나는 그 유비쿼터스가 보고서의 품질보다 편리함 때문입니다.
DevTools를 열고 Lighthouse 탭을 클릭하고 보고서를 생성하십시오! 인터넷 연결 속도가 느리거나 모바일 및 데스크탑에 대한 별도의 보고서를 작성하는 것과 같은 시뮬레이션 된 상황에서 등대를 구성 할 수있는 방법에는 여러 가지가 있습니다. 무료 브라우저로 구운 것이 매우 강력한 도구입니다. 또한 Google의 Pagespeed Insights 도구로 구워졌습니다!
그리고 그것은 빠릅니다. Lighthouse에서 보고서를 실행하면 약 10-15 초 안에 무언가를 되 찾을 수 있습니다. 다른 도구와 함께 보고서를 실행 해보면 커피를 보충하고 화장실에 부딪 히고 결과를 기다리는 동안 이메일을 확인할 수 있습니다. 그에 대한 좋은 이유가 있지만, 내가 전화하고 싶은 것은 Google Lighthouse가 번개 성과보고가 진행되는 한 빠릅니다.
요약 : 등대는 많은 것들에서 훌륭합니다!
- 액세스가 편리하고
- 다양한 수준의 문제 해결에 대한 많은 구성을 제공합니다.
- 그리고 그것은 기록적인 시간에 보고서를 뱉어냅니다.
그리고 그 밝고 사랑스러운 애니메이션 그린 스코어는 어떻습니까?
좋아, 그것은 Lighthouse 보고서의 장미 빛 편입니다. 그 한계를 강조하는 것도 공정합니다. 이것은 당신이나 다른 사람이 등대를 사용하는 것을 설득하는 것이 아니라, 당신의 점수가 현실을 완벽하게 반영하지 않을 수도 있고, 심지어 Google의 자체 페이지 스피드 통찰력을 포함하여 다른 도구에서 얻을 수있는 점수와 일치하지 않을 수도 있다는 헤드 업입니다.
“실제”사용자와 일치하지 않습니다
모든 데이터가 자본 웹 성능에서 동일하게 생성되는 것은 아닙니다. 데이터는 성능 메트릭을 평가할 때보고 도구가하는 가정을 나타내므로이를 아는 것이 중요합니다.
Lighthouse가보고에 의존하는 데이터는 호출됩니다. 시뮬레이션 된 데이터. 당신은 이미 그 의미에 대해 확실한 추측을 할 수 있습니다 : 그것은 다음과 같습니다. 인조 데이터. 이제 “실제”데이터가 아닌 무릎에서 시뮬레이션 된 데이터를 차기 전에 Lighthouse가 매우 빠른 이유라는 것을 알고 있습니다.
인터넷 연결 속도를 “스로틀”하는 설정이 어떻게 있는지 알고 있습니까? 이는 연결 속도를 느리게하거나 속도를 높이는 다양한 조건을 시뮬레이션합니다. 등대에서 직접 구성하는 것. 기본적으로 Lighthouse는 빠른 연결에 대한 데이터를 수집하지만 느린 페이지로드에 대한 통찰력을 얻기 위해 느린 것으로 구성 할 수 있습니다. 그러나 조심하십시오! Lighthouse는 다른 연결에 페이지가 얼마나 빨리로드되었는지 추정합니다..
Debugbear 설립자 Matt Zeunert는 시뮬레이션 된 스로틀 링 환경에서 데이터가 어떻게 실행되는지에 대해 설명하며, Lighthouse는 결론을 내리기 위해 “낙관적”및 “비관적”평균을 어떻게 사용하는지 설명합니다.
“[Simulated throttling] 테스트 간의 변동성을 줄입니다. 그러나 몇 가지 빠른 응답으로 원점을 공유하는 단일 느린 렌더 블로킹 요청이있는 경우 등대가 페이지로드 시간을 과소 평가합니다.
등대는 어떤 노드가 렌더링을 차단하는지 확실하지 않은 경우 낙관적이고 비관적 인 추정치를 평균화합니다. 실제로, 측정 항목은 어떤 종속성 그래프가 더 정확한 지에 따라 이들 중 하나에 더 가까울 수 있습니다.”
그리고 다시, 환경은 현실이 아니라 구성입니다. 스로틀 조건이 웹 사이트에서 평균 실제 사용자의 연결 속도와 일치 할 가능성은 낮습니다. 네트워크 연결이 빠르거나 느린 CPU에서 실행될 수 있으므로. Lighthouse가 제공하는 것은 더 비슷합니다 “주문형”테스트 즉시 사용할 수 있습니다.
따라서 시뮬레이션 된 데이터는 인위적으로 달콤한 조건에서 빠르게 테스트를 실행하는 데 큰 도움이됩니다. 그러나 사이트 방문자의 연결 속도에 대한 가정을함으로써 정확성을 희생하고 현실과 이혼하는 방식으로 평균적인 일을합니다.
시뮬레이션 스로틀링은 등대의 기본값이지만보다 현실적인 스로틀 링 방법도 지원합니다. 이러한 테스트를 실행하는 데는 시간이 더 걸리지 만 더 정확한 데이터를 제공합니다. 보다 현실적인 설정으로 Lighthouse를 실행하는 가장 쉬운 방법은 Debugbear 웹 사이트 속도 테스트 또는 WebPagetest와 같은 온라인 도구를 사용하는 것입니다.
핵심 웹 생명력 점수에 영향을 미치지 않습니다
모든 사람들이 말하는 이러한 핵심 웹 생명은 성능 측정을위한 Google의 표준 메트릭입니다. 그들은 단순한 “x 초에로드 된 페이지”보고서를 넘어서 페이지가로드되는 방법, 다른 리소스를 차단할 수있는 리소스, 느린 사용자 상호 작용 및 페이지가 얼마나 변화하는지를 진단하는보다 관련성이 높은 세부 사항을 살펴 봅니다. 리소스 및 컨텐츠로드에서. Zeunert는 Smashing Magazine의 또 다른 훌륭한 게시물을 가지고 있으며 각 메트릭을 자세히 설명합니다.
여기서 가장 중요한 점은 시뮬레이션 된 데이터 등대가 생성되는 데이터가 다른 도구의 성능 메트릭과 다를 수 있다는 것입니다. 나는 이것을 다른 기사에서 설명하는 데 많은 것을 보냈다. 그것의 요점은 그 것입니다 Lighthouse 점수는 핵심 웹 생명 데이터에 영향을 미치지 않습니다. 그 이유는 Core Web Vitals가 월별 업데이트 된 Chrome 사용자 경험 (CRUX) 보고서에서 가져온 실제 사용자에 대한 데이터에 의존하기 때문입니다. Crux 데이터는 데이터가 최근에 가져 오는 방식에 의해 제한 될 수 있지만, Lighthouse의 시뮬레이션 된 데이터보다 사용자 동작 및 브라우징 조건이보다 정확한 반영입니다.
내가 얻는 궁극적 인 요점은 등대가 핵심 웹 생명 성능 지표를 측정하는 데 비효율적이라는 것입니다. 내 맞춤형 기사에서 설명하는 방법은 다음과 같습니다.
“[Synthetic] 데이터는 사실에 의해 근본적으로 제한됩니다 사전 정의 된 환경에서 단일 경험 만 살펴 봅니다.. 이 환경은 종종 웹 사이트의 평균 실제 사용자와 일치하지 않으며, 이는 네트워크 연결이 빠르거나 CPU가 느려질 수 있습니다.”
나는 중요한 부분을 강조했다. 실제로 사용자는 특정 페이지에서 둘 이상의 경험을 가질 수 있습니다. 마치 사이트로 이동하여로드하고 앉은 다음 페이지를 닫는 것처럼 보이지 않습니다. 당신은 그 페이지에서 무언가를 할 가능성이 더 높습니다. 그리고 사용자 입력, 즉 다음 페인트와의 상호 작용 (INP)에 대한 느린 페인트를 찾는 핵심 웹 생명계의 경우 등대가 전혀 측정 할 수있는 방법이 없습니다!
레이아웃 교대가 종종 페이지에서 낮게 발생하기 때문에 페이지 레이아웃의 “가시 안정성”을 측정하는 누적 레이아웃 시프트 (CLS)와 같은 메트릭과 동일합니다. ~ 후에 사용자가 아래로 스크롤했습니다. Lighthouse가 Crux 데이터에 의존한다면 (그렇지 않은), 페이지와 상호 작용하고 CLS를 경험할 수있는 실제 사용자를 기반으로 가정 할 수 있습니다. 대신, 등대는 전체 페이지로드를 참을성있게 기다리며 페이지의 일부와 상호 작용하지 않으므로 CLS에 대해 아무것도 알 수 없습니다.
하지만 여전히 “좋은 시작”입니다
그것이 내가 당신이 하루가 끝날 때와 함께 걸어 가기를 바라는 것입니다. 등대 보고서는 시뮬레이션 된 데이터 덕분에 보고서를 신속하게 제작하는 데 매우 능숙합니다. 그런 의미에서, 등대는 편리한“장 확인”이자 성능을 최적화 할 수있는 기회를 식별하는 첫 단계 일 수도 있습니다.
그러나 완전한 그림은 아닙니다. 이를 위해 우리가 원하는 것은 의지하는 도구입니다. 실제 사용자 데이터. Crux 데이터를 통합하는 도구는 꽤 좋습니다. 그러나 다시 말하지만, 그 데이터는 매월 (정확히 28 일)에 가져 오므로 가장 최근의 사용자 행동과 상호 작용을 반영하지 않을 수 있지만 매일 롤링 기준으로 업데이트되며 실제로 더 큰 샘플의 과거 기록을 쿼리 할 수 있습니다. 크기.
더 나은 것은 사용자를 실시간으로 모니터링하는 도구를 사용하는 것입니다.
저는 JavaScript의 Performance API를 사용하여 사용자 정의 및 핵심 웹 생명체 지표를 평가하는 것에 대해 글을 썼으므로 직접 롤링 할 수 있습니다. 그러나 시각화, 역사적 기록 및 진실로 완전한 기존 서비스가 많이 있습니다. 실시간 사용자 모니터링 (종종 럼으로 약식). 어떤 서비스? 글쎄, 디버그 베어는 시작하기에 좋은 곳입니다. 나는 Matt Zeunert를 이전에 인용했고 Debugbear는 그의 제품입니다.
따라서 원하는 것이 사이트의 성능에 대한 완전한 그림이라면 Lighthouse부터 시작하십시오. 그러나 당신은 그림의 일부만보고 있기 때문에 거기서 멈추지 마십시오. 가장 완전하고 정확한 그림을 위해 실제 사용자 모니터링으로 결과를 강화하고 성능을 진단하고 싶을 것입니다.
(GG, YK)
Post Comment