Một nghiên cứu điển hình về những thay đổi mà GoDaddy đã triển khai để cải thiện hiệu suất trang web cho hàng triệu trang web, giúp họ đạt được điểm số cao về PageSpeed Insights và Các chỉ số quan trọng về trang web.
GoDaddy là nền tảng dịch vụ lớn nhất thế giới dành cho các doanh nhân trên toàn cầu. Chúng tôi đang thực hiện sứ mệnh trao quyền cho cộng đồng hơn 20 triệu khách hàng và doanh nhân ở khắp nơi trên toàn thế giới bằng cách cung cấp cho họ tất cả sự trợ giúp và công cụ cần thiết để phát triển trực tuyến.
Vào năm 2019, GoDaddy đã ra mắt Trang web + Tiếp thị với cam kết cung cấp các công cụ và dịch vụ dễ sử dụng và giúp chủ doanh nghiệp đạt được mục tiêu. Trang web + Tiếp thị tích hợp việc tạo trang web với các công cụ tiếp thị và thương mại điện tử, đồng thời kết hợp các công cụ và dịch vụ này với hướng dẫn tốt nhất để giúp khách hàng đạt được thành công trong dự án mới của mình.
Kể từ khi ra mắt trang web + Tiếp thị, hiệu suất là một phần quan trọng của sản phẩm này và được theo dõi và xử lý một cách tích cực. Trong bài viết này, chúng ta sẽ xem lại hành trình của GoDaddy từ việc sử dụng quy trình kiểm tra hiệu suất trong phòng thí nghiệm đến việc sử dụng dữ liệu thực tế với Các chỉ số quan trọng về trang web, cũng như hàng loạt điểm cải tiến đối với sản phẩm để trang web của khách hàng đạt tỷ lệ vượt qua rất cao.
Theo dõi hiệu suất bằng Lighthouse
Chúng tôi đã dựa vào dữ liệu Lighthouse để theo dõi hiệu suất. Mỗi lần một trang web được xuất bản trên nền tảng này, chúng tôi sẽ đo lường hiệu suất của trang web đó bằng cách sử dụng công cụ nội bộ có tên "Lighthouse4u". Công cụ này cung cấp Google Lighthouse dưới dạng một dịch vụ https://github.com/godaddy/lighthouse4u. Điều này cho chúng tôi biết hiệu suất của các trang web nhìn chung trong chế độ cài đặt của phòng thí nghiệm.
Vì hàng triệu trang web mà chúng tôi lưu trữ trên nền tảng của mình có nhiều tính năng và nội dung, nên điều quan trọng là phải kết hợp dữ liệu hiệu suất với siêu dữ liệu về từng trang web đang được thử nghiệm (chẳng hạn như mẫu được sử dụng, loại tiện ích được hiển thị, v.v.). Điều này cho phép chúng tôi đưa ra kết luận về những tính năng của trang web có hiệu suất thấp hơn, đồng thời cung cấp thông tin chi tiết về những điểm cần cải thiện.
Ví dụ: điều này đã giúp chúng tôi xác định rằng "cửa sổ bật lên" có tác động tiêu cực đến tốc độ trang; các trang web có tính năng này hoạt động thấp hơn 12 điểm so với khi không có. Sau khi cập nhật mã để trì hoãn việc tải JavaScript, chúng tôi đã cải thiện điểm số của Lighthouse thêm 2 điểm. Chúng tôi có thể áp dụng kiến thức này vào các tính năng khác (chẳng hạn như "biểu ngữ cookie" hiển thị ngay sau khi tải trang).
Cùng với việc xem xét các trang web có vấn đề dựa trên các tính năng, chúng tôi đã tiến hành phân tích gói JavaScript của mình và nhận thấy rằng một phần lớn kích thước của gói đến từ các phần phụ thuộc bên ngoài (immutable.js và draft.js). Chúng tôi đã giảm kích thước gói bằng cách tái cấu trúc người tiêu dùng thành các phần phụ thuộc tải từng phần theo yêu cầu. Điều này dẫn đến việc giảm hơn 50% kích thước gói JavaScript phổ biến, từ hơn 200 KB xuống còn khoảng 90 KB (giảm bớt). Kích thước gói nhỏ hơn cho phép trình duyệt tải các tài sản bên ngoài và thực thi các tập lệnh quan trọng sớm hơn trong vòng đời tải trang web ban đầu. Điều này giúp tăng Thời gian hiển thị nội dung lớn nhất (LCP) và Thời gian phản hồi lần tương tác đầu tiên (FID).
Nhờ những nỗ lực không ngừng của chúng tôi, điểm số trung bình của Lighthouse cho khách hàng đã tăng từ khoảng 40 điểm vào tháng 11 năm 2020 lên hơn 70 điểm vào tháng 5 năm 2021. Tuy nhiên, không phải tất cả các nỗ lực của chúng tôi đều hiệu quả và đôi khi chúng tôi ngạc nhiên khi kết quả không phải lúc nào cũng nhất quán giữa những gì được kiểm tra trong môi trường kiểm tra cục bộ và kết quả chúng tôi nhận được tại hiện trường. Các kết quả của phòng thí nghiệm thực sự hữu ích, nhưng đã đến lúc cần tập trung vào trải nghiệm thực tế của người dùng quan sát được trên thực tế.
Theo dõi dữ liệu thực tế của người dùng bằng Các chỉ số quan trọng về trang web
Sau khi thêm thư viện web-vitals vào trang web của khách hàng, chúng tôi có thể đo lường dữ liệu trên các thiết bị thực tế từ khách truy cập thực tế, trong đó phần cứng, tốc độ mạng, hoạt động tương tác của người dùng (chẳng hạn như cuộn hoặc nhấp) không có đường cơ sở nhất quán như trong chế độ cài đặt trong phòng thí nghiệm sử dụng Lighthouse. Đây là một bước tiến lớn theo đúng hướng, vì giờ đây chúng tôi đã có dữ liệu đại diện cho những gì khách truy cập trang web của chúng tôi đang trải qua.
Tập trung vào đường liên kết yếu nhất của chúng tôi: Điểm số tổng hợp về mức thay đổi bố cục (CLS)
Việc phân tích dữ liệu mới giúp chúng tôi có được góc nhìn mới về những việc cần làm để cải thiện tốc độ của trang web. Do những nỗ lực được thực hiện để cải thiện điểm Lighthouse, LCP phần trăm 75 của chúng tôi là 860 mili giây và FID của chúng tôi ở cùng ngưỡng dưới 10 mili giây, vì vậy chúng tôi có tỷ lệ vượt qua cao cho các chỉ số này trên trang web của khách hàng: lần lượt là 78% và 98%. Tuy nhiên, số liệu về Điểm số tổng hợp về mức thay đổi bố cục (CLS) có vẻ khá khác so với số liệu mà chúng ta đã từng sử dụng với Lighthouse. CLS của chúng tôi ở phân vị thứ 75 là 0,17 – trên ngưỡng 0,1 để "đạt" và tỷ lệ vượt qua của chúng tôi chỉ là 47% trên tất cả các trang web của chúng tôi.
Chỉ số đó đã kéo tỷ lệ chuyền bóng tổng thể xuống còn 40%. Vì vậy, chúng tôi quyết định đặt ra một mục tiêu đầy tham vọng là tăng con số này lên trên 60% vào cuối tháng 8 năm 2021. Để làm được việc đó, chúng tôi phải tập trung vào CLS.
Trong thực tế, người dùng tương tác với trang và cuộn qua nội dung "trong màn hình đầu tiên". Đây là nội dung mà Các chỉ số quan trọng về trang web ghi lại tốt hơn. Do sự thay đổi trong cách người dùng tương tác với trang web khi trang web tải lúc đầu, CLS lại khác với dữ liệu trong phòng thí nghiệm và dữ liệu hiện trường.
Cách vượt qua tất cả Các chỉ số quan trọng về trang web
Để cải thiện hiệu suất, bạn cần áp dụng phương pháp thử và sai. Ngoài ra, không phải lúc nào mọi thao tác cũng hoạt động như mong đợi. Tuy nhiên, dưới đây là một số điểm cải tiến đã giúp chúng tôi đạt được mục tiêu của mình.
Việc dành riêng không gian để tải hình ảnh đã cải thiện đáng kể điểm CLS vì điều này giúp nội dung bên dưới hình ảnh không bị thay đổi. Chúng tôi đã sử dụng thuộc tính CSS aspect-ratio để giải quyết vấn đề này trên các trình duyệt có hỗ trợ CSS. Đối với những trang web không có trình tự này, chúng tôi đã tải một hình ảnh giữ chỗ trong suốt được lưu vào bộ nhớ đệm và chỉ có kích thước một vài byte, do đó tải gần như ngay lập tức.
Hành vi hình ảnh chung này cho phép chúng tôi tính toán trước chiều cao của hình ảnh cuối cùng trong quá trình hiển thị phía máy chủ, dựa trên chiều rộng khung nhìn và tỷ lệ khung hình của hình ảnh. Kết quả là mã đánh dấu HTML với không gian theo chiều dọc được dành riêng cho hình ảnh cuối cùng. Sự cải thiện này đặc biệt có thể quan sát được trên thiết bị di động, vì hình ảnh được hiển thị trên toàn bộ khung nhìn trên thiết bị di động.
Một số thành phần trên trang web của khách hàng của chúng tôi có nội dung động (ví dụ: danh sách các bài đánh giá của khách hàng bên ngoài) và không thể chuyển đổi sang CSS thuần tuý để tận dụng các lợi ích về hiệu suất của việc hiển thị phía máy chủ. Đây là những khu vực khó cải thiện việc thay đổi bố cục vì nội dung (do đó chiều cao) sẽ thay đổi. Trong những trường hợp đó, chúng ta gói thành phần trong một vùng chứa có áp dụng min-height, được xác định trước dựa trên việc quan sát chiều cao trung bình của từng thành phần cụ thể. min-height bị xoá sau khi thành phần động bên trong kết xuất xong. Mặc dù không hoàn hảo, nhưng giải pháp này đã cho phép chúng tôi giảm đáng kể sự thay đổi bố cục.
Trong khi tập trung vào hoạt động cải thiện CLS, chúng tôi vẫn tiếp tục cải thiện LCP. Trên nhiều trang web, hình ảnh là thủ phạm lớn nhất góp phần gây ra LCP và đối với chúng tôi, đây rõ ràng là điểm cần cải thiện. Chúng tôi đã cải thiện hình ảnh tải từng phần bằng IntersectionObserver nhưng nhận thấy rằng kích thước hình ảnh chưa được thiết lập theo cách tối ưu nhất cho từng điểm ngắt (thiết bị di động, máy tính bảng, máy tính, máy tính lớn). Vì vậy, chúng tôi cập nhật mã tạo hình ảnh để kẹp và điều chỉnh tỷ lệ hình ảnh cho mỗi điểm ngắt, sau đó lại điều chỉnh tỷ lệ độ phân giải dựa trên mật độ pixel. Ví dụ: thao tác này đã giảm kích thước của một hình ảnh lớn cụ thể từ 192 KB xuống còn 102 KB.
Để nhanh chóng hiển thị các trang web trên thiết bị có kết nối mạng kém, chúng tôi đã thêm mã để tự động giảm chất lượng ảnh dựa trên tốc độ kết nối. Bạn có thể thực hiện việc này bằng cách sử dụng thuộc tính downlink do navigator.connection trả về. Chúng tôi áp dụng các tham số truy vấn dựa trên URL để giảm chất lượng hình ảnh thông qua API thành phần dựa trên các điều kiện mạng đó.
Một số mục trên trang web của khách hàng của chúng tôi được tải động. Vì biết trước những phần nào sẽ hiển thị trên một trang web nhất định khi trang web đó được xuất bản, nên chúng tôi đã sử dụng gợi ý về tài nguyên rel=preconnect để khởi động kết nối và bắt tay cần thiết trước. Chúng ta cũng sử dụng các gợi ý về tài nguyên để tải nhanh phông chữ và các tài nguyên quan trọng khác.
Khi xây dựng trang web, khách hàng thêm nhiều phần có thể có tập lệnh cùng dòng để hỗ trợ nhiều chức năng. Việc đặt các tập lệnh này nội tuyến trên toàn bộ trang HTML không phải lúc nào cũng tối ưu cho hiệu suất. Chúng tôi đã quyết định tách các tập lệnh này ra bên ngoài để cho phép trình duyệt tải và phân tích cú pháp nội dung tập lệnh một cách không đồng bộ. Bạn cũng có thể chia sẻ các tập lệnh mới được ra bên ngoài trên các trang. Điều này cho phép hiệu suất tăng thêm ở dạng lưu trình duyệt và CDN vào bộ nhớ đệm. Chúng tôi giữ các tập lệnh quan trọng trong dòng để trình duyệt phân tích cú pháp và thực thi các tập lệnh đó nhanh hơn.
Kết quả
Khi tập trung vào CLS, tỷ lệ đạt Chỉ số quan trọng chính của trang web đã tăng từ khoảng 40% lên gần 70%: cải thiện 75%!
Khi người dùng quay lại nền tảng của chúng tôi để cập nhật và xuất bản lại trang web, họ sẽ nhận được những điểm cải tiến mới nhất về hiệu suất. Kết quả là số lượng trang web có "đạt Chỉ số quan trọng chính của trang web" đã tăng đều đặn (như được thể hiện trong biểu đồ dưới đây):
Kết luận
Việc xác định các khía cạnh có thể cải thiện hiệu suất và theo dõi thành công tiến trình phụ thuộc rất nhiều vào những công cụ được sử dụng để đo lường. Mặc dù Lighthouse rất hữu ích khi đo lường hiệu suất trong màn hình đầu tiên trong "chế độ cài đặt trong phòng thí nghiệm", nhưng Lighthouse không nắm bắt chính xác các vấn đề về hiệu suất chỉ xảy ra từ hoạt động tương tác của người dùng (chẳng hạn như cuộn qua trang).
Việc theo dõi Các chỉ số quan trọng về trang web thực tế bằng siêu dữ liệu cho phép chúng tôi trực quan hoá, nhắm mục tiêu và đo lường mức độ tác động của những điểm cải tiến. Hành trình cải thiện điểm số Các chỉ số quan trọng về trang web đã giúp đội ngũ của chúng tôi xác định và thay thế các mẫu hình không mang lại hiệu quả cao trong cơ sở mã của mình. Đôi khi, những thay đổi đầy hứa hẹn không tạo ra được gần như tác động mà chúng tôi mong đợi, nhưng có lúc khác thì điều ngược lại lại xảy ra. Thế giới này không còn quá xa lạ với bạn, vì vậy bạn phải tiếp tục cố gắng.