chuyển javascript xuống footer chỉ dành cho những website javascript cực kì nhỏ và không liên quan đến đầu trang, tuy nhiên nó còn một tính năng để hack điểm để công cụ google pagespeed insights (nhìn cho vui).
Nếu như website của bạn có jquery và nhiều javascript thì không nên làm cách này nhé, nó sẽ làm giải trải nghiệm người dùng của bạn, hiện thị sớm hơn nhưng người dùng không thể tương tác được ngay, cực kì bất tiện.
javascript chuyển xuống footer chỉ dành cho website nào ít javscript và không liên quan đến đầu trang, ít javscript nghĩa là dưới 10kb theo mình đó là ít, khi chuyển javascript sẽ dẫn đến lỗi mình sẽ chỉ bạn cách sửa lỗi nhé.
Mục lục
function wptangtoc_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);
/**** lệnh trên là xóa javscript header còn lệnh dưới là cho javscript xuống footer ****/
add_action('wp_footer', 'wp_print_scripts', 10);
add_action('wp_footer', 'wp_enqueue_scripts', 10);
add_action('wp_footer', 'wp_print_head_scripts', 10);
}
add_action( 'wp_enqueue_scripts', 'wptangtoc_remove_head_scripts' );Bạn chỉ cần đưa toàn bộ code này đưa vào file functions.php
Phương pháp tải của trình duyệt sẽ thay đổi
Khi bạn javscript cho xuống footer thì sẽ thay đổi như thế này.
Bước 1: tải xuống html rồi phân tích cú pháp
Bước 2: tải xuống css rồi phân tích cú pháp
Bước 3: tải xuống hình ảnh rồi phân tích cú pháp
Bước 4: tải xuống javascript rồi phân tích cú pháp.
Khi bạn cho để mặc định thông thường.
Bước 1: tải xuống html rồi phân tích cú pháp, html phải dừng tải và phân tích cú pháp nhường cho css và javscript
Bước 2: tải xuống css rồi phân tích cú pháp
Bước 3: tải xuống javascript rồi phân tích cú pháp
Bước 4: Html tiếp tục phân tích cú pháp
Bước 5: Html tiếp tục phân tích cú pháp
Bước 6: tải xuống hình ảnh rồi phân tích cú pháp
Lưu ý: vì thứ tự file load thay đổi sẽ dẫn đến một số trường hợp dẫn đến bị lỗi những scripts nội tuyến ăn theo jquery thì sẽ không chạy được.
Chỉ có một cách để cứu được đó chình là trì hoãn nội tuyến scripts sau khi load dom xong ( mình thấy chỉ có plugin litespeed cache hỗ trợ cái này)
Cách thủ công: thì bạn tự scripts xuống thấp hơn jquery đã xuống footer.
Thì theo nguyên tắc jquery phải load trước những scripts hay file javscript chạy theo jquery thì mới có thể sử dụng được.
Cách kiểm tra xem đã thành công chưa
Bạn chỉ cần vào cộng cụ gtmetrix để test xem javscript nó có phải là được tải sau hình ảnh hay không là ok.
Chiến lược này gần như là không nên dùng cho WordPress chỉ có một số trường hợp cực kì đặc biệt 1% website thì dùng mới hiểu quả, đa phần 99% bạn sử dụng WordPress nếu dùng chỉ là tác hại làm giảm trải nghiệm người dùng, hoặc cách này cũng là cách hack điểm google page speed nhìn cho vui vui.
Bạn thể tìm hiểu những cách tối ưu javascript khác để phù hợp với mình nhé tại bài viết: tối ưu hóa javascript trong này có nhiều chiếc lược rất tốt dành cho WordPress và đa phần của mọi người.
Mình biết là bài viết này chỉ có những cao thủ nén javascript thì mới cần dùng tuy nhiên mình là những con người yêu thích tăng tốc độ load website lên mình luôn luôn sẵn sàng chia sẻ mọi bí kíp cách tăng tốc độ load website đặc biệt là WordPress ( vì WordPress quá ngon để bắt đầu).
Một số bác làm dịch vụ tăng tốc độ load website không uy tín họ làm cách này điểm tăng tuyệt vời luôn tuy nhiên trải nghiệm website người dùng sẽ kém đi. hãy làm dịch vụ có tâm và là người khách hàng thông minh chọn những nơi uy tín để đặt niềm tin.
Đây là cách tối ưu theo mình rất là hay và rất có giá trị thực tế để sử dụng trong các website WordPress, không giống với cách bên trên.
Bạn có thể cho những file javascript không quan trọng hiện thị màn hình đầu riêng lẻ như back to top, lightbox…
Khi nhúng file bạn có thể sử dụng hook xuống footer riêng nhưng theo với WordPress mình biết có cách nhúng file rất là hay mẹo là chỉ cần cho array(‘jquery’), như vậy là WordPress sẽ tự hiểu cho file javascript đó xuống footer cho dù bạn file đó không chạy theo jquery thì vẫn array(‘jquery’) bình thường nhé.
cách nhúng thì sử dụng file nào dù là css hay javascript thì dùng hook wp_enqueue_scripts của WordPress.
add_action( 'wp_enqueue_scripts', 'gia_tuan_script',100 );
function gia_tuan_script() {
wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/gia-tuan.js', '1.0', true );
}
Khi cho thêm array(‘jquery’) WordPress sẽ tự động chuyển javascript xuống footer
add_action( 'wp_enqueue_scripts', 'gia_tuan_script',100 );
function gia_tuan_script() {
wp_enqueue_script( 'to-top', get_stylesheet_directory_uri() . '/js/gia-tuan.js', array( 'jquery' ), '1.0', true );
}
bạn có thể thay đổi độ ưu tiên của php ví dụ trên là 100 bạn có thể thay đổi số càng nhỏ thì càng được yêu tiên như số 1 chả hạn
Để lại một bình luận