Thiết lập performance budget đầu tiên của bạn

Khi bạn thiết lập ngân sách cho cá nhân, gia đình hoặc tổ chức kinh doanh, bạn thiết lập một giới hạn chi tiêu và đảm bảo rằng bản thân không vượt qua ranh giới đó. Performance budget (ngân sách hiệu suất) hoạt động theo cách tương tự, nhưng là cho các chỉ số ảnh hưởng đến hiệu suất website.

Với việc thiết lập và thi hành performance budget bạn có thể đảm bảo rằng trang của bạn sẽ kết xuất nhanh nhất có thể. Điều này sẽ cung cấp trải nghiệm người dùng tốt hơn cho khách ghé thăm và ảnh hưởng tích cực lên các chỉ số kinh doanh.

Dưới đây là cách xác định performance budget đầu tiên bằng một số bước đơn giản.

Các phân tích sơ bộ

Nếu bạn đang cố gắng cải thiện hiệu suất của một website đã có, hãy bắt đầu bằng cách xác định các trang quan trọng nhất. Lấy ví dụ, đó có thể là các trang có lưu lượng truy cập cao nhất hoặc trang landing page (đích) dành cho sản phẩm.

Sau khi bạn xác định được các trang quan trọng, đây là lúc để phân tích chúng. Đầu tiên, chúng ta sẽ tập trung vào các mốc thời gian tốt nhất để đo đạc trải nghiệm người dùng.

Bên dưới panel Audits trong Chrome DevTools, bạn sẽ tìm thấy Lighthouse. Chạy kiểm tra trên từng trang trong Guest window (1) để ghi lại hai thời điểm:

(1): Sử dụng Guest window cho phép bạn có được môi trường kiểm tra sạch sẽ, không có bất kỳ addon mở rộng nào của Chrome gây ảnh hưởng đến kiểm tra.

panel Audit

Chúng ta sẽ bắt đầu với doggos.io (2), một trang tìm kiếm rất hẹp. Doggos.io hướng đến việc lập chỉ mục mọi thứ liên quan đến chó trên internet, và trang quan trọng nhất của nó là trang chủ và trang kết quả. Bên dưới đây là các chỉ số FCP và TTI đo trên trang cho cả máy bàn và di động:

Máy bànFCPTTI
Trang chủ1,680 ms5,550 ms
Trang kết quả2,060 ms6,690 ms
Phân tích trên máy bàn cho trang doggos.io
Di độngFCPTTI
Trang chủ1,800 ms6,150 ms
Trang kết quả1,100 ms7,870 ms
Phân tích trên di động cho trang doggos.io

(2): Đáng tiếc trang doggos.io vào thời điểm tôi dịch bài này không còn tồn tại nữa để bạn tiện kiểm tra, tuy nhiên điều này không ảnh hưởng gì lắm, bạn nắm ý tưởng cốt lõi là được. P/S: có vẻ trang doggos.io đã đổi tên miền thành doggos.com

Phân tích đối thủ cạnh tranh

Sau khi bạn phân tích xong trang của mình, đây là lúc phân tích trang của các đối thủ cạnh tranh. So sánh các kết quả từ các trang tương tự với trang của bạn là cách rất tốt để tìm ra performance budget. Dù là bạn đang làm việc trên một dự án đã triển khai hoặc bắt đầu từ con số không, thì đây vẫn là bước quan trọng. Bạn sẽ có được lợi thế cạnh tranh khi bạn nhanh hơn đối thủ của mình.

Nếu bạn không biết chắc cần kiểm tra trang nào, dưới đây là một vài công cụ bạn có thể thử:

  1. Tìm kiếm trên Google với từ khóa “related:” (tuy nhiên cách này chỉ phù hợp với các trang phổ biến)
  2. Sử dụng tính năng Alexa’s similar sites (trang tương tự)
  3. SimilarWeb
các trang liên quan

Để có được bức tranh thực tế, bạn hãy thử ít nhất là 10 đối thủ cạnh tranh.

Budget cho các mốc thời gian

Trong ví dụ này, thị trường ngách máy tìm kiếm có nhiều đối thủ cạnh tranh và chúng tôi tập trung vào việc tối ưu hóa trang chủ trên thiết bị di động. Có hơn một nửa lưu lượng truy cập internet ngày nay xảy ra trên thiết bị kết nối di động và việc sử dụng các chỉ số di động làm mặc định sẽ đem lại lợi ích không chỉ cho người dùng di động mà còn cho cả người dùng máy bàn nữa.

