Tăng tốc LCP bằng tính năng tìm nạp trước trên nhiều trang web

Giới thiệu về các công nghệ có sẵn.

Kenji Baheux
Kenji Baheux
Michael Buettner
Michael Buettner
Devin Mullins
Devin Mullins

Tại sao tốc độ tải trang lại quan trọng?

Hầu hết người dùng thường xác định rằng tải trang chậm là nguyên nhân chính gây phiền toái (54% trong một nghiên cứu về người dùng do Google thực hiện). Vì vậy, không có gì ngạc nhiên khi trang tải nhanh hơn mang lại kết quả tốt hơn cho doanh nghiệp. Trên thực tế, nếu khách truy cập cảm thấy thất vọng ngay cả trước khi tương tác với một trang web, thì rất ít khả năng họ sẽ ở lại đủ lâu để đánh giá cao giá trị của trang web đó. Trên thực tế, một nghiên cứu khác của Google trên 254 trang web thương mại điện tử, tài chính và du lịch cho thấy những trang web tải trong vòng 2 giây có tỷ lệ chuyển đổi cao hơn 15%.

Tăng tốc thời gian hiển thị nội dung lớn nhất (LCP)

Dù vậy, bạn không thể cải thiện những chỉ số mà mình không đo lường. Đối với trải nghiệm người dùng trên web, chúng tôi tin rằng Các chỉ số quan trọng về trang web tạo thành một bộ chỉ số vững chắc tập trung vào người dùng, được thiết kế để nắm bắt các khía cạnh cơ bản về trải nghiệm người dùng. Cụ thể, Thời gian hiển thị nội dung lớn nhất (LCP) đo lường hiệu suất tải của trang bằng cách báo cáo thời gian cần để hiển thị khối văn bản hoặc hình ảnh lớn nhất mà người dùng nhìn thấy. Để cung cấp trải nghiệm tốt cho người dùng, LCP phải diễn ra trong vòng 2, 5 giây kể từ khi trang bắt đầu tải lần đầu tiên (cụ thể là ngưỡng LCP tốt).

Hãy xem những yếu tố đóng góp vào LCP của một trang điển hình.

Thác nước tải trang.
Cần có một thác nước thông thường để tải trang web

Khi người dùng truy cập vào một trang, trình duyệt sẽ yêu cầu HTML từ máy chủ. Máy chủ phản hồi bằng HTML, cung cấp cho trình duyệt thêm gợi ý về nội dung tìm nạp tiếp theo, bao gồm CSS, JavaScript, phông chữ và hình ảnh. Khi những phản hồi này xuất hiện trở lại, trình duyệt cũng phải thực hiện một số hoạt động để đánh giá chúng và cuối cùng là bố trí và vẽ các thành phần trên trang. Nhưng phần lớn thời gian dành cho việc chờ các gói đó đi từ thiết bị đến máy chủ rồi quay lại thiết bị. Trên thực tế, dữ liệu của chúng tôi (Chrome dành cho Android; trung vị) cho thấy khoảng 40% độ trễ mà người dùng có thể nhìn thấy thường là do trình duyệt chờ byte đầu tiên quay lại từ máy chủ.

Sức mạnh của việc tìm nạp trước

Nếu có thể tìm nạp trước tất cả các tệp này (tức là tìm nạp trước khi người dùng truy cập trang), thì thao tác này sẽ giúp tăng tốc rất nhiều, chỉ để lại một vài công việc trước khi hiển thị trang: đánh giá, tính toán bố cục và vẽ.

Thác nước tinh giản.
Nhờ tất cả tài nguyên đã tải trước, thác nước này được sắp xếp hợp lý.

Do đã chia sẻ dữ liệu trước đó, người dùng cũng có thể tìm nạp trước tài nguyên chính mà vẫn tăng tốc độ tải trang đáng kể. Trong cùng một trang web, loại kỹ thuật này có sẵn với các dữ liệu gốc như rel=prefetch. Tuy nhiên, với tình huống trên nhiều trang web, việc này không hề đơn giản.

Thao tác trên nhiều trang web

