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