Ngày xuất bản: 31 tháng 3 năm 2014
Nền tảng của mọi chiến lược hiệu suất vững chắc là khả năng đo lường và đo lường hiệu quả. Bạn không thể tối ưu hoá những gì không thể đo lường được. Hướng dẫn này giải thích các phương pháp đo lường hiệu suất CRP.
- Phương pháp Lighthouse chạy một loạt các kiểm thử tự động trên một trang, sau đó tạo báo cáo về hiệu suất CRP của trang. Phương pháp này cung cấp thông tin tổng quan nhanh và cơ bản về hiệu suất CRP của một trang cụ thể được tải trong trình duyệt, cho phép bạn nhanh chóng kiểm thử, lặp lại và cải thiện hiệu suất của trang đó.
- Phương pháp API Thời gian điều hướng ghi lại các chỉ số Theo dõi người dùng thực (RUM). Như tên gọi, các chỉ số này được thu thập từ các lượt tương tác thực tế của người dùng với trang web của bạn và cung cấp thông tin chính xác về hiệu suất CRP trong thực tế mà người dùng của bạn trải nghiệm trên nhiều thiết bị và điều kiện mạng.
Nhìn chung, bạn nên sử dụng Lighthouse để xác định các cơ hội tối ưu hoá CRP rõ ràng, sau đó đo lường mã của mình bằng Navigation Timing API để theo dõi hiệu suất của ứng dụng trong thực tế.
Kiểm tra trang bằng Lighthouse
Lighthouse là một công cụ kiểm tra ứng dụng web, chạy một loạt các bài kiểm thử trên một trang nhất định, sau đó hiển thị kết quả của trang đó trong một báo cáo tổng hợp. Bạn có thể chạy Lighthouse dưới dạng Tiện ích của Chrome hoặc mô-đun GMS. Mô-đun này rất hữu ích trong việc tích hợp Lighthouse với các hệ thống tích hợp liên tục.
Đọc Kiểm tra ứng dụng web bằng Lighthouse để bắt đầu.
Khi bạn chạy Lighthouse dưới dạng Tiện ích Chrome, kết quả CRP của trang sẽ trông giống như ảnh chụp màn hình sau.
Hãy xem phần Chuỗi yêu cầu quan trọng để biết thêm thông tin về kết quả của quy trình kiểm tra này.
Đo lường mã của bạn bằng Navigation Timing API
Việc kết hợp Navigation Timing API và các sự kiện trình duyệt khác được phát khi trang tải cho phép bạn ghi lại và ghi lại hiệu suất CRP thực tế của bất kỳ trang nào.
Mỗi nhãn trong sơ đồ trước đó tương ứng với một dấu thời gian có độ phân giải cao mà trình duyệt theo dõi cho từng trang mà trình duyệt tải. Trên thực tế, trong trường hợp cụ thể này, chúng tôi chỉ trình bày một phần trong số tất cả các dấu thời gian khác nhau — bây giờ, chúng tôi sẽ bỏ qua tất cả các dấu thời gian liên quan đến mạng, nhưng chúng ta sẽ xem lại các dấu thời gian này trong một bài học sau.
Vậy các dấu thời gian này có ý nghĩa gì?
domLoading: đây là dấu thời gian bắt đầu của toàn bộ quá trình, trình duyệt sắp bắt đầu phân tích cú pháp các byte đầu tiên nhận được của tài liệu HTML.domInteractive: đánh dấu thời điểm trình duyệt phân tích xong toàn bộ quá trình xây dựng HTML và DOM.domContentLoaded: đánh dấu thời điểm cả hai DOM đã sẵn sàng và không có biểu định kiểu nào đang chặn thực thi JavaScript – có nghĩa là hiện tại chúng ta có thể (có thể) xây dựng cây kết xuất.- Nhiều khung JavaScript chờ sự kiện này trước khi bắt đầu thực thi logic của riêng mình. Vì lý do này, trình duyệt sẽ ghi lại dấu thời gian
EventStartvàEventEndđể cho phép chúng ta theo dõi thời gian thực thi này.
- Nhiều khung JavaScript chờ sự kiện này trước khi bắt đầu thực thi logic của riêng mình. Vì lý do này, trình duyệt sẽ ghi lại dấu thời gian
domComplete: đúng như tên gọi, tất cả quá trình xử lý đều hoàn tất và tất cả tài nguyên trên trang (hình ảnh, v.v.) đã hoàn tất tải xuống – nói cách khác, vòng quay tải đã ngừng quay.loadEvent: là bước cuối cùng trong mỗi lần tải trang, trình duyệt sẽ kích hoạt một sự kiệnonloadcó thể kích hoạt thêm logic ứng dụng.
Thông số kỹ thuật của HTML chỉ ra các điều kiện cụ thể cho mỗi và mọi sự kiện: thời điểm kích hoạt, những điều kiện nào cần được đáp ứng và các điểm quan trọng khác cần cân nhắc. Đối với mục đích của mình, chúng ta sẽ tập trung vào một vài mốc quan trọng liên quan đến đường dẫn kết xuất quan trọng:
domInteractiveđánh dấu thời điểm DOM sẵn sàng.domContentLoadedthường đánh dấu thời điểm cả DOM và CSSOM đều sẵn sàng.- Nếu không có trình phân tích cú pháp nào chặn JavaScript, thì
DOMContentLoadedsẽ kích hoạt ngay saudomInteractive.
- Nếu không có trình phân tích cú pháp nào chặn JavaScript, thì
domCompleteđánh dấu thời điểm trang và tất cả tài nguyên phụ của trang đã sẵn sàng.
<!DOCTYPE html>
<html>
<head>
<title>Critical Path: Measure</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<script>
function measureCRP() {
var t = window.performance.timing,
interactive = t.domInteractive - t.domLoading,
dcl = t.domContentLoadedEventStart - t.domLoading,
complete = t.domComplete - t.domLoading;
var stats = document.createElement('p');
stats.textContent =
'interactive: ' +
interactive +
'ms, ' +
'dcl: ' +
dcl +
'ms, complete: ' +
complete +
'ms';
document.body.appendChild(stats);
}
</script>
</head>
<body onload="measureCRP()">
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
Ví dụ trước có vẻ hơi khó khăn khi xuất hiện đầu tiên, nhưng trên thực tế thì lại khá đơn giản. Navigation Timing API ghi lại tất cả dấu thời gian có liên quan và mã của chúng ta chờ sự kiện onload kích hoạt (lưu ý rằng sự kiện onload sẽ kích hoạt sau domInteractive, domContentLoaded và domComplete) và tính toán sự khác biệt giữa các dấu thời gian khác nhau.
Tất cả đã nói và làm, giờ đây, chúng ta có một số mốc cụ thể để theo dõi và một hàm cơ bản để xuất các phép đo này. Xin lưu ý rằng thay vì in các chỉ số này trên trang, bạn cũng có thể sửa đổi mã để gửi các chỉ số này đến máy chủ phân tích (Google Analytics sẽ tự động thực hiện việc này). Đây là một cách hay để theo dõi hiệu suất của các trang và xác định những trang có thể hưởng lợi từ một số hoạt động tối ưu hoá.
Còn Công cụ cho nhà phát triển thì sao?
Mặc dù đôi khi, các tài liệu này sử dụng bảng điều khiển Mạng Công cụ của Chrome cho nhà phát triển để minh hoạ các khái niệm về CRP, nhưng Công cụ cho nhà phát triển không phù hợp với các phép đo CRP vì công cụ này không có cơ chế tích hợp để tách biệt các tài nguyên quan trọng. Hãy chạy quy trình kiểm tra Lighthouse để giúp xác định những tài nguyên như vậy.