Ngày phát hành: 22 tháng 1 năm 2025
QuintoAndar đã cải thiện đáng kể hiệu suất web bằng cách giảm 80% Lượt tương tác đến nội dung hiển thị tiếp theo (INP), giúp tăng số lượt chuyển đổi thêm 36% so với năm trước. Nhận thấy tầm quan trọng của các trang web nhanh và thích ứng đối với mức độ tương tác của người dùng, chúng tôi đã triển khai "Mã vàng" để ưu tiên hiệu suất trên tất cả các nhóm.
Bằng cách sử dụng các công cụ như Real User Monitoring (RUM) (Theo dõi người dùng thực) và các kỹ thuật như async/await để tối ưu hoá tác vụ dài và chuyển đổi React, QuintoAndar đã thành công trong việc giảm thời gian tương tác và cải thiện trải nghiệm người dùng. Những thay đổi này (bao gồm cả việc xoá các pixel của bên thứ ba và tối ưu hoá kết xuất) đã giúp các chỉ số hiệu suất cải thiện đáng kể, từ 42% lên 78% số trang hiện đáp ứng ngưỡng "tốt" của INP là 200 mili giây trở xuống và chỉ 6,9% số trang mang lại trải nghiệm kém so với 32% khi chúng tôi bắt đầu.
Vấn đề
QuintoAndar là nền tảng nhà ở lớn nhất ở Brazil, với các trang thông tin cũng hoạt động ở một số quốc gia Mỹ Latinh. Tìm kiếm là kênh trực tuyến lớn nhất trong ngành bất động sản, điều này có nghĩa là việc thu nạp lưu lượng truy cập tự nhiên là rất quan trọng đối với hoạt động kinh doanh của ngành này. Ngoài ra, việc cung cấp trải nghiệm người dùng tuyệt vời là yếu tố quan trọng để giữ chân người dùng, giúp họ tìm được ngôi nhà mơ ước.
Vào đầu năm 2024, QuintoAndar nhận ra rằng mặc dù có thể có nền tảng tốt nhất trên thị trường, nhưng họ có thể mang lại trải nghiệm tốt hơn cho người dùng, nhờ đó tăng tỷ lệ chuyển đổi. Điều này đã trở nên rõ ràng khi chúng tôi ra mắt Lượt tương tác đến nội dung hiển thị tiếp theo (INP) làm một Chỉ số quan trọng chính của trang web. Trên thực tế, QuintoAndar có INP tệ nhất so với các đối thủ cạnh tranh.
Nhận thấy tác động tiêu cực của INP cao đối với trải nghiệm người dùng, nhóm SEO và Hiệu suất web của QuintoAndar đã quyết định hành động. Với một kế hoạch hành động được xác định rõ ràng, họ bắt đầu thực hiện một loạt các biện pháp cải tiến về kỹ thuật và nội dung, không chỉ nhằm giảm INP mà còn để tăng mức độ tương tác của người dùng và tỷ lệ nhấp.
Đây là câu chuyện về cách QuintoAndar giảm được 80%INP, nhờ đó tăng đáng kể số lượt chuyển đổi và cải thiện trải nghiệm người dùng. Trong nghiên cứu điển hình này, chúng ta sẽ tìm hiểu các chiến lược đã triển khai, những thách thức gặp phải và kết quả đạt được.
Mã vàng: Ưu tiên hiệu suất web
Nhận thấy hiệu suất web không chỉ quan trọng đối với trải nghiệm người dùng mà còn quan trọng đối với sự thành công tổng thể của doanh nghiệp, đồng thời biết rằng một trang web nhanh và thích ứng sẽ giúp tăng mức độ tương tác và giữ chân người dùng tốt hơn, QuintoAndar hiểu rằng để đạt được những kết quả này, họ cần phải nỗ lực liên tục và phối hợp trên toàn tổ chức. Do đó, QuintoAndar đã đưa ra "Mã vàng".
Ý tưởng về "Mã vàng" bắt nguồn từ Google để đáp ứng nhu cầu cải thiện tốc độ, cấp cho một người lãnh đạo được chỉ định quyền tuyển dụng bất kỳ ai trong công ty để hỗ trợ, bất kể dự án hiện tại của họ là gì.
Tại QuintoAndar, "Mã vàng" đóng vai trò là một hệ thống cảnh báo nội bộ được thiết kế để ưu tiên cải thiện hiệu suất web trong tổ chức. Khi "Mã vàng" được khai báo, các nhóm trong công ty đã phối hợp hành động ngay lập tức để giải quyết các vấn đề liên quan đến hiệu suất.
Cách QuintoAndar xác định các cơ hội chính và áp dụng các biện pháp tối ưu hoá
Người dùng có thể nhận thấy độ trễ trên 200 mili giây và mọi độ trễ đáng kể ngoài mức đó sẽ làm giảm trải nghiệm người dùng. Đây là lý do chỉ số INP rất quan trọng: Chỉ số này đánh giá khả năng thích ứng tổng thể của một trang đối với hoạt động tương tác của người dùng bằng cách quan sát độ trễ của tất cả lượt tương tác nhấp, nhấn cũng như tương tác bằng bàn phím xảy ra trong suốt vòng đời của trang.
Tuy nhiên, để cải thiện chỉ số này, bạn cần tìm hiểu kỹ thông tin chi tiết. Đối với QuintoAndar, bước đầu tiên là xác định những giai đoạn và thành phần nào trong trải nghiệm người dùng gây ra tình trạng tương tác chậm. Bạn có thể thực hiện việc này bằng các kỹ thuật Giám sát người dùng thực (RUM). Các kỹ thuật này cho phép theo dõi chi tiết các lượt tương tác chậm. Điều này bao gồm việc chia nhỏ INP thành các phần phụ như độ trễ đầu vào, thời gian xử lý và độ trễ hiển thị, cũng như phân tích Khung ảnh động dài (LoAF).
Thông qua quy trình này, bạn có thể xác định được, ví dụ: một số thành phần nhất định trong trải nghiệm tìm kiếm cơ sở lưu trú đang gây ra thời gian tương tác là 4 giây ở phân vị thứ 75 (ảnh hưởng đến 25% người dùng). Bằng cách tối ưu hoá các tác vụ dài, chúng tôi đã đạt được những cải thiện đáng kể trong nhiều lượt tương tác chậm ảnh hưởng đến INP. Việc này được thực hiện bằng cách sử dụng async/await để tạo điểm lợi tức trong mã JavaScript của QuintoAndar:
function yieldToMain () {
return new Promise(resolve => {
setTimeout(resolve, 0);
});
}
Bằng cách này, phản hồi hình ảnh hữu ích cho người dùng có thể xuất hiện nhanh hơn. Trong trường hợp của QuintoAndar, một vòng quay đã được hiển thị, luồng chính được chuyển cho các tác vụ khác có thể có mức độ ưu tiên cao hơn, sau đó phần công việc còn lại cần thực hiện ban đầu có thể tiếp tục sau khi chuyển:
async function handleFilterClick () {
showLoadingSpinner();
await yieldToMain(); // Yield point
await loadFilterData();
showModal();
}
Một kỹ thuật khác được sử dụng rộng rãi (và rất cần thiết cho những ứng dụng được xây dựng bằng React) là sử dụng hiệu ứng chuyển đổi. Vì React hiện hỗ trợ các hiệu ứng chuyển đổi, nên QuintoAndar có thể sử dụng lệnh gọi useTransition để cập nhật trạng thái ứng dụng mà không chặn giao diện người dùng.
import React, { useState, useTransition } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [value, setValue] = useState('');
const onInputChange = event => {
setValue(event.target.value) // high-priority
startTransition(() => {
// Time-consuming task—for example, filter and update the list...
});
}
return (
<div className="App">
<input
value={value}
onChange={onInputChange}
placeholder='Start typing...'
/>
</div>
);
}
export default App;
Cùng với các kỹ thuật được đề cập, QuintoAndar đã triển khai các biện pháp cải tiến khác như sử dụng tính năng ghi nhớ, giảm độ trễ, trình điều khiển huỷ, Tạm ngưng, giúp cải thiện INP.
Ví dụ: trong ví dụ về mã trước, bạn có thể áp dụng tính năng chống hiện tượng nhấp chuột nhiều lần. Đây là một kỹ thuật trì hoãn việc thực thi một hàm cho đến khi hết một khoảng thời gian không hoạt động nhất định. Điều này giúp ngăn các bản cập nhật không cần thiết khi người dùng nhập nhanh.
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, 300); // Adjust debounce delay as needed
return () => clearTimeout(handler);
}, [value]);
Ngoài ra, việc sử dụng Tổng thời gian chặn (TBT) làm proxy cho INP đã cho phép QuintoAndar ước tính tác động của những thay đổi lớn về cấu trúc, chẳng hạn như:
- Xoá pixel của bên thứ ba khỏi ứng dụng.
- Loại bỏ CSS-in-JS.
- Tối ưu hoá kết xuất.
Những sáng kiến như vậy rất quan trọng vì chúng trực tiếp giải quyết độ trễ đầu vào, tức là khoảng thời gian giữa thời điểm người dùng bắt đầu tương tác và thời điểm trình xử lý sự kiện đã đăng ký cho tương tác đó bắt đầu chạy. Độ trễ đầu vào thường tăng lên khi các tác vụ khác đang chạy khi người dùng bắt đầu tương tác với trang. Đối với QuintoAndar, độ trễ đầu vào là một trong những yếu tố chính gây ra INP, do số lượng lớn tác vụ chạy trên luồng chính trong quá trình tải trang ban đầu.
Quản lý hiệu suất web để ngăn chặn sự hồi quy
Việc ưu tiên và giải quyết các vấn đề về hiệu suất là chưa đủ nếu không thể ngăn chặn được sự hồi quy. Trong quá khứ, khi gặp phải tình trạng hồi quy, QuintoAndar đã nhận ra tầm quan trọng của việc tạo ra một cơ chế quản trị mạnh mẽ để ngăn chặn việc các nỗ lực cải thiện hiệu suất bị hồi quy.
Bước đầu tiên là thiết lập cơ chế cảnh báo cho từng chỉ số, được phân đoạn theo loại ứng dụng hoặc trải nghiệm hoặc cả hai. Thông qua dữ liệu chỉ số được thu thập từ người dùng thực, QuintoAndar có thể theo dõi hiệu suất và gửi dữ liệu này đến cơ sở dữ liệu chuỗi thời gian, nơi có thể sử dụng các công cụ để tạo trang tổng quan và chuông báo theo phân đoạn.
Ngoài chuông báo cố định, QuintoAndar cũng triển khai chuông báo có ngưỡng biến để phát hiện kết quả bất thường nhằm thông báo cho nhóm phát triển khi các điều kiện không thể kiểm soát được ngay cả trước khi đạt đến ngưỡng cố định. QuintoAndar cũng thành lập một ủy ban hai tuần một lần để điều chỉnh ngưỡng cho các chuông báo này.
Để xử lý các sự cố, chúng tôi đã tạo một quy trình và tuân thủ nghiêm ngặt quy trình đó bằng cách sử dụng sổ tay chạy. Sổ tay này trình bày chi tiết quy trình cần tuân thủ cho từng loại vấn đề có thể xảy ra. Bất kỳ ai trong nhóm kỹ thuật đều có thể làm theo các sách hướng dẫn chạy này.
Cuối cùng, để ngăn các vấn đề về INP xuất hiện trong bản phát hành chính thức, QuintoAndar đã triển khai hệ thống phát hành canary để phân phối bản phát hành mới theo từng giai đoạn cho người dùng (ví dụ: tăng dần từ 1%, 10%, 65% và cuối cùng là 100%). Ở mỗi giai đoạn cân bằng lại, phiên bản canary sẽ được kiểm tra để xem liệu phiên bản này có làm giảm hiệu suất của người dùng hay không. Nếu có, quá trình khôi phục sẽ tự động diễn ra, ngăn các tính năng chưa được tối ưu hoá đi vào hoạt động đầy đủ.
Để tóm tắt, những việc chính đã được thực hiện là:
- Cảnh báo được xác định rõ ràng (cố định và biến đổi) với các ủy ban hai tuần một lần để tinh chỉnh ngưỡng.
- Quy trình xử lý sự cố có sách hướng dẫn chi tiết.
- Bản phát hành Canary có quy trình xác thực hiệu suất để hạn chế tác động của các trường hợp hồi quy hiệu suất tiềm ẩn.
Kết quả
Việc ưu tiên hiệu suất đúng cách trong tổ chức, một nhóm chuyên trách về hiệu suất và việc sử dụng các kỹ thuật tối ưu hoá đã giúp giảm 80% INP theo dữ liệu RUM của chúng tôi. Biểu đồ bên dưới cho thấy INP dành riêng cho thiết bị di động, trong đó có thể thấy sự sụt giảm nhanh chóng ban đầu. Điểm cải tiến này là nhờ các bản sửa lỗi cho những lượt tương tác đặc biệt gặp vấn đề. Báo cáo này cũng cho thấy mức giảm liên tục được duy trì trong suốt cả năm, minh chứng tầm quan trọng của quy trình quản trị trong việc ngăn chặn tình trạng hồi quy.
Những điểm cải tiến này cũng được phản ánh trong Bảng điều khiển CrUX, trong đó QuintoAndar hiện có INP dưới 200 mili giây ở phân vị thứ 75, với 78% trang hoạt động dưới ngưỡng này và chỉ 6, 9% trang mang lại trải nghiệm kém – một con số liên tục giảm dần theo từng tháng.
Kết quả này rất quan trọng và có tác động trực tiếp đến hoạt động kinh doanh của QuintoAndar. QuintoAndar nhận thấy khối lượng chuyển đổi tăng 36% so với năm trước (khách hàng tiềm năng mới, trong trường hợp của QuintoAndar là những người đã lên lịch tham quan nhà đất). Kết quả này có liên quan chặt chẽ (nhưng không phải là duy nhất) đến mức độ tương tác được cải thiện mà họ đạt được thông qua việc mang lại trải nghiệm người dùng tốt hơn.
Kết luận
Việc cải thiện hiệu suất web là một thách thức. Đôi khi, bạn thậm chí có thể cảm thấy choáng ngợp. Khi bắt đầu, QuintoAndar không có tất cả câu trả lời. Tuy nhiên, bằng cách chia nhỏ vấn đề, tập trung vào những vấn đề có tác động lớn nhất và thúc đẩy sự cộng tác giữa các nhóm, họ đã đạt được tiến bộ thực sự. Không phải mọi thứ đều cần được khắc phục cùng một lúc; ngay cả những thay đổi nhỏ, gia tăng cũng có thể dẫn đến những điểm cải tiến có ý nghĩa. Bằng cách thực hiện bước đầu tiên, cho dù đó là xác định nút thắt cổ chai lớn nhất, thử nghiệm các phương pháp tối ưu hoá hay nâng cao nhận thức trong nhóm, bạn sẽ đi trên con đường đạt được hiệu suất tốt hơn và trải nghiệm người dùng tốt hơn.