Resource Waterfall는 타임라인에 있는 페이지의 모든 요청을 그립니다. 각 막대는 FCP, LCP, DOMContentLoaded 및 로드에 대한 마커를 사용하여 대기열, DNS, TCP, TLS, 대기 및 다운로드와 같은 실제 단계로 구분됩니다.
페이지가 느리게 느껴질 때 질문은 항상 동일합니다. 무엇을 기다리고 있습니까? 브라우저 자체 응답은 네트워크 패널에 있습니다. 즉, DevTools를 열고, 검사 중인 페이지 위에 서랍을 도킹하고, 로드 시작을 포착하기 위해 다시 로드하는 것을 의미합니다.
Resource Waterfall는 해당 타임라인을 페이지 옆의 부동 패널에 배치합니다. 모든 요청은 시작 시간을 기준으로 배치되고 시간이 실제로 진행된 위치(대기열 또는 정지, DNS 조회, TCP 연결, TLS 핸드셰이크, 서버 대기, 다운로드)별로 구분된 막대로 나타납니다. 긴 파란색 세그먼트는 느린 서버입니다. 긴 녹색 파일은 두꺼운 파일입니다. 긴 회색은 요청이 차례를 기다리고 있음을 의미합니다. 차이점에 따라 수정해야 할 사항이 결정됩니다.
타임라인의 점선 마커에는 콘텐츠가 포함된 첫 번째 페인트, 콘텐츠가 포함된 최대 페인트, DOMContentLoaded 및 로드가 표시되므로 사용자가 보기 전에 완료된 요청과 이후에도 계속 진행 중인 요청을 확인할 수 있습니다. 렌더링 차단 리소스와 캐시 적중은 각 행에 플래그가 지정되며 단일 차단 필터는 실제로 첫 번째 페인트를 지연시키는 항목으로 목록을 줄입니다.
유형별로 필터링하거나, URL로 검색하거나, 가장 느린 항목이나 가장 큰 항목으로 정렬하여 최악의 범죄자를 빠르게 찾아보세요. 전체 URL, 프로토콜, 전송 및 디코딩된 크기, 상태 및 전체 단계 분석을 보려면 행을 클릭하세요. 패널이 오픈 스트림일 때 도착하는 요청은 바로 들어오고 JSON 내보내기는 마일스톤을 포함한 전체 타임라인을 복사하므로 스크린샷 없이 성능 결과를 다른 사람에게 전달할 수 있습니다.
각 막대는 대기, DNS, TCP, TLS, 대기 및 다운로드로 분할되므로 느린 서버, 팻 파일 및 대기 중인 요청을 즉시 구별할 수 있습니다.
FCP, LCP, DOMContentLoaded 및 로드에 대한 점선은 사용자가 콘텐츠를 보기 전에 완료되는 요청과 콘텐츠 이후에도 여전히 실행 중인 요청을 보여줍니다.
한 번의 클릭으로 목록이 실제로 첫 번째 페인트를 유지하는 리소스로 줄어들고 요약 표시줄에 총 차단 수가 표시됩니다.
캐시에서 제공되는 리소스는 신비한 0바이트 행으로 표시되는 대신 표시되고 레이블이 지정되므로 캐싱이 실제로 작동하는지 확인할 수 있습니다.
문서, CSS, JS, 이미지, 글꼴, XHR, 미디어 등 유형별로 검색하고 URL로 검색하거나 가장 느린 항목이나 가장 큰 항목으로 정렬하여 몇 초 안에 최악의 위반 항목에 도달합니다.
마일스톤, 합계, 요청별 단계를 포함한 전체 폭포를 JSON으로 복사하여 티켓에 첨부하거나 이후 실행과 비교할 수 있습니다.
렌더링 차단 리소스로 필터링하고 방문자와 표시되는 콘텐츠 사이에 있는 정확한 스타일시트와 스크립트를 확인하세요.
가장 느린 순서로 정렬하고 분석, 글꼴 또는 채팅 제공자가 코드와 관련 없는 긴 대기 단계와 함께 상단에 나타나는 것을 확인하세요.
단계 색상을 읽어보세요. 대기에 소요된 시간은 백엔드 또는 CDN 문제이고, 다운로드에 소요된 시간은 파일 크기 문제입니다. 수정 방법은 각각 다릅니다.
자산이 캐시에서 왔는지, 전송 크기가 디코딩된 크기보다 훨씬 작은지 다시 로드하고 확인하여 압축이 실제로 켜져 있음을 증명합니다.
타임라인을 JSON으로 내보내고 티켓에 첨부하면 다음 사람이 세션을 재현하려고 시도하는 대신 동일한 숫자를 볼 수 있습니다.
DevSuite Pro 도크에서 Resource Waterfall 아이콘을 클릭합니다. 지금까지 페이지에 로드된 모든 내용이 타임라인에 즉시 나타납니다.
문서 자체와 페인트 마일스톤을 포함하여 첫 번째 요청의 로드를 캡처하려면 패널을 연 상태에서 다시 로드하세요.
렌더링 차단 리소스만 보려면 차단 칩을 누르거나 js 또는 img와 같은 유형을 선택하세요. 가장 느린 순으로 정렬하여 최악의 범죄자를 맨 위에 놓습니다.
전체 URL, 프로토콜, 크기, 상태 및 밀리초 단위의 단계별 분석을 보려면 행을 클릭하고 필요한 경우 URL을 복사하세요.
JSON 내보내기는 마일스톤 및 합계가 포함된 전체 타임라인을 복사하여 티켓에 붙여넣거나 전후 기록으로 보관할 수 있습니다.