Mặc dù tính năng tìm nạp trước đã hoạt động được một thời gian, nhưng bạn cũng cần xem xét thêm khi tìm nạp trước các trang từ một trang web trong khi người dùng đang ở trên một trang web khác.

Giả sử rằng trang web liên kết giới thiệu hướng dẫn trình duyệt tìm nạp trước một trang từ trang web khác. Rõ ràng là khi người dùng nhấp vào đường liên kết tới trang được tìm nạp trước này, họ sẽ có trải nghiệm tốt hơn với tốc độ tải trang nhanh hơn nhiều. Tuy nhiên, nếu người dùng không bao giờ nhấp vào liên kết này thì sao? Họ sẽ không mong đợi một trang web được liên kết sẽ biết rằng họ có thể đã quan tâm đến một chủ đề trong khi duyệt tìm chủ đề đó trên trang web liên kết giới thiệu. Tuy nhiên, đây vẫn là một rủi ro đáng kể vì các yêu cầu tìm nạp trước sẽ mang theo địa chỉ IP và cookie của người dùng (nếu có) như mọi yêu cầu thông thường khác.

Giải pháp

Để hỗ trợ tính năng tìm nạp trước trên nhiều trang web đảm bảo quyền riêng tư, chúng tôi đã phát triển 2 giải pháp trong 3 năm qua: Proxy tìm nạp trước riêng tưTrao đổi có chữ ký (SXG). Chúng tôi cũng đã tiến hành một thử nghiệm trên quy mô lớn để xác nhận rằng tính năng tìm nạp trước trên nhiều nguồn gốc mang lại những lợi ích đáng kể về tốc độ. Cụ thể, khi xem xét các trường hợp Google có thể tìm nạp trước HTML chính một cách an toàn cho lần điều hướng tiếp theo của người dùng, chúng tôi thấy rằng tỷ lệ tải trang có LCP "tốt" đã tăng 14 điểm phần trăm!

Các điểm chính cần cân nhắc

Mặc dù Proxy tìm nạp trước riêng tư và Trao đổi có chữ ký giải quyết cùng một trường hợp sử dụng, nhưng mỗi công nghệ lại có những ưu nhược điểm khác nhau. Vì vậy, lựa chọn tốt nhất thực sự phụ thuộc vào nhu cầu cụ thể của trang web của bạn. Để giúp bạn hiểu được các yếu tố đánh đổi có liên quan, các phần sau đây sẽ trình bày hai yếu tố chính cần cân nhắc khi bật tính năng tìm nạp trước trên nhiều trang web và lựa chọn giữa hai công nghệ có sẵn. Bạn cũng sẽ tìm thấy thêm thông tin chi tiết trong các bài viết chuyên sâu về từng công nghệ.

Khách truy cập thường xuyên

Tính năng tìm nạp trước trên nhiều trang web rất dễ bật cho những người dùng lần đầu truy cập vào trang web của bạn. Đối với khách truy cập nhiều lần, điều này phụ thuộc vào mức độ cá nhân hoá trên trang web của bạn. Lý do là các yêu cầu tìm nạp trước trên nhiều trang web không thể bao gồm cookie vì lý do liên quan đến quyền riêng tư.

  • Đối với khách truy cập lần đầu, hạn chế này không dẫn đến bất kỳ thách thức nào vì những khách truy cập này không có cookie để bắt đầu. Do đó, bạn có thể bật tính năng tìm nạp trước trên nhiều trang web cho những người dùng này mà không cần thực hiện thay đổi nào đối với trang web.
  • Nếu bạn muốn bật tính năng tìm nạp trước trên nhiều trang web cho khách truy cập thường xuyên và trang web của bạn được cá nhân hoá dựa trên cookie, thì bạn cần tải từng phần các thành phần được cá nhân hoá này sau khi người dùng điều hướng. Điều này có hiệu quả vì khi điều hướng, giới hạn về cookie không còn cần thiết nữa kể từ khi người dùng rõ ràng đã chọn truy cập vào trang web của bạn. Vì vậy, tại thời điểm điều hướng, trang web của bạn có quyền truy cập vào cookie như bình thường. Để được hướng dẫn cụ thể, hãy xem các phương pháp hay nhất cho tính năng tải từng phần.
    • Nếu hiện đang mã hoá hoạt động cá nhân hoá trực tiếp vào HTML, thì bạn vẫn có thể tiếp tục làm như vậy khi có cookie và sử dụng tính năng tải từng phần làm chiến lược dự phòng cho các trang được tìm nạp trước.
    • Nếu trang web của bạn không được cá nhân hoá dựa trên cookie hoặc nếu hoạt động cá nhân hoá đó không quan trọng, thì bạn có thể chọn phân phát cùng một nội dung cho khách truy cập nhiều lần giống như cho khách truy cập lần đầu.

