Giá trị đánh giá của Lighthouse không phải là một công cụ điều chỉnh, mà là một tấm gương phản ánh tính lành mạnh của kiến trúc

Tại sao cùng một trang web lại cho kết quả khác nhau

Nếu muốn theo đuổi giá trị đánh giá cao của Lighthouse, việc chỉ tối ưu hóa nén hình ảnh, trì hoãn tải script, và xử lý dịch chuyển bố cục là không đủ. Khi quan sát các dự án thực tế, sự khác biệt giữa các trang duy trì điểm số cao liên tục và các trang giảm điểm mỗi khi thêm tính năng mới không nằm ở mức độ nỗ lực, mà ở các lựa chọn trong giai đoạn thiết kế. Các trang ít xử lý hơn trong quá trình tải của trình duyệt có xu hướng ổn định điểm số hơn.

Những gì Lighthouse thực sự kiểm tra

Lighthouse không phải là công cụ đánh giá ưu nhược của framework, mà là để số hóa trải nghiệm người dùng thực tế.

• Tốc độ hiển thị nội dung trên màn hình
• Mức độ JavaScript chặn luồng chính
• Độ ổn định bố cục trong quá trình tải trang
• Khả năng truy cập và khả năng thu thập của cấu trúc tài liệu

Các chỉ số này thể hiện ảnh hưởng của các quyết định ban đầu trong quá trình phát triển. Các trang dựa vào bundle lớn của phía client tất nhiên sẽ có điểm thấp. Ngược lại, các trang dựa trên HTML tĩnh dễ dự đoán hiệu suất hơn.

JavaScript và Hydration: thủ phạm chính gây giảm hiệu suất

Qua nhiều dự án kiểm tra, điều rõ ràng là thực thi JavaScript là yếu tố lớn nhất kéo điểm Lighthouse xuống. Đâ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.

Quá trình hydration đặc biệt nặng nề, vì tất cả các tác vụ như khởi tạo runtime framework, phân tích dependency graph, khởi tạo trạng thái đều diễn ra trước khi trang trở nên tương tác được. Thậm chí, để có các chức năng tương tác nhỏ, không hiếm khi cần bundle JavaScript quá lớn.

Kiến trúc dựa trên JavaScript theo mặc định đòi hỏi tối ưu liên tục để duy trì hiệu suất. Trong khi đó, kiến trúc xử lý JavaScript theo chế độ opt-in rõ ràng mang lại kết quả ổn định hơn.

Tính chắc chắn của Static Generation

Việc phân phối HTML đã được render sẵn loại bỏ nhiều biến số khỏi tính toán hiệu suất:

• Không có độ trễ của server-side rendering
• Không cần xử lý bootstrap phía client
• Trình duyệt nhận được HTML hoàn chỉnh, dự đoán được

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

Ví dụ thực tế: Học hỏi từ việc tái cấu trúc blog cá nhân

Khi tái cấu trúc blog, tôi đã thử nhiều phương pháp tiêu chuẩn. Cài đặt dựa trên hydration của React rất linh hoạt, nhưng mỗi lần thêm tính năng mới lại gặp phải vấn đề về chế độ render, lấy dữ liệu, kích thước bundle.

Tôi quyết định thử cách tiếp cận khác, coi HTML tĩnh là mặc định, xử lý JavaScript như một ngoại lệ. Lý do chọn Astro là vì giới hạn mặc định của nó phù hợp với giả thuyết tôi muốn kiểm chứng.

Ấn tượng nhất là, điểm số ban đầu cao hơn, nhưng ít tốn công sức hơn để duy trì điểm số theo thời gian. Việc xuất bản nội dung mới không gây tụt giảm, các yếu tố tương tác nhỏ cũng không gây cảnh báo không liên quan. Nguyên tắc cơ bản đơn giản là không bị xói mòn.

Không có giải pháp toàn diện nào phù hợp mọi trường hợp

Phương pháp này không phải lúc nào cũng tối ưu. Trong các ứng dụng yêu cầu xác thực người dùng, cập nhật theo thời gian thực, quản lý trạng thái phức tạp phía client, kiến trúc static-first sẽ không đủ mạnh.

Các framework render phía client linh hoạt hơn trong các trường hợp cần sự linh hoạt này, nhưng đổi lại độ phức tạp khi chạy sẽ cao hơn. Điều quan trọng là lựa chọn kiến trúc phản ánh trực tiếp các chỉ số Lighthouse.

Những yếu tố ảnh hưởng đến độ ổn định của điểm Lighthouse

Lighthouse không chỉ thể hiện nỗ lực, mà còn là entropy.

Hệ thống phụ thuộc vào tính toán runtime sẽ tích tụ độ phức tạp theo thời gian khi chức năng được thêm vào. Trong khi đó, hệ thống chuyển xử lý sang giai đoạn build có thể kiểm soát độ 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 liên tục tối ưu hiệu suất, trong khi các trang khác duy trì ổn định với ít can thiệp nhất có thể.

Kết luận: Điểm số không phải để theo đuổi, mà để quan sát

Điểm Lighthouse cao không phải là thành quả của nỗ lực tối ưu tích cực, mà tự nhiên xuất hiện từ kiến trúc giảm thiểu công việc trình duyệt phải làm khi tải trang.

Việc tích hợp hiệu suất như một giới hạn trong thiết kế, thay vì mục tiêu, khiến Lighthouse không còn là chỉ số để đuổi theo, mà trở thành thước đo để quan sát sức khỏe hệ thống. Điều quan trọng không phải chọn framework đúng, mà là chọn nơi chấp nhận độ phức tạp.