KFPCOM Chia sẻ kiến thức miễn phí
Di chuyển JavaScript xuống bên dưới cùng website (footer) hoặc loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên giúp trang web của bạn tải nhanh hơn (Cải thiện việc hiển thị các nội dung load đầu tiên mà không bị trì hoãn, tăng trải nghiệm người dùng)
Tại sao nên di chuyển JavaScript xuống footer?
Di chuyển JavaScript (JS) sẽ giúp bạn giảm thời gian tải First Paint (FP) hoặc First Contentful Paint (FCP) của PageSpeed Insights. Do đó, nó sẽ cải thiện tốc độ tải trang web của bạn và mang lại lợi ích cho SEO. Điều này hiển nhiên, nội dung của trang web không tải cho đến khi tải xong tệp JavaScript và CSS. Mặc dù đây chỉ là cảnh báo, việc sửa lỗi này giúp trang web của bạn tải nhanh hơn.
Để khắc phục lỗi này, bạn chỉ cần di chuyển tải JavaScript ở cuối (chân trang) hoặc tải theo cách không đồng bộ ((Loại bỏ JavaScript chặn hiển thị trong nội dung trong màn hình đầu tiên)). Di chuyển JS sang chân trang giúp blog / trang web của bạn hoạt động ổn định hơn, trong khi JS vẫn tải ở cuối quá trình. Nó khác với kỹ thuật không đồng bộ (các tệp JS có thể được đặt ở tiêu đề nhưng bị trì hoãn, chỉ có thể được tải cho đến khi các phần khác tải xong, dẫn đến lỗi trong các trình duyệt không hỗ trợ không đồng bộ). Do đó nó giúp trang web hiển thị các từ (nội dung) trước rồi tiếp tục tải JavaScript. Trang của bạn xuất hiện trống sẽ bị tránh sau quá trình tải (nội dung trong màn hình đầu tiên), khiến mọi người cảm thấy tải trang nhanh hơn.
Dưới đây là hướng dẫn về cách di chuyển JavaScript sang footer trong WordPress.
Di chuyển JS sang chân trang mà không cần plugin (sử dụng đoạn mã)
Để thực hiện điều này, bạn cần phải thêm đoạn mã này vào cuối tệp tin functions.php (wp-content/themes/your-theme /):
function oiw_remove_head_scripts () {
remove_action ('wp_head', 'wp_print_scripts');
remove_action ('wp_head', 'wp_print_head_scripts', 9);
remove_action ('wp_head', 'wp_enqueue_scripts', 1);
add_action ('wp_footer', 'wp_print_scripts', 5);
add_action ('wp_footer', 'wp_enqueue_scripts', 5);
add_action ('wp_footer', 'wp_print_head_scripts', 5);
}
add_action ('wp_enqueue_scripts', 'oiw_remove_head_scripts');Sau đó, bạn Lưu và tải lên lại tệp. Sau đó tải lại trang của bạn và xem nguồn trang (Ctrl + U với Window OS) để kiểm tra.
Di chuyển JS xuống footer bằng plugin
Nếu bạn thích sử dụng plugin thì bạn có thể tìm và sử dụng plugin Scripts To Footer để thực hiện việc này. Chỉ việc cài đặt và với một số bước đơn giản, bạn có thể di chuyển tệp JS sang chân trang mà không mất nhiều thời gian.
Bonus (JavaScript tải không đồng bộ bằng cách sử dụng async và defer)
Nếu bạn sử dụng phương thức tải tài nguyên không đồng bộ (async và defer) thì bạn không cần phải di chuyển JS sang chân trang nữa.
Thuộc tính async của JavaScript cho phép bạn tải các tài nguyên JS một cách không đồng bộ. Nội dung HTML sẽ được lưu giữ khi tải mà không phải đợi tài nguyên CSS.
Sử dụng thuộc tính của async:
<script async type = "text/javascript" src = "yourjs.js"> </ script>
thuộc tính defer của JavaScript cho phép bạn trì hoãn tải các tài nguyên của JS cho đến khi nội dung HTML hoàn tất tải. Tài nguyên của JavaScript sẽ tải sau khi tất cả nội dung tải xong HTML. Sử dụng defer như sau:
<script defer type = "text/javascript" src = "yourjs.js"> </ script>
Mặc dù phương pháp này giúp nội dung trang web của bạn hiển thị nhanh nhất, có một bất lợi: nếu bạn không biết JavaScript hoạt động như thế nào, phương pháp trên không an toàn và lý tưởng. Bởi vì đây là một phương pháp không đồng bộ, nó có thể dẫn đến trang web không hoạt động đúng cách.
Gợi ý : Bạn là người mới và muốn tìm hiểu về Bitcoin nhưng không biết bắt đầu từ đâu? Click xem ngay Hướng Dẫn Đầu Tư Bitcoin Cho Người Mới nhé!
Lưu ý: Đối với các trình duyệt cũ, bạn có thể kết hợp async và defer trong khi tải tập lệnh để tránh trình duyệt không nhận ra thuộc tính không đồng bộ. Nếu bạn quyết định sử dụng thuộc tính async thì hãy thêm defer
Mình hy vọng bài viết sẽ giúp bạn bằng cách nào đó tìm ra vấn đề về lỗi thời gian tải First Paint (FP) hoặc First Contentful Paint (FCP). Lưu ý rằng, tốc độ chỉ là một điều nhỏ; do đó không cần thiết phải hy sinh mọi thứ cho nó, bao gồm cả các chức năng của trang web về tốc độ. Nếu cảnh báo chặn hiển thị vẫn tồn tại trên Google, đừng lo lắng về điều đó nữa bởi vì bạn đã tối ưu hóa nó tốt nhất rồi.
“Những người điên rồ tới mức nghĩ mình có thể thay đổi được thế giới chính là những người có thể làm được điều đó” _ Steve Job
