JavaScript của bên thứ 3 (Third-party JS) như Facebook Pixel, Google Analytics, hay Chat Widgets là "kẻ sát nhân thầm lặng" đối với hiệu năng web. Chúng thường chặn Main Thread, khiến chỉ số INP (Interaction to Next Paint) tăng vọt.
Bài học này sẽ hướng dẫn bạn cách "cách ly" chúng ra khỏi luồng chính.
1. Tối ưu Font: Zero Layout Shift
Font chữ tải chậm thường gây ra hiện tượng FOUT (Flash of Unstyled Text) - chữ nhảy từ font mặc định sang font đẹp, làm layout bị xô lệch (CLS).
Giải pháp next/font
Next.js tự động tải font về server build-time và inject CSS size-adjust để font mặc định có kích thước trùng khít với font tải về.
// 100% không còn Layout Shift
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap', // Font fallback hiện ngay lập tức
});2. Chiến lược tải Script thông minh
Đừng ném tất cả script vào thẻ <head>. Hãy phân loại chúng:
| Loại Script | Mức độ ưu tiên | Chiến lược Next.js |
|---|---|---|
| Bot Detection, Security | High (Critical) | beforeInteractive |
| Google Analytics, GTM | Medium | afterInteractive (Default) |
| Chat Widget, Feedback | Low (Idle) | lazyOnload |
Code Example:
import Script from 'next/script';
// Chat widget: Chỉ tải khi trình duyệt rảnh rỗi (CPU Idle)
<Script
src="https://chat.service.com/widget.js"
strategy="lazyOnload"
/>3. Advanced: Partytown (Web Worker Isolation)
Ngay cả lazyOnload vẫn chạy trên Main Thread. Nếu script quá nặng (như Hotjar heatmap), nó vẫn làm đơ UI trong vài giây.
Partytown là giải pháp của các Senior Devs: Chuyển toàn bộ script bên thứ 3 vào Web Worker (một luồng phụ chạy song song).
Case Study: Trang tin tức (Publisher)
Các trang báo chí thường gắn hàng chục script quảng cáo (AdSense, Prebid). Việc chạy chúng trên Main Thread khiến điểm Lighthouse Mobile chỉ còn 20-30. Sau khi chuyển sang Partytown/Cloudflare Zaraz (Worker-based loading), điểm số tăng lên 90+ vì Main Thread hoàn toàn trống rảnh để phản hồi thao tác cuộn/click của người đọc.
Cấu hình Next.js + Partytown:
// next.config.mjs
experimental: {
nextScriptWorkers: true, // Bật tính năng worker
}// Chạy trong Worker, không ảnh hưởng UI
<Script
src="https://connect.facebook.net/en_US/fbevents.js"
strategy="worker"
/>Kết luận
Hãy đối xử với Third-party Script như những vị khách không mời: Đừng để họ chiếm dụng phòng khách (Main Thread) của bạn. Hãy mời họ ra sân sau (Web Worker/Lazy Load).