Tài nguyên nhanh nhất và được tối ưu hoá tốt nhất là tài nguyên không được gửi. Bạn nên loại bỏ các tài nguyên không cần thiết khỏi ứng dụng. Bạn nên đặt câu hỏi và định kỳ xem lại các giả định ngầm ẩn và rõ ràng với nhóm của mình. Dưới đây là một số ví dụ:
- Bạn luôn đưa tài nguyên X vào các trang của mình, nhưng chi phí tải xuống và hiển thị tài nguyên đó có bù đắp được giá trị mà tài nguyên đó mang lại cho người dùng không? Bạn có thể đo lường và chứng minh giá trị của nó không?
- Tài nguyên (đặc biệt là tài nguyên của bên thứ ba) có mang lại hiệu suất nhất quán không? Tài nguyên này có nằm trong đường dẫn quan trọng hay cần phải nằm trong đường dẫn quan trọng không? Nếu tài nguyên nằm trong đường dẫn quan trọng, thì tài nguyên đó có thể là một điểm lỗi duy nhất cho trang web không? Tức là nếu tài nguyên không có sẵn, thì điều này có ảnh hưởng đến hiệu suất và trải nghiệm người dùng trên các trang của bạn không?
- Tài nguyên này có cần hoặc có Thoả thuận mức độ cung cấp dịch vụ (SLA) không? Tài nguyên này có tuân thủ các phương pháp hay nhất về hiệu suất (nén, lưu vào bộ nhớ đệm, v.v.) không?
Các trang thường chứa các tài nguyên không cần thiết hoặc tệ hơn là cản trở hiệu suất của trang mà không mang lại nhiều giá trị cho khách truy cập hoặc cho trang web lưu trữ các tài nguyên đó. Điều này áp dụng như nhau cho các tiện ích và tài nguyên của bên thứ nhất và bên thứ ba:
- Trang web A đã quyết định hiển thị băng chuyền ảnh trên trang chủ để cho phép khách truy cập xem trước nhiều ảnh chỉ bằng một cú nhấp nhanh. Tất cả ảnh được tải khi trang được tải và người dùng xem các ảnh.
- Câu hỏi: Bạn đã đo lường số lượng người dùng xem nhiều ảnh trong băng chuyền chưa? Bạn có thể phải chịu chi phí hao tổn cao do tải xuống các tài nguyên mà hầu hết khách truy cập không bao giờ xem.
- Trang web B đã quyết định cài đặt một tiện ích của bên thứ ba để hiển thị nội dung có liên quan, cải thiện mức độ tương tác trên mạng xã hội hoặc cung cấp một số dịch vụ khác.
- Câu hỏi: Bạn đã theo dõi số lượng khách truy cập sử dụng tiện ích hoặc số lượt nhấp vào nội dung mà tiện ích cung cấp chưa? Mức độ tương tác mà tiện ích này tạo ra có đủ để biện minh cho chi phí hao tổn không? Ngoài ra, bạn có thể sử dụng chiến lược tải để đảm bảo tập lệnh không được tải cho đến khi cần thiết không?
Việc xác định xem có nên loại bỏ các lượt tải xuống không cần thiết hay không thường đòi hỏi bạn phải suy nghĩ và đo lường kỹ lưỡng. Để có kết quả tốt nhất, hãy định kỳ kiểm kê và xem lại những câu hỏi này cho mọi thành phần trên trang của bạn.
Ảnh hưởng đến Các chỉ số quan trọng về trang web
Sáng kiến Các chỉ số quan trọng về trang web là một sáng kiến của Google nhằm cung cấp một nhóm chỉ số phản ánh trải nghiệm của người dùng khi họ sử dụng web. Mặc dù có nhiều chiến lược tối ưu hoá cho Chỉ số quan trọng chính của trang web, nhưng việc đặt câu hỏi về việc có nên tải một tài nguyên cụ thể trên một trang hay không có thể giúp bạn tìm ra cách cải thiện các chỉ số này trên trang web của mình. Dưới đây là một số ví dụ (được nhóm theo từng Chỉ số quan trọng chính về trang web) mà bạn nên cân nhắc. Mặc dù đây chưa phải là danh sách đầy đủ các ví dụ (và còn nhiều ví dụ khác nữa!), nhưng việc đọc qua các ví dụ này có thể giúp bạn suy ngẫm.
Thời gian hiển thị nội dung lớn nhất (LCP)
Thời gian hiển thị nội dung lớn nhất (LCP) đo lường thời điểm tải nội dung lớn nhất (ví dụ: hình ảnh chính hoặc dòng tiêu đề). Đây được coi là một chỉ số quan trọng về cảm nhận, giúp người dùng có ấn tượng rằng trang web đang tải nhanh.
Nhìn chung, việc tải ít tài nguyên hơn có nghĩa là băng thông mà người dùng có sẽ được phân bổ trên ít tài nguyên hơn và có thể cải thiện LCP. Một ví dụ điển hình là tính năng tải từng phần, trong đó hình ảnh nằm ngoài khung nhìn trong quá trình tải trang sẽ không được tải xuống cho đến khi trình duyệt xác định rằng người dùng có nhiều khả năng nhìn thấy hình ảnh đó. Nếu bạn có một thư viện hình thu nhỏ lớn gồm 50 hình ảnh, thì việc tải lười tất cả trừ 10 hình ảnh hàng đầu có nghĩa là trình duyệt có thể sử dụng băng thông có sẵn hiệu quả hơn và hình ảnh đầu tiên mà người dùng nhìn thấy sẽ tải nhanh hơn.
Tuy nhiên, việc này không chỉ đơn thuần là tải ít hình ảnh hơn. Trình duyệt có một lược đồ ưu tiên nội bộ xác định lượng băng thông mà mỗi tài nguyên sẽ nhận được. Tuy nhiên, ngay cả với tất cả tài nguyên này (đặc biệt là những tài nguyên được tải xuống ở mức độ ưu tiên cao) vẫn có khả năng làm mất tài nguyên phụ thuộc của một phần tử LCP tiềm năng. Điều này đặc biệt đúng khi tốc độ kết nối mạng chậm. Tài nguyên phụ thuộc đó có thể là tệp hình ảnh đại diện cho phần tử LCP của trang, nhưng cũng có thể là tài nguyên phông chữ web mà trình duyệt cần để hiển thị nút văn bản có thể được xác định là phần tử LCP của trang.
Nếu trang web của bạn có nhiều văn bản, thì có thể phần tử LCP của trang là một nút văn bản. Mặc dù có nhiều chiến lược tải và tối ưu hoá phông chữ hiệu quả, nhưng bạn nên cân nhắc xem phông chữ hệ thống có đủ đáp ứng nhu cầu của trang web hay không để các phần tử LCP là nút văn bản có thể tải mà không phụ thuộc vào tài nguyên phông chữ web và vẽ gần như ngay lập tức khi CSS và HTML đến từ máy chủ.
Điểm số tổng hợp về mức thay đổi bố cục (CLS)
Mọi tài nguyên bạn tải đều có thể đóng góp vào Mức thay đổi bố cục tích luỹ (CLS) của trang, đặc biệt là nếu tài nguyên chưa tải xong vào thời điểm vẽ lần đầu. Đối với hình ảnh, hãy tránh các phương pháp gây ra CLS, chẳng hạn như đặt kích thước rõ ràng. Đối với phông chữ, việc quản lý việc tải phông chữ và có thể so khớp phông chữ dự phòng có thể giảm thiểu sự thay đổi trong khoảng thời gian hoán đổi của phông chữ web. Đối với JavaScript, có thể là việc quản lý cách tập lệnh đó thao tác với DOM để giảm thiểu sự thay đổi bố cục ở mức chấp nhận được.
Mọi tài nguyên đóng góp vào CLS của trang đều cần một số công việc để đảm bảo bố cục trang đủ ổn định. Bằng cách đặt câu hỏi về việc bạn có cần một tài nguyên cụ thể hay không, bạn không chỉ tăng tốc độ tải trang mà còn giảm thiểu nỗ lực nhận thức cần thiết để duy trì tính ổn định của bố cục. Điều đó không chỉ giúp người dùng có trải nghiệm ít bực bội hơn mà còn giúp nhà phát triển có trải nghiệm ít bực bội hơn vì bạn sẽ có nhiều thời gian hơn để theo đuổi các mục tiêu khác trong dự án.
Lượt tương tác đến nội dung hiển thị tiếp theo (INP)
Lượt tương tác đến nội dung hiển thị tiếp theo (INP) đo lường khả năng phản hồi đối với hoạt động đầu vào của người dùng trong suốt thời gian hoạt động của một trang. INP của một trang có thể chịu ảnh hưởng rất lớn của JavaScript mà trang đó tải, vì JavaScript là yếu tố thúc đẩy hầu hết các hoạt động tương tác mà người dùng trải nghiệm trên web. Cụ thể, lượng tài nguyên tập lệnh được tải xuống trong quá trình tải trang có thể bắt đầu công việc có thể tốn kém liên quan đến việc đánh giá và biên dịch tập lệnh. Bạn càng tải ít JavaScript trong quá trình khởi động, trình duyệt càng phải làm ít việc hơn tại thời điểm quan trọng đó trong trải nghiệm trang, khi người dùng có thể đang cố gắng tương tác với trình duyệt.
Mặc dù có các chiến lược để giảm kích thước của tài nguyên JavaScript được tải xuống trong quá trình khởi động (chẳng hạn như phân tách mã và loại bỏ mã không dùng đến), nhưng bạn vẫn nên kiểm tra các gói mà bạn sử dụng trong dự án để xem liệu các gói đó có cần thiết hay không. Ví dụ: lodash có nhiều phương thức vẫn hữu ích cho đến ngày nay, nhưng đi kèm với các phương thức mà trình duyệt cung cấp ngay từ đầu, chẳng hạn như các hàm dành riêng cho Array để liên kết, giảm và lọc, cũng như nhiều phương thức khác.
Cải tiến tăng dần cũng là một phương pháp hữu ích đối với JavaScript, vì phương pháp này cho phép bạn phân phát trải nghiệm cơ sở (nhưng vẫn có chức năng) cho người dùng mà bạn có thể thêm vào cho người dùng có thiết bị mạnh hơn và kết nối mạng nhanh hơn. Cho dù bạn có tuân thủ nguyên tắc cải tiến dần hay không, thì điểm mấu chốt vẫn là: Mọi tài nguyên JavaScript mà bạn có thể tránh tải xuống đều có thể mang lại trải nghiệm phản hồi nhanh hơn đối với các lượt tương tác của người dùng. Đây là một khía cạnh quan trọng của hiệu suất web.
Kết luận
Việc kiểm tra trang web của bạn để tìm nội dung tải xuống không cần thiết có thể chỉ là một khía cạnh trong việc mang lại trải nghiệm nhanh chóng cho người dùng, nhưng đây là khía cạnh có khả năng tác động cao. Tóm lại:
- Kiểm kê các thành phần của riêng bạn và thành phần của bên thứ ba trên các trang của bạn.
- Đo lường hiệu suất của từng thành phần: giá trị và hiệu suất kỹ thuật.
- Xác định xem các tài nguyên có cung cấp đủ giá trị hay không.
- Tìm hiểu ảnh hưởng của các lượt tải xuống không cần thiết đối với Chỉ số quan trọng chính của trang web và các chỉ số hỗ trợ.
Bằng cách tối ưu hoá hiệu quả nội dung theo cách này, bạn không chỉ cải thiện hiệu suất tổng thể mà còn tránh lãng phí băng thông của người dùng, đồng thời có thể cải thiện các chỉ số tập trung vào người dùng và mang lại trải nghiệm tốt hơn cho người dùng.