Việc tìm ra mối tương quan giữa hiệu suất trang web và các chỉ số kinh doanh chính là chìa khoá để thúc đẩy thành công của những nỗ lực tối ưu hoá của họ.
Swappie là một công ty khởi nghiệp thành công chuyên bán điện thoại đã được tân trang. Trong vài năm, họ ưu tiên việc thêm các tính năng mới hơn là hiệu suất trang web. Tuy nhiên, khi họ nhận thấy rằng kết quả kinh doanh trên trang web dành cho thiết bị di động bị chậm hơn so với phiên bản dành cho máy tính, thì một sự thay đổi đã xảy ra. Họ tập trung vào việc tối ưu hoá hiệu suất và nhanh chóng nhận thấy doanh thu trên thiết bị di động tăng vọt.
42%
Mức tăng doanh thu từ khách truy cập trên thiết bị di động
10pp*
*Mức tăng tỷ lệ phần trăm mCvR trên Rel
Nêu bật cơ hội
Tỷ lệ chuyển đổi tương đối trên thiết bị di động (Rel mCvR) được tính bằng cách chia Tỷ lệ chuyển đổi trên thiết bị di động cho Tỷ lệ chuyển đổi trên máy tính. Có nhiều cơ hội để theo dõi các chỉ số tốc độ, nhưng việc kết nối chúng với các chỉ số kinh doanh có thể khá khó khăn. Vì cùng một chiến dịch và mức độ thời vụ tiếp cận được trên cả thiết bị di động và máy tính, nên chỉ số Rel mCvR sẽ loại bỏ ảnh hưởng của các thông số bên ngoài này và chỉ cho biết liệu trang web dành cho thiết bị di động có đang cải thiện hay không.
Mức trung bình của 10 trang web thương mại điện tử lớn nhất tại Hoa Kỳ là Rel mCvR là 50%, trong khi Swappie là 24%. Điều này chỉ ra rằng trang web dành cho thiết bị di động có những thách thức và công ty đang bỏ lỡ doanh thu, dẫn đến việc khởi động dự án cải thiện hiệu suất.
Đo lường tác động của các biện pháp cải thiện hiệu suất
Swappie đã sử dụng Google Analytics để thiết lập tính năng theo dõi hằng ngày về Rel mCvR và Thời gian tải trang trung bình trên thiết bị di động thông qua bảng tính mẫu này. (Đọc hướng dẫn về cách sử dụng bảng tính.) Họ cũng bắt đầu theo dõi Các chỉ số quan trọng về trang web thông qua Google Analytics và BigQuery. Với việc theo dõi sẵn sàng, các nhà phát triển bắt đầu nỗ lực nâng cao hiệu suất của trang web.
Chỉ sau 3 tháng làm việc, {2/} đã cho thấy mức tác động rất rõ ràng – tỷ lệ mCvR của Rel đã tăng từ 24% lên 34% và doanh thu trên thiết bị di động đã tăng 42%!
23%
Thời gian tải trang trung bình thấp hơn
55%
LCP thấp hơn
91%
CLS thấp hơn
90%
FID dưới
Tối ưu hoá
Tối ưu hoá cho LCP và CLS
Nhóm phát triển của Swappie nhận thấy có rất nhiều cơ hội để cải thiện những việc nhỏ đã bị bỏ qua trong một thời gian dài. Việc nghiên cứu trang web trên các khung nhìn khác nhau và bằng nhiều ngôn ngữ, chúng tôi sẽ nêu bật được những vấn đề về LCP và CLS (Những vấn đề dễ giải quyết và có tác động lớn đến hiệu suất tổng thể). Ví dụ: việc hiển thị phần tử LCP trên máy chủ thay vì ứng dụng khi có thể đã làm giảm LCP.
Rất khó để phát hiện thay đổi về bố cục, vì các thay đổi này có thể thay đổi nhiều dựa trên khung nhìn và kết nối. Sau khi thu thập được Các chỉ số quan trọng về trang web từ người dùng đến số liệu phân tích, họ biết rằng mình đang đi đúng hướng vì CLS đã giảm.
Hình ảnh
Hình ảnh được tối ưu hoá bằng tính năng tải trước, tải từng phần và định kích thước phù hợp. Các trình xử lý này tải trước các hình ảnh chính (ví dụ: LCP) trong khi chỉ tải hình ảnh bên ngoài khung nhìn khi cần.
Phông chữ
Phông chữ được tối ưu hoá cho Swappie do chuyển đổi giữa các nhà cung cấp. Điều này đã tạo ra một tác động lớn vì họ cần một cách tối ưu để xử lý kiểu chữ theo yêu cầu của nhiều ngôn ngữ.
Tập lệnh của bên thứ ba
Swappie đã nỗ lực rất nhiều để xem xét từng tập lệnh và tiện ích của bên thứ ba, nơi các tập lệnh và tiện ích đó được sử dụng cũng như các chức năng mà tập lệnh và tiện ích đó cung cấp. Sau khi thảo luận với tất cả các bên liên quan, họ đã lên kế hoạch giảm mức tác động của tập lệnh đến trang web trong khi vẫn giữ nguyên các chức năng. Họ xoá những phần không cần thiết và tối ưu hoá phần còn lại, giảm đáng kể lượng JavaScript bên thứ ba trên trang web.
Xoá đoạn mã không dùng đến và tối ưu hoá tính năng nhóm
Việc tối ưu hoá tính năng nhập và xoá những JS và CSS không dùng đến đã góp phần cải thiện nhỏ hiệu suất trang web của Swappie. Tuy nhiên, những điểm cải tiến nhỏ đó sẽ tăng lên theo thời gian. Họ cũng đã tối ưu hoá cách thiết lập tính năng nhóm.
Xây dựng văn hoá biểu diễn tại Swappie
Kết quả mà Swappie đạt được không chỉ bắt nguồn từ những thay đổi về mã, mà còn qua những thay đổi trong tổ chức và các mức độ ưu tiên trong tổ chức.
Trưởng nhóm kỹ thuật, Teemu Huovinen, giải thích:
Bạn cần liên kết tốc độ trang web với các chỉ số kinh doanh để thực sự làm nổi bật tầm quan trọng của dữ liệu này. Tất cả đều cần được ưu tiên khi bạn thiếu thời gian và tài nguyên. Điều này luôn đúng. Ưu tiên giá trị khách hàng là điều nên làm, nhưng nếu bạn cho rằng tốc độ trang web chỉ giúp cải thiện "cảm giác" của trang web, thì bạn có thể dễ dàng tập trung vào các tính năng mới và cải thiện số lượt chuyển đổi trực tiếp. Việc liên kết tốc độ trang web với các chỉ số kinh doanh không phải lúc nào cũng dễ dàng và đó chính là điểm mà việc tính toán bằng Rel mCvR đã giúp chúng tôi rất nhiều.
Teemu Huovinen
Sau khi đội ngũ các nhà phát triển có cơ hội tập trung hoàn toàn vào tốc độ trang web trong một quý, họ càng có động lực để tìm hiểu sâu hơn.
Tác động của chúng tôi khi kết hợp với sự phát triển của đội ngũ đã tạo nên ấn tượng hơn nữa. 4 trong số 7 nhà phát triển của chúng tôi đã bắt đầu làm việc trong tháng khi chúng tôi bắt đầu tìm hiểu về hiệu suất. Tất cả đều là nhờ đội ngũ của chúng tôi, thật tuyệt vời khi chúng tôi có thể tập hợp lại về chủ đề này và tạo nên tác động to lớn.
Teemu Huovinen
Teemu cũng chỉ ra tầm quan trọng của việc dành thời gian ngay từ đầu để lập kế hoạch dựa trên dữ liệu, tìm hiểu cách sử dụng thẻ Hiệu suất công cụ cho nhà phát triển và thiết lập số liệu phân tích người dùng trước khi thực hiện bất kỳ cải tiến nào. Biểu đồ (đặc biệt là biểu đồ đi theo đúng hướng) là một nguồn phản hồi và xác thực tuyệt vời cho công việc của bạn! Việc xem xét Các chỉ số quan trọng về trang web trong trường cùng với điểm số của Lighthouse (dựa trên phòng thí nghiệm) đã giúp họ tập trung vào việc tối ưu hoá những yếu tố phù hợp sẽ ảnh hưởng đến nhiều người nhất.