BÀI 25: TỐI ƯU TỐC ĐỘ VỚI PRELOAD, LAZY-LOAD & NUXT IMAGE

Tiếp tục với Bài 25 – Tối ưu tốc độ tải trang với preload, lazy-load và Nuxt Image. Đây là kỹ thuật rất quan trọng giúp website nhanh hơn, mượt hơn và đạt điểm cao trong Google PageSpeed Insights.

---

1. Vì sao cần tối ưu tốc độ?

• Trải nghiệm người dùng tốt hơn
• Giảm tỷ lệ thoát trang
• SEO tốt hơn (Google đánh giá cao tốc độ)
• Hạn chế bandwidth trên thiết bị di động

---

2. Preload – tải trước tài nguyên quan trọng

Thêm preload cho font, ảnh, script quan trọng:

a) Preload font

Trong nuxt.config.ts:

📋 Copyapp: {
  head: {
    link: [
      {
        rel: 'preload',
        href: '/fonts/Inter.woff2',
        as: 'font',
        type: 'font/woff2',
        crossorigin: 'anonymous'
      }
    ]
  }
}

→ Tải font trước khi render trang.

---

b) Preload hình ảnh đầu trang

📋 Copyapp: {
  head: {
    link: [
      {
        rel: 'preload',
        href: '/images/hero.jpg',
        as: 'image'
      }
    ]
  }
}

→ Tải ảnh cover sớm hơn, giảm thời gian hiển thị.

---

3. Lazy-load – trì hoãn tài nguyên không cần thiết

a) Lazy-load ảnh

Sử dụng <NuxtImg> (đã học ở bài 19):

📋 Copy<NuxtImg src="/images/photo.jpg" width="600" height="400" />

→ Tự động lazy-load (ảnh chỉ tải khi cuộn đến)

b) Lazy-load component

Nuxt hỗ trợ defineAsyncComponent:

📋 Copyconst HeavyComponent = defineAsyncComponent(() => import('@/components/Heavy.vue'))

Hoặc trong template:

📋 Copy<LazyHeroSection />

→ Tự động trì hoãn component chưa cần dùng.

---

4. Tối ưu JS – loại bỏ code không cần thiết

a) Chia nhỏ bundle bằng dynamic import

📋 Copyconst Chart = defineAsyncComponent(() => import('@/components/Chart.vue'))

→ Chỉ tải khi cần → bundle chính nhỏ lại.

b) Loại bỏ plugin không dùng

Kiểm tra lại thư mục plugins/, xóa các plugin không cần nữa.

---

5. Tối ưu CSS

a) Dùng Tailwind CSS → chỉ build class sử dụng thực tế

Tailwind đã tree-shake sẵn: chỉ CSS nào bạn dùng mới được build ra.

b) Dùng PurgeCSS nếu không dùng Tailwind

Xóa các class CSS không dùng → giảm file size.

---

6. Sử dụng <NuxtLink> đúng cách

Luôn dùng <NuxtLink> thay vì <a href> để:

• Tối ưu route
• Hạn chế reload full page
• Kích hoạt lazy route loading của Nuxt

📋 Copy<NuxtLink to="/blog/nuxt-3">Xem bài viết</NuxtLink>

---

7. Kiểm tra tốc độ bằng Google PageSpeed

Truy cập: https://pagespeed.web.dev

→ Nhập URL của bạn → xem gợi ý tối ưu.

---

8. Gợi ý cấu hình thêm

Trong nuxt.config.ts:

📋 Copyexperimental: {
  componentIslands: true // tối ưu load từng phần (nâng cao)
}

→ Giúp cải thiện tốc độ với các site lớn.

---

Bạn đã học được

• Tải trước (preload) font, ảnh, JS quan trọng
• Trì hoãn tải ảnh/component chưa cần thiết (lazy-load)
• Tối ưu CSS, JS bằng cách chia nhỏ bundle
• Sử dụng <NuxtImg> và <NuxtLink> hiệu quả
• Kiểm tra tốc độ bằng Google PageSpeed

---

Bài tập mở rộng

1. Tối ưu ảnh cover blog bằng preload + NuxtImg
2. Biến 1 component nặng thành async component
3. Chia nhỏ route /dashboard thành nhiều phần tải động
4. Tối ưu font chữ của site bạn đang làm