Link to original video by Web Dev Simplified

This New Speculation API Will Make Your Site 10x Faster

Tóm tắt ngắn:

• Video giới thiệu về Speculation Rules API, một API mới giúp tăng tốc độ tải trang web lên đáng kể bằng cách tối ưu hóa quá trình pre-fetching và pre-rendering.
• Các điểm chính bao gồm: pre-fetching (chỉ tải HTML) và pre-rendering (tải đầy đủ HTML, CSS, JS, hình ảnh), khả năng tùy chỉnh mức độ "háo hức" (eagerness) của quá trình tải trước (immediate, eager, moderate, conservative), và cách sử dụng URL pattern API để định nghĩa các quy tắc phức tạp hơn. Video cũng đề cập đến việc xử lý các header HTTP để tránh thực thi mã không mong muốn trong quá trình pre-rendering.
• Ứng dụng chính là tăng tốc độ chuyển đổi giữa các trang web, tạo trải nghiệm người dùng mượt mà hơn. Tuy nhiên, cần lưu ý đến việc quản lý tải trên server để tránh chi phí quá cao.
• Video hướng dẫn chi tiết cách triển khai API thông qua ví dụ thực tế, bao gồm cả việc xử lý JavaScript và các sự kiện liên quan đến pre-rendering.

Tóm tắt chi tiết:

Video được chia thành các phần chính sau:

Phần 1: Giới thiệu và vấn đề:

• Video bắt đầu bằng việc nêu vấn đề về tốc độ tải trang web và khó khăn trong việc triển khai pre-fetching và pre-rendering.
• Giới thiệu Speculation Rules API như một giải pháp đơn giản hóa quá trình này.
• Một dự án mẫu với 3 trang đơn giản (homepage, store, about) được sử dụng để minh họa vấn đề tốc độ tải khi tắt bộ nhớ cache.

Phần 2: Giới thiệu Speculation Rules API:

• Giải thích khái niệm pre-fetching và pre-rendering. Pre-fetching chỉ tải HTML, trong khi pre-rendering tải đầy đủ tất cả tài nguyên.
• Giới thiệu tài liệu MDN về API, nhấn mạnh tính mới và khả năng tương thích hạn chế (chủ yếu là trình duyệt Chromium).
• Hai cách định nghĩa quy tắc: liệt kê URL hoặc sử dụng cú pháp where với URL pattern API (glob, regex, CSS selectors, điều kiện logic).

Phần 3: Triển khai pre-fetching:

• Minh họa cách thêm script tag với type="speculation-rules" và JSON object chứa danh sách URL cần pre-fetch.
• Quan sát kết quả trong tab Application của DevTools, xem trạng thái tải trước của các trang (ready).
• Nhấn mạnh rằng pre-fetching chỉ tải HTML, các tài nguyên khác vẫn cần tải sau đó.

Phần 4: Triển khai pre-rendering:

• Thay đổi từ prefetch thành prerender trong JSON object để thực hiện pre-rendering.
• Thực hiện so sánh giữa pre-fetching và pre-rendering về tốc độ tải trang. Pre-rendering làm cho việc chuyển đổi giữa các trang trở nên tức thời.
• Lưu ý rằng JavaScript được thực thi trong quá trình pre-rendering, có thể gây ra vấn đề với các tác vụ như analytics.

Phần 5: Quản lý Eagerness và Tối ưu hóa:

• Giải thích các mức độ "háo hức" (eagerness): immediate, eager, moderate, conservative. Mức độ càng cao, càng tải nhiều trang trước, nhưng cũng tốn nhiều tài nguyên hơn.
• Thay đổi mức độ eagerness thành moderate để hạn chế số lượng trang được tải trước.
• Quan sát sự thay đổi trong tab Application của DevTools, thấy rằng chỉ có tối đa 2 trang được tải trước cùng lúc với moderate.

Phần 6: Xử lý HTTP Header và JavaScript:

• Nhấn mạnh tầm quan trọng của việc kiểm tra HTTP header document.prerender để tránh thực thi mã không mong muốn trong quá trình pre-rendering.
• Ví dụ về việc xử lý logout button và analytics.
• Sử dụng document.prerender và sự kiện prerenderingchange để điều khiển việc thực thi JavaScript chỉ khi trang được hiển thị cho người dùng.

Phần 7: Sử dụng Where Clause và URL Pattern API:

• Giới thiệu cú pháp where và URL Pattern API để tạo các quy tắc pre-fetching/pre-rendering phức tạp hơn, dựa trên CSS selectors, regular expressions, và các điều kiện logic.
• Cung cấp ví dụ về việc sử dụng where để loại trừ một số URL khỏi quá trình pre-rendering.

Kết luận:

Video kết thúc bằng lời khuyên nên sử dụng mức độ moderate hoặc conservative cho hầu hết các trường hợp để tối ưu hóa việc sử dụng tài nguyên. Tác giả cũng nhấn mạnh tầm quan trọng của việc kiểm soát việc thực thi JavaScript trong quá trình pre-rendering để tránh các vấn đề không mong muốn.