Hướng dẫn hiệu năng web

Trang này liệt kê các hướng dẫn về hiệu năng web. Chúng được thiết kế để giúp bạn hiểu những loại việc nào có thể cải thiện hiệu năng của các dự án web của bạn

Điền nội dung trang: trình duyệt hoạt động như thế nào

Người dùng muốn trải nghiệm web có nội dung tải nhanh và tương tác mượt mà. Vì vậy, nhà phát triển nên cố gắng đạt được hai mục tiêu này.

Điều hướng và thời gian tài nguyên

Định thời điều hướng là các chỉ số đo sự kiện điều hướng tài liệu của trình duyệt. Định thời tài nguyên là các phép đo thời gian mạng chi tiết liên quan đến việc tải tài nguyên của một ứng dụng. Cả hai đều cung cấp cùng các thuộc tính chỉ đọc, nhưng định thời điều hướng đo thời gian của tài liệu chính, còn định thời tài nguyên cung cấp thời gian cho mọi tài sản hoặc tài nguyên mà tài liệu chính đó gọi tới và các tài nguyên được các tài nguyên đó yêu cầu.

Đường dẫn hiển thị quan trọng

Đường dẫn hiển thị quan trọng là chuỗi các bước mà trình duyệt đi qua để chuyển HTML, CSS và JavaScript thành các pixel trên màn hình. Tối ưu đường dẫn hiển thị quan trọng sẽ cải thiện hiệu năng hiển thị. Đường dẫn hiển thị quan trọng bao gồm Document Object Model (DOM), CSS Object Model (CSSOM), cây kết xuất và bố cục.

Giám sát hiệu năng: RUM so với giám sát tổng hợp

Giám sát tổng hợp và giám sát người dùng thực tế (RUM) là hai cách tiếp cận để theo dõi và cung cấp thông tin chi tiết về hiệu năng web. RUM và giám sát tổng hợp cung cấp các góc nhìn khác nhau về hiệu năng và có những lợi ích, trường hợp sử dụng tốt và hạn chế riêng. RUM nói chung phù hợp nhất để hiểu xu hướng dài hạn, trong khi giám sát tổng hợp rất phù hợp cho kiểm thử hồi quy và giảm thiểu các vấn đề hiệu năng ngắn hạn trong quá trình phát triển. Bài viết này định nghĩa và so sánh hai cách giám sát hiệu năng này.

Hiểu độ trễ

Độ trễ là thời gian một gói dữ liệu đi từ nguồn đến đích. Về mặt tối ưu hiệu năng, điều quan trọng là tối ưu để giảm các nguyên nhân gây độ trễ và kiểm thử hiệu năng trang web bằng cách mô phỏng độ trễ cao để tối ưu cho những người dùng có kết nối tệ. Bài viết này giải thích độ trễ là gì, nó ảnh hưởng đến hiệu năng như thế nào, cách đo độ trễ và cách giảm nó.

Hiệu năng hoạt ảnh CSS và JavaScript

Hoạt ảnh là yếu tố quan trọng để mang lại trải nghiệm người dùng dễ chịu trong nhiều ứng dụng. Có nhiều cách để triển khai hoạt ảnh trên web, chẳng hạn như hoạt ảnh CSS transition/animation hoặc hoạt ảnh dựa trên JavaScript (dùng Window.requestAnimationFrame). Trong bài viết này, chúng ta phân tích sự khác biệt về hiệu năng giữa hoạt ảnh dựa trên CSS và hoạt ảnh dựa trên JavaScript.

Hiệu năng hoạt ảnh và tốc độ khung hình

Hoạt ảnh trên web có thể được thực hiện qua SVGAnimationElement, window.requestAnimationFrame, bao gồm canvas và WebGL_API, CSS animation, video, ảnh GIF động và thậm chí cả ảnh PNG động và các kiểu ảnh khác. Chi phí hiệu năng của việc hoạt ảnh một thuộc tính CSS có thể khác nhau giữa các thuộc tính, và việc hoạt ảnh các thuộc tính CSS tốn kém có thể dẫn đến jank khi trình duyệt vật lộn để đạt được tốc độ khung hình mượt mà.

Khuyến nghị thời gian hiệu năng web: Bao lâu thì là quá lâu?

Không có quy tắc rõ ràng nào về việc thế nào là tốc độ chậm khi tải trang, nhưng có những hướng dẫn cụ thể để chỉ ra rằng nội dung sẽ tải trong 1 giây, trạng thái nhàn rỗi trong 50ms, hoạt ảnh trong 16,7ms và phản hồi đầu vào của người dùng trong 50 đến 200ms.

Ngân sách hiệu năng

Ngân sách hiệu năng là một giới hạn để ngăn chặn các hồi quy. Nó có thể áp dụng cho một tệp, một loại tệp, tất cả các tệp được tải trên một trang, một chỉ số cụ thể (ví dụ: Time to Interactive), một chỉ số tùy chỉnh (ví dụ: Time to Hero Element), hoặc một ngưỡng trong một khoảng thời gian.

Những nguyên tắc cơ bản về hiệu năng

Hiệu năng nghĩa là hiệu quả. Trong ngữ cảnh của Open Web Apps, tài liệu này giải thích một cách tổng quát hiệu năng là gì, nền tảng trình duyệt giúp cải thiện nó như thế nào, và bạn có thể dùng những công cụ và quy trình nào để kiểm tra và cải thiện nó.

Sử dụng dns-prefetch

DNS-prefetch là một nỗ lực để phân giải tên miền trước khi tài nguyên được yêu cầu. Đây có thể là một tệp được tải sau đó hoặc đích liên kết mà người dùng cố gắng truy cập.

Tải lười

Tải lười là một chiến lược để xác định các tài nguyên là không chặn (không quan trọng) và chỉ tải chúng khi cần. Đây là một cách để rút ngắn độ dài của critical rendering path, từ đó giảm thời gian tải trang.

Tải suy đoán

Tải suy đoán là việc thực hiện trước các hành động điều hướng, chẳng hạn như tra cứu DNS, tải tài nguyên hoặc kết xuất tài liệu, trước khi các trang liên quan thực sự được truy cập, dựa trên dự đoán về những trang mà người dùng có khả năng truy cập tiếp theo.

Tối ưu hiệu năng khởi động

Cải thiện hiệu năng khởi động thường là một trong những tối ưu hóa hiệu năng có giá trị cao nhất mà bạn có thể thực hiện. Ứng dụng của bạn mất bao lâu để khởi động? Nó có vẻ như làm treo thiết bị hoặc trình duyệt của người dùng trong lúc tải không? Điều đó khiến người dùng lo rằng ứng dụng của bạn đã bị treo hoặc có vấn đề khác. Trải nghiệm người dùng tốt bao gồm việc bảo đảm ứng dụng của bạn tải nhanh. Bài viết này cung cấp các mẹo và gợi ý hiệu năng cho cả việc viết ứng dụng mới lẫn chuyển ứng dụng từ các nền tảng khác lên web.