Nền tảng của mọi chiến lược hiệu suất vững chắc là hoạt động đo lường và đo lường tốt. Bạn không thể tối ưu hoá những yếu tố mà bạn không thể đo lường. Tài liệu 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 quy trình kiểm tra tự động đối với 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à dễ dàng 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 tra, lặp lại và cải thiện hiệu suất của trang đó.
- Phương pháp Navigation Timing API nắm bắt các chỉ số Giám sát người dùng thực (rum). Đúng như tên gọi, các chỉ số này được thu thập từ các hoạt động tương tác thực của người dùng với trang web của bạn, đồng thời mang đến cái nhìn chính xác về hiệu suất CRP trong thực tế mà người dùng 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 bạn bằng Navigation Timing API để theo dõi hiệu suất hoạt động của ứng dụng.
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 quy trình kiểm tra 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 một Tiện ích của Chrome hoặc mô-đun ALIAS, rất hữu ích khi tích hợp Lighthouse với các hệ thống tích hợp liên tục.
Hãy xem phần Kiểm tra ứng dụng web bằng Lighthouse để bắt đầu.
Khi bạn chạy Lighthouse dưới dạng một tiện ích của Chrome, kết quả CRP của trang sẽ giống như ảnh chụp màn hình dưới đây.
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ã bằng Navigation Timing API
Nhờ sự kết hợp giữa Navigation Timing API và các sự kiện khác trên trình duyệt khi tải trang, bạn có thể thu thập và ghi lại hiệu suất CRP thực tế của trang bất kỳ.
Mỗi nhãn trong sơ đồ trên tương ứng với một dấu thời gian ở độ phân giải cao mà trình duyệt theo dõi cho từng trang được tải. Trên thực tế, trong trường hợp cụ thể này, chúng ta chỉ hiển thị một phần nhỏ trong số tất cả các dấu thời gian. Tạm thời, chúng ta sẽ bỏ qua tất cả các dấu thời gian liên quan đến mạng. Tuy nhiên, chúng ta sẽ đề cập đến chúng trong một bài học sau.
Vậy những 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ẽ 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 điểm khi trình duyệt đã phân tích cú pháp xong tất cả bản dựng HTML và DOM đã hoàn tất.domContentLoaded: đánh dấu điểm khi cả DOM đã sẵn sàng và không có biểu định kiểu nào đang chặn thực thi JavaScript – nghĩa là giờ đây chúng ta có thể (có thể) xây dựng cây hiển thị.- Nhiều khung JavaScript chờ sự kiện này rồi mới bắt đầu thực thi logic của riêng chúng. 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 lệnh này.
- Nhiều khung JavaScript chờ sự kiện này rồi mới bắt đầu thực thi logic của riêng chúng. 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ý đã hoàn tất và mọi tài nguyên trên trang (hình ảnh, v.v.) đã được tải xuống xong – nói cách khác, vòng quay đang tải đã ngừng quay.loadEvent: trong 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 của ứng dụng.
Thông số kỹ thuật HTML nêu các điều kiện cụ thể cho mỗi và mọi sự kiện: thời điểm sự kiện được kích hoạt, điều kiện nào cần được đáp ứng, v.v. Trong mục đích của mình, chúng tôi sẽ tập trung vào một vài mốc quan trọng liên quan đến đường dẫn hiển thị quan trọng:
domInteractiveđánh dấu khi DOM đã sẵn sàng.domContentLoadedthường đánh dấu khi cả DOM và CSSOM đã 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 khi trang và tất cả cá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ên có vẻ hơi khó khăn nếu ban đầu bạn nhìn thấy, nhưng thực tế thì nó khá đơn giản. Navigation Timing API ghi lại tất cả các dấu thời gian có liên quan và mã của chúng ta chỉ chờ sự kiện onload kích hoạt — nhớ rằng sự kiện onload sẽ kích hoạt sau domInteractive, domContentLoaded và domComplete — đồng thời 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à xong, giờ đây chúng ta có một số mốc cụ thể để theo dõi và một chức năng đơn giản để tạo ra những số đ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 tự động thực hiện việc này). Đây là một cách tuyệt vời để theo dõi hiệu suất của các trang và xác định các trang ứng viên có thể hưởng lợi từ một số công việc tối ưu hoá.
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ủa Chrome Công cụ cho nhà phát triển để minh hoạ các khái niệm CRP, nhưng Công cụ cho nhà phát triển hiện không phù hợp với các hoạt động đo lường CRP vì không có cơ chế tích hợp sẵn để tách biệt các tài nguyên quan trọng. Hãy chạy một bài kiểm tra Lighthouse, giúp xác định các tài nguyên đó.