Nếu tập lệnh của bên thứ ba đang làm chậm tốc độ của tập lệnh tải trang, bạn có hai tùy chọn để cải thiện hiệu suất:
- Hãy xoá nếu thuộc tính này 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á quy 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
Do các tập lệnh đồng bộ làm chậm trễ DOM tạo và hiển thị, bạn nên luôn tải tập lệnh của bên thứ ba không đồng bộ trừ khi tập lệnh phải chạy trước khi trang có thể được kết xuất.
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, tải xuống tập lệnh không chặn xây dựng DOM hoặc trang
hiển thị, cho phép người dùng xem trang trước khi tất cả tập lệnh chạy xong
đang tải.
<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 các tập lệnh.
async
Những tập lệnh có thuộc tính async thực thi ngay từ cơ hội đầu tiên sau khi tập lệnh đó
hoàn tất việc tải xuống và trước khi cửa sổ
sự kiện load. Điều này có nghĩa là
có thể (và có thể) async tập lệnh sẽ không chạy theo thứ tự mà
chúng sẽ xuất hiện trong HTML. Điều đó cũng có nghĩa là chúng có thể làm gián đoạn việc 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 đang làm việc.
async vẫn có thể chặn
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
đã hoàn tất, nhưng trước khi
DOMContentLoaded
sự kiện. defer đảm bảo rằng các tập lệnh chạy theo thứ tự xuất hiện trong HTML và
đừng chặn trình phân tích cú pháp.
defer sẽ chờ chạy cho đến
trình duyệt đã phân tích xong HTML.- Sử dụng
asyncnếu cần tập lệnh sớm chạy trong quá trình tải của chúng 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 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 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 lên trung bình 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 sự kết nối sớm với nguồn gốc quan trọng của bên thứ ba.
2 loại <link>,
preconnect và dns-prefetch, có thể giúp bạn khi ở đâ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 đến một nguồn gốc khác và bạn muốn quá trình bắt đầu ngay khi có kết nối
nhất có thể. Khi trình duyệt yêu cầu một tài nguyên từ nguồn đã 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 nhóm nhỏ dữ liệu
<link rel="preconnect"> tên người dùng. Việc thiết lập kết nối liên quan đến DNS
tra cứu và bắt tay TCP cũng như đối với các nguồn gốc bảo mật, đàm phán 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 rõ ràng.
Gợi ý preconnect chỉ nên dùng cho các kết nối quan trọng nhất. Cho
các miền 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">
Hỗ trợ trình duyệt cho dns-prefetch
hơi khác với dịch vụ hỗ trợ của preconnect,
để 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. 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
Tài nguyên được nhúng của bên thứ ba có thể làm chậm đáng kể tốc độ tải trang nếu chúng được xây dựng không tốt. Nếu những URL đó không quan trọng hoặc nằm dưới màn hình đầu tiên (tức là nếu người dùng phải cuộn để xem chúng), thì tải từng phần là một cách hiệu quả để cải thiện tốc độ trang và chỉ số sao chép. Bằng cách này, người dùng có đượ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 trang chính tải nội dung. Quảng cáo là một lựa chọn 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 người dùng chỉ có nội dung. 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 từng phần 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 từng phần quảng cáo.
Bạn cũng có thể đặt để nội dung của bên thứ ba chỉ tải khi người dùng cuộ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 và bạn có thể sử dụng khung nhìn đó để triển khai kỹ thuật này.
lazysizes là một thư viện JavaScript phổ biến
để tải từng phần hình ảnh và iframes.
Công cụ này hỗ trợ các video nhúng trên YouTube và
tiện ích.
Tiện ích này cũng có dịch vụ hỗ trợ không bắt buộc
cho Người quan sát giao lộ.
Sử dụng thuộc tính loading để tải từng phần hình ảnh và iframe
là một sự thay thế tuyệt vời cho các kỹ thuật JavaScript và gần đây nó đã trở thành
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 đượ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
Các nhà cung cấp bên thứ ba thường cung cấp URL cho các tệp JavaScript mà họ máy chủ lưu trữ, thường là trên mạng phân phối nội dung (CDN). Ưu điểm 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 mất chi phí bảo trì. Chiến lược phát hành đĩa đơn 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ì chúng không có cùng nguồn gốc với những tài nguyên còn lại của bạn, việc tải tệp từ một CDN công khai sẽ tốn chi phí mạng. Trình duyệt cần thực hiện tra cứu DNS, thiết lập kết nối HTTP mới và đối với 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 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 tập lệnh bị tìm nạp lại từ mạng quá thường xuyên một cách không cần thiết.
Tập lệnh của bên thứ ba tự lưu trữ
Tự lưu trữ tập lệnh của bên thứ ba là một tuỳ 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 của 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 đã cạo được 1, 7 giây bằng cách tự lưu trữ tập lệnh thử nghiệm A/B.
Tuy nhiên, việc tự tổ chức cũng có một nhược điểm lớn: kịch bản có thể lỗi thời và sẽ không nhận được cá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 service worker để lưu các tập lệnh vào bộ nhớ đệm từ máy chủ của bên thứ ba như một giải pháp thay thế cho việc tự lưu trữ. Điều này giúp bạn kiểm soát tốt hơn việc lưu vào bộ nhớ đệm, mà vẫn được hưởng lợi từ 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 ra một chiến lược tải nhằm điều tiết các yêu cầu cho những mục không thiết yếu,
tài nguyên của bên thứ ba cho đến khi người dùng đến một lượt tương tác chính trên trang.
Với preconnect, bạn có thể tạo mối gắn kết từ sớm, đồng thời trợ giúp
giảm thiểu chi phí mạng.