Việc tối ưu hoá Các chỉ số quan trọng về trang web trên trang web của The Economic Times đã cải thiện đáng kể trải nghiệm người dùng và giảm đáng kể tỷ lệ thoát trên toàn bộ trang web.
Khi tốc độ Internet được cải thiện mỗi ngày, người dùng mong muốn các trang web sẽ phản hồi và hoạt động nhanh hơn bao giờ hết. The Economic Times xử lý hơn 45 triệu người dùng hoạt động hằng tháng. Bằng cách tối ưu hoá cho Các chỉ số quan trọng về trang web trên toàn miền, trên các trang AMP và không phải AMP, chúng tôi đã giảm được đáng kể tỷ lệ thoát và cải thiện trải nghiệm đọc.
Đo lường tác động
Chúng tôi tập trung vào Thời gian hiển thị nội dung lớn nhất (LCP) và Điểm số tổng hợp về mức thay đổi bố cục (CLS), vì những chỉ số này quan trọng nhất để mang đến trải nghiệm đọc tuyệt vời cho người dùng. Sau khi triển khai các bản sửa lỗi về hiệu suất khác nhau như mô tả bên dưới, The Economic Times đã cải thiện đáng kể các chỉ số trong báo cáo Thử nghiệm người dùng của Chrome (CrUX) trong vòng vài tháng.
Nhìn chung, CLS cải thiện 250% từ 0,25 lên 0,09. Nhìn chung, LCP cải thiện 80% từ 4,5 giây xuống còn 2,5 giây.
Ngoài ra, giá trị LCP trong phạm vi "Kém" đã giảm 33% từ tháng 10 năm 2020 đến tháng 7 năm 2021:
Ngoài ra, giá trị CLS trong phạm vi "Kém" giảm 65%, còn giá trị CLS trong phạm vi "Tốt" tăng 20% trong cùng khoảng thời gian:
Kết quả là The Economic Times (trước đây không đáp ứng ngưỡng Các chỉ số quan trọng về trang web) nay đã vượt qua ngưỡng Các chỉ số quan trọng về trang web trên toàn bộ nguồn gốc và giảm 43% tỷ lệ thoát về tổng thể.
LCP là gì và chúng tôi đã cải thiện LCP như thế nào?
Phần tử lớn nhất là phần tử phù hợp nhất để cải thiện trải nghiệm người dùng và nhận diện tốc độ tải. Các chỉ số hiệu suất như Thời gian hiển thị nội dung đầu tiên (FCP) chỉ thể hiện trải nghiệm ban đầu khi tải trang. Mặt khác, LCP báo cáo thời gian hiển thị của phần hình ảnh, văn bản hoặc video lớn nhất mà người dùng nhìn thấy.
Ngoài việc chuyển sang một nhà cung cấp DNS có tốc độ nhanh hơn và việc tối ưu hoá hình ảnh, dưới đây là một số kỹ thuật đã áp dụng để cải thiện LCP.
Yêu cầu quan trọng trước tiên
Vì tất cả các trình duyệt hiện đại đều hạn chế số lượng yêu cầu đồng thời nên nhà phát triển cần phải ưu tiên tải nội dung quan trọng trước. Để tải một trang web phức tạp, chúng tôi cần tải các nội dung như phần tử tiêu đề, CSS, tài nguyên JavaScript, hình ảnh chính, nội dung bài viết, nhận xét, tin tức, chân trang và quảng cáo có liên quan khác. Chúng tôi đã đánh giá những yếu tố cần thiết cho LCP và cung cấp lựa chọn ưu tiên để tải các mục đó trước để cải thiện LCP. Chúng tôi cũng đã trì hoãn các lệnh gọi không thuộc lượt hiển thị trang ban đầu.
Giao diện văn bản
Chúng tôi đã thử nghiệm với thuộc tính font-display vì thuộc tính này ảnh hưởng đến cả LCP và CLS. Chúng tôi đã thử font-display: auto; và sau đó chuyển sang font-display: swap;. Tính năng này hiển thị văn bản ban đầu bằng phông chữ phù hợp nhất và có sẵn nhất, sau đó chuyển sang phông chữ khi được tải xuống. Nhờ vậy mà văn bản của chúng tôi được hiển thị nhanh chóng, không phụ thuộc vào tốc độ mạng.
Nén tốt hơn
Brotli là một thuật toán nén thay thế cho Gzip và Deflate do Google phát triển. Chúng tôi đã thay thế phông chữ và thành phần, đồng thời thay đổi định dạng nén máy chủ từ Gzip sang Brotli để thu hẹp phạm vi hoạt động:
- Tệp JavaScript nhỏ hơn 15% so với Gzip.
- Tệp HTML nhỏ hơn 18% so với Gzip.
- Tệp CSS và phông chữ nhỏ hơn 17% so với Gzip.
Kết nối trước với các miền của bên thứ ba
Bạn nên sử dụng preconnect cẩn thận vì phương thức này vẫn có thể chiếm thời gian quý báu của CPU, đồng thời làm chậm các tài nguyên quan trọng khác, đặc biệt là đối với các kết nối bảo mật.
Tuy nhiên, nếu biết rằng sẽ tìm nạp một tài nguyên trên miền của bên thứ ba, thì preconnect vẫn ổn. Nếu việc này thỉnh thoảng xảy ra trên một trang web có lưu lượng truy cập cao, thì preconnect có thể kích hoạt hoạt động TCP và TLS không cần thiết. Do đó, dns-prefetch phù hợp hơn với tài nguyên của bên thứ ba (ví dụ: mạng xã hội, số liệu phân tích, v.v.) để thực hiện tra cứu DNS trước.
Chia mã thành nhiều phần
Trong phần đầu của trang web, chúng tôi chỉ tải các tài nguyên có chứa một phần thiết yếu của logic kinh doanh hoặc quan trọng đối với việc hiển thị trang trong màn hình đầu tiên. Hơn nữa, chúng tôi chia mã thành nhiều phần bằng phương pháp phân tách mã. Điều này giúp chúng tôi cải thiện hơn nữa LCP của trang.
Lưu vào bộ nhớ đệm tốt hơn
Đối với tất cả các tuyến giao diện người dùng, chúng tôi thêm một lớp Redis phân phát các mẫu từ bộ nhớ đệm. Điều này làm giảm thời gian tính toán trên máy chủ và xây dựng toàn bộ giao diện người dùng trong mỗi yêu cầu, do đó giảm LCP trong các yêu cầu tiếp theo.
Tóm tắt các Mục tiêu và thành tích LCP
Trước khi bắt đầu dự án tối ưu hoá, nhóm đã đo điểm chuẩn điểm LCP của họ ở 4,5 giây (đối với phân vị thứ 75 của người dùng, dựa trên dữ liệu trường trong báo cáo CrUX). Sau dự án tối ưu hoá, thời lượng này giảm xuống còn 2,5 giây.
CLS là gì và chúng tôi đã cải thiện CLS bằng cách nào?
Bạn có bao giờ nhận thấy bất kỳ chuyển động không mong muốn nào của nội dung trang trong khi duyệt trang web không? Một nguyên nhân của vấn đề này là việc tải không đồng bộ nội dung nghe nhìn (hình ảnh, video, quảng cáo, v.v.) trên trang có kích thước không xác định. Ngay khi tải, tài nguyên nội dung đa phương tiện sẽ thay đổi bố cục của trang.
Chúng ta sẽ đề cập đến các biện pháp đã thực hiện để cải thiện CLS trên trang web của The Economic Times.
Sử dụng phần giữ chỗ
Chúng tôi đã sử dụng phần giữ chỗ được tạo kiểu cho các đơn vị quảng cáo và phần tử nội dung nghe nhìn có kích thước đã biết để tránh thay đổi bố cục khi thư viện quảng cáo tải và hiển thị quảng cáo trên trang. Điều này đảm bảo việc thay đổi bố cục sẽ được loại bỏ bằng cách dành riêng không gian cho quảng cáo.
Phương diện vùng chứa được xác định
Chúng tôi đã chỉ định kích thước rõ ràng cho tất cả hình ảnh và vùng chứa để công cụ trình duyệt không cần phải tính toán chiều rộng và chiều cao của phần tử DOM khi chúng có sẵn. Điều này giúp tránh thay đổi bố cục một cách không cần thiết và tránh phải thực hiện thêm thao tác vẽ.
Tóm tắt các mục tiêu và thành tích CLS
Trước khi bắt đầu dự án tối ưu hoá, nhóm này đã đo điểm chuẩn CLS ở mức 0,25. Chúng tôi đã giảm được đáng kể 90% xuống còn 0,09.
Độ trễ đầu vào đầu tiên (FID) là gì và chúng tôi đã cải thiện độ trễ này bằng cách nào?
Thời gian phản hồi lần tương tác đầu tiên là chỉ số theo dõi khả năng phản hồi của trang web đối với hoạt động đầu vào của người dùng. Nguyên nhân chính của điểm FID thấp là hoạt động JavaScript nặng nề khiến luồng chính của trình duyệt luôn bận rộn, điều này có thể làm chậm các tương tác của người dùng. Chúng tôi đã cải thiện FID theo một số cách.
Chia nhỏ các tác vụ JavaScript dài
Tác vụ dài là những tác vụ có thời lượng từ 50 mili giây trở lên. Các tác vụ dài chiếm luồng chính của trình duyệt và ngăn luồng này phản hồi hoạt động đầu vào của người dùng. Chúng tôi đã chia các tác vụ chạy trong thời gian dài thành các tác vụ nhỏ hơn nếu có thể theo yêu cầu của người dùng, giúp giảm tình trạng cồng kềnh trên JavaScript.
Hoãn JavaScript không dùng đến
Chúng tôi ưu tiên nội dung trang hơn tập lệnh của bên thứ ba (chẳng hạn như số liệu phân tích) để đảm bảo trang có khả năng thích ứng nhanh hơn. Tuy nhiên, một số thư viện có một số giới hạn nhất định vì bạn cần tải các thư viện này vào tài liệu <head> để theo dõi chính xác hành trình của người dùng.
Giảm bớt hình dán polyfill
Chúng tôi đã giảm bớt sự phụ thuộc vào một số polyfill và thư viện, vì trình duyệt hỗ trợ các API hiện đại và có ít người dùng hơn sử dụng các trình duyệt cũ như Internet Explorer.
Tải từng phần quảng cáo
Tải từng phần các quảng cáo dưới màn hình đầu tiên giúp giảm thời gian chặn luồng chính, nhờ đó cải thiện FID.
Tóm tắt các mục tiêu và thành tích của FID
Từ các thử nghiệm thông thường, hiện nay chúng tôi đã có thể giảm FID từ 200 mili giây xuống dưới 50 mili giây.
Ngăn ngừa sự hồi quy
Economics Times dự định triển khai tính năng kiểm tra hiệu suất tự động trong phiên bản chính thức để tránh hiện tượng hồi quy hiệu suất trang. Họ dự định đánh giá Lighthouse-CI để tự động hoá các thử nghiệm trong phòng thí nghiệm, nhằm ngăn chặn sự hồi quy trên nhánh sản xuất.