Hiệu suất web là gì?

Hiệu suất web là gì?

Hiệu suất web là phép đo khách quan và trải nghiệm người dùng được nhận thức của một trang web hoặc ứng dụng. Điều này bao gồm các lĩnh vực chính sau:

• Giảm tổng thời gian tải: Mất bao lâu để các tệp cần thiết để kết xuất trang web tải xuống máy tính của người dùng? Điều này thường bị ảnh hưởng bởi độ trễ, kích thước tệp của bạn lớn thế nào, có bao nhiêu tệp và các yếu tố khác. Một chiến lược chung là làm cho các tệp của bạn nhỏ nhất có thể, giảm số lượng yêu cầu HTTP được thực hiện càng nhiều càng tốt, và sử dụng các kỹ thuật tải thông minh (như preload) để làm cho các tệp có sẵn sớm hơn.
• Làm cho trang web có thể sử dụng càng sớm càng tốt: Về cơ bản điều này có nghĩa là tải các tài nguyên trang web của bạn theo thứ tự hợp lý để người dùng có thể thực sự bắt đầu sử dụng nó rất nhanh. Bất kỳ tài nguyên nào khác có thể tiếp tục tải trong nền trong khi người dùng thực hiện các tác vụ chính, và đôi khi chúng ta chỉ tải tài nguyên khi chúng thực sự cần thiết (điều này được gọi là tải lười). Phép đo thời gian cần thiết để trang web đạt đến trạng thái có thể sử dụng sau khi bắt đầu tải được gọi là thời gian đến tương tác.
• Độ mượt mà và tính tương tác: Ứng dụng có cảm giác đáng tin cậy và thú vị để sử dụng không? Cuộn trang có mượt mà không? Các nút có thể nhấp được không? Các popup có mở nhanh không, và chúng có hoạt ảnh mượt mà khi mở không? Có nhiều phương pháp hay nhất cần xem xét để làm cho ứng dụng cảm thấy mượt mà, ví dụ sử dụng hoạt ảnh CSS thay vì JavaScript cho hoạt ảnh, và giảm thiểu số lần vẽ lại giao diện người dùng cần thiết do thay đổi trong DOM.
• Hiệu suất cảm nhận: Website có vẻ nhanh đến mức nào đối với người dùng có tác động lớn hơn đến trải nghiệm người dùng so với tốc độ thực tế của trang web. Cách người dùng nhận thức hiệu suất của bạn cũng quan trọng, hoặc có lẽ quan trọng hơn, bất kỳ số liệu khách quan nào, nhưng nó mang tính chủ quan, và không dễ đo lường. Hiệu suất cảm nhận là quan điểm của người dùng, không phải là một số liệu. Ngay cả khi một hoạt động sẽ mất nhiều thời gian (vì độ trễ hoặc bất cứ điều gì), vẫn có thể giữ người dùng tham gia trong khi họ chờ bằng cách hiển thị vòng quay tải hoặc một loạt các gợi ý và mẹo hữu ích (hoặc trò đùa, hoặc bất cứ điều gì khác bạn cho là phù hợp). Cách tiếp cận như vậy tốt hơn nhiều so với việc không hiển thị gì, điều này sẽ khiến có cảm giác như mất nhiều thời gian hơn và có thể dẫn đến người dùng nghĩ rằng nó bị hỏng và bỏ cuộc.
• Các phép đo hiệu suất: Hiệu suất web liên quan đến việc đo lường tốc độ thực tế và được cảm nhận của một ứng dụng, tối ưu hóa khi có thể, và sau đó theo dõi hiệu suất, để đảm bảo những gì bạn đã tối ưu hóa vẫn được tối ưu hóa. Điều này liên quan đến một số số liệu (các chỉ số có thể đo lường có thể chỉ ra thành công hoặc thất bại) và các công cụ để đo lường các số liệu đó, mà chúng ta sẽ thảo luận trong suốt mô-đun này.

Tóm lại, nhiều tính năng ảnh hưởng đến hiệu suất bao gồm độ trễ, kích thước ứng dụng, số lượng nút DOM, số lượng yêu cầu tài nguyên được thực hiện, hiệu suất JavaScript, tải CPU và nhiều hơn nữa. Điều quan trọng là giảm thiểu thời gian tải và phản hồi, và thêm các tính năng bổ sung để che giấu độ trễ bằng cách làm cho trải nghiệm có sẵn và tương tác nhất có thể, càng sớm càng tốt, trong khi tải không đồng bộ các phần dài hơn của trải nghiệm.

