Lighthouse và DevTools insights hiệu suất mới

[Nhật Quang]

Google đang chuẩn hóa một số gợi ý tối ưu hiệu suất giữa Lighthouse và Chrome DevTools. Bạn có thể bật các Performance Insights mới này trong cả hai công cụ để phát hiện và ưu tiên việc tối ưu trang web.

Google đang chia sẻ mã phân tích hiệu suất giữa Lighthouse và Chrome DevTools để hiển thị cùng một loại đề xuất — gọi là Insights audits. Vì PageSpeed Insights chạy trên Lighthouse, bạn cũng sẽ thấy các gợi ý mới này ở đó.

Khi chạy một bài kiểm tra Lighthouse, công cụ thu thập dữ liệu trang (artifacts) rồi qua các performance audits để sinh ra khuyến nghị tối ưu. Hiện tại bạn vẫn thấy các audit truyền thống, nhưng có thể nhấn "Try Insights" để chuyển sang loại audit mới. Google dự kiến sẽ hiển thị Insights theo mặc định từ khoảng tháng 6/2025.

Để xem các gợi ý trong DevTools, thu thập một profile trong tab Performance rồi mở rộng thanh Performance Insights ở cột bên trái. Khác với Lighthouse chỉ liệt kê vấn đề và đề xuất, DevTools có thể chú thích lên performance trace và báo cáo trực quan hơn — ví dụ nó sẽ làm nổi bật các request chặn hiển thị (render-blocking) ngay trên timeline.

Nếu bạn nhấp vào marker LCP trong timeline, Chrome sẽ hiện các nút để xem insights liên quan — chẳng hạn "LCP by phase" cung cấp phân tích theo từng giai đoạn của Largest Contentful Paint, giúp xác định phần nào đang trì hoãn LCP nhiều nhất.

Bạn có thể bật Experimental Insights trong tab Lighthouse của DevTools bằng cách mở menu ba chấm và chọn "Toggle experimental insights". Dùng Chrome Canary sẽ cho bạn danh sách Insights đầy đủ hơn. Với CLI, thêm flag --preset=experimental khi chạy Lighthouse để sinh insight thử nghiệm.

Các loại audit/insight đáng chú ý:

Render-blocking requests​

Cho biết những tài nguyên nào đang trì hoãn việc hiển thị nội dung và ước lượng thời gian tiết kiệm nếu loại bỏ hoặc đổi cách tải (ví dụ dùng async/defer cho script).

Web font​

Nếu trang chờ web font tải trước khi hiển thị chữ, điều này làm chậm trải nghiệm. Thiết lập font-display: swap giúp trình duyệt hiển thị font dự phòng trước rồi thay thế sau.

Layout shift culprits​

Liệt kê các phần tử gây dịch chuyển layout (CLS), đồng thời nêu nguyên nhân tiềm năng như ảnh không có kích thước cố định hoặc webfont hoàn tất tải.

Forced reflows​

Hiện các chỗ JavaScript gây tính toán layout lại (reflow) — ví dụ thay đổi DOM rồi đọc kích thước phần tử — khiến trang chậm.

Network dependency tree​

Cho thấy chuỗi phụ thuộc giữa các request. Một số nội dung chỉ hiển thị khi toàn bộ chuỗi tải xong, nên cần xem độ trễ trên critical path.

Browser caching​

Nhắc bật cache và kéo dài thời gian lưu trữ, giúp trang tải nhanh hơn khi điều hướng nội bộ hoặc quay lại lần hai.

Tối ưu hình ảnh​

Gợi ý cách cải thiện phân phối ảnh: dùng định dạng phù hợp, nén, lazy-load khi cần và đảm bảo request LCP được phát hiện sớm để ảnh chính xuất hiện nhanh hơn.

LCP by phase và LCP request discovery​

Phân tách LCP theo các giai đoạn (ví dụ TTFB, tải tài nguyên) để xác định nguyên nhân chính khiến LCP chậm và kiểm tra xem request ảnh LCP có được khởi tạo sớm hay không.

3rd parties​

Đánh giá tác động của mã bên thứ ba: những gì họ tải, kích thước file và lượng công việc CPU trên main thread do họ tạo ra.

HTTP/2 vs HTTP/1.1​

Cảnh báo những tài nguyên vẫn dùng HTTP/1.1 — khi có nhiều file từ cùng server, HTTP/2 sẽ hiệu quả hơn.

Legacy JavaScript​

Phát hiện polyfill và code transform không cần thiết; tránh gửi mã legacy tới những trình duyệt hiện đại để giảm kích thước và thời gian thực thi.

Document request load time​

Vì trước khi tải xong HTML trình duyệt không thể bắt đầu nhiều công việc khác, nên giảm thời gian phản hồi server (TTFB) là rất quan trọng.

Bạn cũng có thể chạy bài kiểm tra tốc độ với DebugBear để xem các chuỗi request và nhận báo cáo trực quan giống như DevTools. Performance Insights giúp bạn xác định ưu tiên sửa lỗi: từ giảm yêu cầu chặn hiển thị, tối ưu ảnh và caching, đến cắt giảm tác động của bên thứ ba.

Kết lại, việc bật và xem các Insights mới trong Lighthouse/DevTools giúp bạn hiểu rõ hơn nguyên nhân gây chậm và đưa ra quyết định tối ưu hợp lý hơn cho trang web.

Nguồn: https://www.debugbear.com/blog/performance-insights-devtools-lighthouse