Resource Waterfall rút ra mọi yêu cầu mà trang đưa ra theo dòng thời gian, mỗi thanh được chia thành các giai đoạn thực — xếp hàng, DNS, TCP, TLS, chờ và tải xuống — với các điểm đánh dấu cho FCP, LCP, DOMContentLoaded và tải.
Khi một trang có vẻ chậm, câu hỏi luôn giống nhau: nó đang chờ đợi điều gì? Câu trả lời của chính trình duyệt nằm trong bảng điều khiển Mạng, có nghĩa là mở DevTools, gắn ngăn kéo lên trang bạn đang kiểm tra và tải lại để bắt đầu tải.
Resource Waterfall đặt dòng thời gian đó vào một bảng nổi bên cạnh trang. Mọi yêu cầu xuất hiện dưới dạng một thanh được định vị theo thời điểm bắt đầu và được phân đoạn theo thời gian thực sự diễn ra: xếp hàng hoặc bị đình trệ, tra cứu DNS, kết nối TCP, bắt tay TLS, chờ máy chủ, sau đó tải xuống. Đoạn dài màu xanh lam là máy chủ chậm; một cái dài màu xanh lá cây là một tập tin dày; một màu xám dài có nghĩa là yêu cầu đang chờ đến lượt. Sự khác biệt quyết định những gì bạn nên sửa chữa.
Các điểm đánh dấu nét đứt trên dòng thời gian hiển thị Thời gian hiển thị có nội dung đầu tiên, Thời gian hiển thị có nội dung lớn nhất, DOMContentLoaded và tải, do đó, bạn có thể biết yêu cầu nào kết thúc trước khi người dùng nhìn thấy bất kỳ nội dung nào và yêu cầu nào vẫn tiếp tục diễn ra sau đó. Các tài nguyên chặn kết xuất và số lần truy cập bộ đệm được gắn cờ trên mỗi hàng và một bộ lọc Chặn duy nhất sẽ cắt danh sách xuống những gì thực sự đang trì hoãn lần sơn đầu tiên.
Lọc theo loại, tìm kiếm theo URL hoặc sắp xếp theo tốc độ chậm nhất hoặc lớn nhất để nhanh chóng tìm ra thủ phạm tồi tệ nhất. Nhấp vào bất kỳ hàng nào để xem URL đầy đủ, giao thức, kích thước truyền và giải mã, trạng thái và phân tích giai đoạn hoàn chỉnh. Các yêu cầu đến trong khi bảng điều khiển đang mở sẽ phát thẳng vào và Xuất JSON sao chép toàn bộ dòng thời gian, bao gồm các mốc quan trọng, do đó, kết quả về hiệu suất có thể được chuyển cho người khác mà không cần ảnh chụp màn hình.
Mỗi thanh được chia thành hàng đợi, DNS, TCP, TLS, chờ và tải xuống, do đó, máy chủ chậm, tệp nặng và yêu cầu được xếp hàng đợi có thể được phân biệt ngay lập tức.
Các đường đứt nét cho FCP, LCP, DOMContentLoaded và tải hiển thị yêu cầu nào hoàn thành trước khi người dùng nhìn thấy nội dung và yêu cầu nào vẫn đang chạy sau nội dung đó.
Một cú nhấp chuột sẽ giảm danh sách xuống còn các tài nguyên thực sự chiếm giữ lần vẽ đầu tiên, với tổng số lần chặn trong thanh tóm tắt.
Các tài nguyên được cung cấp từ bộ đệm được đánh dấu và gắn nhãn thay vì xuất hiện dưới dạng các hàng 0 byte bí ẩn, vì vậy bạn có thể xác minh bộ đệm của mình thực sự hoạt động.
Thu hẹp theo loại — tài liệu, CSS, JS, hình ảnh, phông chữ, XHR, phương tiện — tìm kiếm theo URL hoặc sắp xếp theo chậm nhất hoặc lớn nhất để tiếp cận người phạm tội nặng nhất trong vài giây.
Sao chép toàn bộ thác nước dưới dạng JSON, bao gồm các mốc quan trọng, tổng số và giai đoạn theo yêu cầu, để đính kèm vào phiếu hoặc so sánh với lần chạy sau.
Lọc các tài nguyên chặn hiển thị và xem các biểu định kiểu và tập lệnh chính xác nằm giữa khách truy cập của bạn và nội dung hiển thị.
Sắp xếp theo tốc độ chậm nhất và xem nhà cung cấp phân tích, phông chữ hoặc trò chuyện xuất hiện ở trên cùng với giai đoạn chờ đợi lâu không liên quan gì đến mã của bạn.
Đọc màu pha: thời gian chờ đợi là vấn đề phụ trợ hoặc CDN, thời gian tải xuống là vấn đề kích thước tệp. Cách khắc phục là khác nhau đối với mỗi người.
Tải lại và xác nhận rằng nội dung đến từ bộ đệm và kích thước truyền nhỏ hơn nhiều so với kích thước được giải mã, chứng tỏ quá trình nén thực sự đang diễn ra.
Xuất dòng thời gian dưới dạng JSON và đính kèm vào phiếu để người tiếp theo nhìn thấy những con số tương tự thay vì cố gắng tạo lại phiên của bạn.
Nhấp vào biểu tượng Resource Waterfall trong dock DevSuite Pro. Mọi thứ mà trang đã tải cho đến nay sẽ xuất hiện trên dòng thời gian ngay lập tức.
Tải lại với bảng điều khiển mở để nắm bắt tải ngay từ yêu cầu đầu tiên, bao gồm cả tài liệu và các mốc quan trọng về sơn.
Nhấn vào chip chặn để chỉ xem các tài nguyên chặn hiển thị hoặc chọn một loại như js hoặc img. Sắp xếp theo tốc độ chậm nhất để xếp người phạm tội nặng nhất lên hàng đầu.
Nhấp vào bất kỳ hàng nào để xem URL đầy đủ, giao thức, kích thước, trạng thái và phân tích theo từng giai đoạn tính bằng mili giây — rồi sao chép URL nếu bạn cần.
Xuất JSON sao chép dòng thời gian đầy đủ với các mốc quan trọng và tổng số, sẵn sàng dán vào yêu cầu hoặc lưu giữ dưới dạng bản ghi trước và sau.
Cài đặt DevSuite Pro miễn phí và mở khóa hơn 71 công cụ dành cho nhà phát triển cho trình duyệt của bạn.
