Cải thiện các chỉ số Lighthouse và Core Web Vitals

Mốc cơ sở (Baseline) của trang web hiện tại

Theo đo đạc hiện tại của trang chủ balldecor.ru:

• Performance: 52
• Accessibility: 57
• Best Practices: 74
• SEO: 100

Điểm SEO cao, nhưng các chỉ số còn lại bị sụt giảm đáng kể. Khi chuyển sang HAIH, cần sử dụng điều này làm mốc cơ sở kỹ thuật có thể đo lường được và không lặp lại các vấn đề từ hệ thống cũ (legacy).

Mục tiêu

Đạt được các chỉ số về hiệu suất, khả năng tiếp cận và best practices tốt hơn đáng kể trên phiên bản trang web mới, mà không làm ảnh hưởng đến SEO, tính năng và các kịch bản tiếp thị.

Các việc cần làm

1. Lấy mốc cơ sở Lighthouse có thể tái tạo cho trang chủ và một số trang thương mại quan trọng ở cả chế độ di động (mobile) và máy tính (desktop).
2. Phân tích các nguyên nhân chính làm giảm Performance:
   • LCP và nội dung hero nặng;
   • Kích thước và định dạng hình ảnh;
   • JavaScript/CSS dư thừa;
   • Tài nguyên gây chặn hiển thị và các tập lệnh bên thứ ba;
   • Phông chữ (fonts);
   • CLS;
   • TBT/INP;
   • Phản hồi từ máy chủ và việc lưu hữ đệm (caching).
3. Tối ưu hóa hình ảnh: định dạng hiện đại, kích thước phản hồi/srcset, kích thước chính xác, tải chậm (lazy loading) cho các phần ngoài màn hình đầu tiên (above the fold), chỉ tải trước (preload) các tài nguyên thực sự quan trọng.
4. Giảm thiểu JS phía máy khách (client-side) và quá trìnhhydrate hóa ở những nơi SSR/HTML thông thường là đủ; không mang các thư viện nặng vào khi không cần thiết.
5. Định cấu hình lưu trữ đệm cho tài nguyên tĩnh, nén (compression), tài nguyên bất biến (immutable assets) và lớp CDN/cache nếu được sử dụng trong việc triển khai HAIH.
6. Khắc phục các vấn đề về khả năng tiếp cận (accessibility):
   • Độ tương phản;
   • Nhãn/aria chính xác;
   • Cấu trúc ngữ nghĩa của tiêu đề;
   • Điều hướng bằng bàn phím/tiêu điểm (keyboard navigation/focus);
   • Kích thước vùng chạm (touch targets);
   • Văn bản thay thế (alt texts);
   • Khả năng tiếp cận của biểu mẫu và máy tính (forms and calculator).
7. Khắc phục các vấn đề về Best Practices: lỗi console, API lỗi thời/không an toàn, vấn đề tải tài nguyên, tiêu đề bảo mật (security headers) và các nhận xét khác từ Lighthouse.
8. Đảm bảo không làm suy giảm SEO: SSR, khả năng lập chỉ mục (indexability), siêu dữ liệu (metadata), thẻ canonical, dữ liệu có cấu trúc (structured data) và các liên kết nội bộ phải được giữ nguyên.
9. Thêm bài kiểm tra Lighthouse/Pagespeed vào bài kiểm tra khói (smoke-test) cuối cùng trước khi ra mắt và sử dụng nó làm công cụ kiểm soát hồi quy sau các thay đổi lớn.

Chỉ tiêu mục tiêu

Đối với các trang quan trọng của phiên bản mới, hướng tới:

• Performance: 90+
• Accessibility: 95+
• Best Practices: 95+
• SEO: 95–100

Các mục tiêu này không được đạt được bằng cách loại bỏ các tính năng quan trọng đối với doanh nghiệp hoặc đơn giản hóa trang web một cách gượng ép.

Tiêu chí hoàn thành

Các trang quan trọng của phiên bản mới vượt trội hơn hẳn so với mốc cơ sở cũ, các chỉ số Core Web Vitals quan trọng nằm trong vùng chấp nhận được, và các vấn đề chính của Lighthouse đã được khắc phục và không lặp lại trong các thay đổi tiếp theo.