Performance budget (ngân sách dành cho hiệu suất) là gì?

Hiệu suất là một phần quan trọng trong trải nghiệm người dùng (user experience) và nó ảnh hưởng đến các chỉ số kinh doanh (business metrics) của bạn. Chỉ là tự sướng thôi khi nghĩ rằng nếu bạn là lập trình viên giỏi rồi thì tự nhiên bạn sẽ có được website hiệu suất tốt, nhưng sự thực thì hiệu suất tốt hiếm khi là hiệu ứng phụ (side effect). Như hầu hết các thứ khác-để đạt được mục tiêu thì bạn phải định nghĩa nó cho rõ ràng. Hãy bắt đầu hành trình này bằng cách thiết lập performance budget.

Định nghĩa

Performance budget là việc thiết lập các giới hạn mà được áp lên các chỉ số ảnh hưởng đến hiệu suất trang web. Đó có thể là tổng dung lượng trang, thời gian cần thiết để nó tải trên mạng di động, hoặc thậm chí là số lượng các yêu cầu HTTP mà trang gửi đi. Định nghĩa budget giúp hiệu suất website có được điểm mốc ban đầu. Performance budget đóng vai trò như điểm tham chiếu để bạn đưa ra các quyết định về thiết kế, công nghệ, và các tính năng bổ sung khác.

Có budget cụ thể giúp nhà thiết kế lưu tâm đến ảnh hưởng của ảnh độ phân giải cao và số lượng web fonts mà họ muốn dùng. Nó cũng giúp lập trình viên so sánh các cách tiếp cận khác nhau để giải quyết cùng một vấn đề và đánh giá các framework cũng như các thư viện dựa trên kích cỡ cũng như chi phí phân tích cú pháp (parsing cost) của chúng.

Lựa chọn các chỉ số

Các chỉ số định lượng (Quantity-based metrics)

Các chỉ số này hữu dụng vào giai đoạn đầu trong quá trình phát triển bởi vì chúng làm nổi bật ảnh hưởng của việc trang bao gồm các ảnh và mã có kích cỡ lớn. Chúng cũng dễ hiểu với cả người thiết kế và lập trình viên nữa.

Chúng tôi đã đề cập đến một vài thứ bạn có thể đưa vào performance budget chẳng hạn như dung lượng trang (page weight) và số lượng yêu cầu HTTP, nhưng bạn có thể chia chúng ra thành các giới hạn chi tiết hơn như:

  • Các ảnh có kích cỡ tối đa là bao nhiêu thì ổn
  • Số lượng web font tối đa là bao nhiêu thì ổn
  • Các mã JS bao gồm cả frameworks có kích cỡ tối đa là bao nhiêu thì ổn
  • Tổng số lượng các tài nguyên bên ngoài, bao gồm cả các mã JS của bên thứ ba

Tuy vậy, các con số này lại không nói cho bạn nhiều về trải nghiệm người dùng. Hai trang có cùng số lượng các yêu cầu hoặc cùng dung lượng có thể kết xuất (render) khác nhau phụ thuộc vào thứ tự các tài nguyên được yêu cầu. Nếu một tài nguyên quan trọng, chẳng hạn như ảnh thu hút (hero image) hoặc CSS trên một trang nào đó tải muộn trong quá trình xử lý, thế thì người dùng sẽ phải đợi lâu hơn để thấy nội dung hữu ích và theo cảm nhận của họ trang sẽ bị coi là chậm. Nếu một trang khác có các thành phần quan trọng nhất tải nhanh hơn, người dùng thậm chí có thể không nhận ra phần còn lại của trang vẫn chưa được tải (xem thêm critical CSSlazy load ảnh, video).

So sánh quá trình kết xuất trang
So sánh quá trình kết xuất của trang đã được tối ưu hóa (ảnh trên chỉ mất 0,3s để hiển thị nội dung hữu ích) và chưa được tối ưu hóa (ảnh dưới cần đến 1,5s để hiển thị nội dung hữu ích)

Đó là lý do vì sao bạn cần lưu ý đo đạc các kiểu chỉ số khác nữa.

Các mốc thời gian

Các mốc thời gian đánh dấu các sự kiện xảy ra trong khi trang tải, chẳng hạn như sự kiện DOMContentLoaded hoặc load. Các mốc thời gian hữu dụng nhất là các chỉ số hiệu suất tập trung vào người dùng– cái nói cho bạn biết một số điều về trải nghiệm người dùng trong quá trình tải trang. Các chỉ số này được cung cấp thông qua các API trình duyệt và là một phần trong báo cáo của Lighthouse.

First Contentful Paint (FCP) đo đạc thời điểm trình duyệt hiển thị bit nội dung đầu tiên từ DOM, chẳng hạn như văn bản hoặc hình ảnh.

Time to Interactive (TTI) đo đạc khoảng thời gian mà trang cần để nó có khả năng tương tác đầy đủ và phản hồi ổn định cho mục nhập của người dùng. Đây là chỉ số rất quan trọng cần phải theo dõi nếu bạn mong đợi bất kỳ kiểu tương tác nào của người dùng trên trang, chẳng hạn như click vào liên kết, button, gõ, hoặc sử dụng các phần tử form.

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

