Điểm số Lighthouse thực sự có ý nghĩa gì: Lựa chọn kiến trúc quyết định độ ổn định

Điểm số cao của Lighthouse đã lâu được tin tưởng là kết quả của quá trình tối ưu hóa triệt để. Người ta nghĩ rằng đó là thành quả của việc nén hình ảnh, trì hoãn tải script, xử lý chống dịch chuyển bố cục, điều chỉnh plugin và các tinh chỉnh riêng lẻ khác. Tuy nhiên, khi xem dữ liệu thực tế, giả thuyết này không phù hợp với thực tế. Các trang web duy trì điểm số cao ổn định không phải là những trang tốn công nhất, mà là những trang ít tải trọng xử lý hơn trên trình duyệt.

Khối lượng công việc của trình duyệt ảnh hưởng đến hiệu năng

Lighthouse đo lường không phải là thứ về thứ hạng của framework mà là kết quả thực tế.

• Tốc độ hiển thị nội dung (TTFB, LCP)
• Thời gian JavaScript chiếm dụng thread chính
• Độ ổn định bố cục trong quá trình tải (CLS)
• Truy cập cấu trúc và khả năng thu thập của trình thu thập dữ liệu

Các chỉ số này được quyết định dưới lớp tối ưu hóa đơn thuần. Đặc biệt, chúng liên quan trực tiếp đến lượng tính toán xử lý trong thời gian chạy của trình duyệt.

Nếu trang phụ thuộc vào các bundle lớn để hoạt động, điểm số thấp là điều không tránh khỏi. Ngược lại, dựa trên HTML tĩnh và giảm thiểu xử lý phía client, hiệu năng sẽ dễ dự đoán và duy trì ổn định hơn nhiều.

Thực thi JavaScript là yếu tố gây cản trở lớn nhất

Trong nhiều cuộc kiểm tra và dự án, rõ ràng rằng việc thực thi JavaScript là nguyên nhân phổ biến nhất làm giảm điểm Lighthouse. Đây không phải là vấn đề về chất lượng mã, mà là vấn đề về lựa chọn kiến trúc.

JavaScript chạy trong môi trường đơn luồng. Các quá trình như runtime của framework, hydration, phân tích phụ thuộc, khởi tạo trạng thái tiêu tốn thời gian cho đến khi trang trở nên tương tác được. Ngay cả cho các chức năng nhỏ, thường cũng cần bundle lớn không cân xứng.

Kiến trúc dựa trên JavaScript theo mặc định đòi hỏi nỗ lực liên tục để duy trì hiệu năng ổn định. Trong khi đó, kiến trúc coi JavaScript là tùy chọn rõ ràng thường mang lại kết quả ổn định hơn.

Giảm thiểu sự không chắc chắn nhờ xuất ra tĩnh

HTML được tạo sẵn loại bỏ nhiều biến số khỏi phương trình hiệu năng.

• Không tốn chi phí render phía server khi yêu cầu
• Không cần bootstrap phía client
• Trình duyệt nhận được HTML hoàn chỉnh, dự đoán được

Từ góc nhìn của Lighthouse, điều này giúp cải thiện các chỉ số như TTFB, LCP, CLS mà không cần tối ưu hóa mục tiêu cụ thể. Việc tạo tĩnh không đảm bảo điểm số hoàn hảo, nhưng có thể giảm đáng kể các trường hợp thất bại.

Ví dụ thực thi: Chuyển đổi từ React

Khi xây dựng lại blog cá nhân, tôi đã xem xét nhiều phương án, bao gồm cả setup dựa trên hydration của React. Những phương án này linh hoạt và có thể hoạt động tốt, nhưng duy trì hiệu năng đòi hỏi theo dõi liên tục. Mỗi lần thêm tính năng mới, tôi phải xem xét lại chiến lược render, lấy dữ liệu, kích thước bundle.

Một phương án khác là dựa trên HTML tĩnh làm nền tảng, coi JavaScript là phương án ngoại lệ. Tôi chọn Astro vì giới hạn mặc định phù hợp với giả thuyết tôi muốn kiểm chứng.

Điều đáng chú ý không phải là điểm số ban đầu tăng lên, mà là mức độ giảm hiệu năng theo thời gian. Không có sự suy giảm sau khi xuất bản nội dung mới, và việc thêm các yếu tố tương tác nhỏ cũng không gây cảnh báo chuỗi. Đây là tính ổn định ở cấp độ kiến trúc, ít bị xói mòn.

Thực tế về đánh đổi

Điều quan trọng là phương pháp này không phải lúc nào cũng phù hợp. Kiến trúc ưu tiên tĩnh không phù hợp với các ứng dụng động cao, phức tạp về trạng thái. Các kịch bản cần xác thực người dùng, cập nhật thời gian thực, quản lý trạng thái phức tạp sẽ gặp hạn chế.

Framework dựa trên client rendering linh hoạt hơn trong các trường hợp này, nhưng đổi lại phải chấp nhận độ phức tạp khi chạy. Điều quan trọng không phải là phương pháp nào tốt hơn, mà là các trade-off phản ánh trực tiếp vào các số liệu của Lighthouse.

Nguyên nhân gốc rễ của sự ổn định và dễ tổn thương của điểm số

Lighthouse không phản ánh nỗ lực, mà là tích tụ của độ phức tạp.

Hệ thống phụ thuộc runtime càng nhiều, càng dễ phát sinh độ phức tạp khi thêm chức năng. Các hệ thống xử lý tại build time thường kiểm soát được độ phức tạp này theo mặc định. Sự khác biệt này giải thích tại sao một số trang yêu cầu tối ưu liên tục, trong khi các trang khác duy trì ổn định với ít can thiệp nhất.

Tóm lại: Ổn định xuất phát từ kiến trúc

Điểm số Lighthouse cao hiếm khi là kết quả của tối ưu hóa tích cực. Thường thì đó là kết quả của kiến trúc giảm thiểu tối đa các xử lý cần thiết trong lần tải ban đầu của trình duyệt.

Công cụ thay đổi theo thời gian, nhưng nguyên lý cốt lõi không đổi. Khi hiệu năng không còn là mục tiêu mà trở thành giới hạn thiết kế, Lighthouse không còn là thứ để theo đuổi, mà là chỉ số để quan sát. Sự chuyển đổi này liên quan đến việc chọn lựa có chủ đích nơi chấp nhận độ phức tạp, hơn là chọn framework đúng.