Nâng cao kỹ năng phát hiện hiệu suất bằng 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 loại tập lệnh 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 tìm hiểu nguyên nhân khiến trang web của mình bị chậm. 🕵️
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 các tài nguyên của bên thứ ba bị chậm. Bài đăng này trình bày các kỹ thuật ngày càng mạnh mẽ và hiệu quả nhất khi kết hợp với nhau.
Nếu bạn chỉ có 5 phút
Tính năng Kiểm tra hiệu suất của 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ó thể xuất hiện trong mục Chẩn đoán trong quy trình kiểm tra Giảm thời gian thực thi JavaScript và Tránh tải trọng mạng khổng lồ.
Cách chạy quy trình kiểm tra:
- Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
- Nhấp vào thẻ Lighthouse (Tháp hải đăng).
- Nhấp vào Thiết bị di động.
- Chọn hộp đánh dấu Hiệu suất. (Bạn có thể bỏ chọn các hộp đánh dấu còn lại trong mục Kiểm tra.)
- Nhấp vào Mạng 3G nhanh được mô phỏng, hệ số giảm tốc CPU gấp 4 lần.
- Chọn hộp đánh dấu Xoá bộ nhớ.
- Nhấp vào Chạy quy trình kiểm tra.
Việc sử dụng của bên thứ ba
Quy trình kiểm tra Việc sử dụng mã của bên thứ ba trong Lighthouse cho thấy danh sách các nhà cung cấp bên thứ ba mà một trang sử dụng. Thông tin 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 mã bên thứ ba thừa. Quy trình kiểm tra này có trong tiện ích Lighthouse và sẽ sớm được thêm vào DevTools trong Chrome 77.
Giảm thời gian thực thi JavaScript
Quy trình kiểm tra Giảm thời gian thực thi JavaScript của Lighthouse sẽ làm nổi bật những 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 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 sử dụng nhiều CPU.
Tránh tải trọng mạng khổng lồ
Quy trình kiểm tra Tránh tải trọng mạng khổng lồ của Lighthouse xác định các yêu cầu mạng (bao gồm cả yêu cầu của bên thứ ba) có thể làm chậm thời gian tải trang. Quy trình 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 yêu cầu mạng trong Chrome DevTools
Tính năng chặn yêu cầu mạng trong Công cụ của Chrome cho nhà phát triển cho phép bạn xem cách trang của mình hoạt động khi không có một tập lệnh, tệp kiểu hoặc tài nguyên cụ thể nào đó. Sau khi xác định các tập lệnh của bên thứ ba mà bạn nghi ngờ ảnh hưởng đến hiệu suất, hãy đo lường mức thay đổi về thời gian tải bằng cách chặn các yêu cầu đến 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 `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools. 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 Mạng. 1. Chọn Chặn URL của yêu cầu.
Thẻ Chặn yêu cầu sẽ xuất hiện trong ngăn DevTools. Bạn có thể quản lý những yêu cầu đã bị chặn tại đó.
Cách đo lường tác động của tập lệnh bên thứ ba:
- Đo lường thời gian tải trang bằ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 hạn chế băng thông mạng và hạn chế CPU. (Trên các kết nối nhanh hơn và phần cứng máy tính, tác động của các tập lệnh tốn kém có thể không đạ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ề các tập lệnh bên thứ ba mà bạn cho là có vấn đề.
- Tải lại trang và đo lường lại thời gian tải trang mà không có các tập lệnh của bên thứ ba bị chặn.
Hy vọng bạn sẽ thấy tốc độ cải thiện, nhưng đôi khi việc chặn tập lệnh của bên thứ ba có thể không mang lại hiệu quả như mong đợi. Nếu vậy, hãy giảm danh sách URL bị chặn cho đến khi bạn xác định được URL gây ra tình trạng chậm.
Xin lưu ý rằng việc chạy ba lần đo lường trở lên và xem xét các giá trị trung vị 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 nhiều tài nguyên khác nhau mỗi khi tải trang, nên phương pháp này có thể cung cấp cho bạn số liệu ướ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 Hiệu suất, giúp việc này trở nên dễ dàng hơn một chút.