Tạo một bảng với các mốc thời gian FCP và TTI cho tất cả các trang web tương tự và đánh dấu trang có tốc độ cao nhất trong nhóm. Một biểu đồ như thế này cho bạn bức tranh rõ ràng về chuyện trang của bạn thực hiện tốt đến đâu so với đối thủ cạnh tranh.

Site/HomepageFCPTTI
goggles.com880 ms3,150 ms
doggos.io1,800 ms6,500 ms
quackquackgo.com2,680 ms4,740 ms
ding.xyz2,420 ms7,040 ms
Phân tích đối thủ cạnh tranh trên mạng 3G của trang doggos.io

Doggos.io có vẻ khá ổn với chỉ số FCP nhưng lại tụt hậu nghiêm trọng với chỉ số TTI.

Như vậy là có chỗ cần phải cải thiện và hướng dẫn tốt để làm điều này là quy tắc 20%. Nghiên cứu cho biết là người dùng nhận ra sự khác biệt trong thời gian phản hồi khi nó lớn hơn 20%. Điều này có nghĩa là nếu bạn muốn tốt hơn một cách rõ ràng so với đối thủ cạnh tranh tốt nhất, bạn phải nhanh hơn đối thủ ít nhất 20%.

Chỉ sốThời gian hiện tạiBudget (nhanh hơn 20% so với đối thủ cạnh tranh)
FCP1,800 ms704 ms
TTI6,500 ms2,520 ms
Performance budget giúp doggos thắng thế đối thủ cạnh tranh

Nếu bạn cố gắng tối ưu hóa một trang đã có (ý là không phải bạn xây dựng từ đầu) mà mục tiêu của nó dường như không thể đạt được. Đây không phải là dấu hiệu để bạn từ bỏ. Hãy bắt đầu với các bước nhỏ và thiết lập budget nhanh hơn 20% so với tốc độ hiện tại của bạn. Rồi sau đó tiếp tục tối ưu tiếp.

Với trang doggos.io, budget chỉnh sửa lại sẽ trông giống như thế này.

Chỉ sốThời gian hiện tạiBudget ban đầu (nhanh hơn 20% so với hiện tại)Mục tiêu dài hạn (nhanh hơn 20% so với đối thủ cạnh tranh)
FCP1,800 ms1,440 ms704 ms
TTI6,500 ms5,200 ms2,520 ms
Performance budget sửa đổi của doggos.io

Kết hợp các chỉ số khác nhau

Performance budget vững chắc cần kết hợp nhiều kiểu chỉ số khác nhau. Chúng ta đã xác định được budget cho nhiều mốc thời gian và đây là lúc chúng ta cần bổ sung thêm hai chỉ số phối hợp nữa:

  • Các chỉ số định lượng
  • Các chỉ số dựa trên quy tắc

Budget cho các chỉ số định lượng

Cho dù tổng dung lượng trang mà bạn làm việc là bao nhiêu đi nữa, hãy cố gắng phân phối các tài nguyên thuộc đường dẫn quan trọng dưới 170 KB (đã nén/thu nhỏ). Điều này giúp đảm bảo trang của bạn sẽ tải nhanh ngay cả trên thiết bị di động rẻ tiền và có kết nối 3G chậm.

Bạn có thể có budget lớn hơn cho trải nghiệm trên máy bàn, nhưng đừng “vung tay quá trán” (go wild). Dung lượng trang trung vị (median*) trên cả máy bàn và di động vào năm ngoái là hơn 1 MB theo thống kê từ HTTP Archive. Để có được trang web có hiệu suất tốt bạn cần hướng đến các chỉ số thấp hơn các giá trị trung vị này.

(*): median / trung vị là khái niệm dễ bị nhầm lẫn với trung bình, nhưng nó là hai khái niệm hoàn toàn khác nhau, dù có một số điểm giống.

Dưới đây là một vài ví dụ dựa trên budget TTI:

MạngThiết bịJSẢnhCSSHTMLFontsTổngBuget TTI
3G chậmMoto G410030101020~170 KB5s
4G chậmMoto G420050353030~345 KB3s
WiFiMáy bàn3002505050100~750 KB2s
Kích cỡ khuyến nghị cho các tài nguyên thuộc đường dẫn quan trọng.

