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à 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ệ quảng cáo ở Brazil, chuyên cung cấp các giải pháp kỹ thuật số toàn diện trong lĩnh vực bất động sản. Năm nay, chúng tôi đã thực hiện một dự án tập trung vào việc cải thiện hiệu suất của trung tâm nội dung trong ứng dụng của chúng tôi và đã đạt được những kết quả đáng khích lệ về việc tăng chỉ số về số lượt chuyển đổi và lưu lượng truy cập của người dùng.
46%
tỷ lệ thoát
87%
số trang mỗi phiên tăng
5%
mức độ 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ó trung tâm nội dung về chung cư với hơn 40.000 trang. Tại đây, người dùng có thể xem thông tin về bất động sản của họ, kiểm tra ảnh về các khu vực chung, đọc về khu vực lân cận và tìm trang thông tin cho thuê hoặc bán. Các trang này rất quan trọng đối với QuintoAndar:
- Chúng là một nguồn lưu lượng tự nhiên quan trọng, với số lượng người dùng tăng đều đặn từ kết quả của công cụ tìm kiếm.
- Các trang này có tỷ lệ chuyển đổi cao trong trung và dài hạn so với các trang khác.
Tuy nhiên, vẫn còn một số thách thức đối với hiệu suất và trải nghiệm người dùng trên các trang sau:
- Hiệu suất của những trang này khi được Các chỉ số quan trọng về trang web đo lường không được tối ưu hoá và có các vấn đề đã biết liên quan đến việc tải trang chậm, phản hồi chậm đối 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 các trang này rất cao, ngay cả khi chúng tôi dự kiến rằng các phần này sẽ cao hơn các phần khác của ứng dụng.
- Bản 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 về 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 được một số cơ hội về trải nghiệm của nhà phát triển có thể giúp gia tăng lợi nhuận trong các dự án khác trê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, bao gồm cả các trang của nhà chung cư) được tạo nội bộ và trở nên quá phức tạp để duy trì và thêm nhân viên mới.
- Các tính năng thiết yếu để ứng dụng hoạt động hiệu quả, chẳng hạn như phân tách mã, cũng yêu cầu bạn phải thiết lập tuỳ chỉnh và thực hiện các thao tác thủ công của nhà phát triển.
- QuintoAndar có hơn 30 ứng dụng web React. Việc cung cấp bản cập nhật cho những ứng dụng này và duy trì chúng 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 dự án tối ưu hoá hiệu suất của trung tâm nội dung chung cư để cải thiện trải nghiệm người dùng, vì những cải tiến này có thể giúp tăng số lượt chuyển đổi, cải thiện khả năng SEO và nâng cao khả năng hữu dụng. Sáng kiến này cũng là một cơ hội thích 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 chung cư đã được triển khai bằng Next.js. Do phần lớn độc lập với các phần khác của ứng dụng, trung tâm nội dung chung cư có vẻ là một ứng viên phù hợp để thử nghiệm khung mới. Chúng ta sẽ có thể hiểu được tầm quan trọng của các nỗ lực di chuyển và đánh giá được lợi ích của các tính năng của nền tảng này 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ác 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 hiển thị ngay từ đầu và không cần phải thiết lập tuỳ chỉnh. Tài liệu này giúp việc chia sẻ kiến thức về cách thực hiện các công việc như tìm nạp dữ liệu trên máy chủ và làm quen với các nhà phát triển mới sẽ trở nên dễ dàng hơn nhiều. Tính năng hiển thị phía máy chủ cũng giúp cải thiện hiệu suất như Thời gian hiển thị nội dung đầu tiên (FCP).
Khung này cung cấp các tính năng thân thiện với 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 nhà phát triển vẫn cần một lượng công việc bổ sung cần thiết để tiếp tục sử dụng. Ví dụ: bạn phải thực hiện phân tách mã ở cấp trang hoặc 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á mã không dùng đến. Chúng tôi đã xem xét báo cáo Trình phân tích gói Webpack, trong đó cho biết nội dung của từng gói JS và xem xét kỹ tất cả tập lệnh của bên thứ ba. Kết quả là 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 đã đi sâu 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" đòi hỏi khá nhiều JS để hoạt động. Tuy nhiên, trên trang chung cư, 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 trong các phần khác của ứng dụng. Sau một cuộc thảo luận về cả Kỹ thuật và Sản phẩm, chúng tôi quyết định xoá tính năng này.
Một số cách tối ưu hoá JS khác đã được áp dụng sẵn, chẳng hạn như nén tĩnh bằng Brotli (được thực hiện trong thời gian xây 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. Lúc đầu, chúng tôi dựa vào nén do CDN cung cấp và Brotli đã giảm kích thước JS xuống 18% so với gzip. Nhưng sau đó, chúng tôi chuyển sang nén Brotli tại thời điểm xây dựng và đã giảm được 24% lượng pin.
Tối ưu hoá tài nguyên hình ảnh
Trong phiên bản dành cho thiết bị di động, có một hình ảnh chính chiếm hầu hết diện tích trong màn hình đầu tiên. Đâ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 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 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 với mật độ pixel rất cao, có nghĩa là trình duyệt sẽ hiển thị phiên bản 3x hoặc 4x của hình ảnh, nếu có. Khi độ phân giải tăng, mắt người sẽ khó nhận thấy sự khác biệt hơn, nhưng kích thước tệp sẽ tăng lên. 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.
Để hoàn tất, chúng tôi đã sử dụng chiến lược tải trước để tải xuống và hiển thị chiến lược càng sớm càng tốt, với mong muốn 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 tính năng tối ưu hoá này, chẳng hạn 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 hình ảnh hiện có để sử dụng thành phần này, nhưng chúng tôi dự định sẽ 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 chung cư gặp một số vấn đề về Đ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 khách (ví dụ: hiển thị mã đánh dấu phía máy chủ bằng các thành phần do ứng dụng kết xuất hoặc hình ảnh chưa được xác định thuộc tính width và height).
Để giải quyết những vấn đề này, chúng tôi đặt phương diện 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ũng có thể chọn các cách 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 làm thay đổi bố cục.
Đang dần triển khai các thay đổi
Nhóm 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 nhà chung cư nhằm đảm bảo trải nghiệm người dùng tốt hơn. Để đạ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 xuất bản cho một vài URL được chọn thủ công, vì vậy, chỉ có vài trăm người dùng mỗi ngày sẽ nhìn thấy các URL này;
- Trong giai đoạn thứ hai, Google Analytics 4 được xuất bản cho nhiều trang hơn, đạt vài nghìn người dùng mỗi ngày;
- Trong giai đoạn thứ ba và cuối cùng, chúng tôi đã phát hành tính năng này cho tất cả các trang và hoàn tất quá trình ra mắt cho tất cả người dùng.
Trong khoảng thời gian này, nhóm kỹ thuật đã liên tục đo lường hiệu suất của trang trong quá trình sản xuất và tiếp tục tìm cách cải tiến. Ngoài ra, đội ngũ này cũng so sánh các chỉ số kinh doanh giữa phiên bản mới và phiên bản cũ. Các kết quả trong giai đoạn xác thực này rất khả quan.
Kết quả
Đội ngũ này sử dụng SpeedCurve để liên tục chạy các thử nghiệm trong phòng thí nghiệm đối với trang chung cư. Dưới đây là kết quả cho phiên bản di động:
| Chỉ số cho 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 | Giảm 39% |
| Thời gian tương tác (TTI) | 12,16 giây | 7,48 giây | Giảm 39% |
| Tổng thời gian chặn (TBT) | 1124 mili giây | 1056 mili giây | Giảm 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 đến người dùng thực. Bằng cách sử dụng dữ liệu thực tế được thu thập qua dịch vụ Giám sát trang web của 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 của 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 một báo cáo dữ liệu thực địa trong 28 ngày qua. Chỉ riêng trang chung cư được truy cập nhiều nhất đã đủ 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 được đưa vào bộ chứa "tốt".
Trong quá trình ra mắt dần, chúng tôi nhận thấy tỷ lệ thoát giảm xuống. 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ả phí, đạt mức giảm 59% — một dấu hiệu tích cực khi đầu tư vào quảng cáo trả tiền cho mỗi lượt nhấp (PPC).
Về tác động trong 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 chúng tôi vẫn đang triển khai các điểm cải tiến, nhóm chúng tôi đã so sánh sự chuyển đổi giữa các phiên bản trước đó và phiên bản mới. Trong cùng tuần đó, nhóm trang sử dụng 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ó mức giảm nhẹ trong cùng chỉ số này.
Kết luận
Dự án này là phần đầu tiên trong nỗ lực di chuyển dài hạn từ React không có khung sang Next.js. Những nhóm phụ trách xây dựng trang chung cư kể từ đó đã đưa ra phản hồi tích cực về trải nghiệm được cải thiện dành cho nhà phát triển. Các nhóm khác phải tự bỏ vốn ứng dụng web mới đã làm như vậy với 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à thiết lập cơ sở chung giữa các ứng dụng.
Nhìn chung, trung tâm nội dung chung cư không ngừng 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 vào 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ư việc cải thiện hoạt động lập chỉ mục trang. Trong dự án này, chúng tôi nhận thấy rằng hiệu suất của trang cũng là một trong những yếu tố có tiềm năng lớn để tác động tích cực đến lượt chuyển đổi.
Xin đặc biệt cảm ơn Pedro Carmo, Nhà quản lý sản phẩm của nhóm SEO, vì đã phân tích dữ liệu người dùng và tạo ra toàn bộ bản phân tích lượt chuyển đổi như trong nghiên cứu điển hình này.