Lighthouse và WebPageTest tính toán các điểm số hiệu suất dựa trên các quy tắc thực hành chung tốt nhất, đây là những thông tin mà bạn có thể sử dụng làm hướng dẫn. Và để gia tăng thêm lợi ích, Lighthouse cũng cung cấp thêm 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 bạn lưu ý đến sự kết hợp với các chỉ số hiệu suất lấy người dùng làm trung tâm (mốc thời gian) và chỉ số định lượng. Bạn nên tập trung vào kích cỡ các tài nguyên trong bước đầu tiên 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 nền tảng

Cách duy nhất để thực sự biết được điều gì hoạt động có hiệu quả nhất trên trang của bạn là hãy thử nó-thực hiện nghiên cứu và rồi kiểm tra các phát hiện của bạn. Phân tích đối thủ cạnh tranh để so sánh.

Nếu bạn không có thời gian để làm điều đó, dưới đây là các con số mặc định tốt để bạn bắt đầu:

  • Time to Interactive cần dưới 5 giây
  • Các tài nguyên của đường dẫn quan trọng cần có kích cỡ dưới 170 KB (đã nén và thu nhỏ)

Các con số này được tính toán dựa trên nền tảng chung về thiết bị và tốc độ mạng 3G trong thế giới thực (real-wold baseline). Hiện nay hơn một nửa lưu lượng truy cập internet diễn ra trên mạng kết nối di động, vì thế bạn phải sử dụng tốc độ mạng 3G làm điểm tham chiếu ban đầu.

Các ví dụ về budget

Bạn nên có budget tùy thuộc cho từng kiểu trang khác nhau vì nội dung sẽ thay đổi. Lấy ví dụ:

  • Trên di động, trang sản phẩm của chúng ta chỉ được phép có lượng dữ liệu dưới 170 KB JavaScript
  • Trang tìm kiếm của chúng ta cần có ít hơn 2 MB ảnh trên máy bàn
  • Trang chủ của chúng ta phải tải và có khả năng tương tác dưới 5s trên mạng 3G chậm với thiết bị truy cập là điện thoại Moto G4
  • Trang blog của chúng ta phải có điểm số >80 khi thực hiện kiểm tra hiệu suất bằng Lighthouse

Thêm performance budget vào quá trình xây dựng trang của bạn

thêm performance budget

Lựa chọn công cụ nào cho công việc này tùy thuộc rất nhiều vào quy mô dự án của bạn và các tài nguyên mà bạn có thể dành cho nhiệm vụ. Có một số công cụ mã nguồn mở có thể giúp bạn thêm budget vào quá trình xây dựng trang:

Nếu điều gì đó vượt qua ngưỡng đã được xác định, bạn có thể:

  • Tối ưu hóa các tính năng và tài nguyên đã có
  • Loại bỏ các tính năng và tài nguyên đã có
  • Không thêm các tính năng và tài nguyên mới

Theo dõi hiệu suất

Đảm bảo trang web của bạn đủ nhanh nghĩa là bạn phải tiếp tục đo đạc các chỉ số sau lần phát hành đầu tiên (initial launch). Theo dõi các chỉ số này qua thời gian và nhận dữ liệu từ người dùng thực sẽ cho bạn biết các thay đổi trong hiệu suất ảnh hưởng đến các chỉ số kinh doanh quan trọng như thế nào.

Tổng kết

Mục đích của việc có performance budget là nhằm đảm bảo bạn tập trung vào hiệu suất xuyên suốt dự án. Và thiết lập nó sớm sẽ tránh cho bạn gặp phải tình huống kiểu “một lần không tốn bốn lần không xong”. Nó nên là một điểm tham chiếu để giúp bạn tìm ra điều gì nên được bao gồm trong trang web. Ý tưởng chính ở đây là bằng cách thiết lập các mục tiêu bạn có thể có được hiệu suất cân bằng tốt hơn mà không gây ảnh hưởng đến chức năng hoặc trải nghiệm người dùng.

Trong các hướng dẫn kế tiếp chúng ta sẽ cùng tìm hiểu cách xác định performance budget đầu tiên của bạn trong vài bước đơn giản.

(Dịch tử bài viết Performance budgets 101, 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 chúng ta nhận thấy tối ưu hóa tốc độ cần một sự cụ thể hết sức rõ ràng, thể hiện dưới các con số định lượng được. Và để đảm bảo việc tối ưu hóa diễn ra thuận lợi, ta phải nắm rõ các công cụ đo đạc, chẳng hạn như các mốc thời gian quan trọng trong trải nghiệm người dùng khi trang tải, ví dụ như FCP và TTI. Nắm được các yếu tố quan trọng nhất, chú ý đến nó ngay từ đầu khi dự án khởi động sẽ giúp bạn đạt được kết quả tốt nhất mà không phải mất nhiều công sức kiểu “đập đi làm lại”.

Leave a Comment