Xác định budget dựa trên các chỉ số định lượng là nhiệm vụ khó khăn. Một trang thương mại điện tử phải tải nhiều ảnh sản phẩm sẽ rất khác với trang tin tức hầu hết là chữ. Nếu bạn có quảng cáo và mã phân tích trên trang, bạn sẽ làm gia tăng dung lượng JavaScript cần phải chuyển cho người dùng.

Sử dụng bảng trên như điểm gợi ý và điều chỉnh lại dựa trên kiểu nội dung mà bạn phải làm việc trong thực tế. Xác định trang bạn bao gồm những gì, đánh giá lại các phát hiện của bạn và dự đoán một cách cẩn trọng kích cỡ các tài nguyên cụ thể. Lấy ví dụ, nếu bạn xây dựng trang web có nhiều ảnh, hãy đặt giới hạn chặt chẽ hơn cho kích cỡ của JS.

Khi bạn có website đi vào hoạt động rồi, hãy kiểm tra các chỉ số hiệu suất tập trung vào người dùng đang ở mức nào và điều chỉnh budget của bạn.

Budget cho các chỉ số dựa trên quy tắc

Điểm số Lighthouse là chỉ số dựa trên quy tắc rất hiệu quả. Lighthouse chấm điểm ứng dụng của bạn trong 5 nhóm và một trong số chúng là về hiệu suất. Điểm số hiệu suất được tính toán dựa trên 5 chỉ số khác nhau, bao gồm First Contentful Paint và Time to Interactive.

Khi bạn cố gắng xây dựng một trang có hiệu suất tốt, hãy thiết lập điểm số hiệu suất Lighthouse có budget ít nhất là 85 (trên điểm tối đa là 100). Sử dụng Ligthouse CI để thực thi nó trên pull-requests.

Ưu tiên

Bạn phải tự hỏi bản thân về mức độ tương tác mà bạn mong muốn trên trang của mình. Nếu nó là trang tin tức, mục tiêu trọng tâm của người dùng là đọc nội dung vì thế bạn phải tập trung vào việc kết xuất nội dung nhanh chóng và giữ FCP thấp. Người ghé thăm trang Doggos.com thì lại muốn click vào các liên kết liên quan nhanh nhất có thể, vì thế ưu tiên hàng đầu là TTI thấp.

Tìm hiểu chỉnh xác thành phần nào người dùng của bạn đang tìm kiếm trên máy bàn cũng như di động và thực hiện các ưu tiên theo đó. Một cách để tìm ra điều này là kiểm tra xem khách hàng của bạn làm gì trên website của đối thủ cạnh tranh, thông qua báo cáo trải nghiệm người dùng của Chrome.

báo cáo trải nghiệm người dùng của Chrome
Dữ liệu phân phối thiết bị từ báo cáo Trải nghiệm người dùng Chrome

Bước kế tiếp

Bạn cần phải đảm bảo performance budget được thực thi xuyên suốt dự án và tích hợp nó vào trong quá trình xây dựng trang của bạn.

(Dịch từ bài viết Your first performance budget, tác giả: Milica Mihajlija, trang web[.]dev)

Vài lời của người dịch

Trong bài viết này, tác giả hướng dẫn bạn cách xác định perfomance budget, chủ yếu dựa trên đối thủ cạnh tranh đang làm điều đó tốt đến đâu để đưa ra con số phấn đấu nhằm vượt qua họ, và trong nhiều trường hợp nếu mục tiêu đó quá sức thì vượt qua chính mình rồi dần dần tiến bộ.

Bên cạnh dựa vào đối thủ, cũng có các thông số “cứng” mà bạn cần đạt tới, chủ yếu nó dựa trên thống kê trên thiết bị trung bình và mạng 3G chậm, các chỉ số “cứng” cần phải đạt tới để trang không bị chậm.

Tìm đối thủ cạnh tranh bằng các thuật toán mà Google gợi ý chủ yếu hiệu quả với trang tiếng Anh, trang tiếng Việt không dễ như thế, nhưng bạn vẫn có thể tìm được chúng bằng cách tìm kiếm các từ khóa quan trọng về lĩnh vực mà bạn đang tham gia (những trang đứng đầu trong kết quả trả về), tất nhiên việc này sẽ mất thời gian hơn, nhưng có lẽ cũng không mất hơn vài tiếng.

Leave a Comment