เครื่องมือวิเคราะห์ HAR File Waterfall

ไฟล์ HAR (HTTP Archive) คือการ export ข้อมูลในรูปแบบ JSON ของทุกอย่างที่ Network panel ใน DevTools ของ browser บันทึกไว้ระหว่างการโหลดหน้าเว็บ: ทุก request และ response header, ขนาดที่แน่นอนและ MIME type ของ body แต่ละ response และการแจกแจง timing ของแต่ละ request คุณสร้างไฟล์นี้ได้จาก Chrome, Firefox, Edge หรือ Safari โดยเปิด DevTools, โหลดหน้าใหม่ในแท็บ Network จากนั้นคลิกขวาที่รายการ request และเลือก "Save all as HAR with content" เครื่องมือนี้อ่านไฟล์ที่ export โดยตรง — ไม่มีการเรียกข้อมูลซ้ำหรือส่ง request ใหม่

แผนภูมิ waterfall สร้างจากข้อมูลที่มีอยู่แล้วในไฟล์ทั้งหมด: object timings ของแต่ละ entry แบ่ง request ออกเป็นช่วง blocked, การหา DNS, connect, การทำ SSL/TLS negotiation, send, wait (เวลาที่ได้ byte แรก) และ receive — แต่ละช่วงวาดเป็นแท่งแยกสี ตามข้อกำหนดของ HAR ค่าเวลา SSL จะรวมอยู่ใน connect ด้วย ดังนั้นเราจึงหักออกก่อน — ไม่เช่นนั้นส่วนของ TLS จะถูกนับสองครั้งและความกว้างของแท่งจะไม่เท่ากับระยะเวลาจริงของ request เส้นประแนวตั้งแสดง DOMContentLoaded และ Load ซึ่งอ่านจาก page timings ของไฟล์โดยตรง ทำให้คุณเห็นว่า request ใดเสร็จก่อนที่หน้าจะโต้ตอบได้

นอกเหนือจากแผนภูมิ เครื่องมือนี้ตรวจสอบกฎสามข้อกับฟิลด์ที่ HAR บันทึกไว้อยู่แล้ว มันจะแจ้ง response ที่สามารถแคชได้ (status 200, 203 หรือ 206) ที่ไม่มี Cache-Control และไม่มี Expires header หมายความว่าการเข้าซ้ำจะต้องดาวน์โหลดใหม่ตั้งแต่ต้น มันจะแจ้ง response ประเภทข้อความ — HTML, CSS, JavaScript, JSON, SVG และอื่น ๆ — ที่มีขนาดเกิน 1 KB และถูกส่งมาโดยไม่มี Content-Encoding ซึ่งเป็นโอกาสในการบีบอัดที่ server ส่วนมากเปิดใช้งานได้ด้วย config บรรทัดเดียว และมันจะแจ้งคำขอ CSS หรือ JavaScript ที่เริ่มก่อนค่า DOMContentLoaded ของหน้านั้น — สัญญาณคลาสสิกของ asset ที่บล็อกการ render

ทั้งหมดนี้ทำงานจากข้อมูลที่มีอยู่ในไฟล์ที่คุณอัปโหลด — ไม่มีการเชื่อมต่อเครือข่าย, ไม่มีบริการค้นหาภายนอก, และไม่มีการเรียกหน้าเดิมซ้ำ ไฟล์ HAR ถูกอ่าน, แยกวิเคราะห์ และเรนเดอร์ทั้งหมดในแท็บ browser ของคุณและไม่เคยถูกอัปโหลดไปที่ใด