Khi đặt ngân sách cá nhân, ngân sách doanh nghiệp hoặc gia đình, bạn đang đặt giới hạn cho chi tiêu của mình và đảm bảo bạn luôn chi tiêu trong phạm vi đó. Ngân sách hiệu suất hoạt động theo cách tương tự, nhưng dành cho các chỉ số ảnh hưởng đến hiệu suất của trang web.
Với ngân sách hiệu suất được thiết lập và thực thi, bạn có thể chắc chắn rằng trang web của mình sẽ hiển thị nhanh nhất có thể. Điều này sẽ mang lại trải nghiệm tốt hơn cho khách truy cập và tác động tích cực đến các chỉ số kinh doanh.
Sau đây là cách xác định ngân sách hiệu suất đầu tiên qua vài bước đơn giản.
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 trang web hiện có, hãy bắt đầu bằng cách xác định các trang quan trọng nhất. Ví dụ: đây có thể là những trang có lưu lượng truy cập của người dùng cao nhất hoặc trang đích của sản phẩm.
Sau khi xác định được các trang chính của mình, bạn nên phân tích các trang đó. Đầu tiên, chúng ta sẽ tập trung vào các mốc thời gian đo lường chính xác nhất trải nghiệm người dùng.
Trong bảng điều khiển Kiểm tra trong Công cụ của Chrome cho nhà phát triển, bạn sẽ thấy Lighthouse. Chạy kiểm tra trên từng trang trong Cửa sổ khách để ghi lại hai lần sau:
Hãy xem ví dụ về một công cụ tìm kiếm có tính chuyên môn cao, Doggos.com. Mục đích của Doggos.com là lập chỉ mục mọi nội dung liên quan đến chó trên Internet và các trang quan trọng nhất của công cụ này là trang chủ và trang kết quả. Đây là các chỉ số về FCP và TTI được đo lường cho trang web trên máy tính và thiết bị di động.
| Máy tính | FCP (hiển thị nội dung đầu tiên) | TTI (Chỉ số TTI) |
|---|---|---|
| Trang chủ | 1.680 mili giây | 5.550 mili giây |
| Trang kết quả | 2.060 mili giây | 6.690 mili giây |
| Di động | FCP (hiển thị nội dung đầu tiên) | TTI (Chỉ số TTI) |
|---|---|---|
| Trang chủ | 1.800 mili giây | 6.150 mili giây |
| Trang kết quả | 1.100 mili giây | 7.870 mili giây |
Phân tích tính cạnh tranh
Sau khi bạn đã phân tích trang web của mình, hãy phân tích trang web của đối thủ cạnh tranh. So sánh kết quả từ các trang web tương tự với trang web của bạn là một cách tuyệt vời để tìm ra ngân sách hiệu suất. Cho dù bạn đang thực hiện một dự án đã có từ lâu hay bắt đầu từ con số không, đây là một bước quan trọng. Bạn có được lợi thế cạnh tranh khi hoạt động nhanh hơn đối thủ.
Nếu không chắc nên xem xét trang web nào, bạn có thể thử một số công cụ dưới đây:
- Từ khoá "có liên quan" trên Google Tìm kiếm
- Tính năng trang web tương tự của Alexa
- SimilarWeb
Để có bức tranh thực tế, hãy cố gắng tìm khoảng 10 đối thủ cạnh tranh.
Ngân sách cho các mốc thời gian
Công cụ tìm kiếm đặc thù trong ví dụ này có một số đối thủ cạnh tranh và chúng tôi sẽ tập trung vào việc tối ưu hoá trang chủ cho thiết bị di động. Hơn một nửa lưu lượng truy cập Internet hiện nay diễn ra trên mạng di động và việc sử dụng số di động làm mặc định sẽ không chỉ có lợi cho người dùng thiết bị di động mà còn cho cả người dùng máy tính.
Tạo một biểu đồ có thời gian FCP và TTI cho tất cả các trang web tương tự nhau và làm nổi bật trang web nhanh nhất trong danh sách. Biểu đồ như biểu đồ này cung cấp cho bạn hình ảnh rõ ràng hơn về hiệu quả hoạt động của trang web so với đối thủ cạnh tranh.
| Trang web/Trang chủ | FCP (hiển thị nội dung đầu tiên) | TTI (Chỉ số TTI) |
|---|---|---|
| goggles.com | 880 mili giây | 3.150 mili giây |
| Doggos.com | 1.800 mili giây | 6.500 mili giây |
| quackquackgo.com | 2.680 mili giây | 4.740 mili giây |
| ding.xyz | 2.420 mili giây | 7.040 mili giây |
Bạn vẫn có thể cải thiện và có một nguyên tắc phù hợp để làm việc này, đó là quy tắc 20%. Nghiên cứu chỉ ra rằng người dùng nhận ra sự khác biệt về thời gian phản hồi khi con số đó lớn hơn 20%. Điều này có nghĩa là nếu muốn cải thiện đáng kể so với trang web tương đương tốt nhất, bạn phải nhanh hơn ít nhất 20%.
| Đo | Thời gian hiện tại | Ngân sách (nhanh hơn 20% so với đối thủ cạnh tranh) |
|---|---|---|
| FCP (hiển thị nội dung đầu tiên) | 1.800 mili giây | 704 mili giây |
| TTI (Chỉ số TTI) | 6.500 mili giây | 2.520 mili giây |
Nếu bạn đang cố tối ưu hoá một trang web hiện tại mà có vẻ như không thể đạt được mục tiêu. Đây không phải là dấu hiệu cho thấy bạn nên bỏ cuộc. Hãy bắt đầu từ những bước nhỏ và đặt ngân sách nhanh hơn 20% so với tốc độ hiện tại. Hãy tiếp tục tối ưu hoá từ đó.
Đối với Doggos.com, ngân sách được sửa đổi có thể có dạng như sau.
| Đo | Thời gian hiện tại | Ngân sách ban đầu (nhanh hơn 20% so với thời gian hiện tại) | Mục tiêu dài hạn (nhanh hơn 20% so với đối thủ cạnh tranh) |
|---|---|---|---|
| FCP (hiển thị nội dung đầu tiên) | 1.800 mili giây | 1.440 mili giây | 704 mili giây |
| TTI (Chỉ số TTI) | 6.500 mili giây | 5.200 mili giây | 2.520 mili giây |
Kết hợp nhiều chỉ số
Ngân sách hiệu suất ổn định sẽ kết hợp nhiều loại chỉ số. Chúng ta đã xác định ngân sách cho các mốc quan trọng và giờ đây, chúng ta sẽ bổ sung thêm 2 ngân sách nữa vào danh sách kết hợp:
- các chỉ số dựa trên số lượng
- các chỉ số dựa trên quy tắc
Ngân sách cho các chỉ số dựa trên số lượng
Bất kể tổng trọng lượng trang mà bạn đưa ra là bao nhiêu, hãy cố gắng phân phối dưới 170 KB tài nguyên đường dẫn quan trọng (nén/rút gọn). Điều này đảm bảo trang web của bạn sẽ hoạt động nhanh ngay cả trên các thiết bị rẻ tiền và 3G chậm.
Bạn có thể có ngân sách lớn hơn cho trải nghiệm trên máy tính để bàn, nhưng đừng quá lo lắng. Trọng lượng trung bình của trang trên cả máy tính và thiết bị di động là hơn 1MB theo dữ liệu Lưu trữ HTTP cho năm ngoái. Để có được một trang web hoạt động hiệu quả, bạn phải nhắm đến thấp hơn những con số trung bình này.
Sau đây là một vài ví dụ dựa trên ngân sách của TTI:
| Mạng | Thiết bị | JS | Hình ảnh | CSS | HTML | Phông chữ | Tổng | Ngân sách thời gian tương tác |
|---|---|---|---|---|---|---|---|---|
| Mạng 3G chậm | Moto G4 | 100 | 30 | 10 | 10 | 20 | Khoảng 170 KB | 5 giây |
| Mạng 4G chậm | Moto G4 | 200 | 50 | 35 | 30 | 30 | Khoảng 345 KB | 3 giây |
| WiFi | Máy tính | 300 | 250 | 50 | 50 | 100 | Khoảng 750 KB | 2 giây |
Việc xác định ngân sách dựa trên các chỉ số về số lượng là một công việc phức tạp. Một trang web thương mại điện tử có rất nhiều ảnh sản phẩm khác với một cổng tin tức chủ yếu là văn bản. Nếu bạn có quảng cáo hoặc trang phân tích trên trang web của mình, thì số lượng JavaScript mà bạn vận chuyển sẽ tăng lên.
Hãy bắt đầu bằng bảng trên và điều chỉnh dựa trên loại nội dung mà bạn đang sử dụng. Xác định nội dung mà các trang của bạn sẽ bao gồm, xem lại nghiên cứu của bạn và đưa ra dự đoán phù hợp cho từng kích thước nội dung. Ví dụ: nếu bạn đang xây dựng một trang web có nhiều hình ảnh, hãy đặt các giới hạn nghiêm ngặt hơn cho kích thước JS.
Sau khi bạn có một trang web đang hoạt động, hãy kiểm tra hiệu suất của trang web dựa trên các chỉ số hiệu suất tập trung vào người dùng và điều chỉnh ngân sách.
Ngân sách cho các chỉ số dựa trên quy tắc
Các chỉ số dựa trên quy tắc rất hiệu quả là điểm Lighthouse. Lighthouse chấm điểm ứng dụng của bạn theo 5 danh mục và một trong số đó là hiệu suất. Điểm hiệu suất được tính dựa trên 5 chỉ số, bao gồm cả Thời gian hiển thị nội dung đầu tiên và Thời gian tương tác.
Khi bạn cố gắng xây dựng một trang web chất lượng cao, hãy đặt ngân sách điểm hiệu suất của Lighthouse thành ít nhất là 85 (trên 100). Sử dụng Lighthouse CI để thực thi theo yêu cầu kéo.
Ưu tiên
Hãy tự hỏi mức độ tương tác mà bạn mong đợi trên trang web của mình. Nếu đó là một trang web tin tức, mục tiêu chính của người dùng là đọc nội dung. Vì vậy, bạn nên tập trung vào việc kết xuất nhanh chóng và duy trì mức FCP thấp. Khách truy cập Doggos.com muốn nhấp vào các đường liên kết có liên quan càng sớm càng tốt, vì vậy, mức độ ưu tiên hàng đầu là TTI thấp.
Tìm hiểu chính xác phần đối tượng của bạn duyệt xem trên máy tính so với trên thiết bị di động, từ đó xác định mức độ ưu tiên phù hợp. Một cách để tìm hiểu điều này là xem đối tượng của bạn đang thực hiện hoạt động gì trên trang web của đối thủ cạnh tranh thông qua trang tổng quan báo cáo trải nghiệm người dùng trên Chrome.
Các bước tiếp theo
Hãy đảm bảo ngân sách hiệu suất của bạn được thực thi trong suốt dự án và kết hợp ngân sách đó vào quy trình xây dựng.