Cách nội dung được kết xuất

Để hiểu hiệu quả về hiệu suất web, các vấn đề đằng sau nó, và các lĩnh vực chủ đề chính mà chúng ta đã đề cập ở trên, bạn thực sự nên hiểu một số chi tiết cụ thể về cách trình duyệt hoạt động. Điều này bao gồm:

• Cách trình duyệt hoạt động. Khi bạn yêu cầu một URL và nhấn Enter / Return, trình duyệt tìm ra server đang giữ các tệp của trang web đó, thiết lập kết nối với nó, và yêu cầu các tệp. Xem Điền vào trang: cách trình duyệt hoạt động để biết tổng quan chi tiết.
• Thứ tự nguồn. Thứ tự nguồn của tệp HTML index của bạn có thể ảnh hưởng đáng kể đến hiệu suất. Việc tải xuống các tài nguyên bổ sung được liên kết từ tệp index thường tuần tự, dựa trên thứ tự nguồn, nhưng điều này có thể được thao tác và chắc chắn nên được tối ưu hóa, nhận ra rằng một số tài nguyên chặn các tải xuống bổ sung cho đến khi nội dung của chúng được phân tích và thực thi.
• Đường dẫn quan trọng. Đây là quá trình mà trình duyệt sử dụng để xây dựng tài liệu web sau khi các tệp đã được tải xuống từ server. Trình duyệt tuân theo một bộ bước được xác định rõ ràng, và tối ưu hóa đường dẫn kết xuất quan trọng để ưu tiên hiển thị nội dung liên quan đến hành động người dùng hiện tại sẽ dẫn đến cải thiện đáng kể trong thời gian kết xuất nội dung. Xem Đường dẫn kết xuất quan trọng để biết thêm thông tin.
• Mô hình đối tượng tài liệu. Mô hình đối tượng tài liệu, hay DOM, là cấu trúc cây đại diện cho nội dung và các phần tử của HTML của bạn dưới dạng cây nút. Điều này bao gồm tất cả các thuộc tính HTML và các mối quan hệ giữa các nút. Thao tác DOM rộng rãi sau khi trang đã tải (ví dụ: thêm, xóa hoặc di chuyển các nút) có thể ảnh hưởng đến hiệu suất, vì vậy đáng để hiểu cách DOM hoạt động và cách các vấn đề như vậy có thể được giảm thiểu. Tìm hiểu thêm tại Mô hình đối tượng tài liệu.
• Độ trễ. Chúng ta đề cập điều này ngắn gọn ở trên, nhưng tóm lại, độ trễ là thời gian để các tài nguyên trang web của bạn di chuyển từ server đến máy tính của người dùng. Có chi phí liên quan đến việc thiết lập kết nối TCP và HTTP, và một số độ trễ không thể tránh khỏi trong việc đẩy các byte yêu cầu và phản hồi qua lại trên mạng, nhưng có một số cách để giảm độ trễ (ví dụ: giảm số lượng yêu cầu HTTP bạn thực hiện bằng cách tải xuống ít tệp hơn, sử dụng CDN để làm cho trang web của bạn hoạt động tốt hơn trên toàn cầu, và sử dụng HTTP/2 để phục vụ tệp hiệu quả hơn từ server). Bạn có thể đọc tất cả về chủ đề này tại Hiểu về Độ trễ.

Kết luận

Đó là tất cả cho bây giờ; chúng tôi hy vọng tổng quan ngắn gọn của chúng tôi về chủ đề hiệu suất web đã giúp bạn có ý tưởng về tất cả những gì liên quan, và khiến bạn háo hức muốn tìm hiểu thêm. Tiếp theo chúng ta sẽ xem xét hiệu suất cảm nhận, và cách bạn có thể sử dụng một số kỹ thuật thông minh để làm cho một số tác động hiệu suất không thể tránh khỏi xuất hiện ít nghiêm trọng hơn đối với người dùng, hoặc che giấu chúng hoàn toàn.

• Previous
• Overview: Hiệu suất web
• Next