🚀 Áp dụng Preload, Prefetch, Preconnect và DNS-Prefetch thế nào để tối ưu tải tài nguyên Frontend hiệu quả ?

Hi anh em, lâu rồi mình mới quay trở lại viết bài, rất hi vọng bài viết sẽ cung cấp cho anh em 1 góc nhìn thú vị nhé

1. Preload - Tải ngay tài nguyên cần cho hiện tại

Preload là gì?

Preload báo cho trình duyệt biết: "Tài nguyên này chắc chắn cần trong trang hiện tại, hãy tải ngay với mức độ ưu tiên cao".

Vấn đề thực tế

Hãy tưởng tượng bạn có một trang landing page với ảnh nền đẹp được định nghĩa trong CSS:

.hero-section { background-image: url('your-image.jpg');
}

Vấn đề: Trình duyệt sẽ tải ảnh theo trình tự: (Đọc thêm CRP tại đây nhé anh em)

1. Tải HTML
2. Parse HTML, tìm thấy link CSS
3. Tải CSS
4. Parse CSS, tìm thấy background-image
5. Mới bắt đầu tải ảnh

Kết quả: Ảnh hiển thị chậm, người dùng thấy background trắng xóa vài giây.

Giải pháp với Preload

<link rel="preload" href="your-image.jpg" as="image">

Cách hoạt động: Trình duyệt sẽ tải ảnh song song với việc tải CSS, thay vì chờ parse CSS xong.

Kết quả: Ảnh tải và hiển thị nhanh hơn

Các trường hợp sử dụng Preload

1. Font chữ quan trọng

<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>

2. Script quan trọng

<link rel="preload" href="/js/critical.js" as="script">

3. CSS quan trọng

<link rel="preload" href="/css/above-fold.css" as="style">

4. v.v

Lưu ý quan trọng

• Chỉ preload những tài nguyên chắc chắn sẽ dùng trong trang hiện tại
• Preload có mức độ ưu tiên cao, lạm dụng có thể làm chậm các tài nguyên khác

2. Prefetch - Tải trước tài nguyên cho tương lai

Prefetch là gì?

Prefetch báo cho trình duyệt: "Tài nguyên này có thể cần trong tương lai, hãy tải khi rảnh rỗi".

Khi nào dùng Prefetch?

Ví dụ thực tế: Bạn có trang danh sách sản phẩm, biết rằng 70% người dùng sẽ click vào sản phẩm đầu tiên.

<!-- Trên trang danh sách sản phẩm -->
<link rel="prefetch" href="/product/iphone-15-pro.html">
<link rel="prefetch" href="/images/iphone-15-gallery.jpg">

Khi người dùng click vào sản phẩm đó, trang đã được cache sẵn, load gần như tức thì.

Tóm tắt: Sự khác biệt Preload vs Prefetch

Oke anh em, trước khi đi đến 2 kỹ thuật còn lại, anh em mình hãy cùng nhau tìm hiểu về Waterfall để nắm được vòng đời của một request từ khi anh em gửi đi cho đến khi nhận được dữ liệu trả về.

Waterfall - Vòng đời của một request

Chi tiết:

1. Queueing: Thời gian chờ trong Queue. Khoảng thời gian này phụ thuộc vào 1 trong 3 yếu tố sau:
   • Các request khác có mức độ ưu tiên cao hơn.
   • Đối với HTTP/1.0 và HTTP/1.1, đã có 6 kết nối TCP mở cho origin.
   • Trình duyệt đang phân bổ không gian bộ nhớ tạm trên disk.
2. Stalled: Request tiếp tục bị hoãn kể cả khi kết nối đã bắt đầu. Lý do hoãn tương tự như trong Queueing.
3. DNS Lookup: Tổng thời gian phân giải tên miền sang IP.
4. Initial connection: Tổng thời gian khởi tạo kết nối TCP.
5. SSL: Tổng thời gian thực hiện SSL/TLS (https).
6. Request sent: Tổng thời gian request được gửi.
7. Waiting: Khoảng thời gian sau khi request được gửi cho đến khi nhận được byte dữ liệu đầu tiên gửi từ server.
8. Content download: Tổng thời gian tải xuống nội dung nhận được từ server.

