Một website chậm không phát ra tiếng động, nhưng người dùng vẫn nghe thấy nó bằng cách đóng tab. Mình từng nghĩ website nhanh là website có điểm Lighthouse thật cao. Sau khi theo dõi người dùng thật và sửa nhiều dự án, mình hiểu tốc độ là khoảnh khắc người dùng mở trang, nhìn thấy điều họ cần và bấm nút mà không phải tự hỏi: “Trang có bị đứng không?”

Một trang web có thể chạy rất nhanh trên máy của mình nhưng chậm trên điện thoại cũ, mạng di động yếu hoặc một khu vực có máy chủ ở xa. Vì vậy, mình cố nhìn hiệu năng từ hoàn cảnh của người dùng thay vì chỉ nhìn kết quả trên môi trường phát triển. Core Web Vitals giúp biến cảm giác đó thành những tín hiệu có thể đo, nhưng việc đo chỉ có ý nghĩa khi gắn với một trải nghiệm cụ thể.

Đo thời gian bằng sự kiên nhẫn của con người

LCP cho biết nội dung chính xuất hiện nhanh đến đâu. Nếu phần lớn nhất của trang là ảnh hero hoặc tiêu đề bài viết, việc tải ảnh quá nặng hay chờ một truy vấn không cần thiết sẽ làm người dùng tưởng trang chưa hoạt động. INP phản ánh độ phản hồi sau các tương tác như bấm, nhập hay mở menu. CLS cho thấy giao diện có bị xê dịch bất ngờ khiến người dùng bấm nhầm hay không.

Mình không cố tối ưu tất cả cùng lúc. Mình mở trang bằng một thiết bị và mạng gần với thực tế, xem người dùng chờ ở đâu rồi kiểm tra nguyên nhân. Có khi vấn đề là ảnh chưa được nén. Có khi JavaScript đang làm quá nhiều việc trước lần tương tác đầu tiên. Cũng có lúc quảng cáo, font chữ hoặc một thành phần không có kích thước cố định khiến bố cục nhảy liên tục.

Đừng bắt một bức ảnh mang cả chiếc vali lên trang web

Ảnh đẹp nhưng quá lớn là một trong những nguyên nhân phổ biến khiến trang chậm. Mình tập chọn đúng kích thước cần hiển thị, dùng định dạng phù hợp và không tải ảnh chất lượng cao hơn khả năng màn hình. Ảnh nằm ngoài vùng nhìn ban đầu có thể tải sau, còn ảnh quan trọng nhất cần được ưu tiên nhưng vẫn phải có kích thước hợp lý.

Font chữ cũng cần được xử lý cẩn thận. Một website phải chờ quá lâu để tải font hoặc đổi kiểu chữ sau khi nội dung xuất hiện sẽ tạo cảm giác thiếu ổn định. Mình thường giới hạn số font và biến thể, dùng font cục bộ khi phù hợp, đồng thời kiểm tra cách văn bản hiển thị trong lúc font chưa sẵn sàng.

Mỗi đoạn JavaScript nên có một lý do để tồn tại

Không phải tương tác nào cũng cần một thư viện lớn. Một menu đơn giản, một trạng thái loading rõ ràng hay một hiệu ứng nhẹ có thể được xử lý bằng cách gọn hơn. Trong các ứng dụng React và Next.js, mình cố giữ phần có thể render ở server ở phía server, chỉ đưa xuống client những gì thực sự cần state hoặc sự kiện trình duyệt.

Điều này không có nghĩa phải né tránh JavaScript. Những ứng dụng giàu tương tác vẫn cần nó. Vấn đề là phải biết đoạn mã nào phục vụ trải nghiệm chính và đoạn nào chỉ làm trang nặng thêm. Khi kiểm tra bằng DevTools, mình quan sát long task, bundle và hoạt động của main thread thay vì chỉ nhìn một điểm số tổng hợp.

Một trang web tốt không làm người đọc hụt chân

Để giảm CLS, mình cố dành sẵn không gian cho ảnh, video và các thành phần tải bất đồng bộ. Nội dung động cần có placeholder gần với kích thước thật. Một banner xuất hiện sau khi người dùng bắt đầu đọc mà đẩy cả đoạn văn xuống có thể làm trải nghiệm khó chịu hơn nhiều so với vài trăm mili giây chậm ban đầu.

Mình cũng kiểm tra trang bằng thao tác thật: cuộn, mở menu, gõ vào biểu mẫu, chuyển tab và quay lại. Một con số đẹp không thể thay thế việc ngồi dùng sản phẩm. Nếu người dùng phải bấm hai lần vì lần đầu giao diện chưa phản hồi, hoặc không biết một hành động đã được ghi nhận, thì sản phẩm vẫn cần được cải thiện dù báo cáo kỹ thuật đang xanh.

Đừng săn điểm số, hãy săn những giây chờ vô ích

Hiệu năng là một quá trình lặp lại. Sau mỗi thay đổi, mình kiểm tra lại trên nhiều kích thước màn hình, xem log build, so sánh trước và sau, rồi theo dõi dữ liệu thực tế khi có thể. Mình không hy sinh khả năng đọc, khả năng truy cập hay chất lượng hình ảnh chỉ để đạt một con số đẹp hơn một chút.

Mục tiêu cuối cùng của tối ưu hiệu năng không phải làm nhà phát triển vui vì bảng điểm. Đó là để người dùng đọc bài dễ hơn, tìm thông tin nhanh hơn và không bỏ cuộc giữa chừng. Khi nhìn hiệu năng như một phần của trải nghiệm, những quyết định kỹ thuật trở nên thực tế và bền vững hơn.