Hiệu suất là một phần quan trọng trong trải nghiệm người dùng và ảnh hưởng đến các chỉ số kinh doanh. Bạn rất dễ nghĩ rằng nếu bạn là một nhà phát triển giỏi thì bạn sẽ sở hữu một trang web có hiệu suất cao, nhưng sự thật là hiệu suất tốt hiếm khi là tác dụng phụ. Giống như hầu hết những việc khác, bạn phải xác định mục tiêu một cách rõ ràng để đạt được mục tiêu. Bắt đầu hành trình này bằng cách đặt ngân sách hiệu suất.
Định nghĩa
Ngân sách hiệu suất là một tập hợp các giới hạn được áp dụng cho những chỉ số có ảnh hưởng đến hiệu suất của trang web. Đó có thể là tổng kích thước của một trang, thời gian tải trên mạng di động hoặc thậm chí là số lượng yêu cầu HTTP được gửi. Việc xác định ngân sách sẽ giúp bắt đầu cuộc trò chuyện về hiệu suất web. Đây là điểm tham khảo để đưa ra các quyết định về thiết kế, công nghệ và cách thêm tính năng.
Việc có ngân sách cho phép nhà thiết kế suy nghĩ về hiệu quả của hình ảnh có độ phân giải cao và số lượng phông chữ web họ chọn. Điều này cũng giúp nhà phát triển so sánh các phương pháp khác nhau cho một vấn đề, đồng thời đánh giá các khung và thư viện dựa trên kích thước và chi phí phân tích cú pháp.
Chọn chỉ số
Chỉ số dựa trên số lượng ⚖️
Các chỉ số này rất hữu ích trong giai đoạn đầu của quá trình phát triển vì chúng làm nổi bật tác động của việc thêm hình ảnh và tập lệnh nặng. Các định dạng này cũng dễ dàng trao đổi với cả nhà thiết kế và nhà phát triển.
Chúng tôi đã đề cập đến một vài yếu tố mà bạn có thể đưa vào ngân sách hiệu suất như quy mô trang và số lượng yêu cầu HTTP, nhưng bạn có thể chia các mục này thành các giới hạn chi tiết hơn như:
- Kích thước tối đa của hình ảnh
- Số phông chữ web tối đa
- Kích thước tối đa của tập lệnh, bao gồm cả khung
- Tổng số tài nguyên bên ngoài, chẳng hạn như tập lệnh của bên thứ ba
Tuy nhiên, những con số này không cho bạn biết nhiều về trải nghiệm người dùng. Hai trang có cùng số lượng yêu cầu hoặc cùng trọng số có thể hiển thị khác nhau tuỳ thuộc vào thứ tự tài nguyên được yêu cầu. Nếu một tài nguyên quan trọng như hình ảnh chính hoặc biểu định kiểu trên một trong các trang được tải muộn trong quy trình, thì người dùng sẽ chờ lâu hơn để thấy nội dung hữu ích và nhận thấy trang đó chậm hơn. Nếu trên trang khác, các phần quan trọng nhất tải nhanh, họ thậm chí có thể không nhận thấy nếu phần còn lại của trang không tải.
Đây là lý do tại sao việc theo dõi một loại chỉ số khác lại quan trọng.
Dấu thời gian của mốc quan trọng ⏱️
Dấu thời gian của mốc quan trọng đánh dấu các sự kiện xảy ra trong khi tải trang, chẳng hạn như sự kiện DOMContentLoaded hoặc tải. Thời gian hữu ích nhất là các chỉ số hiệu suất lấy người dùng làm trung tâm để cho bạn biết đôi điều về trải nghiệm khi tải một trang. Các chỉ số này được cung cấp thông qua API trình duyệt và là một phần của báo cáo Lighthouse.
Hiển thị nội dung đầu tiên (FCP) đo thời điểm trình duyệt hiển thị bit nội dung đầu tiên từ DOM, như văn bản hoặc hình ảnh.
Thời gian tương tác (TTI) đo lường thời gian cần thiết để một trang có tính tương tác hoàn toàn và phản hồi đáng tin cậy với hoạt động đầu vào của người dùng. Đây là một chỉ số rất quan trọng cần theo dõi nếu bạn dự kiến sẽ có bất kỳ loại tương tác nào của người dùng trên trang như nhấp vào đường liên kết, nút, nhập hoặc sử dụng các thành phần biểu mẫu.
Chỉ số dựa trên quy tắc 💯
Lighthouse và WebPageTest tính điểm hiệu suất dựa trên các quy tắc chung về các phương pháp hay nhất mà bạn có thể sử dụng làm nguyên tắc. Ngoài ra, Lighthouse cũng cung cấp cho bạn các gợi ý để tối ưu hoá đơn giản.
Bạn sẽ nhận được kết quả tốt nhất nếu theo dõi kết hợp các chỉ số hiệu suất dựa trên số lượng và tập trung vào người dùng. Hãy tập trung vào kích thước tài sản trong các giai đoạn đầu của dự án và bắt đầu theo dõi FCP và TTI càng sớm càng tốt.
Thiết lập đường cơ sở
Cách duy nhất để thực sự biết điều gì hoạt động tốt nhất cho trang web của bạn là thử tìm kiếm, nghiên cứu và sau đó kiểm tra kết quả của bạn. Phân tích mức độ cạnh tranh để xem mức độ đóng góp của bạn. 🕵️
Nếu bạn không có thời gian cho việc đó, dưới đây là các con số mặc định hữu ích để giúp bạn bắt đầu:
- Thời gian tương tác dưới 5 giây
- Dưới 170 KB tài nguyên đường dẫn quan trọng (được nén/rút gọn)
Những số này được tính dựa trên thiết bị cơ sở trong thực tế và tốc độ mạng 3G. Hơn một nửa lưu lượng truy cập Internet ngày nay diễn ra trên mạng di động, vì vậy, bạn nên sử dụng tốc độ mạng 3G làm điểm bắt đầu.
Ví dụ về ngân sách
Bạn nên đặt sẵn ngân sách cho các loại trang khác nhau trên trang web của mình vì nội dung thay đổi. Ví dụ:
- Trang sản phẩm của chúng tôi phải gửi dưới 170 KB JavaScript trên thiết bị di động
- Trang tìm kiếm của chúng tôi phải có hình ảnh máy tính có dung lượng dưới 2 MB
- Trang chủ của chúng tôi phải tải và có tính tương tác trong < 5 giây trên mạng 3G chậm trên điện thoại Moto G4
- Blog của chúng tôi phải đạt điểm trên 80 về các bài kiểm tra hiệu suất của Lighthouse
Thêm ngân sách hiệu suất vào quy trình xây dựng của bạn
Việc chọn công cụ cho việc này sẽ phụ thuộc rất nhiều vào quy mô dự án và nguồn lực mà bạn có thể dành cho nhiệm vụ đó. Có một số công cụ nguồn mở có thể giúp bạn thêm ngân sách vào quá trình xây dựng:
Nếu có chỉ số nào đó vượt quá ngưỡng đã xác định, thì bạn có thể:
- Tối ưu hoá một tính năng hoặc thành phần hiện có 🛠️
- Xoá tính năng hoặc thành phần hiện có 🗑️
- Không thêm tính năng hoặc tài sản mới ✋⛔
Theo dõi hiệu quả hoạt động
Khi đảm bảo trang web của bạn đủ nhanh, bạn phải tiếp tục đo lường sau lần khởi chạy đầu tiên. Việc theo dõi các chỉ số này theo thời gian và nhận dữ liệu từ người dùng thực sẽ cho bạn biết những thay đổi về hiệu suất ảnh hưởng như thế nào đến các chỉ số kinh doanh chính.
Tóm tắt
Mục đích của ngân sách hiệu suất là đảm bảo bạn tập trung vào hiệu suất trong suốt dự án và việc đặt ngân sách sớm sẽ giúp ngăn chặn việc theo dõi ngược sau này. Đây phải là điểm tham khảo giúp bạn xác định những nội dung cần đưa vào trang web. Mục tiêu chính là đặt mục tiêu để có thể cân bằng hiệu suất một cách hiệu quả hơn mà không làm ảnh hưởng đến chức năng hoặc trải nghiệm người dùng.🎯
Hướng dẫn tiếp theo sẽ hướng dẫn bạn xác định ngân sách hiệu suất đầu tiên qua vài bước đơn giản.