3. Preconnect - Thiết lập kết nối trước

Vấn đề với external resources

Khi trang web cần tải tài nguyên từ domain khác (Google Fonts, CDN, API), trình duyệt phải thực hiện 3 bước tốn thời gian:

1. DNS Lookup - Chuyển đổi domain thành IP
2. TCP Connection - Thiết lập kết nối TCP
3. SSL Handshake - Thiết lập HTTPS

Preconnect giải quyết như thế nào?

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.jsdelivr.net">

Cách hoạt động: Trình duyệt thực hiện 3 bước trên song song với việc tải trang, sẵn sàng kết nối khi cần.

Ví dụ thực tế với Google Fonts

Trước khi tối ưu:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

Timeline:

• Tải HTML → Parse HTML → Tìm thấy Google Fonts → DNS Lookup → TCP → SSL → Tải CSS → Parse CSS → Tải font files

Sau khi tối ưu:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

Timeline:

• Tải HTML + Thiết lập kết nối Google Fonts (song song) → Kết nối sẵn sàng → Tải CSS và fonts ngay lập tức

Lưu ý quan trọng về Preconnect

• Chỉ sử dụng cho các domain bên thứ 3 cần thiết nhất.
• Do việc thiết lập và kết nối rất tốn kém cho cả máy khách và máy chủ ⇒ Chỉ nên dùng cho 3-4 domain ⇒ Để hạn chế tranh chấp tài nguyên network

4. DNS-Prefetch - Phân giải domain trước

Khi nào dùng DNS-Prefetch?

Khi bạn có nhiều domain bên thứ ba nhưng không chắc chắn sẽ dùng tất cả, hoặc khi đã Preconnect 3-4 domain.

<link rel="dns-prefetch" href="//google-analytics.com">
<link rel="dns-prefetch" href="//googletagmanager.com">
<link rel="dns-prefetch" href="//facebook.com">
<link rel="dns-prefetch" href="//twitter.com">

So sánh DNS-Prefetch vs Preconnect

Những lỗi thường gặp và cách tránh

1. Preload quá nhiều

Lỗi: Anh em cho rằng Preload là thuốc tiên và áp dụng Preload 10-15 tài nguyên cùng lúc

Hậu quả: Vượt quá số lượng request được gọi song song, bandwidth bị tranh chấp, tài nguyên thực sự quan trọng bị chậm

Cách khắc phục: Chỉ preload 3-5 tài nguyên quan trọng nhất

2. Preconnect domain không cần thiết

Lỗi: Tương tự lầm tưởng như Preload, anh em Preconnect nhiều domain external

<link rel="preconnect" href="https://optional-analytics.com">

Hậu quả: Lãng phí tài nguyên

Cách khắc phục: Chỉ preconnect số ít domain quan trọng chắc chắn sẽ dùng

3. Prefetch tài nguyên của trang hiện tại

Lỗi: Dùng prefetch cho tài nguyên cần ngay

Cách khắc phục: Prefetch chỉ dành cho tương lai, dùng Preload cho hiện tại

Kết luận

1. Hiểu rõ waterfall của trang web hiện tại
2. Preconnect cho hiện tại
3. Preload cho tương lai
4. Preconnect và DNS-Prefetch cho domain thứ 3

Nếu anh em muốn có thêm nhiều kiến thức thú vị về tối ưu Frontend, anh em có thể đăng ký khoá học “Optimize Frontend for Beginner” của mình trên Udemy nhé. Hiện tại khoá học đang được ưu đãi 229k trong thời gian ngắn nên anh em nhanh tay đăng ký ngay nha vì số lượng có hạn.

Đây là những gì anh em sẽ nắm được trong khoá học:

Link đăng ký khoá học tại đây nhé anh em:

https://www.udemy.com/course/optimize-frontend-for-beginner/?referralCode=96B9E7A8858C7A0CFE48