Cách thêm thuộc tính async hoặc defer vào thẻ script jquery.js
Trang blog bạn đang chạy tệp lệnh bên ngoài có tên jquery.min.js, khi bạn kiểm tra bằng PageSpeed Insights chắc chắn bạn sẽ gặp cảnh báo "Giảm thiểu độ sâu của các yêu cầu quan trọng". Để fix lỗi này chỉ cần thêm thuộc tính async hoặc defer vào thẻ script. Thế nhưng không dễ gán được 2 thuộc tính này vào link jquery.js vì các tệp lệnh khác viết bằng jquery sẽ không chạy.
Theo nguyên tắc các tệp js phải đặt dưới cùng trước thẻ đóng </body> để không chặn hiển thị màn hình đầu tiên, nhưng thế là chưa đủ mà cần gán vào thẻ script (thuộc tính src) các thuộc tính async (tải không đồng bộ) hoặc defer (trì hoãn đợi trang tải xong).
 |
| PageSpeed Insights cảnh báo Giảm thiểu độ sâu của các yêu cầu quan trọng |
Giải thích tại sao tệp jquery.min.js lại là tệp lệnh bên ngoài? Vì nó được gán địa chỉ trình duyệt không phải là địa chỉ blog hay tải tệp từ nguồn bên ngoài. Các tệp lệnh bên ngoài nếu không được gán thuộc tính async hoặc defer sẽ làm giảm đáng kể đến hiệu suất tải trang.
Tùy theo mục đích của bạn mà có thể gán thuộc tính async hoặc defer vào thẻ script jquery.js, mình thì sử dụng thuộc tính defer trì hoãn tải tệp sau cùng khi trang đã phân tích xong. Cách mình làm như sau:
<body>
<script defer="defer" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"/>
<script>//<![CDATA[
window.addEventListener('load',function(){
// Code jquery
})
//]]></script>
</body>
Lưu ý lúc bạn mới thêm thuộc tính async hoặc defer vào thẻ script jquery.js một số tệp lệnh viết bằng jquery sẽ không chạy vì trong tệp lệnh thường bắt đầu bằng
<script>//<![CDATA[
$(document).ready(function(){})
$(function(){})
$(window).bind('load',function(){})
$(window).scroll(function(){})
$('element').each(function(){})
$('element').click(function(){})
//]]></script>
Cách sửa nhanh nhất các bạn cứ đặt tất cả code trong lệnh window.addEventListener('load',function(){}) là OK
<script>//<![CDATA[
window.addEventListener('load',function(){
$(document).ready(function(){})
$(function(){})
$(window).bind('load',function(){})
$(window).scroll(function(){})
$('element').each(function(){})
$('element').click(function(){})
})
//]]></script>