Hôm nay sẽ hướng dẫn các bạn một mẹo khá hay để tối ưu javascript trên header của wordpress. Việc di chuyển cac đoạn javascript xuống footer để khỏi bị trì hoãn tốc độ page speed.

Mình sẽ đi nhanh vào vẫn đề lun nhé. Đầu tiên, bạn mở file functions.php trong theme, bạn nào chưa biết file functions.php chổ nào thì có thể tham khảo bài này nhé.

LƯU Ý: Nếu tệp functions.php của bạn kết thúc bằng ?> (Hiển thị trong hình ảnh bên dưới), hãy đặt tập lệnh ngay trước nó… bạn có thể tạo một khoảng trống bằng cách đặt con trỏ lên trên ?> Và nhấn phím enter trên bàn phím.

Bạn copy đoạn mã dưới đây dán vào nha.

// Custom Scripting to Move JavaScript from the Head 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' );

// END Custom Scripting to Move JavaScript

Sau khi bạn thêm vào file functions thì hãy nhấn lưu lại. Sau đó ra ngoài bạn nhấn Ctrl + U để view source lên xem nhé. Lúc ban đầu mình chưa thêm đoạn mã trên thì sẽ như thế này.

Sau khi chèn đoạn mã trên thì các javascript ở header đã chuyển xuống ở footer.

Thông tin hình ảnh

Thông thường nếu bạn để các đoạn script ở trên header thì hệ thống sẽ load từ trên xuống nên nó sẽ nhận script trước, việc này làm trì hoãn rất nhiều đến trải nghiệm của người dùng. Nên cách tốt ưu tốt nhất là di chuyển chúng xuống dưới footer, bạn hãy tận hưởng sau khi hoàn thành giống như mình nhé.

Di chuyển các tệp JavaScript xuống cuối trang sẽ không chỉ mang lại cho khách truy cập của bạn trải nghiệm người dùng tốt hơn mà còn khuyến khích họ quay lại xem nhiều hơn, miễn là nội dung của bạn mang lại cho họ giá trị và giải pháp mà họ mong muốn.

Trải nghiệm này sẽ cải thiện tỷ lệ điểm tốc độ của bạn với công cụ tìm kiếm Google, giờ đây các công cụ tìm kiếm đang chú ý nghiêm ngặt đến tốc độ trang của bạn và biết rằng nó sẽ mang lại trải nghiệm người dùng tốt.

Các bạn muốn điểm google speed thì link này nhé .

Tổng kết

Chỉ cần vài đoạn code chúng ta đoạn đã di chuyển các tệp javasctrip một cách nhanh chóng phải không nào. Hãy làm theo và nhớ kiểm tra lại điểm google speed nhé, điểm sẽ lên đấy :)).