Nếu tập lệnh của bên thứ ba đang làm chậm tốc độ tải trang, thì bạn có hai lựa chọn để cải thiện hiệu suất:
- Xoá thẻ này nếu thẻ đó không mang lại giá trị rõ ràng cho trang web của bạn.
- Tối ưu hoá quá trình tải.
Bài đăng này giải thích cách tối ưu hoá quá trình tải tập lệnh của bên thứ ba bằng các kỹ thuật sau:
- Sử dụng thuộc tính
asynchoặcdefertrên thẻ<script> - Thiết lập kết nối sớm với những nguồn gốc bắt buộc
- Tải từng phần
- Tối ưu hoá cách bạn phân phát tập lệnh của bên thứ ba
Sử dụng async hoặc defer
Vì các tập lệnh đồng bộ làm chậm quá trình tạo và hiển thị DOM, nên bạn phải luôn tải các tập lệnh của bên thứ ba một cách không đồng bộ, trừ phi tập lệnh phải chạy trước khi có thể hiển thị trang.
Thuộc tính async và defer cho trình duyệt biết rằng trình duyệt có thể tiếp tục phân tích cú pháp HTML trong khi tải tập lệnh ở chế độ nền, sau đó thực thi tập lệnh sau khi tải. Bằng cách này, việc tải tập lệnh xuống không chặn quá trình tạo DOM hoặc hiển thị trang, cho phép người dùng xem trang trước khi tất cả các tập lệnh tải xong.
<script async src="script.js">
<script defer src="script.js">
Sự khác biệt giữa thuộc tính async và defer là khi trình duyệt thực thi tập lệnh.
async
Các tập lệnh có thuộc tính async thực thi ở cơ hội đầu tiên sau khi hoàn tất quá trình tải xuống và trước sự kiện tải của cửa sổ. Điều này có nghĩa là các tập lệnh async có thể (và có khả năng) sẽ không chạy theo thứ tự xuất hiện trong HTML. Điều này cũng có nghĩa là chúng có thể làm gián đoạn quá trình tạo DOM nếu hoàn tất quá trình tải xuống trong khi trình phân tích cú pháp vẫn đang hoạt động.
async vẫn có thể chặn
quá trình phân tích cú pháp HTML.defer
Các tập lệnh có thuộc tính defer sẽ thực thi sau khi quá trình phân tích cú pháp HTML hoàn tất, nhưng trước sự kiện DOMContentLoaded. defer đảm bảo rằng các tập lệnh chạy theo thứ tự xuất hiện trong HTML và không chặn trình phân tích cú pháp.
defer sẽ chờ chạy cho đến khi
trình duyệt phân tích cú pháp xong HTML.- Sử dụng
asyncnếu bạn muốn tập lệnh chạy sớm hơn trong quá trình tải. - Sử dụng
defercho các tài nguyên ít quan trọng hơn, chẳng hạn như trình phát video nằm bên dưới màn hình đầu tiên.
Việc sử dụng các thuộc tính này có thể tăng tốc đáng kể tốc độ tải trang. Ví dụ: Telegraph đã trì hoãn tất cả các tập lệnh, bao gồm cả quảng cáo và số liệu phân tích, đồng thời cải thiện thời gian tải quảng cáo trung bình thêm 4 giây.
Thiết lập kết nối sớm với những nguồn gốc bắt buộc
Bạn có thể tiết kiệm 100–500 mili giây bằng cách thiết lập kết nối sớm với các nguồn gốc quan trọng của bên thứ ba.
2 loại <link>, preconnect và dns-prefetch, có thể hữu ích ở đây:
preconnect
<link rel="preconnect"> cho trình duyệt biết rằng trang của bạn muốn thiết lập kết nối với một nguồn gốc khác và bạn muốn quá trình này bắt đầu sớm nhất có thể. Khi trình duyệt yêu cầu một tài nguyên từ nguồn gốc đã kết nối trước, quá trình tải xuống sẽ bắt đầu ngay lập tức.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> xử lý một tập hợp con nhỏ của những gì
<link rel="preconnect"> xử lý. Việc thiết lập kết nối liên quan đến việc tra cứu DNS và bắt tay TCP, còn đối với các nguồn gốc bảo mật, quy trình thương lượng TLS.
dns-prefetch yêu cầu trình duyệt chỉ phân giải DNS của một miền cụ thể trước khi miền đó được gọi một cách rõ ràng.
Gợi ý preconnect chỉ nên dùng cho các kết nối quan trọng nhất. Đối với các miền của bên thứ ba ít quan trọng hơn, hãy sử dụng <link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">
Khả năng hỗ trợ trình duyệt cho dns-prefetch hơi khác với khả năng hỗ trợ của preconnect, vì vậy, dns-prefetch có thể đóng vai trò là phương án dự phòng cho các trình duyệt không hỗ trợ preconnect. Hãy sử dụng các thẻ liên kết riêng biệt để triển khai việc này một cách an toàn:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">
Tải từng phần các tài nguyên của bên thứ ba
Các tài nguyên nhúng của bên thứ ba có thể làm chậm đáng kể tốc độ tải trang nếu được xây dựng không tốt. Nếu các thành phần này không quan trọng hoặc nằm ở phần dưới cùng của trang (tức là nếu người dùng phải cuộn để xem các thành phần đó), thì tính năng tải lười là một cách hay để cải thiện tốc độ trang và các chỉ số vẽ. Bằng cách này, người dùng sẽ nhận được nội dung trang chính nhanh hơn và có trải nghiệm tốt hơn.
Một phương pháp hiệu quả là tải từng phần nội dung của bên thứ ba sau khi tải nội dung trên trang chính. Quảng cáo là một ứng dụng phù hợp cho phương pháp này.
Quảng cáo là nguồn thu nhập quan trọng của nhiều trang web, nhưng nội dung của người dùng là yếu tố quyết định. Bằng cách tải từng phần quảng cáo và phân phối nội dung chính nhanh hơn, bạn có thể tăng tỷ lệ phần trăm khả năng xem tổng thể của một quảng cáo. Ví dụ: MediaVine đã chuyển sang quảng cáo tải lười và nhận thấy tốc độ tải trang tăng 200%. Google Ad Manager có tài liệu về cách tải lười quảng cáo.
Bạn cũng có thể thiết lập để nội dung của bên thứ ba chỉ tải khi người dùng lần đầu di chuyển đến phần đó của trang.
Intersection Observer là một API trình duyệt giúp phát hiện một cách hiệu quả thời điểm một phần tử truy cập hoặc thoát khỏi khung nhìn của trình duyệt. Bạn có thể sử dụng API này để triển khai kỹ thuật này. lazysizes là một thư viện JavaScript phổ biến dành cho hình ảnh tải từng phần và iframes.
Phiên bản này hỗ trợ các video nhúng và tiện ích trên YouTube.
Thư viện này cũng không bắt buộc hỗ trợ cho Intersection Observer.
Sử dụng thuộc tính loading để tải từng phần hình ảnh và iframe là một giải pháp thay thế tuyệt vời cho các kỹ thuật JavaScript. Gần đây, thuộc tính này đã có trong Chrome 76!
Tối ưu hoá cách phân phát tập lệnh của bên thứ ba
Sau đây là một số chiến lược đề xuất để tối ưu hoá việc sử dụng tập lệnh của bên thứ ba.
Lưu trữ CDN của bên thứ ba
Thông thường, các nhà cung cấp bên thứ ba sẽ cung cấp URL cho các tệp JavaScript mà họ lưu trữ, thường trên mạng phân phối nội dung (CDN). Lợi ích của phương pháp này là bạn có thể bắt đầu nhanh chóng – chỉ cần sao chép và dán URL – và không có chi phí bảo trì nào. Nhà cung cấp bên thứ ba xử lý cấu hình máy chủ và cập nhật tập lệnh.
Tuy nhiên, vì các tài nguyên này không có cùng nguồn gốc với phần còn lại của tài nguyên, nên việc tải tệp từ CDN công khai sẽ gây tốn chi phí mạng. Trình duyệt cần thực hiện thao tác tra cứu DNS, thiết lập kết nối HTTP mới và trên các nguồn gốc bảo mật, thực hiện bắt tay SSL với máy chủ của nhà cung cấp.
Khi sử dụng các tệp từ máy chủ của bên thứ ba, bạn hiếm khi có quyền kiểm soát việc lưu vào bộ nhớ đệm. Dựa vào chiến lược lưu vào bộ nhớ đệm của người khác có thể khiến các tập lệnh phải tìm nạp lại từ mạng một cách không cần thiết quá thường xuyên.
Tự lưu trữ tập lệnh của bên thứ ba
Tự lưu trữ tập lệnh của bên thứ ba là một lựa chọn giúp bạn có nhiều quyền kiểm soát hơn đối với quá trình tải tập lệnh. Bằng cách tự lưu trữ, bạn có thể:
- Giảm thời gian tra cứu DNS và thời gian trọn vòng.
- Cải thiện tiêu đề lưu vào bộ nhớ đệm HTTP.
- Tận dụng HTTP/2 hoặc HTTP/3 mới hơn.
Ví dụ: Casper đã giảm 1,7 giây thời gian tải bằng cách tự lưu trữ tập lệnh thử nghiệm A/B.
Tuy nhiên, việc tự lưu trữ có một nhược điểm lớn: tập lệnh có thể lỗi thời và sẽ không nhận được bản cập nhật tự động khi có thay đổi về API hoặc bản sửa lỗi bảo mật.
Sử dụng trình chạy dịch vụ để lưu các tập lệnh từ máy chủ của bên thứ ba vào bộ nhớ đệm
Bạn có thể sử dụng trình chạy dịch vụ để lưu các tập lệnh từ máy chủ của bên thứ ba vào bộ nhớ đệm thay vì tự lưu trữ. Nhờ đó, bạn có nhiều quyền kiểm soát hơn đối với việc lưu vào bộ nhớ đệm, trong khi vẫn hưởng lợi từ các CDN của bên thứ ba.
Bạn có thể kiểm soát tần suất tìm nạp lại tập lệnh từ mạng và tạo chiến lược tải để điều tiết các yêu cầu về tài nguyên không cần thiết của bên thứ ba cho đến khi người dùng thực hiện một lượt tương tác chính trên trang.
Với preconnect, bạn có thể thiết lập các kết nối sớm, đồng thời giúp giảm thiểu chi phí mạng.