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