Loại bỏ hoạt động tải xuống không cần thiết

Ilya Grigorik
Ilya Grigorik

Tài nguyên nhanh nhất và được tối ưu hóa 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 của mình. Đó là một phương pháp hay để đặt câu hỏi và định kỳ xem lại, những giả định ngầm ẩn và rõ ràng với nhóm của bạn. Dưới đây là một số ví dụ:

  • Bạn luôn có tài nguyên X trên các trang của mình, nhưng chi phí tải xuống và hiển thị tài nguyên này có bù đắp giá trị mà 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 nếu đó 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 hoặc cần nằm trên đường dẫn quan trọng không? Nếu tài nguyên nằm trên đường dẫn quan trọng, đó có thể là điểm thất bại duy nhất cho trang web không? Nghĩa là, nếu tài nguyên không có sẵn, nó 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ó SLA không? Tài nguyên này có tuân theo các phương pháp hay nhất về hiệu suất không: nén, lưu vào bộ nhớ đệm, v.v.?

Quá thường xuyên, các trang chứa các tài nguyên không cần thiết, hoặc tệ hơn, 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 trang web lưu trữ các trang đó. Các tài nguyên và tiện ích của bên thứ nhất và bên thứ ba đều được áp dụng như nhau:

  • Trang web A đã quyết định hiển thị băng chuyền hình ảnh trên trang chủ của mình để cho phép khách truy cập xem trước nhiều hình ảnh chỉ với một nhấp chuột nhanh. Tất cả các ảnh đều được tải khi trang được tải và người dùng tiến qua các ảnh.
    • Câu hỏi: Bạn đã đo lường xem có bao nhiêu 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í cao khi 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 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 có bao nhiêu khách truy cập sử dụng tiện ích hoặc 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í của nó không? Hơn nữa, 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 đến tập lệnh đó không?

Việc xác định xem có nên loại bỏ các tệp 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 cẩn thận. Để có kết quả tốt nhất, hãy kiểm tra định kỳ và xem lại các câu hỏi này cho mọi tài sản trên các trang của bạn.

Ảnh hưởng đến Chỉ số quan trọng chính của trang web

Google giới thiệu Core Web Vitals khởi tạo để cung cấp một tập hợp các 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ó rất 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 liệu có tải một tài nguyên cụ thể trên trang hay không có thể là lộ trình giúp bạn cải thiện các chỉ số này trên trang web của mình. Dưới đây là một vài ví dụ (nhóm theo từng Chỉ số quan trọng chính của trang web) mà bạn nên cân nhắc. Mặc dù đây không phải là danh sách đầy đủ các ví dụ (và có rất nhiều ví dụ!), nhưng việc đọc các ví dụ này có thể khiến bạn phải ngẫm nghĩ.

Thời gian hiển thị nội dung lớn nhất (LCP)

Nội dung lớn nhất hiển thị (LCP) đo lường thời điểm nội dung lớn nhất (ví dụ: hình ảnh chính hoặc dòng tiêu đề) được tải. Đây được xem là một chỉ số cảm nhận quan trọng khiến người dùng cảm thấy rằng trang web đang tải nhanh.

