Đ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 của Lighthouse chạy một loạt các bài kiểm thử tự động trên một trang, rồi 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 ở cấp cao về hiệu suất CRP của trang cụ thể được tải trong trình duyệt của bạn, 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 quảng cáo đó.
  • 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.

Đọ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 của Chrome, kết quả CRP của trang sẽ trông như ảnh chụp màn hình sau đây.

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 phân tích xong tất cả quá trình xây dựng HTML và DOM đã hoàn tất.
  • 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 ghi lại các dấu thời gian EventStart và EventEnd để cho phép chúng ta theo dõi thời gian thực thi này.
  • domComplete: đúng 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.) đã hoàn tất tải xuống—trong nói cách khác, vòng quay đang tải đã ngừng quay.
  • loadEvent: bước cuối cùng trong mỗi lần tải trang, trình duyệt sẽ kích hoạt Sự kiện onload có thể kích hoạt logic ứng dụng bổ sung.

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 điều 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ó khăn khi xuất hiện đầu tiên, nhưng trên thực tế thì lại 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 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) rồi tính toán chênh lệch giữa các dấu thời gian.

Bản minh hoạ NavTiming

Như đã nói ở trên, hiện chúng tôi đã có một số mốc cụ thể cần theo dõi và một chức năng cơ bản để đưa ra các số liệu đo lường 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ô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, Công cụ cho nhà phát triển không phù hợp với CRP vì nó không có cơ chế tích hợp sẵn để tách biệt những tài nguyên quan trọng. Chạy quy trình kiểm tra Lighthouse để trợ giúp xác định các tài nguyên đó.

Phản hồi