Tìm hiểu về tính năng tìm nạp trước có tính dự đoán và cách Measurement.js triển khai tính năng này.
Trong phiên Điều hướng web nhanh hơn với tính năng tìm nạp trước theo dự đoán tại Google I/O 2019, tôi đã bắt đầu bằng cách nói về việc tối ưu hoá các ứng dụng web bằng tính năng phân chia mã và những tác động có thể xảy ra về hiệu suất khi điều hướng trang sau này. Trong phần thứ hai của buổi trò chuyện, tôi đã thảo luận về cách cải thiện tốc độ điều hướng bằng cách sử dụng Đoán.js để thiết lập tìm nạp trước dự đoán:
Chia mã để ứng dụng web hoạt động nhanh hơn
Các ứng dụng web có tốc độ chậm và JavaScript là một trong những tài nguyên tốn kém nhất mà bạn gửi đi. Chờ một ứng dụng web chậm tải có thể gây khó chịu cho người dùng và giảm số lượt chuyển đổi.
Tải từng phần là một kỹ thuật hiệu quả để giảm các byte JavaScript mà bạn đang chuyển qua dây. Bạn có thể sử dụng một số kỹ thuật để tải từng phần JavaScript, bao gồm:
- Phân tách mã ở cấp thành phần
- Phân tách mã ở cấp tuyến đường
Với tính năng phân tách mã cấp thành phần, bạn có thể di chuyển từng thành phần vào các đoạn JavaScript riêng biệt. Trên các sự kiện cụ thể, bạn có thể tải các tập lệnh có liên quan và hiển thị các thành phần.
Tuy nhiên, với phương pháp phân tách mã cấp tuyến, bạn sẽ di chuyển toàn bộ tuyến thành các phần độc lập. Khi chuyển đổi từ tuyến này sang tuyến khác, người dùng phải tải JavaScript được liên kết xuống và tự khởi động lại trang được yêu cầu. Các thao tác này có thể dẫn đến độ trễ đáng kể, đặc biệt là trên các mạng chậm.
Tìm nạp trước JavaScript
Tính năng tìm nạp trước cho phép trình duyệt tải xuống và lưu các tài nguyên vào bộ nhớ đệm mà có thể người dùng sẽ cần sớm. Phương pháp thông thường là sử dụng <link rel="prefetch">, nhưng có hai sai lầm phổ biến:
- Việc tìm nạp trước quá nhiều tài nguyên (tìm nạp trước) tốn nhiều dữ liệu.
- Một số tài nguyên mà người dùng cần có thể không bao giờ được tìm nạp trước.
Tính năng tìm nạp trước có dự đoán giải quyết các vấn đề này bằng cách sử dụng báo cáo về mẫu điều hướng của người dùng để xác định những nội dung cần tìm nạp trước.
Tìm nạp trước dự đoán bằng Đoán.js
Guess.js là một thư viện JavaScript cung cấp chức năng tìm nạp trước có tính năng dự đoán. Measurement.js sử dụng báo cáo từ Google Analytics hoặc nhà cung cấp phân tích khác để tạo mô hình dự đoán có thể được sử dụng để tìm nạp trước một cách thông minh chỉ những gì người dùng có thể cần.
Measurement.js có tích hợp với Angular, Next.js, Nuxt.js và Gatsby. Để sử dụng mã này trong ứng dụng của bạn, hãy thêm các dòng sau vào cấu hình gói web để chỉ định Mã chế độ xem Google Analytics:
const { GuessPlugin } = require('guess-webpack');
// ...
plugins: [
// ...
new GuessPlugin({ GA: 'XXXXXX' })
]
// ...
Nếu không sử dụng Google Analytics, bạn có thể chỉ định một reportProvider và tải dữ liệu xuống từ dịch vụ mà bạn yêu thích.
Tích hợp với khung
Để tìm hiểu thêm về cách tích hợp Đo lường.js với khung yêu thích của bạn, hãy xem các tài nguyên sau:
Để xem hướng dẫn nhanh từng bước về việc tích hợp với Angular, hãy xem video này:
Measurement.js hoạt động như thế nào?
Dưới đây là cách pseudo.js triển khai tính năng tìm nạp trước có dự đoán:
- Trước tiên, Bard sẽ trích xuất dữ liệu về các mẫu di chuyển của người dùng từ nhà cung cấp dịch vụ phân tích mà bạn yêu thích.
- Sau đó, Google Analytics 4 sẽ ánh xạ các URL từ báo cáo đến các đoạn JavaScript do gói web tạo ra.
- Dựa trên dữ liệu được trích xuất, công cụ này sẽ tạo một mô hình dự đoán đơn giản về những trang mà người dùng có khả năng sẽ chuyển đến từ một trang nhất định.
- Hàm này sẽ gọi mô hình cho từng phân đoạn JavaScript, dự đoán các phân đoạn khác có thể sẽ cần đến tiếp theo.
- Thêm hướng dẫn tìm nạp trước vào từng phân đoạn.
Khi Measurement.js hoàn tất, mỗi phân đoạn sẽ chứa hướng dẫn tìm nạp trước tương tự như:
__GUESS__.p(
['a.js', 0.2],
['b.js', 0.8]
)
Mã do Đo lường.js tạo ra này yêu cầu trình duyệt xem xét tìm nạp trước phân đoạn a.js với xác suất 0.2 và phân đoạn b.js với xác suất 0.8.
Sau khi trình duyệt thực thi mã, Measurement.js sẽ kiểm tra tốc độ kết nối của người dùng. Nếu đầy đủ, Đo lường.js sẽ chèn hai thẻ <link rel="prefetch"> vào tiêu đề của trang, một thẻ cho mỗi đoạn. Nếu người dùng sử dụng mạng tốc độ cao, Đo lường.js sẽ tìm nạp trước cả hai đoạn. Nếu người dùng có kết nối mạng kém, Đo lường.js sẽ chỉ tìm nạp trước phân đoạn b.js vì nó có nhiều khả năng sẽ cần thiết.
Tìm hiểu thêm
Để tìm hiểu thêm về Measurement.js, hãy xem các tài nguyên sau: