Sau vài tháng nỗ lực cải thiện Các chỉ số quan trọng về trang web trên trang chủ của Mail.ru, Điểm số tổng hợp về mức thay đổi bố cục (CLS) tăng 60%, phân vị thứ 75 của những chỉ số này tăng 2,7% và tỷ lệ chuyển đổi của các phần cốt lõi tăng hơn 10%.
Nơi chúng tôi bắt đầu
Mail.ru là một trong những dịch vụ email hàng đầu trên Internet nói tiếng Nga và nằm trong 5 trang web hàng đầu ở Nga về lưu lượng truy cập. Mail.ru là một tài nguyên quan trọng đối với nhiều người. Google thu hút hàng trăm triệu lượt truy cập mỗi tháng và là một cổng thông tin mà mọi người có thể truy cập email, tin tức, mạng xã hội, tìm kiếm dựa trên hiệu suất trên Internet, v.v.
Mail.ru muốn cung cấp trải nghiệm người dùng chất lượng cao cho khách truy cập, vì vậy, chúng tôi đã bắt đầu cải thiện Các chỉ số quan trọng về trang web. Trước khi thảo luận về chiến lược tối ưu hoá của chúng tôi, bạn nên lưu ý một vài chi tiết kỹ thuật của trang chủ Mail.ru.
Mặc dù dự án này đã được phát triển từ lâu bằng công cụ tạo mẫu nội bộ Fest, nhưng chúng tôi đã bắt đầu chuyển sang Svelte 3 vào năm 2019.
Svelte triển khai tính năng phản ứng theo cách không sử dụng DOM ảo, qua đó giúp giảm mức sử dụng tài nguyên. Phương pháp của Svelte sẽ xoá các hàm không dùng đến khỏi gói chính thức vì trình biên dịch không tạo mã triển khai các hàm đó nếu các hàm này không được sử dụng. Mã không dùng đến sẽ bị xoá trong quá trình biên dịch, giúp giảm kích thước các gói. Điều này có thể giúp giảm Tổng thời gian chặn (TBT) trong quá trình khởi động trang.
Theo dõi các chỉ số về hiệu suất
Trước khi tối ưu hoá Các chỉ số quan trọng về trang web, bạn nên đánh giá hiệu suất tại hiện trường. Trước Các chỉ số quan trọng về trang web, chúng tôi đã theo dõi các chỉ số khác, chẳng hạn như Thời gian hiển thị nội dung đầu tiên (FCP) trong trang tổng quan về hiệu suất nội bộ.
Tập lệnh thu thập chỉ số của chúng tôi đã được sửa đổi để thu thập Các chỉ số quan trọng về trang web và truyền chúng đến trang tổng quan về hiệu suất cho việc trực quan hoá. Tuân theo đề xuất của Google, tập lệnh của chúng tôi sử dụng PerformanceObserver API để lấy các chỉ số. Các chỉ số này thuộc giao diện người dùng chung "Nền tảng" bên trong Mail.ru.
Trang tổng quan này hiển thị những chỉ số về người dùng sau đây (giá trị trung bình cho tuần từ ngày 15 đến ngày 21 tháng 3 năm 2021):
| Tên nhóm chỉ số | Các chỉ số quan trọng về trang web | Các chỉ số quan trọng khác về trang web | |||||
|---|---|---|---|---|---|---|---|
| Tên chỉ số | LCP (Thời gian hiển thị nội dung lớn nhất) | FID (Thời gian phản hồi lần tương tác đầu tiên) | CLS (Mức thay đổi bố cục tích luỹ) | FCP (hiển thị nội dung đầu tiên) | TBT | TTI (Chỉ số TTI) | |
| Tỷ lệ người dùng theo ngưỡng Các chỉ số quan trọng về trang web | thú vị | 52% | 92% | 33% | 35% | 42% | 43% |
| cải thiện nhu cầu | 19% | (5%) | 23% | 38% | Tăng 16% | 25% | |
| kém | Giảm 29% | 3% | 44% | 27% | 42% | 32% | |
Cải thiện Các chỉ số quan trọng về trang web
Mặc dù có rất nhiều hướng dẫn giúp cải thiện Các chỉ số quan trọng về trang web, nhưng mỗi dự án đều có những thách thức riêng. Đối với trang chủ Mail.ru, các cơ hội sau đã được xác định:
- Triển khai phần giữ chỗ cho biểu ngữ quảng cáo để giảm CLS.
- Sử dụng tính năng hiển thị phía máy chủ (SSR) để giảm Thời gian hiển thị nội dung lớn nhất (LCP).
- Tách mã để giảm LCP và Thời gian phản hồi lần tương tác đầu tiên (FID).
Bộ xương giúp cải thiện CLS
CLS là một trong những chỉ số trường có hiệu suất kém nhất trên trang chủ Mail.ru. Quá trình phân tích tài nguyên của trang này tiếp theo trong bảng điều khiển Hiệu suất của Công cụ cho nhà phát triển của Chrome cho thấy quảng cáo chính là nguyên nhân gây ra sự cố. Để cải thiện tính ổn định của bố cục, nhóm chúng tôi đã quyết định sử dụng phần giữ chỗ để đặt trước không gian cho quảng cáo trước khi quảng cáo tải.
Khi triển khai phần giữ chỗ, bước đầu tiên là xác định kích thước của nội dung sẽ thay thế chúng. May mắn thay, phiên bản trang chủ Mail.ru dành cho máy tính đã ghi lại nghiêm ngặt các kích thước của quảng cáo. Sau khi thảo luận với nhóm thiết kế, các bộ khung giao diện người dùng dạng ảnh động SVG được dùng làm phần giữ chỗ vì chúng giảm thời gian tải theo nhận định của nội dung.
Sự trở lại của SSR
Để quá trình chuyển đổi từ Fest sang Svelte diễn ra dễ dàng, chúng tôi từng bước viết lại dự án hiện có thay vì bắt đầu lại. Đến tháng 3 năm 2021, chúng tôi đã di chuyển hầu hết giao diện người dùng sang Svelte và cuối cùng đưa SSR vào ứng dụng chính thức sau khi phân loại và khắc phục các vấn đề về hiệu suất của phần phụ trợ.
Sau khi triển khai SSR, nhóm phát hiện ra nguyên nhân dẫn đến sự hồi quy CLS mà ban đầu không được chú ý: mục tin tức không được chèn tại thời điểm hiển thị nội dung đầu tiên trên trang. Có sự chậm trễ giữa lần vẽ đầu tiên đánh dấu trang do máy chủ cung cấp và việc chèn phần tin tức trên ứng dụng khách. Hành vi này đã dẫn đến sự thay đổi về khung xương của quảng cáo, từ đó khiến CLS trở nên xấu đi.
Mặc dù Công cụ của Chrome cho nhà phát triển cho thấy các sự kiện Layout Shift (Thay đổi bố cục), nhưng ban đầu chúng tôi không thể tìm ra lý do dẫn đến điều này. Mặc dù bản thân SSR không phải là vấn đề, nhưng nó đã giúp chúng tôi khám phá giải pháp sau này. Việc sửa mã gây ra độ trễ vẽ đã cải thiện độ ổn định về bố cục của thành phần tin tức.
Một tác động khác của SSR đến CLS là sự di chuyển của các thành phần trước và sau quá trình cấp nước, điều này có thể khiến bố cục thay đổi hơn nữa. Cụ thể, chúng tôi đã gặp phải điều này trên phiên bản dành cho thiết bị di động, do đó bạn cần đặc biệt chú ý đến mã đánh dấu thành phần được ngậm nước. Một giải pháp hay cho vấn đề này là chuyển nhiều logic hiển thị từ JavaScript sang CSS khi có thể.
Chia tách mã và polyfill không sử dụng
Để cải thiện tốc độ tải trang cảm nhận được, chúng tôi cần nỗ lực để giảm các giá trị LCP và FID. Một cách để thực hiện việc này là phân tách mã. Ngoài chính trang chủ Mail.ru, nhóm của chúng tôi đang phát triển một tiện ích cho việc điều hướng cổng thông tin. API này hiện được nhúng trong nhiều dự án của công ty chúng tôi.
Vì lý do trước đây, tiện ích này được chèn vào đầu trang dưới dạng tập lệnh tải đồng bộ. Tỷ lệ polyfill trong tập lệnh này tăng theo thời gian. Để hạn chế ảnh hưởng tiêu cực đến hiệu suất khi tải các polyfill này, chúng tôi đã triển khai quá trình chia tách mã cho cả trình duyệt hiện đại và trình duyệt cũ.
Chúng tôi quyết định từ chối mẫu module/nomodule khi tải gói JavaScript cho các trình duyệt hiện đại hoặc cũ, vì thuộc tính type="module" của phần tử <script> không nhắm đến những trình duyệt đủ hiện đại theo nhu cầu của chúng tôi. Để giải quyết vấn đề này, Mail.ru sử dụng một công cụ nội bộ để xác định các phiên bản trình duyệt hiện đại trên phần phụ trợ và có thể điều chỉnh cho phù hợp với các trình duyệt đó.
Sau khi xác định được các trình duyệt trong phần phụ trợ, chúng tôi đã triển khai tính năng phân tách mã cho các trình duyệt hiện đại và cũ. Kết quả là kích thước của tiện ích JavaScript được tải đồng bộ cho các trình duyệt hiện đại đã giảm 43,3%. Phương pháp này cũng đã được áp dụng cho một số tập lệnh cổng khác.
Ngoài việc giảm kích thước gói và tác động tích cực đến Các chỉ số quan trọng về trang web, việc phân tách mã còn cải thiện trải nghiệm của nhà phát triển. Chỉ 3,5% người dùng của chúng tôi sử dụng trình duyệt cũ và tỷ lệ đó đang có xu hướng giảm.Vì vậy, việc triển khai tính năng phân tách mã cho phép các nhà phát triển của chúng tôi sử dụng các API trình duyệt mới nhất mà không cần phải sử dụng tính năng polyfill cho các trình duyệt cũ cho tất cả người dùng.
Kết quả
Sau quá trình tối ưu hoá, chúng tôi đã nhận thấy các giá trị trung bình cho tuần từ ngày 24 đến ngày 30 tháng 5 năm 2021 trong dữ liệu thực địa:
| Tên nhóm chỉ số | Các chỉ số quan trọng về trang web | Các chỉ số quan trọng khác về trang web | |||||
|---|---|---|---|---|---|---|---|
| Tên chỉ số | LCP (Thời gian hiển thị nội dung lớn nhất) | FID (Thời gian phản hồi lần tương tác đầu tiên) | CLS (Mức thay đổi bố cục tích luỹ) | FCP (hiển thị nội dung đầu tiên) | TBT | TTI (Chỉ số TTI) | |
| Tỷ lệ người dùng theo ngưỡng Các chỉ số quan trọng về trang web | thú vị | 58% (+6%) | 93% (+1%) | 93% (+60%) | 43% (+8%) | 49% (+7%) | 51% (+8%) |
| cải thiện nhu cầu | Giảm 18% | 4% | 3% | Giảm 34% | Tăng 17% | 24% | |
| kém | 24% | 3% | 4% | 23% | Giảm 34% | 25% | |
Các biểu đồ bên dưới cho thấy những thay đổi về giá trị chỉ số hiệu suất của trang web theo "Nền tảng". Lưu ý hai ngày quan trọng trên biểu đồ:
- Ngày 23 tháng 3 năm 2021: phát hành phiên bản lặp lại với các phần trang cuối cùng được chuyển sang Svelte;
- 19/4/2021: phát hành phiên bản lặp lại với SSR được trả về và sửa đổi bố cục để sửa lỗi hồi quy CLS.
Việc giảm giá trị từ ngày 1 tháng 5 đến ngày 10 tháng 5 là do kỳ nghỉ lễ vào tháng 5 ở Nga.
Các kết quả thu được khi sử dụng "Nền tảng" phù hợp với sự tăng trưởng của các giá trị chỉ số trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX).
So sánh giá trị thời lượng phiên trung bình của người dùng một tuần trước khi triển khai các điểm cải tiến ban đầu và một tuần sau khi triển khai, mức tăng cho thấy mức tăng 2,7%. Hơn nữa, có sự gia tăng đáng kể về lượt chuyển đổi trong hầu hết các phần của trang. Trong đó, lượt chuyển đổi sang ứng dụng email Mail.ru tăng 11,6%, lượt chuyển đổi của phần tin tức tăng 13,5%.
181%
Mức tăng tỷ lệ của ngưỡng CLS tốt
2,7%
Thời lượng phiên trung bình cao hơn
13,5%
Mức tăng tỷ lệ chuyển đổi mục tin tức
Kết quả ngoài mong đợi nhất mà chúng tôi nhận được là tỷ lệ nhấp (CTR) của biểu ngữ tiếp thị tăng 17,4% (thời gian hiển thị của biểu ngữ này đã giảm đáng kể khi triển khai SSR và thẻ tải trước).
Sau khi phân tích các phần còn lại trên trang, chúng tôi nhận thấy sự cải thiện đáng kể về hiệu suất trong phần lớn các phần đó. Ngay cả đối với các phần như Thời tiết và vi-rút corona (không phải là yếu tố quan trọng trên trang của chúng tôi), chúng tôi nhận thấy tỷ lệ chuyển đổi tăng lần lượt là 9,6% và 9,5%.
Kết luận
Khó cải thiện hiệu suất vì công việc liên quan có thể kéo dài. Bạn nên thường xuyên theo dõi các thay đổi về các chỉ số theo thời gian và đảm bảo rằng tất cả các tính năng mới của sản phẩm đều không gây ra sự hồi quy trong Các chỉ số quan trọng về trang web. Để đạt được điều này, chúng tôi theo dõi các thay đổi đối với Các chỉ số quan trọng về trang web trong ngân sách hiệu suất.
Điều quan trọng nhất là chúng tôi nhấn mạnh tầm quan trọng của Các chỉ số quan trọng về trang web đối với mọi thành viên trong nhóm sản phẩm, từ người quản lý, nhà thiết kế cho đến người kiểm thử và đảm bảo chất lượng. Mỗi thành viên trong nhóm cần phải nắm rõ các chỉ số hiệu suất và có khả năng cải thiện các chỉ số đó. Chúng tôi cũng thường xuyên đưa các mục tiêu tối ưu hoá hiệu suất vào quy trình kinh doanh của mình. Việc cung cấp thành công trải nghiệm người dùng chất lượng cao chỉ có thể đạt được nhờ sự chung tay của tất cả các thành viên trong nhóm.