Lighthouse lập báo cáo cung cấp thông tin có bao nhiêu yêu cầu mạng (network requests) được tạo ra và bao nhiêu dữ liệu được lưu chuyển (data was transferred) trong khi trang của bạn tải về:
- Số lượng yêu cầu (Request) và Kích cỡ lưu chuyển (Transfer Size) cho hàng Total (tổng số) được tính toán bằng cách cộng giá trị của các hàng Ảnh (Image), JavaScript (Script), Font (chữ), Stylesheet (CSS), Các cái khác (Other), Tài liệu (Document), và Tài nguyên đa phương tiện (Media).
- Cột Third-party không được tính giá trị vào hàng Total. Mục đích là để bạn ý thức hơn về tổng số yêu cầu và có bao nhiêu dữ liệu lưu chuyển đến từ các tên miền của bên thứ ba. Các yêu cầu của bên thứ ba có thể được kết hợp từ bất kỳ kiểu dạng nguồn tài nguyên bên ngoài nào.
Lưu ý: Giống như tất cả các kiểm tra chẩn đoán khác, kiểm tra Giữ số lượng yêu cầu thấp và dữ liệu tải về kích cỡ nhỏ không trực tiếp ảnh hưởng đến điểm số hiệu suất, tốc độ (performance score). Tuy nhiên việc giảm số lượng yêu cầu và kích cỡ lưu chuyển có thể cải thiện các chỉ số hiệu suất khác.
Cách giảm số lượng tài nguyên và kích cỡ lưu chuyển
Ảnh hưởng của số lượng yêu cầu cao hoặc kích cỡ tài nguyên lưu chuyển lớn đến hiệu suất tải phụ thuộc vào kiểu tài nguyên nào được yêu cầu.
CSS và JavaScript
Các yêu cầu tới file CSS và JavaScript là chặn hiển thị theo mặc định. Nói cách khác, các trình duyệt không thể kết xuất nội dung (render content) lên màn hình cho đến khi tất cả các yêu cầu CSS và JavaScript hoàn thành xong xuôi.
Nếu có bất kỳ file nào bị host trên máy chủ chậm, máy chủ chậm duy nhất đó có thể trì hoãn toàn bộ quá trình kết xuất. Bạn có thể xem thêm các bài viết về chủ đề sau: Tối ưu hóa JavaScript của bạn, Tối ưu hóa tài nguyên của bên thứ ba, và Tối ưu hóa CSS của bạn để học cách chỉ gửi cho người dùng các đoạn mã thực sự cần thiết mà thôi.
Mức độ ảnh hưởng đến chỉ số đo tốc độ độ: Tất cả các chỉ số.
Ảnh
Các yêu cầu đến tài nguyên ảnh không chặn hiển thị (render-blocking) giống như CSS và JavaScript, nhưng chúng vẫn có thể ảnh hưởng tiêu cực đến hiệu suất tải, tốc độ của trang.
Một vấn đề phổ biến là khi người dùng di động tải trang và thấy các ảnh tải về nhưng sẽ phải đợi một lúc để chúng tải xong. Xem Cách tối ưu hóa ảnh để biết cách tải ảnh nhanh hơn.
Mức độ ảnh hưởng đến các chỉ số: First Contentful Paint, First Meaningful Paint, Speed Index.
Font
Ảnh hưởng của việc tải các file font có thể là nguyên nhân gây ẩn văn bản trong khi tải trang. Xem bài viết Tối ưu hóa font của bạn để học cách sử dụng font mặc định có sẵn trên thiết bị của người dùng và chuyển sang font tùy chỉnh khi nó đã được tải xong.
Mức độ ảnh hưởng đến các chỉ số: First Contentful Paint.
Tài liệu
Nếu file HTML của bạn có kích cỡ lớn, trình duyệt sẽ mất nhiều thời gian hơn để phân tích cú pháp và xây dựng cây DOM từ quá trình phân tích cú pháp HTML đó.
Mức độ ảnh hưởng đến các chỉ số: First Contentful Paint.
Một cách để giảm ảnh hưởng của lượng dữ liệu HTML lớn trong click kế tiếp là sử dụng prefetch, một cách nhanh chóng để áp dụng điều này trên các trang WordPress là sử dụng plugin Flying Pages.
Tài nguyên đa phương tiện
Ảnh động GIF thường là file có kích cỡ lớn. Bạn có thể tham khảo bài viết về chủ đề Cách thay thế ảnh GIF bằng video để học cách tải ảnh động nhanh hơn.
Mức độ ảnh hưởng đến cách chỉ số: First Contentful Paint.
Sử dụng ngân sách hiệu suất để ngăn vấn đề hồi quy
Sau khi bạn đã tối ưu hóa xong xuôi mã trang web để giảm số lượng yêu cầu và kích cỡ tải về, bạn hãy tham khảo bài viết Thiết lập ngân sách hiệu suất (performance budget) để biết cách ngăn chặn vấn đề hồi quy.
(Dịch từ bài viết: Keep request counts low and transfer sizes small, trang web[.]dev)
