Mức độ phù hợp: Tìm JavaScript và CSS không dùng đến

Tiếng Kayce Basques
Tiếng Basques Kayce

Thẻ Mức độ phù hợp trong Công cụ của Chrome cho nhà phát triển có thể giúp bạn tìm thấy mã JavaScript và CSS không dùng đến. Việc xoá các mã không dùng đến có thể tăng tốc độ tải trang và tiết kiệm dữ liệu di động cho người dùng thiết bị di động.

Phân tích mức độ sử dụng mã.
Hình 1. Phân tích mức độ sử dụng mã.

Tổng quan

Việc vận chuyển JavaScript hoặc CSS không dùng đến là một vấn đề phổ biến trong quá trình phát triển web. Ví dụ: giả sử bạn muốn sử dụng thành phần nút của Bootstrap trên trang của mình. Để sử dụng thành phần nút, bạn cần thêm một đường liên kết vào biểu định kiểu của Bootstrap trong HTML, như sau:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Biểu định kiểu này không chỉ bao gồm mã cho thành phần nút. Khối này chứa CSS cho tất cả các thành phần của Bootstrap. Nhưng bạn hiện không sử dụng bất kỳ thành phần Bootstrap nào khác. Vì vậy, trang của bạn đang tải xuống nhiều CSS không cần thiết. CSS bổ sung này là vấn đề vì những lý do sau:

  • Mã bổ sung làm chậm tốc độ tải trang. Xem CSS chặn hiển thị.
  • Nếu người dùng truy cập trang trên thiết bị di động, mã bổ sung sẽ sử dụng hết dữ liệu di động của họ.

Mở thẻ Phạm vi lập chỉ mục

  1. Mở trình đơn Command (Lệnh).
  2. Bắt đầu nhập coverage, chọn lệnh Show Coverage (Hiện mức độ sử dụng), rồi nhấn phím Enter để chạy lệnh này. Thẻ Phạm vi bao phủ sẽ mở ra trong Ngăn (Drawer).
Thẻ Phạm vi lập chỉ mục.
Hình 2. Thẻ Phạm vi bao phủ.

Mức độ sử dụng mã bản ghi

  1. Nhấp vào một trong các nút sau trong thẻ Phạm vi lập chỉ mục:
    • Nhấp vào Bắt đầu đo lường mức độ phù hợp và tải lại trang Tải lại nếu bạn muốn xem mã nào cần để tải trang.
    • Nhấp vào biểu tượng Phạm vi đo lường Ghi âm nếu bạn muốn xem mã nào được sử dụng sau khi tương tác với trang.
  2. Nhấp vào Stop Instrumenting Coverage And Show Results (Dừng đo lường mức độ sử dụng và hiện kết quả) Dừng khi bạn muốn dừng việc ghi lại mức độ sử dụng mã.

Phân tích mức độ sử dụng mã

Bảng trong thẻ Phạm vi lập chỉ mục cho bạn biết những tài nguyên nào được phân tích và lượng mã được sử dụng trong mỗi tài nguyên. Nhấp vào một hàng để mở tài nguyên đó trong bảng điều khiển Sources (Nguồn) rồi xem thông tin chi tiết từng dòng về mã đã sử dụng và mã chưa dùng đến. Mọi dòng mã không dùng đến sẽ có một đường màu đỏ ở đầu.

Báo cáo mức độ sử dụng mã.
Hình 3. Báo cáo mức độ sử dụng mã.
  • Cột URL là URL của tài nguyên đã được phân tích.
  • Cột Loại (Type) cho biết tài nguyên chứa CSS, JavaScript hay cả hai.
  • Cột Tổng số byte là tổng kích thước của tài nguyên tính bằng byte.
  • Cột Số byte chưa sử dụng là số lượng byte không được sử dụng.
  • Cột cuối cùng, chưa được đặt tên là hình ảnh của các cột Tổng số byteSố byte chưa sử dụng. Phần màu đỏ của thanh là những byte không được sử dụng. Phần màu xanh lục được sử dụng các byte.