Đo lường đường dẫn hiển thị quan trọng

Ilya Grigorik
Ilya Grigorik
X Trang chủ

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 thu thập 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 Chrome hoặc mô-đun NPM. Điều này 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 đọc bài viết 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.

Quy trình kiểm tra CRP của Lighthouse

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.

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.

Navigation Timing

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 ta chỉ hiển thị một phần nhỏ trong số tất cả các dấu thời gian khác nhau. Hiện tại, chúng ta 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ẽ quay lại vớ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 đã hoàn tất việc phân tích cú pháp tất cả các thành phần HTML và DOM.
  • domContentLoaded: đánh dấu thời điểm cả DOM đã sẵn sàng và không có bảng kiểu nào đang chặn quá trình thực thi JavaScript. Tức là giờ đây, chúng ta có thể (có khả năng) tạo 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 EventStart và EventEnd để cho phép chúng ta theo dõi thời gian thực thi.
  • domComplete: như tên gọi, tất cả quá trình xử lý đã hoàn tất và tất cả tài nguyên trên trang (hình ảnh, v.v.) đã tải xong – 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ện onload có thể kích hoạt thêm logic ứng dụng.

Quy cách HTML quy định các điều kiện cụ thể cho từng sự kiện: thời điểm kích hoạt, điều kiện cần đáp ứng và các yếu tố cần cân nhắc quan trọng khá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.
  • domContentLoaded thườ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ì DOMContentLoaded sẽ kích hoạt ngay sau domInteractive.
  • 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>

Thử nào

Ví dụ trước có vẻ hơi khó hiểu khi nhìn qua, nhưng thực tế thì khá đơn giản. API Thời gian điều hướng ghi lại tất cả dấu thời gian có liên quan và mã của chúng ta sẽ chờ sự kiện onload kích hoạt (hãy nhớ rằng sự kiện onload 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.

Bản minh hoạ NavTiming

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 ra 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ù các tài liệu này đôi khi sử dụng bảng điều khiển Mạng trong Chrome DevTools để minh hoạ các khái niệm về CRP, nhưng DevTools không phù hợp để đo lường CRP vì 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.

Phản hồi