Tăng tốc Nội dung lớn nhất hiển thị (LCP) bằng tính năng tìm nạp trước trên nhiều trang web.
Kể từ Chrome 103 dành cho Android, Chrome sẽ dần triển khai tính năng proxy tìm nạp trước riêng tư để tăng tốc độ các thao tác kết thúc từ Google Tìm kiếm và các trang web tham gia khác lên 30% ở mức trung bình. Tính năng proxy tìm nạp trước riêng tư này cho phép tìm nạp trước nội dung nhiều nguồn gốc mà không để lộ thông tin người dùng cho trang web đích cho đến khi người dùng điều hướng.
Hãy đọc tiếp để tìm hiểu về cách hoạt động của tính năng này, cách tính năng này có thể giúp cải thiện đáng kể trang web của bạn Nội dung lớn nhất hiển thị (LCP) hoặc cách các trang web giới thiệu có thể giúp người dùng đạt được mục tiêu của họ bằng cách tăng tốc độ điều hướng trên nhiều trang web.
Cách hoạt động của Proxy tìm nạp trước riêng tư
Kênh liên lạc bảo mật
Tính năng này sử dụng proxy CONNECT để thiết lập kênh giao tiếp bảo mật giữa Chrome và máy chủ lưu trữ nội dung cần tìm nạp trước. Kênh giao tiếp bảo mật này ngăn proxy kiểm tra mọi quá trình chuyển dữ liệu. Đáng chú ý là mặc dù Proxy tìm nạp trước riêng tư nhất thiết phải nhìn thấy tên máy chủ để thiết lập một kênh liên lạc an toàn nhưng proxy đó không thấy URL đầy đủ cũng như bản thân các tài nguyên.
CONNECT giúp ngăn chặn việc rò rỉ thông tin người dùng.Ngoài ra, vì kênh giao tiếp an toàn được mã hoá hai đầu nên các bên trung gian không thể theo dõi tên máy chủ cũng như nội dung của các trang web được tìm nạp trước. Cuối cùng, proxy vốn đã ngăn máy chủ đích xem địa chỉ IP của người dùng.
Ngăn việc nhận dạng người dùng
Ngoài các khía cạnh mạng được nêu chi tiết trước đó, chúng ta cũng cần ngăn máy chủ nhận dạng người dùng tại thời điểm tìm nạp trước, thông qua thông tin đã lưu trữ trước đó trên thiết bị của người dùng. Để làm được điều đó, Chrome hiện đang hạn chế việc sử dụng Proxy tìm nạp trước riêng tư cho các trang web mà người dùng không có cookie hoặc trạng thái cục bộ khác. Dưới đây là các hạn chế đối với các yêu cầu tìm nạp trước được thực hiện qua Proxy tìm nạp trước riêng tư:
- Cookie: Các yêu cầu tìm nạp trước không được phép mang cookie.
- Nếu có cookie cho tài nguyên, Chrome sẽ tìm nạp thông tin xác thực nhưng sẽ không sử dụng phản hồi (xem phần Lưu vào bộ nhớ đệm sau).
- Mặc dù phản hồi cho yêu cầu tìm nạp trước có thể bao gồm cookie, nhưng những cookie này sẽ chỉ được lưu nếu người dùng chuyển đến trang được tìm nạp trước.
- Tạo vân tay số: Các nền tảng khác có thể dùng để tạo vân tay số cũng được điều chỉnh. Ví dụ: tiêu đề
User-Agentdo proxy tìm nạp trước gửi chỉ chứa một số thông tin hạn chế.
Trong tương lai, chúng tôi hy vọng sẽ mở rộng Proxy tìm nạp trước riêng tư để liên kết với cookie hoặc trạng thái cục bộ trong khi vẫn duy trì các đặc điểm bảo mật tương tự. Hãy xem phần Các bước tiếp theo để biết thêm thông tin chi tiết.
Lưu vào bộ nhớ đệm
Chrome sẽ tìm nạp trước các tài nguyên ngay cả khi chúng đã có trong bộ nhớ đệm, nhưng chúng sẽ không chứa bất kỳ tiêu đề có điều kiện nào như ETag hoặc If-Modified-Since (những tài nguyên này chứa các giá trị do máy chủ đặt có thể dùng để theo dõi ngay cả khi không có cookie). Quá trình tìm nạp trước này được thực hiện nhằm ngăn chặn rò rỉ trạng thái bộ nhớ đệm của ứng dụng tới trang web được tìm nạp trước. Ngoài ra, Chrome sẽ chỉ chuyển tài nguyên được tìm nạp trước vào bộ nhớ đệm nếu người dùng quyết định truy cập vào trang web được tìm nạp trước.
Bắt đầu với proxy tìm nạp trước riêng tư
Dành cho chủ sở hữu trang web
Chủ sở hữu trang web không cần phải làm gì để bắt đầu hưởng lợi từ proxy tìm nạp trước riêng tư trên các đường liên kết mà người dùng không có cookie hoặc trạng thái cục bộ. Từ các thử nghiệm của chúng tôi, đây là một cơ hội lớn cho hầu hết các trang web. Ngoài ra, bạn nên tạo ấn tượng với khách truy cập lần đầu hoặc khách truy cập không thường xuyên với trải nghiệm tải siêu nhanh. Từ các thử nghiệm trước đây, chúng tôi nhận thấy các thành phần hiển thị nội dung lớn nhất nhanh hơn từ 20% đến 30% trên các thành phần điều hướng được tìm nạp trước.
Trong tương lai, chúng tôi hy vọng có thể mở rộng phạm vi cung cấp tính năng này để liên kết với cookie hoặc trạng thái cục bộ trong khi vẫn duy trì các đặc điểm bảo mật của tính năng. Thách thức đối với cookie là cookie có thể bị dùng để thay đổi trải nghiệm người dùng theo những cách khó dự đoán. Do đó, chủ sở hữu trang web rất có thể sẽ phải chọn tham gia hoặc điều chỉnh trang web của họ để hưởng lợi từ Proxy tìm nạp trước riêng tư cho các đường liên kết có cookie.
Cụ thể, mặc dù các yêu cầu tìm nạp trước vẫn chưa được xác thực, nhưng trang web sẽ có được quyền truy cập vào cookie và các trạng thái cục bộ khác khi người dùng chuyển đến trang web. Nhà phát triển có thể tận dụng lợi thế này để bổ sung hoạt động cá nhân hoá và các thay đổi dựa trên cookie hoặc trạng thái trên thiết bị. Hoặc có lẽ các nhà phát triển cũng có thể muốn khai báo một số tài nguyên nhất định là hoàn toàn phù hợp để tìm nạp trước và sử dụng nguyên trạng mà không cần cookie (tức là các tài nguyên không phụ thuộc vào cookie). Vui lòng xem phần Nội dung tiếp theo để tìm hiểu thêm và chuẩn bị cho kế hoạch của chúng tôi.
Nội dung hoặc dịch vụ phụ thuộc vào vị trí địa lý
Nếu trang web của bạn hoạt động theo cách khác nhau (ví dụ: nội dung khác nhau hoặc quyền truy cập có chọn lọc) trên các thị trường dựa trên địa chỉ IP của người dùng, thì có thể bạn sẽ thắc mắc về cách xử lý các yêu cầu tìm nạp trước của Proxy tìm nạp trước riêng tư. Điều quan trọng cần biết là Proxy tìm nạp trước riêng tư được một số máy chủ đặt trên toàn cầu hỗ trợ và IP của proxy sẽ được định vị địa lý đến quốc gia mà người dùng đã bắt đầu quá trình tìm nạp trước.
Vì vậy, do đó, sau đây là những gì chúng tôi đề xuất:
- Xác định các yêu cầu tìm nạp trước của Proxy tìm nạp trước riêng tư dựa trên sự hiện diện của tiêu đề HTTP
Sec-Purpose: Prefetch; anonymous-client-ip. - Tra cứu vị trí địa lý của Proxy tìm nạp trước riêng tư đã đưa ra yêu cầu thông qua địa chỉ IP của Proxy tìm nạp trước đó. Hãy xem tài nguyên này để biết danh sách mới nhất về các khu vực địa lý được ra mắt và địa chỉ IP tương ứng.
- Phân phát tài nguyên phù hợp với thị trường gắn liền với vị trí địa lý cụ thể này.
Vật dụng hỗ trợ điều khiển giao thông
Từ các thử nghiệm trước đây, chúng tôi biết rằng tính năng này thường tạo ra không đến 2% yêu cầu bổ sung cho các tài nguyên chính (ví dụ: tài liệu HTML). Điều đó có nghĩa là nếu bạn là người thận trọng, bạn có thể sử dụng trường phân số của lời khuyên về lưu lượng truy cập để kiểm soát lưu lượng truy cập mà Proxy tìm nạp trước riêng tư sẽ cho phép đi qua. Bạn có thể bắt đầu với một phân số nhỏ, chẳng hạn như 0,3 (tức là 30%), rồi tăng dần lên 1 (tức là 100%) bằng cách thêm JSON sau đây vào tệp /.well-known/traffic-advice. Tệp này cần được phân phát bằng loại MIME application/trafficadvice+json:
[{
"user_agent": "prefetch-proxy",
"fraction": 0.3
}]
Trường fraction là số thực có độ chính xác đơn từ 0.0 (không tìm nạp trước) đến 1.0 (100% các yêu cầu tìm nạp trước đều được chấp nhận).
Bạn cũng có thể tắt hoàn toàn tính năng này bằng cấu hình sau:
[{
"user_agent": "prefetch-proxy",
"disallow": true
}]
Tệp /.well-known/traffic-advice được proxy tìm nạp, không phải từ máy khách và được lưu vào bộ nhớ đệm tại proxy theo ngữ nghĩa của bộ nhớ đệm HTTP thông thường. Để tăng tính linh hoạt, chẳng hạn như khi lưu lượng truy cập quá cao đột ngột, bạn nên tạm thời từ chối các yêu cầu tìm nạp trước (Sec-Purpose: prefetch;anonymous-client-ip) bằng mã trạng thái 503 và bằng cách đặt tiêu đề Cache-Control: no-store trên phản hồi. Bạn cũng có thể thêm tiêu đề Retry-After để cho Chrome biết phải đợi bao lâu trước khi thử lại yêu cầu tìm nạp trước.
Đối với chủ sở hữu trang web liên kết giới thiệu
Nếu bạn điều hành một trang web có nhiều liên kết đến các trang web khác, bạn có thể muốn sử dụng tính năng Proxy tìm nạp trước riêng tư để tăng tốc những điều hướng trên nhiều nguồn gốc. Bạn sẽ cần phải thêm quy tắc suy đoán vào các trang của mình để Chrome biết bạn nên tìm nạp trước trang nào qua Proxy tìm nạp trước riêng tư. Sau đây là một ví dụ đơn giản:
<script type="speculationrules">
{
"prefetch": [
"source": "list",
"urls": ["https://example.com/index.html"],
"requires": ["anonymous-client-ip-when-cross-origin"]
]
}
</script>
Tiếp theo là gì?
Tính năng này chỉ là bước đầu tiên. Chúng tôi hy vọng có thể mở rộng và cải thiện tính năng này dựa trên mối quan tâm và ý kiến phản hồi của cộng đồng. Ví dụ: chúng tôi rất mong nhận được ý kiến phản hồi về cách mở rộng các đường liên kết có cookie và trạng thái cục bộ theo cách giảm thiểu phiền hà cho nhà phát triển hoặc về cách làm cho tính năng này hữu ích hơn cho các trang web giới thiệu.