Khi đặt ngân sách cá nhân, ngân sách kinh doanh hoặc ngân sách gia đình, bạn đang đặt ra một giới hạn chi tiêu và đảm bảo rằng bạn không vượt quá giới hạn đó. 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.
Khi thiết lập và thực thi ngân sách hiệu suất, 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 của bạn qua một 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 những 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 trang chính, bạn có thể bắt đầu phân tích các trang đó. Trước tiên, chúng ta sẽ tập trung vào các cột mốc thời gian đo lường tốt nhất trải nghiệm người dùng.
Trong bảng điều khiển Audits (Kiểm tra) của Công cụ cho nhà phát triển của Chrome, bạn sẽ thấy Lighthouse. Chạy quy trình kiểm tra trên từng trang trong Cửa sổ khách để ghi lại 2 thời gian sau:
Hãy lấy một công cụ tìm kiếm có tính chuyên biệt cao, Doggos.com, làm ví dụ. Doggos.com hướng đến việc lập chỉ mục tất cả nội dung liên quan đến chó trên Internet và các trang quan trọng nhất của trang web này là trang chủ và trang kết quả. Dưới đây là các chỉ số 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 |
|---|---|---|
| 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 |
| Thiết bị di động | FCP (hiển thị nội dung đầu tiên) | 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 đối thủ cạnh tranh
Sau khi phân tích trang web của riêng mình, bạn có thể phân tích trang web của đối thủ cạnh tranh. So sánh kết quả của những trang web tương tự như trang web của bạn là một cách hiệu quả để xác định ngân sách hiệu suất. Đây là một bước quan trọng, dù bạn đang làm việc trên một dự án đã có từ trước hay bắt đầu từ đầu. Bạn sẽ có lợi thế cạnh tranh khi nhanh hơn đối thủ.
Nếu bạn không chắc nên xem những trang web nào, hãy thử một số công cụ sau:
- Từ khoá "related:" của Google Tìm kiếm
- Tính năng các trang web tương tự của Alexa
- SimilarWeb
Để có đượ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
Trong ví dụ này, công cụ tìm kiếm chuyên biệt của chúng tôi có một số ít đố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. Ngày nay, hơn một nửa lưu lượng truy cập Internet diễn ra trên mạng di động và việc sử dụng số điện thoại di động làm mặc định sẽ mang lại lợi ích không chỉ 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ự và làm nổi bật trang web nhanh nhất trong số đó. Biểu đồ như thế này giúp bạn hiểu rõ hơn về hiệu suất 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 |
|---|---|---|
| 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à một nguyên tắc hay cho việc này là quy tắc 20%. Nghiên cứu cho thấy người dùng nhận thấy sự khác biệt về thời gian phản hồi khi thời gian này lớn hơn 20%. Điều này có nghĩa là nếu muốn có hiệu suất tốt hơn đáng kể so với trang web tương tự tốt nhất, bạn phải nhanh hơn ít nhất 20%.
| Đo lường | 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 | 6.500 mili giây | 2.520 mili giây |
Nếu bạn đang cố gắng tối ưu hoá một trang web hiện có, thì mục tiêu đó có thể không thể đạt được. Đây không phải là dấu hiệu cho thấy bạn nên từ bỏ. Bắt đầu bằng những bước nhỏ và đặt ngân sách nhanh hơn 20% so với tốc độ hiện tại. Tiếp tục tối ưu hoá từ đó.
Đối với Doggos.com, ngân sách được điều chỉnh có thể trông như sau.
| Đo lường | 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 | 6.500 mili giây | 5.200 mili giây | 2.520 mili giây |
Kết hợp các chỉ số khác nhau
Ngân sách hiệu suất hợp lý là sự kết hợp của nhiều loại chỉ số. Chúng ta đã xác định ngân sách cho thời gian đạt được các cột mốc và giờ đây, chúng ta sẽ thêm 2 cột mốc nữa:
- chỉ số dựa trên số lượng
- 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
Dù tổng trọng lượng trang 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/giảm thiểu). Điều này đảm bảo trang web của bạn sẽ tải nhanh ngay cả trên các thiết bị giá rẻ và mạng 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, nhưng đừng chi tiêu quá nhiều. Theo dữ liệu của HTTP Archive trong năm qua, trọng lượng trang trung bình trên cả máy tính và thiết bị di động đều trên 1 MB. Để có một trang web hoạt động hiệu quả, bạn phải đặt mục tiêu thấp hơn nhiều so với những con số trung bình này.
Dưới đây là một vài ví dụ dựa trên ngân sách 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 | ~170 KB | 5 giây |
| Mạng 4G chậm | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3 giây |
| Wi-Fi | Máy tính | 300 | 250 | 50 | 50 | 100 | ~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 việc khó khăn. Một trang web thương mại điện tử có nhiều ảnh sản phẩm sẽ rất khác với một cổng thông tin tin tức chủ yếu là văn bản. Nếu bạn có quảng cáo hoặc số liệu phân tích trên trang web của mình, thì điều đó sẽ làm tăng lượng JavaScript mà bạn đang phân phối.
Hãy sử dụng bảng trên làm điểm bắt đầu và điều chỉnh dựa trên loại nội dung mà bạn đang xử lý. Xác định nội dung mà các trang của bạn sẽ có, xem xét nghiên cứu của bạn và đưa ra phỏng đoán có căn cứ về kích thước của từng thành phần. Ví dụ: nếu bạn đang tạo một trang web có nhiều hình ảnh, hãy đặt giới hạn nghiêm ngặt hơn cho kích thước JS.
Sau khi có một trang web hoạt động, hãy kiểm tra hiệu suất của bạn dựa trên các chỉ số hiệu suất lấy người dùng làm trung tâm 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 số 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ố khác nhau, bao gồm cả Nội dung đầu tiên hiển thị và Thời gian tương tác.
Khi bạn cố gắng xây dựng một trang web tuyệt vời, hãy đặt ngân sách điểm hiệu suất của Lighthouse ít nhất là 85 (trên 100). Sử dụng Lighthouse CI để thực thi yêu cầu này trên các yêu cầu kéo.
Ưu tiên
Hãy tự hỏi bạn mong đợi mức độ tương tác nào 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 hiển thị nhanh và giữ FCP ở mức 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, ưu tiên hàng đầu là TTI thấp.
Tìm hiểu chính xác phần nào trong đối tượng của bạn duyệt web trên máy tính so với trên thiết bị di động và ưu tiên cho phù hợp. Một cách để tìm hiểu điều này là kiểm tra hoạt động của đối tượng mục tiêu 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
Đảm bảo ngân sách hiệu suất được thực thi trong suốt dự án và kết hợp ngân sách đó vào quy trình tạo bản dựng.