Hiện tại, Proxy tìm nạp trước riêng tư chỉ được bật cho khách truy cập lần đầu (liên kết không có cookie) và vẫn đang tiếp tục nỗ lực mở rộng mức độ phù hợp cho những khách truy cập nhiều lần (liên kết có cookie). Mặt khác, cơ chế Trao đổi có chữ ký đã hỗ trợ tính năng tìm nạp trước trên nhiều trang web cho cả khách truy cập lần đầu và khách truy cập thường xuyên (theo các phương pháp nêu trên).

Phân phát dữ liệu bổ sung từ quá trình tìm nạp trước

Việc bật tính năng tìm nạp trước trên nhiều trang web có thể dẫn đến khả năng phân phát dữ liệu bổ sung. Trên thực tế, nếu một đường liên kết giới thiệu tìm nạp trước trang của bạn nhưng người dùng không nhấp vào đường liên kết đó, thì điều này sẽ đại diện cho lưu lượng truy cập bổ sung cho bạn.

  • Để giảm thiểu điều này, bạn có thể yêu cầu đường liên kết giới thiệu ít linh hoạt hơn với các yêu cầu tìm nạp trước. Tương tự như vậy, đường liên kết giới thiệu hoặc trình duyệt có thể giảm thiểu điều này bằng cách tập trung vào các tài nguyên tương đối nhẹ nhưng quan trọng (ví dụ: tài nguyên chính, tài nguyên phụ CSS hoặc JavaScript quan trọng). Về cơ bản, đây là sự đánh đổi giữa lợi ích về tốc độ và lưu lượng truy cập bổ sung.
  • Ngoài ra, một cơ chế có thể bù trừ lưu lượng truy cập này bằng cách chọn sử dụng chức năng lưu vào bộ nhớ đệm bổ sung (xem phần này về cơ chế Trao đổi có chữ ký để biết thêm chi tiết). Nhược điểm là việc lưu nội dung vào bộ nhớ đệm quá lâu có thể khiến thông tin cũ hiển thị cho người dùng. Về cơ bản, đây là sự đánh đổi giữa việc phân phát dữ liệu bổ sung và độ mới của nội dung.

Để đưa ra quyết định tốt nhất tại đây, hãy tự hỏi xem trang web của bạn đang ở đâu trên thang trượt giữa độ mới tối đa và yêu cầu bổ sung tối thiểu. Câu trả lời cho câu hỏi này cuối cùng phụ thuộc vào nhu cầu cụ thể của doanh nghiệp và người dùng của bạn.

Bắt đầu

Những công nghệ này đã được tích hợp trên Google Tìm kiếm để các trang web có thể bắt đầu cải thiện LCP ngay lập tức. Chúng tôi hy vọng rằng điều này cũng sẽ khuyến khích các người giới thiệu phổ biến khác làm theo và giúp web nhanh hơn rất nhiều!

Mặc dù cả hai công nghệ này đều giải quyết cùng một trường hợp sử dụng, nhưng chúng mang đến những ưu điểm khác nhau đối với những yếu tố chính cần cân nhắc như đã trình bày trước đó. Thậm chí, bạn có thể quyết định bắt đầu với một công nghệ rồi nâng cấp lên công nghệ khác khi nhu cầu của bạn hoặc khi nhận thức rõ lợi ích sẽ phát triển. Hãy xem các thông tin chuyên sâu sau đây để tìm hiểu công nghệ nào là phương án tốt nhất cho trường hợp cụ thể của bạn: