Điểm số Lighthouse thực sự thể hiện điều gì: Lựa chọn kiến trúc kiểm soát độ phức tạp

Lighthouse không phải là một công cụ tối ưu hóa. Để nhận thức này, tôi đã phải trải qua nhiều thử nghiệm và sai sót trong thời gian dài.

Khi quan sát sự khác biệt giữa các tổ chức có hiệu suất trang web ổn định và các tổ chức luôn bị bận rộn xử lý các vấn đề, tôi đã nhận ra một điều. Các trang web duy trì điểm số cao không phải là những trang tích cực tối ưu nhất, mà là những trang có công việc mà trình duyệt phải làm khi tải về ít hơn về cơ bản.

Bản chất của đo lường: Tích tụ phức tạp

Lighthouse đánh giá không phải là nỗ lực tối ưu hóa riêng lẻ, mà là sự lựa chọn kiến trúc căn bản. Cụ thể, nó phản ánh các kết quả sau:

• Tốc độ hiển thị nội dung trên màn hình
• Thời gian JavaScript chiếm dụng luồng chính
• Thay đổi bố cục trong quá trình tải trang
• Cấu trúc HTML và khả năng truy cập

Các chỉ số này là các tác động hạ nguồn phát sinh từ các quyết định trong giai đoạn thiết kế. Đặc biệt, chúng ảnh hưởng trực tiếp đến lượng tính toán trình duyệt phải thực hiện khi chạy.

Các trang dựa vào gói lớn phía client sẽ có điểm thấp là điều tất yếu. Ngược lại, các trang dựa trên HTML tĩnh và sử dụng JavaScript hạn chế thể hiện hiệu suất dự đoán được.

Lý do JavaScript thực thi là yếu tố biến động lớn nhất

Thông qua kinh nghiệm thực tế dự án, yếu tố phổ biến nhất gây giảm điểm Lighthouse là trọng lượng của việc thực thi JavaScript. Đây không phải là vấn đề về chất lượng mã, mà là hạn chế căn bản trong môi trường đơn luồng của trình duyệt.

Khởi tạo runtime của framework, xử lý hydration, phân tích phụ thuộc, khởi tạo quản lý trạng thái — tất cả đều tiêu tốn thời gian trước khi trang trở nên tương tác.

Vấn đề là, ngay cả các chức năng tương tác nhỏ cũng đi kèm với gói 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 suất. Trong khi đó, kiến trúc coi JavaScript là tùy chọn rõ ràng sẽ tạo ra kết quả ổn định hơn.

Giảm độ phức tạp bằng xuất tĩnh

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

• Không cần chờ phản hồi từ server khi render phía server
• Không cần khởi động bootstrap phía client
• HTML nhận được từ trình duyệt là hoàn chỉnh và dự đoán được

Kết quả là, các chỉ số như TTFB, LCP, CLS tự nhiên được cải thiện. Mà không cần thêm các tối ưu hóa đặc thù.

Việc tạo tĩnh không đảm bảo điểm số hoàn hảo, nhưng sẽ giảm đáng kể các chế độ thất bại. Đây là chiến lược chọn sự ổn định qua giới hạn, thay vì tối ưu tham lam.

Bài học từ thực tiễn về ảnh hưởng của kiến trúc

Khi xây dựng lại blog cá nhân, tôi đã thử các phương pháp khác biệt so với thiết lập tiêu chuẩn dựa trên React. Phương pháp phụ thuộc hydration linh hoạt hơn, nhưng mỗi lần thêm tính năng mới đều cần đánh giá chế độ render, lấy dữ liệu, kích thước bundle.

Ngược lại, chọn dựa trên HTML, coi JavaScript là ngoại lệ, mang lại sự thay đổi rõ rệt. Không phải là cải thiện điểm ban đầu đột ngột, mà là giảm gần như hoàn toàn công sức duy trì hiệu suất theo thời gian.

Khi phát hành nội dung mới, không giảm hiệu suất. Các yếu tố tương tác nhỏ cũng không gây cảnh báo bất ngờ. Ngưỡng cơ bản ít bị xâm phạm hơn.

Nhận thức về đánh đổi là rất quan trọng

Cần làm rõ rằng, phương pháp này không phải là phương pháp toàn diện. Phương pháp static-first không phù hợp với các ứng dụng yêu cầu 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 phía client.

Các framework dựa trên giả định render phía client cung cấp nhiều linh hoạt hơn trong các trường hợp này, nhưng đổi lại là tăng độ phức tạp khi chạy. Không phải là tốt hơn hay xấu hơn, mà là các đánh đổi này trực tiếp ảnh hưởng đến các chỉ số Lighthouse. Đó là bản chất của vấn đề.

Chân lý về độ ổn định điểm số và điểm yếu căn bản

Lighthouse thể hiện không phải là nỗ lực, mà là entropy của độ phức tạp.

Hệ thống dựa vào thời gian thực thi sẽ tích tụ độ phức tạp theo thời gian khi thêm chức năng mới. Các hệ thống xây dựng sẵn để làm việc trước thời hạn sẽ hạn chế độ 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 cần duy trì hiệu suất liên tục, trong khi các trang khác vẫn ổn định với ít can thiệp nhất có thể.

Tổng kết: Hiệu suất xuất phát từ giới hạn mặc định

Điểm Lighthouse cao hiếm khi là kết quả của tối ưu hóa tích cực. Thay vào đó, nó xuất hiện một cách tự nhiên từ kiến trúc tối thiểu hóa công việc trình duyệt phải làm trong lần tải ban đầu.

Dù công cụ có thay đổi, nguyên tắc căn bản vẫn không đổi. Chọn thiết kế để hiệu suất trở thành giới hạn mặc định, chứ không phải mục tiêu. Khi đó, Lighthouse không còn là thứ để theo đuổi, mà là chỉ số để quan sát.