Dalam meletakan JavaScript (JS) pada HTML, pada dasarnya kita bebas meletakannya di mana saja di awal setelah tag <head>
, di tengah dalam tag <body>
ataupun di akhir sebelum tag <html>
. Namun dari berbagai sumber mengatakan bahwa untuk hasil terbaik, disarankan semua JS harus berada paling bawah sebelum tag </html>
, mengapa? Karena jika JS diletakan di atas pada tag <head>
artinya JS tersebut akan diproses lebih dulu sebelum komponen yang berada dalam tag <body>
, oleh karena itu disarankan JS diletakan di bawah, supaya yang lain di load dulu baru kemudian JS tersebut guna mempercepat situs.
Tulisan kali ini kita akan membahas tentang bagaimana cara meletakan JS di bawah, pada WordPress karena secara asali WordPress meletakan JS di atas, oleh karena itu untuk meningkatkan kecepatan situs, maka kita harus meletakannya di bawah. Yakni dengan perintah wp_enqueue_script. Kita tinggal gunakan skrip tersebut seperti ini:
wp_enqueue_script( 'JS_ANDA', '/direktor/berkas.js', array('jquery'), 'versinya_jika_ada', true /* jika false berarti JS di atas */ );
Adapun ini adalah contoh skrip yang mana kita memaksa jQuery bawaan WordPress diletakan di bawah, juga beberapa JS bawaan dari tema diletakan di bawah pula. Berikut ini adalah skripnya:
function js_footer() { if (!is_admin()) { //Untuk Jquery wp_deregister_script('jquery'); // Me-load JS dari local wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true); // Jika Anda ingin dari Google API bisa gunakan kode di bawah //wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true); wp_enqueue_script('jquery'); //untuk kode JS sesuai tema yg Anda gunakan wp_enqueue_script( 'js-saya', get_template_directory_uri() . '/js/js-saya.js', array(), '20170511', true ); } } add_action('init', 'js_footer');
Skrip di atas bisa Anda salin-tempel diberkas functions.php
pada tema yang Anda gunakan, dan pastikan jika Tema WP yang Anda pakai saat ini jika menggunakan JS letakan saja pada js_footer
. Simpan dan cek, apakah JS sudah di load di bawah?
Anda juga dapat memaksa beberapa JS bawaan WordPress untuk diletakan di bawah, yakni dengan perintah wp_dregister_script
lalu me-register kembali, bisa dilihat register name dari JS bawaan WP berikut: https://developer.wordpress.org/reference/functions/wp_register_script/#core-registered-scripts.
Oke itu saja, semoga bermanfaat.
Sumber:
* <a href="https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer" target="_blank" rel="noopener noreferrer">https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer</a>
* <a href="https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer" target="_blank" rel="noopener noreferrer">https://stackoverflow.com/questions/2105327/should-jquery-code-go-in-header-or-footer</a>
* <a href="https://www.morningtime.com/guides/drupal-7x-performance-guide/move-all-javascript-to-the-page-footer.html" target="_blank" rel="noopener noreferrer">https://www.morningtime.com/guides/drupal-7x-performance-guide/move-all-javascript-to-the-page-footer.html</a>
Komentar