Thiết kế website tốc độ cao: Đạt chuẩn Core Web Vitals ngay từ bản vẽ đầu tiên

Trong nhiều dự án website, câu chuyện tốc độ thường chỉ được nhắc tới ở tuần cuối cùng, khi đội lập trình chạy thử công cụ đo và phát hiện điểm số đỏ rực. Lúc đó, mọi thay đổi đều tốn kém: ảnh hero đã được khách hàng duyệt, bộ font đã in vào bộ nhận diện, hiệu ứng chuyển động đã trở thành điểm nhấn. Cách tiếp cận bền vững hơn là coi Core Web Vitals như một ràng buộc thiết kế, giống như lưới cột hay bảng màu, ngay từ bản vẽ đầu tiên.

Core Web Vitals là gì và vì sao designer cần quan tâm

Core Web Vitals là bộ chỉ số trải nghiệm trang do Google đề xuất, tập trung vào ba khía cạnh mà người dùng cảm nhận rõ nhất:

• LCP (Largest Contentful Paint): thời gian để phần tử nội dung lớn nhất trong khung nhìn hiển thị, thường là ảnh hero hoặc tiêu đề lớn. Ngưỡng tốt được khuyến nghị là dưới 2,5 giây.
• INP (Interaction to Next Paint): độ trễ từ lúc người dùng chạm, nhấp hoặc gõ phím đến khi giao diện phản hồi. Ngưỡng tốt là dưới 200 mili giây.
• CLS (Cumulative Layout Shift): mức độ bố cục bị xê dịch bất ngờ trong khi tải. Ngưỡng tốt là dưới 0,1.

Điểm đáng chú ý là cả ba chỉ số đều chịu ảnh hưởng trực tiếp từ các quyết định thiết kế.

LCP: thiết kế phần đầu trang cho tốc độ

Phần tử LCP gần như luôn nằm ở màn hình đầu tiên. Vì vậy, khu vực hero cần được thiết kế với ý thức về dung lượng. Một số nguyên tắc thực dụng:

• Ưu tiên hero có tiêu đề chữ lớn và ảnh minh hoạ gọn thay vì video nền tự phát.
• Chuẩn bị sẵn nhiều kích thước ảnh cho desktop, tablet và mobile; xuất ở định dạng hiện đại như WebP hoặc AVIF.
• Giới hạn bộ font ở hai họ chữ và tối đa ba độ đậm; mỗi biến thể font là một tệp cần tải.
• Tránh đặt nội dung chính bên trong slider, vì slider thường phụ thuộc JavaScript để hiển thị khung đầu tiên.

Theo ví dụ minh hoạ từ một dự án nội bộ của XemGìHômNay, việc thay video nền 8 MB bằng ảnh tĩnh khoảng 120 KB kèm hiệu ứng CSS nhẹ đã giúp LCP trên mobile giảm từ khoảng 4 giây xuống dưới 2 giây, trong khi cảm nhận thương hiệu gần như không đổi.

CLS: giữ bố cục đứng yên

Hiện tượng người dùng định bấm nút nhưng trang đột ngột trượt xuống vì quảng cáo vừa tải xong là ví dụ kinh điển của CLS cao. Nguyên nhân phổ biến gồm ảnh không khai báo kích thước, font thay thế có độ rộng khác font chính, và các khối nội dung chèn động phía trên nội dung đã hiển thị.

Trong file thiết kế, designer có thể phòng ngừa bằng cách:

1. Luôn gắn tỉ lệ khung hình cố định cho ảnh, video và khối nhúng (16:9, 4:3, 1:1).
2. Thiết kế sẵn trạng thái khung xương (skeleton) có đúng kích thước với nội dung thật.
3. Dành chỗ cố định cho banner quảng cáo, thông báo cookie hoặc thanh khuyến mãi thay vì để chúng đẩy nội dung.
4. Chọn font dự phòng có số đo gần với font chính để hạn chế nhảy chữ khi font tải xong.

INP: tương tác nhẹ nhàng, phản hồi tức thì

INP phản ánh cảm giác trang có nhanh nhạy hay không. Những giao diện chứa quá nhiều hiệu ứng phức tạp, menu lồng nhiều tầng hay bộ lọc tính toán ngay trên trình duyệt dễ khiến mỗi cú nhấp bị trễ. Designer có thể góp phần bằng cách thiết kế phản hồi thị giác tức thì như đổi màu nút, hiện biểu tượng đang xử lý, trong khi tác vụ nặng chạy phía sau.

Một bản thiết kế đẹp nhưng chậm là bản thiết kế chưa hoàn thiện. Tôi yêu cầu mỗi màn hình trong Figma đều có ghi chú dung lượng ảnh và số font sử dụng, giống như ghi chú khoảng cách hay màu sắc. — Chị Trịnh Bảo Ngọc, Trưởng nhóm thiết kế sản phẩm tại một agency số ở TP.HCM

Quy trình design-to-dev lấy hiệu năng làm trung tâm

Để Core Web Vitals không chỉ là khẩu hiệu, đội dự án cần một quy trình rõ ràng:

1. Giai đoạn wireframe: xác định phần tử LCP của từng mẫu trang và thống nhất ngân sách hiệu năng, ví dụ tổng dung lượng màn hình đầu dưới 500 KB.
2. Giai đoạn UI: chuẩn hoá thư viện component có kích thước cố định, ghi chú tỉ lệ ảnh và trạng thái tải.
3. Bàn giao: kèm checklist hiệu năng trong tài liệu handoff, gồm định dạng ảnh, font, hiệu ứng được phép.
4. Phát triển: developer đo bằng công cụ phòng thí nghiệm sau mỗi tính năng lớn và báo lại designer nếu vượt ngân sách.
5. Sau ra mắt: theo dõi dữ liệu người dùng thực tế theo tháng, vì thiết bị và mạng của khách hàng thật thường chậm hơn máy của đội phát triển.

Kết luận

Core Web Vitals không phải bài kiểm tra kỹ thuật dành riêng cho lập trình viên, mà là thước đo trải nghiệm mà cả đội sản phẩm cùng chịu trách nhiệm. Khi hero được tối giản có chủ đích, bố cục được khoá kích thước và tương tác được thiết kế để phản hồi tức thì, website đạt chuẩn tốc độ gần như tự nhiên. Hãy bắt đầu từ dự án tiếp theo: thêm một cột ngân sách hiệu năng vào file thiết kế, và xem cuộc trò chuyện giữa design và dev thay đổi thế nào.