Một dự án tập trung vào việc tối ưu hoá Các chỉ số quan trọng về trang web và di chuyển sang Next.js đã giúp tỷ lệ chuyển đổi tăng 5% và số trang mỗi phiên tăng 87%.
QuintoAndar là một công ty công nghệ bất động sản của Brazil, cung cấp các sản phẩm giải pháp kỹ thuật số toàn diện cho lĩnh vực bất động sản. Năm nay, chúng tôi đã triển khai một dự án tập trung vào việc cải thiện hiệu suất của một trung tâm nội dung trong ứng dụng và đã đạt được kết quả đáng khích lệ trong việc tăng lưu lượng truy cập của người dùng và các chỉ số chuyển đổi.
46%
giảm tỷ lệ thoát
87%
số trang mỗi phiên tăng
5%
cải thiện lượt chuyển đổi trong giai đoạn xác thực
Thử thách
Ứng dụng của chúng tôi có một trung tâm nội dung về căn hộ chung cư với hơn 40.000 trang. Tại đây, người dùng có thể xem thông tin về các căn hộ, kiểm tra ảnh của các khu vực chung, đọc về khu vực lân cận và tìm các trang thông tin hiện có để cho thuê hoặc bán. Những trang này rất quan trọng đối với QuintoAndar:
- Đây là một nguồn quan trọng của lưu lượng truy cập tự nhiên, với số lượng người dùng đến từ kết quả trên công cụ tìm kiếm ngày càng tăng.
- Các trang này có tỷ lệ chuyển đổi cao trong trung hạn đến dài hạn so với các trang khác.
Tuy nhiên, vẫn có những thách thức liên quan đến hiệu suất và trải nghiệm người dùng trên các trang này:
- Hiệu suất của các trang web này (được đo lường bằng Chỉ số quan trọng chính của trang web) chưa được tối ưu hoá và có một số vấn đề đã biết liên quan đến việc tải trang chậm, phản hồi chậm với hoạt động đầu vào của người dùng và bố cục không ổn định.
- Tỷ lệ thoát của họ cao, mặc dù chúng tôi dự kiến tỷ lệ này sẽ cao hơn ở các phần khác của ứng dụng.
- Nội dung cập nhật về trải nghiệm trên trang trong Google Tìm kiếm (vào thời điểm đó chưa được phát hành) sẽ đưa các Chỉ số quan trọng chính của trang web vào thuật toán xếp hạng. Điều này có nghĩa là hiệu suất của trang có thể ảnh hưởng đến cách hiển thị kết quả tìm kiếm.
Đồng thời, chúng tôi đã xác định một số cơ hội về trải nghiệm dành cho nhà phát triển có thể mang lại lợi ích trong các dự án khác trên toàn công ty:
- Logic hiển thị phía máy chủ của chúng tôi – hiển thị tất cả các trang có lưu lượng truy cập cao, kể cả các trang chung cư – được tạo nội bộ và trở nên quá phức tạp để duy trì cũng như tuyển dụng nhân viên mới.
- Các tính năng thiết yếu để đạt được hiệu suất tốt cho ứng dụng, chẳng hạn như phân tách mã, cũng yêu cầu nhà phát triển phải thiết lập tuỳ chỉnh và thực hiện công việc thủ công.
- QuintoAndar có hơn 30 ứng dụng web React. Việc phân phối bản cập nhật cho các ứng dụng này và duy trì các bản cập nhật đó theo các phương pháp hay nhất là một nhiệm vụ khó khăn.
Phương pháp
Chúng tôi đã bắt đầu một dự án tối ưu hoá hiệu suất của trung tâm nội dung dạng căn hộ chung cư để cải thiện trải nghiệm người dùng, vì những điểm cải tiến này có thể giúp tăng lượt chuyển đổi, nâng cao hiệu quả SEO và khả năng hữu dụng hơn. Sáng kiến này cũng là một cơ hội phù hợp để cải thiện trải nghiệm của nhà phát triển.
Di chuyển sang Next.js
Phiên bản mới của trang căn hộ chung cư được triển khai bằng Next.js. Hầu như độc lập với các phần khác của ứng dụng, trung tâm nội dung về căn hộ chung cư có vẻ là một ứng cử viên phù hợp để thử nghiệm một khung mới. Chúng ta có thể hiểu được quy mô của nỗ lực di chuyển và đánh giá mức độ hữu ích của các tính năng mà không ảnh hưởng đến các ứng dụng React khác trong QuintoAndar.
Một yêu cầu khó khăn là đảm bảo công cụ tìm kiếm vẫn có thể thu thập dữ liệu các trang. Next.js đáp ứng yêu cầu này bằng cách hỗ trợ tính năng kết xuất phía máy chủ ngay từ đầu và không cần thiết lập tuỳ chỉnh. Tài liệu này giúp bạn dễ dàng chia sẻ kiến thức về cách thực hiện các tác vụ như tìm nạp dữ liệu trên máy chủ và hướng dẫn các nhà phát triển mới. Việc kết xuất phía máy chủ cũng được biết là cải thiện hiệu suất các chỉ số như Hiển thị nội dung đầu tiên (FCP).
Khung này cung cấp các tính năng cải thiện hiệu suất khác như tự động chia tách mã và tìm nạp trước. Mặc dù cấu trúc hiện tại đã cung cấp các tính năng như vậy, nhưng công việc bổ sung mà nhà phát triển cần làm đã khiến họ trì hoãn việc sử dụng. Ví dụ: bạn phải phân tách mã ở cấp trang hoặc cấp thành phần theo cách thủ công.
Tối ưu hoá tài nguyên JavaScript
Bước đầu tiên là xoá đoạn mã không dùng đến. Chúng tôi đã xem xét các báo cáo Webpack Bundle Analyzer (Trình phân tích gói Webpack) cho thấy nội dung của từng gói JS và xem xét kỹ lưỡng tất cả tập lệnh của bên thứ ba. Do đó, chúng tôi có thể xoá một số thư viện theo dõi không được sử dụng trong trang cụ thể này.
Nhóm chúng tôi đã tiến xa hơn và đánh giá chi phí hiệu suất của các tính năng hiện có. Ví dụ: nút "thích" cần khá nhiều JS để hoạt động. Tuy nhiên, trên trang căn hộ chung cư, chưa đến 0, 5% người dùng tương tác với nút này.Nút này có sẵn và được sử dụng thường xuyên hơn ở các phần khác của ứng dụng. Sau khi thảo luận với cả Nhóm kỹ thuật và Nhóm sản phẩm, chúng tôi quyết định xoá tính năng này.
Các tính năng tối ưu hoá JS khác đã được triển khai, chẳng hạn như nén tĩnh bằng Brotli, được thực hiện tại thời điểm tạo bản dựng bằng BrotliWebpackPlugin và cũng được áp dụng cho các loại tài nguyên tĩnh khác. Ban đầu, chúng tôi dựa vào tính năng nén do CDN cung cấp và Brotli đã giảm kích thước JS đi 18% so với gzip. Tuy nhiên, chúng tôi đã chuyển sang phương thức nén Brotli tại thời điểm tạo bản dựng và có thể giảm 24%.
Tối ưu hoá tài nguyên hình ảnh
Có một hình ảnh chính chiếm phần lớn khu vực trên cùng trong phiên bản dành cho thiết bị di động. Đây cũng là Thời gian hiển thị nội dung lớn nhất (LCP) của trang.
Trước đây, tất cả hình ảnh đều có thuộc tính srcset và sizes để phân phát hình ảnh thích ứng. Chúng tôi cũng sử dụng Thumbor để đổi kích thước hình ảnh theo yêu cầu và định cấu hình CDN để lưu hình ảnh vào bộ nhớ đệm một cách hiệu quả.
Các thiết bị di động hiện đại có màn hình có mật độ điểm ảnh rất cao, nghĩa là trình duyệt sẽ hiển thị phiên bản hình ảnh 3x hoặc 4x (nếu có). Khi độ phân giải tăng lên, mắt người sẽ khó nhận ra sự khác biệt hơn, nhưng kích thước tệp sẽ tăng lên bất kể điều gì. Việc giới hạn độ phân giải hình ảnh tối đa đã cải thiện kích thước hình ảnh mà không ảnh hưởng đến trải nghiệm người dùng. Chúng tôi giới hạn hình ảnh chính để phân phát tối đa phiên bản 2x, nhỏ hơn khoảng 35% so với phiên bản 3x và nhỏ hơn 50% so với phiên bản 4x.
Cuối cùng, chúng tôi đã sử dụng chiến lược tải trước để tải xuống và hiển thị hình ảnh sớm nhất có thể, nhằm cải thiện chỉ số LCP.
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Thành phần hình ảnh tích hợp Next.js bao gồm nhiều lựa chọn tối ưu hoá như đổi kích thước thích ứng và ưu tiên tải. Trong dự án này, chúng tôi không di chuyển các hình ảnh hiện có để sử dụng thành phần này, nhưng chúng tôi dự định sẽ áp dụng thành phần này trong các tính năng mới.
Giảm mức thay đổi bố cục
Trang căn hộ chung cư gặp một số vấn đề với Điểm số tổng hợp về mức thay đổi bố cục (CLS). Các phần tử chịu trách nhiệm cho việc thay đổi bố cục chỉ được hiển thị trong ứng dụng, ví dụ: làm mới mã đánh dấu phía máy chủ bằng các thành phần do ứng dụng hiển thị hoặc hình ảnh không có thuộc tính width và height được xác định.
Để giải quyết những vấn đề này, chúng ta đặt kích thước chính xác cho các phần tử này khi có thể hoặc giá trị ước tính bằng min-height. Bạn có thể sử dụng các tuỳ chọn khác, chẳng hạn như sử dụng thuộc tính CSS aspect-ratio. Chúng tôi cũng tạo phần giữ chỗ để ngăn các thành phần được kết xuất động gây ra thay đổi bố cục.
Triển khai dần các thay đổi
Nhóm của chúng tôi muốn xác thực rằng phiên bản được tối ưu hoá của trang trung tâm về căn hộ chung cư sẽ mang lại trải nghiệm tốt hơn cho người dùng. Để đạt được điều này, chúng tôi đã áp dụng chiến lược triển khai từng bước:
- Trong giai đoạn đầu, phiên bản mới được phát hành cho một số URL được chọn thủ công, vì vậy, mỗi ngày chỉ có vài trăm người dùng nhìn thấy các URL đó;
- Trong giai đoạn thứ hai, tính năng này được phát hành cho nhiều trang hơn, tương đương với vài nghìn người dùng mỗi ngày;
- Trong giai đoạn thứ ba (cũng là giai đoạn cuối cùng), Google Play đã được xuất bản cho tất cả các trang và quá trình ra mắt đã hoàn tất cho tất cả người dùng.
Trong khoảng thời gian này, nhóm kỹ sư liên tục đo lường hiệu suất của trang trong môi trường thực tế và tiếp tục cải thiện. Ngoài ra, nhóm nghiên cứu đã so sánh các chỉ số kinh doanh giữa phiên bản mới và phiên bản cũ. Kết quả trong khoảng thời gian xác thực này rất khả quan.
Kết quả
Nhóm nghiên cứu đã sử dụng SpeedCurve để liên tục chạy kiểm thử trong phòng thí nghiệm trên trang căn hộ chung cư. Sau đây là kết quả cho phiên bản dành cho thiết bị di động:
| Chỉ số trong phòng thí nghiệm | Trước | Sau | Chênh lệch |
|---|---|---|---|
| Thời gian hiển thị nội dung lớn nhất (LCP) | 2,41 giây | 1,48 giây | -39% |
| Thời gian tương tác (TTI) | 12,16 giây | 7,48 giây | -39% |
| Tổng thời gian chặn (TBT) | 1124 mili giây | 1056 mili giây | -4% |
| Điểm số tổng hợp về mức thay đổi bố cục (CLS) | 0,0402 | 0,0093 | Giảm 77% |
Chúng tôi cũng muốn kiểm tra tác động của việc này đối với người dùng thực tế. Bằng cách sử dụng dữ liệu thực địa được thu thập thông qua công cụ Giám sát trang web Instana, chúng tôi đã xem xét khoảng thời gian 1 tháng trước và sau khi triển khai. Khi so sánh phân vị thứ 75 cho người dùng thiết bị di động, chúng tôi nhận thấy LCP giảm 26% và FID giảm 72%.
PageSpeed Insights cung cấp báo cáo dữ liệu trường trong 28 ngày qua. Chỉ trang căn hộ chung cư được truy cập nhiều nhất đã có đủ dữ liệu để tạo báo cáo cho người dùng thiết bị di động. Kể từ tháng 11 năm 2021, tất cả các chỉ số quan trọng về trang web đều nằm trong nhóm "tốt".
Trong quá trình triển khai từng bước, chúng tôi nhận thấy tỷ lệ thoát giảm. Vào thời điểm chúng tôi hoàn tất bản phát hành cho tất cả các trang, Google Analytics đã cho thấy tỷ lệ thoát giảm 46%, số trang mỗi phiên tăng 87% và thời lượng phiên trung bình tăng 49%. Mức giảm tỷ lệ thoát thậm chí còn lớn hơn đối với các lượt tìm kiếm có trả tiền, đạt mức giảm 59% – một dấu hiệu tích cực khi nói đến các khoản đầu tư vào quảng cáo trả tiền cho mỗi lượt nhấp (PPC).
Đối với tác động đến các chỉ số kinh doanh, chúng tôi đã phân tích tỷ lệ chuyển đổi cho các giao dịch như lên lịch tham quan và đăng ký thuê hoặc mua bất động sản. Trong khi các điểm cải tiến vẫn đang được triển khai, nhóm của chúng tôi đã so sánh lượt chuyển đổi giữa phiên bản cũ và phiên bản mới. Trong cùng một tuần, nhóm trang có phiên bản mới cho thấy số lượt chuyển đổi tăng 5%, trong khi các trang khác có số lượt chuyển đổi giảm nhẹ theo cùng một chỉ số.
Kết luận
Dự án này là phần đầu tiên của một nỗ lực di chuyển dài hạn từ React không có khung đến Next.js. Kể từ thời điểm đó, những đội ngũ làm việc trên trang nhà chung cư đã đưa ra ý kiến phản hồi tích cực về việc cải thiện trải nghiệm của nhà phát triển. Các nhóm khác đã phải tự khởi động các ứng dụng web mới bằng Next.js. Chúng tôi tin rằng Next.js sẽ đơn giản hoá các nỗ lực bảo trì và tạo ra một nền tảng chung giữa các ứng dụng.
Nhìn chung, trung tâm nội dung về căn hộ chung cư liên tục phát triển về số lượng người dùng và giao dịch tuyệt đối. Trong quá trình phân tích dài hạn, có nhiều yếu tố góp phần dẫn đến việc này, chẳng hạn như việc mở rộng hoạt động của QuintoAndar và các sáng kiến SEO, chẳng hạn như cải thiện khả năng lập chỉ mục trang. Trong dự án này, chúng tôi nhận thấy hiệu suất trang cũng là một trong những yếu tố có tiềm năng tác động tích cực đến lượt chuyển đổi.
Xin cảm ơn đặc biệt Pedro Carmo, Nhà quản lý sản phẩm của nhóm SEO, đã tìm hiểu dữ liệu người dùng và tạo tất cả các bản phân tích lượt chuyển đổi trong nghiên cứu điển hình này.