Nhanh và tìm thấy được = thành công
Một sản phẩm tải chậm mất user; một sản phẩm không ai tìm thấy thì vô hình. Bài này dùng Lighthouse (công cụ đo của Google) cùng AI để đẩy điểm lên vùng xanh (90+).
Chạy Lighthouse
Mở site trên Chrome → F12 → tab Lighthouse → Analyze. Nó chấm 4 mảng: Performance, Accessibility, Best Practices, SEO (0-100). Hoặc dùng PageSpeed Insights để đo với dữ liệu thực tế.
Đưa kết quả cho AI sửa
"Đây là báo cáo Lighthouse của trang chủ: Performance 62, SEO 78. Các cảnh báo chính: [dán]. Liệt kê việc cần làm theo thứ tự ưu tiên (tác động cao/chi phí thấp trước) và hướng dẫn sửa từng cái."
Performance: các đòn bẩy lớn nhất
| Vấn đề | Cách sửa |
|---|---|
| Ảnh nặng | Dùng next/image (tự tối ưu, lazy-load), nén ảnh, dùng định dạng WebP |
| Tải JS thừa | Code-splitting, dynamic import cho component nặng |
| Render chậm | Ưu tiên Server Components, cache dữ liệu ít đổi |
| Font chặn render | Dùng next/font, preload font chính |
💡 80% điểm performance đến từ tối ưu ảnh + giảm JS. Bắt đầu từ đó trước khi tinh chỉnh vặt.
SEO: cho Google hiểu trang bạn
- Metadata mỗi trang: title + description riêng. Trong Next.js dùng
metadataexport hoặcgenerateMetadata.
export const metadata = {
title: 'Khoá học Vibe Coding | Cộng Đồng Vibe Code',
description: 'Học AI Coding thực chiến cho người Việt...',
};
- Open Graph tags — để link đẹp khi share lên Facebook/Zalo (ảnh, tiêu đề).
- Semantic HTML — dùng
<h1>đúng một lần, heading có thứ bậc,altcho ảnh. - sitemap.xml & robots.txt — giúp Google index. Next.js có thể sinh tự động.
- URL sạch & tốc độ — Google xếp hạng theo cả tốc độ (Core Web Vitals).
Quy trình tối ưu thực chiến
- Đo baseline bằng Lighthouse (ghi lại điểm)
- Sửa nhóm tác động cao trước (ảnh, metadata)
- Đo lại — so sánh
- Lặp đến khi đạt vùng xanh
⚠️ Đừng tối ưu mù. Luôn đo trước/sau để biết thay đổi nào thật sự hiệu quả — giống tư duy eval với mọi việc kỹ thuật.
Bài tập
Chạy Lighthouse cho site của bạn, ghi điểm baseline, nhờ AI lập kế hoạch ưu tiên, sửa 3 việc tác động cao nhất, rồi đo lại và so sánh điểm.