Nếu một đoạn script từ bên thứ ba đang làm chậm website của bạn, bạn có thể chọn một trong hai giải pháp sau để cải thiện hiệu suất
Bỏ đoạn script đi nếu chức năng của nó không thêm bất kì giá trị nào cho website của bạn
Tối ưu quá trình tải
Trong bài này giải, tôi sẽ đưa ra một số phương pháp tối ưu hóa quá trình tải script của bên thứ ba bằng các kỹ thuật sau:
- Sử dụng thuộc tính
asynchoặcdefercho thẻ<script> - Establishing early connections to required origins
- Lazy-loading
- Tối ưu hóa cách bạn phân phối các script của bên thứ ba
Sử dụng async hoặc defer
Bởi vì synchronous scripts (các tập lệnh tải đồng bộ) làm trễ việc hình thành và hiển thị cấu trúc DOM trong quá trình tải, bạn phải luôn tải các script của bên thứ ba một cách không đồng bộ trừ khi tập lệnh bắt buộc phải chạy trước khi trang có thể được hiển thị.
Các thuộc tính async và defer cho trình duyệt biết rằng nó có thể tiếp tục phân tích cú pháp HTML trong khi vẫn tải script ở chế độ nền, rồi thực thi tập lệnh sau khi tải xong. Bằng cách này, việc tải xuống tập lệnh không chặn xây dựng cấu trúc DOM và hiển thị trang. Kết quả là người dùng có thể 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 async (không đồng bộ) và defer (trì hoãn) là khi chúng bắt đầu thực thi các tập lệnh.
async #
Scripts được định nghĩa thuộc tính async được thực thi ngay sau khi hoàn tất quá trình tải xuống và trước sự kiện window’s load . Điều này cũng có nghĩa rằng async scripts sẽ không thực thi theo thứ tự xuất hiện trong HTML, chúng có thể làm gián đoạn quá trình xây dựng DOM nếu chúng hoàn tất quá trình tải xuống trong khi trình phân tích cú pháp vẫn hoạt động.
defer #
Các tập lệnh có thuộc tính defer thực thi sau khi hoàn tất quá trình phân tích cú pháp HTML, nhưng trước sự kiện DOMContentLoaded. Defer đảm bảo các tập lệnh sẽ được thực thi theo thứ tự xuất hiện trong HTML và sẽ không ngăn chặn trình phân tích cú pháp.
Sử dụng async cho tài nguyên quan trọng trong quá trình tải.
Sử dụng defer cho các tài nguyên ít quan trọng hơn. Ví dụ: một trình phát video dưới khung hình đầu tiên.
Sử dụng các thuộc tính này có thể tăng tốc độ tải trang một cách đáng kể. Ví dụ, Telegraph đã trì hoãn tải các script trên website của họ, bao gồm ads script và analytics scripts, kết quả là họ đã cải thiện thời gian tải quảng cáo trung bình là bốn giây.
Các tập lệnh phân tích thường được tải sớm để bạn không bỏ lỡ bất kỳ dữ liệu phân tích có giá trị nào. May mắn thay, có những mẫu để lazyload các analystic script patterns to initialize analytics lazily trong khi vẫn giữ lại dữ liệu tải trang ban đầu.
Thiết lập các kết nối ưu tiên đến các tài nguyên từ bên thứ ba.
Dùng một trong hai thuộc tính sau cho thẻ <link>
preconnectdns-prefetch
preconnect #
Sử dụng <link rel="preconnect"> để thông báo cho trình duyệt biết rằng trang của bạn chuẩn bị thiết lập kết nối với nguồn khác, và quá trình này cần được bắt đầu càng sớm càng tốt. Khi yêu cầu tải tài nguyên từ các thẻ có rel="preconnect" được thực hiện, quá trình tải xuống sẽ bắt đầu ngay lập tức.
<link rel="preconnect" href="https://cdn.example.com">
Thận trọng: Chỉ kết nối trước với các tên miền quan trọng mà bạn sẽ sớm sử dụng vì trình duyệt đóng bất kỳ kết nối nào không được sử dụng trong vòng 10 giây. Việc kết nối trước không cần thiết có thể làm trì hoãn các tài nguyên quan trọng khác, vì vậy hãy hạn chế số lượng miền được kết nối trước và kiểm tra tác động của kết nối trước.
dns-prefetch #
<link rel="dns-prefetch>
Mục đích chính của DNS Prefetch là để tăng tốc độ trang web tải về nội dung khi trang này sử dụng nhiều tài nguyên dữ liệu từ các tên miền (domain) khác nhau. Do đó, thời gian tìm kiếm địa chỉ IP của các tên miền được rút ngắn giúp giảm thời gian tải trang web tổng thể.
Thuộc tính preconnect được sử dụng chủ yếu cho các kết nối đến các tên miền quan trọng; ngược lại ta sử dụng <link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">
Về mức độ tương thích, mình thấy có sự khác biệt giữa các trình duyệt hỗ trợ dns-prefetch và preconnect , dns-prefetch có thể đóng vai trò như một phương án dự phòng cho các trình duyệt không hỗ trợ preconnect. Vì vậy chúng ta nên sử dụng cả hai cách liên kết để triển khai một cách an toàn:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">