Chuyển tất cả JavaScript xuống footer trong WordPress.
Nếu bạn chưa biết thì trong phiên bản 4.2.6 của theme Paradise được phát hành ngày 24/02/2017 vừa rồi, chúng tôi đã loại bỏ code async (tải không đồng bộ) JavaScript (JS) và thay vào đó là code chuyển toàn bộ JavaScript xuống footer. Sở dĩ chúng tôi làm như vậy là vì việc async JS có thể gây ra lỗi tải thiếu JS trong một số trường hợp, làm cho tính năng cũng nhưng giao diện của blog/ website hiển thị không đầy đủ, đặc biệt là khi sử dụng plugin tạo cache.
Tham khảo thêm:
- Tải có điều kiện các file JS và CSS của plugin WooCommerce
- Tải không đồng bộ JavaScript trong WordPress mà không dùng plugin
- Ngăn JS và CSS tải trên những trang nhất định của WordPress
Khác với kỹ thuật tải không đồng bộ (file JS có thể nằm ở header nhưng bị trì hoãn tải, buộc phải chờ tất cả các thành phần khác tải xong thì mới được tải, dẫn đến dễ bị lỗi trên các trình duyệt không hỗ trợ tốt async), chuyển JS xuống footer sẽ giúp blog/ website của bạn hoạt động ổn định hơn, trong khi vẫn đảm bảo được quy tắc tải JS sau cùng.
Làm thế nào để chuyển tất cả JavaScript xuống footer?
Có 2 cách khác nhau để làm việc này: 1 là chèn code snippets trực tiếp vào file functions.php của theme/ child theme bạn đang sử dụng, 2 là sử dụng plugin.
Sử dụng code snippets
Chèn đoạn code sau đây vào cuối file functions.php của theme/ child theme mà bạn đang sử dụng.
| //* Move JavaScript to the Footer | |
| function 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', 'remove_head_scripts' ); |
Lưu lại, view source blog/ website và xem kết quả.
Sử dụng plugin
Đối với các bạn “đam mê” plugin, các bạn có thể sử dụng plugin Scripts To Footer để làm việc này. Chỉ với vài thiết lập đơn giản là các bạn đã có thể làm chủ được plugin nên tôi sẽ không giới thiệu cụ thể ở đây. Cuối cùng, chúc các bạn thành công!
Bạn đã từng chuyển JavaScript xuống footer trong WordPress? Bạn biết giải pháp khác đơn giản và hiệu quả hơn? Hãy chia sẻ nó với chúng tôi bằng cách sử dụng khung bình luận bên dưới.
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Đã update lên version mới nhất, nghĩa là đã có phần này rồi đúng k Hiếu?
Đúng rồi bạn. :)
Mình đã thêm lại code và function.php nhưng ko biết là do mình dùng tính năng nén mà khi view-source vẫn thấy js đã nén ở trên :D
Nhân tiện nhờ Hiếu đổi giúp mình tên từ “Vy Spirit” sang “Vỹ Spirit” được không nhỉ :D
Không đổi được bạn nhé. Nhiều comments quá rồi, đổi không xuể. :P
Mình tưởng đổi 1 lượt được chứ :D do lúc chiều mình cũng nhờ đổi bên canh me rất nhanh. Chắc Hiếu dùng cmt mặc định nên phải đổi từng cái nhỉ :D
Chắc anh Luân cài plugin Find and Replace trong database. :P
nghĩa là e phải tắt async rồi mới chèn cái này a nhỉ :P
http://sv1.upsieutoc.com/2017/04/03/1.png
Thử vừa move to footer vừa async xem có lỗi không? Mình nghĩ là vẫn ok. :P
Đầu tiên, Nhã cảm ơn wpcanban.com đã giúp rất nhiều thông tin trong thời gian Nhã tập tành làm wordpress. Nhã muốn hỏi 2 câu
1. Cách chèn cách phần nén js & css cộng với remove querry string vào function.php của anh rất ok, Nhã thực hành & kiểm tra trên google insight + pingtools + gmetrix đều tốt, nhưng hình như o thay đổi đối với gia diện cho mobile. Giúp Nhã khắc phục nhe.
2. Cách chèn cách phần nén js & css cộng với remove querry string vào function.php của anh, sau khi kiểm tra lại dashboard & giao diện web thì nó hiện 2 dòng code đó trên đầu trang. Nhã o giải quyết được ? Nhã vẫn để nguyên tình trạng trên, mong anh vào thanhnha.org coi thử
Mong anh tư vấn.
Trang của bạn có 6 tài nguyên CSS chặn.
có nên chuyển luôn cả css xuống footer ko bạn
Bạn chuyển CSS xuống footer thì cũng không giải quyết được vấn đề này đâu. Phải áp dụng kỹ thuật async mới được. Một trong các plugin hỗ trợ vấn đề này là LiteSpeed Cache, WP Rocket, Autoptimize…
Mình thêm code ở trên bị lỗi. Copy y hết luôn. Không biết code này có dùng được cho mọi theme không nhỉ?
Cụ thể thì nó báo lỗi gì bạn? Có error_log không?
mình thấy trang này shoop.vn có mấy giao diện khá đẹp tải về miển phí đấy
Cảm ơn bạn đã chia sẻ, mình đã thử với con https://zship.vn/ của mình, thấy tốc độ load tăng lên đáng kể