Nhóm đã phân tích dữ liệu từ 10 triệu lượt truy cập trên các trang đích và nhận thấy có mối tương quan chặt chẽ giữa Thời gian hiển thị nội dung lớn nhất và tỷ lệ chuyển đổi.
Groupe Renault là nhà sản xuất ô tô đa quốc gia của Pháp có mặt tại hơn 130 quốc gia. Đối với một tập đoàn trong ngành ô tô như Renault, việc trang web của các thương hiệu có hiệu suất cao thúc đẩy nhiều mức độ tương tác của người dùng và số lượt chuyển đổi hơn có nghĩa là công việc kinh doanh của bạn tăng lên. Tất cả trang web thương hiệu của Google đều hướng đến việc cung cấp trải nghiệm người dùng tốt nhất trên quy mô lớn trong khi vẫn duy trì tính linh hoạt của nội dung và tính năng cho các trang web đã bản địa hoá. Trong bối cảnh này, giám sát hiệu suất là một phần quan trọng đối với nhóm trải nghiệm khách hàng. Nhóm này chịu trách nhiệm phát triển và duy trì nền tảng toàn cầu.
Đo lường tác động của Các chỉ số quan trọng về trang web đối với hoạt động kinh doanh
Đo lường trong Google Analytics
Renault làm việc cùng 55 người, đối tác dữ liệu toàn cầu của mình, đã thiết lập thư viện web-vitals. Thư viện này cho phép gửi tới Google Analytics tất cả các chỉ số Chỉ số quan trọng về trang web từ người dùng thực sao cho khớp chính xác với cách Chrome đo lường và báo cáo cho các công cụ khác của Google.
Bản phân tích sau đây trình bày một tập dữ liệu được thu thập bằng các công cụ này trong 4 tháng từ tháng 12 năm 2020 đến tháng 3 năm 2021.
LCP được tối ưu hoá tương quan chặt chẽ với các chỉ số về mức độ tương tác của người dùng và hoạt động kinh doanh
Các nhóm đã xác định được mối tương quan đặc biệt mạnh mẽ giữa Thời gian hiển thị nội dung lớn nhất (LCP) thấp với tỷ lệ thoát và tỷ lệ chuyển đổi thuận lợi, được thể hiện trong hình ảnh dưới đây.
Tập dữ liệu này thu thập hơn 10 triệu lượt truy cập tại 33 quốc gia trong 4 tháng và cho thấy mối liên hệ giữa các chỉ số LCP thấp hơn với:
- Tỷ lệ thoát thấp hơn
- Nhiều lượt chuyển đổi hơn (đã hoàn tất biểu mẫu khách hàng tiềm năng)
Điều thú vị là vì trang web chạy dưới dạng Ứng dụng một trang (SPA) nên tất cả những kết quả này chỉ được ghi nhận trên trang đích. Dữ liệu cho thấy rằng bạn nên tối ưu hoá trang web cho đến khi LCP đạt dưới 1 giây. Trang web thương hiệu của nhóm có thể không bao giờ được tối ưu hoá quá!
Tập dữ liệu này không chỉ cho thấy mối tương quan tiêu cực giữa LCP và các chỉ số kinh doanh, mà còn nêu bật sự khác biệt về hiệu suất giữa các trang đích hoạt động tốt nhất. Theo bối cảnh của trang web này, việc đặt LCP dưới 1 giây sẽ giúp tăng đáng kể số lượt chuyển đổi và giảm số trang không truy cập.
Eja Rakotoarimanana, Chuyên viên tư vấn, 55
Việc cải thiện LCP trong 1 giây có thể giúp tỷ lệ thoát giảm 14% và số lượt chuyển đổi tăng 13%.
| Cải thiện LCP 1 giây | Kết quả |
|---|---|
| LCP khoảng 1 giây | TLCĐ tăng 13% |
| LCP dưới 1,6 giây | Tỷ lệ thoát -14 PP |
| LCP trên 1,6 giây | Tỷ lệ thoát -5 PP |
Cách tiếp cận của Renault nhằm tối ưu hoá Các chỉ số quan trọng về trang web trên quy mô lớn
Kể từ đầu năm 2020, tại 5 thị trường hàng đầu của thương hiệu này ở Châu Âu, số lượng khách truy cập trải nghiệm LCP nhanh (dưới 2,5 giây) đã tăng trung bình 22 DPI đối với các miền Renault (từ 51% lên 73%).
Sau đây là cách họ tiếp cận vấn đề này.
Tối ưu hoá tập trung của SPA
Từ góc độ nền tảng, hiệu suất được ưu tiên trong nhiều năm và việc đưa Các chỉ số quan trọng về trang web vào làm một quá trình diễn ra suôn sẻ. Các nhóm phụ trách trung tâm đã thiết lập một giải pháp giám sát toàn diện (với Google Lighthouse và API Báo cáo trải nghiệm người dùng của Chrome) và thiết lập văn hoá về hiệu suất trên toàn tổ chức. Có một số chiến lược giúp tối ưu hoá Ứng dụng trang đơn, bao gồm:
- Hiển thị phía máy chủ (SSR) để đảm bảo hiển thị nội dung đầu tiên nhanh (FCP).
- Phân tách mã nhằm chỉ phân phối các phần JS và CSS cần thiết cho trang đích (để LCP và FID hoạt động hiệu quả hơn).
- CDN có mức lưu trữ tài nguyên cao vào bộ nhớ đệm (bao gồm cả Lambda@Edge để sắp xếp và xoá các tham số truy vấn không cần thiết). Điều này giúp tránh các hạn chế của SSR (TTFB chậm hơn do việc tính toán của máy chủ) và cung cấp nội dung gần với người dùng cuối hơn (để TTFB và LCP tốt hơn).
- Tối ưu hoá quá trình nén bằng brotli để giảm kích thước mã.
- HTTP2 để cho phép ghép kênh yêu cầu và phản hồi.
- Sử dụng hình ảnh thích ứng có hỗ trợ WebP cũng như thuộc tính
srcsetvàsizesđể cung cấp kích thước và định dạng hình ảnh phù hợp nhất cho người dùng. - Tải từng phần hình ảnh, video và iframe bằng cách sử dụng
IntersectionObservervà FPO (hình thu nhỏ có kích thước 1 KB). - Xoá các tập lệnh chặn và điều chỉnh quá trình chuyển đổi sang các mục tiêu trình duyệt để giảm kích thước tệp JS (bằng cách tránh các đoạn mã polyfill không cần thiết).
- Giảm kích thước của vùng chứa Trình quản lý thẻ của Google để chỉ tải tập lệnh của bên thứ ba khi cần.
- Giảm số lượng phông chữ tuỳ chỉnh, sử dụng định dạng woff/woff2 với dải ô unicode và
font-display:swapđể giảm kích thước tệp phông chữ và hiển thị văn bản sớm nhất có thể ngay cả khi chưa có phông chữ tuỳ chỉnh. - Tải trước hình ảnh chính thường là các phần tử LCP.
Nhóm vẫn đang nỗ lực cải tiến trong tương lai, chẳng hạn như:
- Đẩy máy chủ để cải thiện FCP bằng cách phân phối CSS nhanh hơn. (Ở chế độ chờ do thiếu dịch vụ hỗ trợ AWS và đề xuất ngừng sử dụng.
- Việc uống nước tăng dần để cải thiện FID (thời gian phản hồi lần tương tác đầu tiên).
- Hỗ trợ Mô-đun ES6 để mang lại trải nghiệm nhanh hơn nhờ sử dụng các bản dựng ES6 cho các trình duyệt hiện đại.
Phương pháp SPA có thể giúp tăng hiệu suất vì bạn không cần tải lại toàn bộ trang khi người dùng di chuyển giữa các trang. Dù vậy, các phương pháp đo lường Các chỉ số quan trọng về trang web hiện tại trên SPA có thể bị coi là một nhược điểm vì hệ thống không đo lường được quá trình chuyển đổi tuyến. Do đó, thời gian tải trang tương đối nhanh hơn trong một phiên (do lưu giao diện người dùng vào bộ nhớ đệm) sẽ không được tính đến. Ngoài ra, việc này cũng gây khó khăn cho việc so sánh Các chỉ số quan trọng về trang web với trang web của đối thủ cạnh tranh về Ứng dụng nhiều trang, vì bộ nhớ đệm ấm làm giảm số liệu đo lường trên mỗi trang mà người dùng duyệt xem trong một phiên hoạt động. Hãy đọc bài viết Câu hỏi thường gặp về SPA cho Các chỉ số quan trọng về trang web để biết thêm chi tiết.
Đây là những hạn chế đã biết đang được các nhóm sản phẩm Chrome đang điều tra. Chúng tôi đã gửi một bản cập nhật đối với chỉ số CLS để cải thiện hoạt động đo lường trên SPA.
Hiệu suất đòi hỏi phải theo dõi liên tục do các nhóm kỹ thuật khác nhau có thể ảnh hưởng đến hiệu suất. Mặc dù có những hạn chế về cách đo lường các chỉ số này trên SPA, nhưng Các chỉ số quan trọng về trang web vẫn cho phép chúng tôi theo dõi tác động của những hành động mà nhóm chúng tôi thực hiện. Hy vọng việc chuyển đổi tuyến đường sẽ sớm được xem xét!
Cedric Bazureau, Trưởng nhóm kỹ thuật, Renault
Nguyên tắc của địa phương thúc đẩy việc tối ưu hoá hiệu suất như một trách nhiệm chung
Hiệu suất được truyền đạt ở cả trách nhiệm toàn cầu (trung tâm) và địa phương. Các nhóm đã tổng hợp một loạt phương pháp hay nhất mà các chủ sở hữu nội dung tại địa phương cần áp dụng. Dưới đây là một vài ví dụ từ các nguyên tắc này:
- Tối ưu hoá vùng chứa Trình quản lý thẻ của Google cục bộ để cải thiện hiệu suất trang web (ví dụ: kích hoạt một số thẻ nhất định theo điều kiện).
- Giới hạn kích thước của nội dung video bằng cách nén nội dung đó bằng các công cụ nội bộ hoặc lưu trữ trên một nền tảng bên ngoài (chẳng hạn như YouTube).
- Tránh tải hình ảnh lên thông qua Trình quản lý thẻ của Google.
Việc hiểu rõ hiệu suất kỹ thuật số là yếu tố then chốt để đảm bảo hoạt động tối ưu hoá liên tục cho các trang web thương hiệu của chúng tôi. Nhóm phụ trách trải nghiệm khách hàng của chúng tôi hướng đến việc cung cấp một nền tảng toàn cầu có tác động tích cực đến kết quả kinh doanh của các nhóm tại địa phương, đồng thời trao cho các nhóm này các nguyên tắc và phương pháp hay nhất để duy trì hiệu suất ở mức cao.
Alexandre Perruche, Trưởng bộ phận hiệu suất của Renault
Tóm lại, hiệu suất trang web luôn là ưu tiên hàng đầu tại Renault và nền tảng trang web của Renault liên tục được tối ưu hoá. Việc đo lường Các chỉ số quan trọng về trang web cùng với các chỉ số kinh doanh đã cho phép họ quảng bá chủ đề này như một trách nhiệm chung trên toàn cầu. Đồng thời, các nguyên tắc của địa phương cũng giúp trang bị cho các nhóm khả năng tham gia vào hoạt động có lợi này.