Nhìn chung, việc tải ít tài nguyên xuống đồng nghĩa với việc băng thông mà người dùng có sẽ được phân bổ cho ít tài nguyên hơn, từ đó có thể cải thiện LCP. Một ví dụ điển hình là phương pháp tải từng phần, trong đó hình ảnh bên ngoài khung nhìn trong khi tải trang sẽ không được tải xuống cho đến khi trình duyệt xác định được rằng người dùng có nhiều khả năng sẽ nhìn thấy hình ảnh đó hơn. Giả sử, nếu bạn có một thư viện hình thu nhỏ lớn gồm 50 hình ảnh, thì tải từng phần tất cả nhưng 10 hình ảnh đầu tiên có nghĩa là trình duyệt có thể sử dụng băng thông hiệu quả hơn và những 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ó 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ấy đi 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 với các kết nối mạng chậm. Tài nguyên phụ thuộc đó có thể là một tệp hình ảnh đại diện cho phần tử LCP của trang, nhưng cũng có thể là một tài nguyên phông chữ trên web mà trình duyệt cần để hiển thị một 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ể là do 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 xem xét liệu phông chữ hệ thống có đủ cho 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 cần phụ thuộc vào tài nguyên phông chữ trên web và hiển thị 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 Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang, đặc biệt là khi quá trình tải xuống chưa hoàn tất tại thời điểm hiển thị đầu tiên. Đối với hình ảnh, bạn nên tránh CLS (Mức thay đổi bố cục tích luỹ) liên quan đến những phương pháp như đặt phương diện rõ ràng. Đối với phông chữ, việc quản lý quá trình tải phông chữ và 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 phông chữ trên web. Đối với JavaScript, mã này có thể quản lý cách tập lệnh đó thao tác với DOM để các thay đổi về bố cục giảm xuống mức chấp nhận được.

Mỗi tài nguyên đóng góp vào CLS (Mức thay đổi bố cục tích luỹ) của một trang đều đòi hỏi bạn phải làm một số việc để đảm bảo bố cục trang đủ ổn định. Bằng cách đặt câu hỏi liệu 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 nỗ lực nhận thức cần thiết để duy trì tính ổn định của bố cục. Điều này không chỉ mang lại trải nghiệm người dùng ít phiền toái hơn nhiều mà còn khiến nhà phát triển ít khó chịu 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 các dự án của mình.

Lượt tương tác đến nội dung hiển thị tiếp theo (INP)

Tương tác với 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 trang có thể bị ảnh hưởng rất lớn bởi JavaScript mà trang tải, vì JavaScript là yếu tố thúc đẩy hầu hết tính tương tác cho một trải nghiệm trên web. Đặc biệt, lượng tài nguyên tập lệnh được tải xuống trong quá trình tải trang có thể khởi động công việc có thể tốn kém liên quan đến đánh giá và biên dịch tập lệnh. Bạn tải càng ít JavaScript trong quá trình khởi động, thì trình duyệt càng phải thực hiện ít công việc hơn tại điểm quan trọng đó trong trải nghiệm trang, nơi người dùng có thể đang cố gắng tương tác với trang.

Mặc dù có nhiều chiến lược giúp 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ư chia tách mã và rung cây) nhưng bạn vẫn nên kiểm tra các gói bạn sử dụng trong dự án của mình để xem chúng có cần thiết hay không. Ví dụ: lodash có nhiều phương thức vẫn còn hữu ích hiện 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 để lập bản đồ, giảmlọcnhiề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ì nó cho phép bạn cung cấp trải nghiệm cơ sở (nhưng vẫn hoạt động) cho những người dùng mà bạn có thể thêm cho những 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 tăng dần hay không, vấn đề vẫn là: Mọi tài nguyên JavaScript mà bạn có thể tránh tải xuống có thể dẫn đến trải nghiệm phản hồi nhanh hơn với 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 các lượt 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 đó là khía cạnh có tiềm năng tạo ra tác động lớn. Tóm lại:

  • Kiểm kê tài sản của riêng bạn và tài sả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 nội dung: giá trị và hiệu suất kỹ thuật của nội dung.
  • Xác định xem các tài nguyên có đang cung cấp đủ giá trị hay không.
  • Hiểu rõ tác động của việc tải xuống không cần thiết trên Các chỉ số quan trọng chính của trang web và các chỉ số hỗ trợ.

Khi tối ưu hoá hiệu quả của 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 đảm bảo không lãng phí băng thông của người dùng, cũng như có khả năng cải thiện các chỉ số lấy người dùng làm trung tâm và mang lại trải nghiệm tốt hơn cho người dùng.