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