Cách Tối Ưu Lighthouse Score 100/100 Cho Blog

Lighthouse là gì?

Google Lighthouse là công cụ audit tự động giúp đo lường chất lượng web pages trên 4 categories:

• Performance — Tốc độ load trang
• Accessibility — Khả năng truy cập cho mọi người
• Best Practices — Tuân thủ best practices
• SEO — Tối ưu cho search engines

Performance (100/100)

1. Giảm JavaScript Bundle

// ❌ Import toàn bộ library
import _ from 'lodash';

// ✅ Import chỉ function cần dùng
import debounce from 'lodash/debounce';

2. Lazy Load Images

<!-- Astro tự động optimize -->
<img src={heroImage} loading="lazy" decoding="async" />

3. Preload Critical Resources

Font và CSS critical path cần được preload.

Accessibility (100/100)

• Mọi image phải có alt text
• Color contrast ratio ≥ 4.5:1
• Touch targets ≥ 48x48px
• Keyboard navigation hoạt động

Best Practices

• HTTPS everywhere
• No mixed content
• Proper meta tags

SEO (100/100)

• Unique title + meta description mỗi trang
• Structured data (JSON-LD)
• Sitemap + robots.txt
• Canonical URLs

Kết quả

Blog này đạt 100/100 trên cả 4 categories nhờ Astro framework + các best practices trên.