Hành Trình Tối Ưu Điểm Lighthouse Từ 40 Lên 100/100: Tôi Đã Làm Những Gì? (Case Study Thực Tế)

Từ 40 điểm Lighthouse lên 100/100 chỉ sau 2 tuần. Tôi đã tối ưu Performance, SEO, Accessibility và Best Practices như thế nào trên dự án Next.js thực tế. Chia sẻ chi tiết từng bước, công cụ và kết quả đo được.

---

Giới thiệu

Cách đây hơn 1 tháng, website của tôi chỉ đạt 40/100 trên Lighthouse.
Tốc độ load chậm, CLS cao, hình ảnh nặng, SEO kém…

Sau 14 ngày tối ưu liên tục, tôi đưa điểm số lên 100/100 ở cả 4 chỉ số (Performance, Accessibility, Best Practices, SEO).

Bài viết này là case study thực tế chi tiết nhất mà tôi từng chia sẻ: những gì tôi đã làm, thứ tự ưu tiên, và kết quả cụ thể.

---

Trước & Sau Tối Ưu (Kết Quả Thực Tế)

Chỉ số	Trước tối ưu	Sau tối ưu	Cải thiện
Performance	42	100	+58
Accessibility	68	100	+32
Best Practices	75	100	+25
SEO	83	100	+17
Overall Score	40	100	+60

---

1. Phân Tích Vấn Đề Ban Đầu (Ngày 1)

Tôi dùng Lighthouse + WebPageTest + Chrome DevTools để chẩn đoán:

• Hình ảnh quá nặng (không optimize)
• JavaScript bundle lớn (> 800KB)
• Render-blocking resources
• CLS cực cao do font và hình ảnh
• Không có lazy loading
• Meta tags và structured data thiếu

---

2. Các Bước Tối Ưu Quan Trọng Tôi Đã Làm

Giai đoạn 1: Tối ưu Performance (Tăng từ 42 → 92)

1. Image Optimization (Next.js)

   • Dùng next/image + sizes + quality={75}
   • Chuyển tất cả sang WebP/AVIF
   • Thêm priority cho Above the fold images

2. Code Splitting & Lazy Loading

   • Dùng React.lazy + Suspense cho các component nặng
   • Dynamic import cho modals, charts, heavy sections

3. Font Optimization

   • Sử dụng next/font (Google Font tự host)
   • display: swap + preload

4. Caching & Compression

   • Vercel Edge Cache
   • Cache-Control headers tối ưu
   • Brotli/Gzip

5. Remove Unused JavaScript

   • Tree shaking mạnh hơn
   • Xóa thư viện thừa

Giai đoạn 2: Tối ưu Core Web Vitals

• LCP (Largest Contentful Paint): Giảm từ 4.8s → 1.1s
• CLS (Cumulative Layout Shift): Giảm từ 0.45 → 0.01
• INP (Interaction to Next Paint): Giảm từ 280ms → 68ms

Mẹo mạnh: Dùng useDeferredValue và useTransition cho các tương tác.

Giai đoạn 3: Accessibility & Best Practices

• Thêm alt text cho tất cả hình ảnh
• Sử dụng semantic HTML (main, section, article)
• Đảm bảo focus outline, ARIA labels
• Contrast ratio 4.5:1
• Không dùng target="_blank" mà không có rel="noopener"

Giai đoạn 4: SEO Hoàn Thảo

• Metadata API của Next.js 16
• Open Graph + Twitter Card đầy đủ
• JSON-LD Structured Data
• Sitemap.xml + robots.txt tự động
• Canonical tags

---

Công Cụ Tôi Sử Dụng

• Lighthouse (Chrome DevTools)
• PageSpeed Insights
• Web Vitals Chrome Extension
• Bundle Analyzer (@next/bundle-analyzer)
• Next.js Speed Insights + Vercel Analytics

---

Bài Học Rút Ra Quan Trọng

1. Không nên tối ưu ngẫu nhiên — Phải đo → chẩn đoán → ưu tiên
2. Tối ưu sớm từ ngày đầu dự án sẽ dễ hơn rất nhiều
3. Next.js là framework mạnh, nhưng nếu không cấu hình đúng thì vẫn chậm
4. Performance là trải nghiệm người dùng, không chỉ là điểm số

---

Kết Luận

Việc đưa Lighthouse từ 40 lên 100 không khó nếu bạn có phương pháp rõ ràng và kiên trì.

Tôi đã mất 14 ngày, khoảng 25–30 giờ làm việc, nhưng kết quả mang lại là traffic tăng 45%, thời gian trên trang tăng, và tỷ lệ thoát giảm mạnh.

Bạn đang có website đang ở mức bao nhiêu điểm Lighthouse?
Comment điểm số hiện tại của bạn bên dưới, mình sẽ gợi ý ngay những việc nên làm trước tiên nhé!

Tags:
tối ưu lighthouse, nextjs performance, lighthouse 100, core web vitals, tối ưu tốc độ website, next.js seo 2026, cải thiện performance nextjs, case study lighthouse