Nâng cao kỹ năng phát hiện hiệu suất của bạn với Lighthouse và Công cụ của Chrome cho nhà phát triển.
Là nhà phát triển, bạn thường không có quyền kiểm soát các tập lệnh của bên thứ ba mà trang web của bạn tải. Trước khi có thể tối ưu hoá nội dung của bên thứ ba, bạn phải điều tra để tìm ra nguyên nhân khiến trang web của bạn chậm đi. 🕵️
Trong bài đăng này, bạn sẽ tìm hiểu cách sử dụng Lighthouse và Công cụ của Chrome cho nhà phát triển để xác định tài nguyên bên thứ ba có tốc độ chậm. Bài đăng này sẽ giới thiệu các kỹ thuật ngày càng mạnh mẽ và được sử dụng kết hợp một cách hiệu quả nhất.
Nếu bạn chỉ có 5 phút
Kiểm tra hiệu suất Lighthouse giúp bạn khám phá các cơ hội để tăng tốc độ tải trang. Các tập lệnh của bên thứ ba có tốc độ chậm có khả năng xuất hiện trong mục Chẩn đoán trong các mục kiểm tra Giảm thời gian thực thi JavaScript và Tránh tải trọng mạng quá lớn.
Cách chạy quy trình kiểm tra:
- Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
- Nhấp vào thẻ Lighthouse.
- Nhấp vào Thiết bị di động.
- Chọn hộp kiểm Hiệu suất. (Bạn có thể bỏ chọn các hộp đánh dấu còn lại trong phần Kiểm tra.)
- Nhấp vào Mô phỏng 3G nhanh, Giảm tốc độ CPU 4 lần.
- Chọn hộp kiểm Xoá bộ nhớ.
- Nhấp vào Chạy kiểm tra.
Mức sử dụng của bên thứ ba
Kiểm tra Mức sử dụng của bên thứ ba của Lighthouse hiển thị danh sách các nhà cung cấp bên thứ ba mà một trang sử dụng. Phần tổng quan này có thể giúp bạn hiểu rõ hơn về bức tranh tổng thể và xác định đoạn mã thừa của bên thứ ba. Quy trình kiểm tra này có trong tiện ích Lighthouse và sẽ sớm được thêm vào Công cụ cho nhà phát triển trong Chrome 77.
Giảm thời gian thực thi JavaScript
Quy trình kiểm tra Lighthouse Giảm thời gian thực thi JavaScript của Lighthouse đánh dấu các tập lệnh mất nhiều thời gian để phân tích cú pháp, biên dịch hoặc đánh giá. Chọn hộp đánh dấu Show 3rd-party resources (Hiển thị tài nguyên của bên thứ ba) để khám phá các tập lệnh của bên thứ ba dùng nhiều CPU.
Tránh tải trọng mạng lớn
Quy trình kiểm tra Lighthouse Tránh các tải trọng mạng khổng lồ xác định các yêu cầu mạng (bao gồm cả các yêu cầu của bên thứ ba) có thể làm chậm thời gian tải trang. Kiểm tra không thành công khi tải trọng mạng của bạn vượt quá 4.000 KB.
Chặn các yêu cầu mạng trong Công cụ của Chrome cho nhà phát triển
Tính năng chặn yêu cầu mạng của Công cụ của Chrome cho phép bạn xem cách trang của mình hoạt động khi không có tập lệnh, biểu định kiểu hoặc tài nguyên khác. Sau khi xác định được các tập lệnh của bên thứ ba mà bạn nghi ngờ có ảnh hưởng đến hiệu suất, hãy đo lường thời gian tải của bạn thay đổi như thế nào bằng cách chặn yêu cầu đối với các tập lệnh đó.
Cách bật tính năng chặn yêu cầu: 1. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển. 1. Nhấp vào thẻ Mạng. 1. Nhấp chuột phải vào yêu cầu bất kỳ trong bảng điều khiển Network (Mạng). 1. Chọn Chặn URL của yêu cầu.
Thẻ Yêu cầu chặn sẽ xuất hiện trong ngăn Công cụ cho nhà phát triển. Bạn có thể quản lý những yêu cầu đã bị chặn ở đó.
Cách đo lường tác động của tập lệnh của bên thứ ba:
- Đo lường thời gian tải trang của bạn bằng cách sử dụng bảng điều khiển Mạng. Để mô phỏng các điều kiện thực tế, hãy bật tính năng điều tiết mạng và điều tiết CPU. (Trên kết nối nhanh hơn và phần cứng máy tính để bàn, tác động của các tập lệnh đắt tiền có thể không mang tính đại diện như trên điện thoại di động.)
- Chặn các URL hoặc miền chịu trách nhiệm về tập lệnh của bên thứ ba mà bạn cho là có vấn đề.
- Tải lại trang và đo lường lại khoảng thời gian tải mà không có tập lệnh bên thứ ba bị chặn.
Hy vọng là bạn sẽ thấy tốc độ cải thiện, nhưng đôi khi việc chặn các tập lệnh của bên thứ ba có thể không có tác dụng như bạn mong đợi. Nếu đúng như vậy, hãy giảm danh sách các URL bị chặn cho đến khi bạn tách biệt được URL gây ra tốc độ chậm.
Xin lưu ý rằng việc thực hiện ba phép đo lường trở lên và xem xét các giá trị trung bình có thể sẽ mang lại kết quả ổn định hơn. Vì nội dung của bên thứ ba đôi khi có thể lấy các tài nguyên khác nhau cho mỗi lượt tải trang, nên phương pháp này có thể cung cấp cho bạn ước tính thực tế hơn. DevTools hiện đã hỗ trợ nhiều bản ghi trong bảng điều khiển Performance (Hiệu suất), giúp việc này trở nên dễ dàng hơn một chút.