Điểm số Lighthouse không phải là kết quả của tối ưu hóa, mà là tấm gương phản chiếu bản chất của kiến trúc

So sánh các trang web có điểm số Lighthouse cao và thấp sẽ hé lộ những sự thật đáng ngạc nhiên. Các trang có điểm số cao không nhất thiết là những trang đã dành nhiều thời gian tối ưu hóa nhất, mà thực chất là những trang thiết kế đơn giản, không làm browser phải đòi hỏi quá nhiều nghĩa vụ.

Những gì các chỉ số hiệu suất thể hiện

Lighthouse đo lường không phải là thứ hạng của các công cụ hay framework. Điều nó đánh giá chính là thành quả thực tế:

• Tốc độ để người dùng nhìn thấy nội dung có ý nghĩa
• Thời gian JavaScript chiếm dụng chính thread
• Độ ổn định của bố cục trong quá trình tải
• Truy cập và khả năng thu thập dữ liệu của cấu trúc tài liệu

Các chỉ số này (TTFB, LCP, CLS) là phản ứng dây chuyền của các quyết định trong quá trình triển khai. Đặc biệt, chúng liên quan trực tiếp đến lượng tính toán trình duyệt xử lý khi chạy.

Trong kiến trúc phụ thuộc lớn vào các bundle phía client, điểm thấp là điều khó tránh khỏi. Ngược lại, các trang chủ yếu là HTML tĩnh, logic phía client tối thiểu, sẽ mang lại hiệu suất ổn định và dự đoán được.

Ý nghĩa của JavaScript: thủ phạm chính gây giảm hiệu suất

Có một vấn đề chung trong nhiều dự án kiểm tra:

Đó chính là việc thực thi JavaScript.

Vấn đề không phải do chất lượng mã, mà xuất phát từ giới hạn cơ bản của môi trường đơn luồng của trình duyệt. Thời gian chạy của framework, quá trình hydration, giải quyết dependency, khởi tạo 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 được.

Chỉ một vài chức năng tương tác nhỏ cũng thường yêu cầu kích thước bundle không phù hợp. Kiến trúc dựa trên JavaScript mặc định đòi hỏi phải điều chỉnh liên tục để duy trì hiệu suất.

Ngược lại, kiến trúc đặt JavaScript ở chế độ opt-in rõ ràng thường tạo ra kết quả ổn định hơn. Sự khác biệt về triết lý này thể hiện rõ trong điểm Lighthouse.

Xử lý build giúp loại bỏ sự không chắc chắn

Việc render trước giúp loại bỏ nhiều biến số khỏi phương trình hiệu suất:

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

Kết quả là, các chỉ số như TTFB, LCP, CLS tự nhiên được cải thiện. Không đảm bảo điểm hoàn hảo, nhưng giảm thiểu tối đa khả năng thất bại.

Học hỏi từ ví dụ thực tế

Trong dự án tái cấu trúc một blog cá nhân, đã xem xét nhiều phương án. Thiết lập dựa trên React với hydration linh hoạt, nhưng đòi hỏi liên tục chú ý đến hiệu suất. Mỗi lần thêm tính năng mới, lại phải xem xét lại chiến lược render, cách lấy dữ liệu, kích thước bundle.

Ngược lại, thử nghiệm dựa trên HTML tĩnh, coi JavaScript như ngoại lệ, đã mang lại kết quả rõ rệt. Lý do chọn Astro là vì thiết kế hạn chế của nó phù hợp với giả thuyết muốn kiểm chứng.

Điều đáng ngạc nhiên không phải điểm số ban đầu, mà là sự ổn định hiệu suất theo thời gian:

• Không xảy ra giảm điểm do đăng tải nội dung mới
• Các yếu tố tương tác nhỏ không gây ra cảnh báo dây chuyền
• Dễ duy trì baseline

Trong kiến trúc này, điểm Lighthouse không phải là mục tiêu cần hướng tới, mà trở thành hệ quả tự nhiên.

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

Điều quan trọng là nhận thức rằng phương pháp này không phải là phương pháp toàn diện. Kiến trúc tập trung vào tĩnh phù hợp cho các ứng dụng động cao, trạng thái phức tạp. Các kịch bản 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 sẽ làm tăng độ phức tạp của triển khai.

Các framework dựa trên client-side rendering cung cấp sự linh hoạt cho các yêu cầu này, nhưng đổi lại là độ phức tạp khi chạy thời gian thực tăng lên.

Điều quan trọng là không phải cái nào tốt hơn, mà là thực tế rằng lựa chọn kiến trúc sẽ trực tiếp ảnh hưởng đến các chỉ số Lighthouse.

Cơ chế ổn định điểm số, lý do giảm điểm

Lighthouse thể hiện không phải là kết quả của nỗ lực tối ưu, mà là hệ quả của độ phức tạp hệ thống.

Hệ thống dựa vào đồng hồ thực thi sẽ tích tụ độ phức tạp theo thời gian mở rộng chức năng. Các hệ thống build trước giúp 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 luôn cần điều chỉnh hiệu suất liên tục, trong khi các trang khác duy trì ổn định với ít can thiệp.

Lựa chọn mang tính bản chất

Điểm Lighthouse cao thường không phải do các công cụ tối ưu tích cực, mà là do kiến trúc giảm thiểu tải xử lý ban đầu của trình duyệt. Các công cụ hay xu hướng thay đổi, nhưng nguyên tắc cốt lõi vẫn không đổi: tích hợp hiệu suất như một giới hạn trong thiết kế.

Thay vì coi hiệu suất là mục tiêu, hãy xem nó như một giới hạn trong thiết kế. Khi đó, điểm Lighthouse không còn là mục tiêu cần theo đuổi, mà là chỉ số để quan sát.

Sự thay đổi này không phải là câu hỏi về framework nào tốt hơn, mà là quyết định về nơi chấp nhận độ phức tạp trong hệ thống.