Jika Anda menguji kecepatan loading website Anda menggunakan Pagespeed dan menemukan salah satu peringatan yaitu “Remove query strings from static resources”. Ini berarti cara memuat file statis yaitu CSS dan JS Anda masih menggunakan bawaan asli engine wordpress. Sisi negatif dari penggunaan query string berupa “?” pada file statis adalah menghambat penyimpanan cache pada browser maupun proxy. Sehingga file JS dan CSS yang seharusnya bisa disimpan dalam cache browser tapi justru harus didownload ulang dan jelas mempengaruhi kecepatan loading website. Untuk menghilangkan query string pada file script dan css ini mudah saja namun untuk lebih memahami permasalahan ini ada baiknya kita lihat perbandingan ini:
Cara Menghilangkan Query String ? CSS dan JS WordPress
Kode Asli bawaan WordPress
<link rel=’stylesheet’ id=’style-css’ href=’http://wpku.com/wp-content/themes/mytheme/style.css?ver=4.0‘ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’http://wpku.com/wp-includes/js/jquery/jquery.js?ver=1.11.1‘></script>
Sesuai kode di atas query string yang menjadi masalah adalah ?ver=4.0 dan ?ver=1.11.1. Idealnya kedua queri string ini tidak dipakai lagi karena tidak memiliki fungsi khusus atau merubah fungsi dari Stylesheet maupun Javascript, namuan hanya informasi versi saja. Jadi, cara memuat kode CSS dan JS yang ideal dan memenuhi aturan pagespeed adalah sebagai berikut:
Kode yang sesuai Pagespeed
<link rel=’stylesheet’ id=’style-css’ href=’http://wpku.com/wp-content/themes/mytheme/style.css’ type=’text/css’ media=’all’ />
<script type=’text/javascript’ src=’http://wpku.com/wp-includes/js/jquery/jquery.js’></script>
Nah, untuk menghilangkan query string CSS dan JS ini ada dua cara yang bisa dilakukan yaitu dengan menambahkan manual pada theme dan dengan menambahkan sedikit fungsi pada file functions.php. Untuk kemudahan saya sarankan menggunakan cara kedua saja. Buka file functions.php pada theme wordpress Anda melalui hosting atau menggunakan ftp seperti filezilla. Atau bisa juga melalui Dashboard – Appearance – Editor dan cari Theme Functions. Setelah itu tambahkan kode ini di akhir:
<?php
// menghilangkan query string css dan js wordpress
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter('script_loader_src', '_remove_script_version', 11, 1);
add_filter('style_loader_src', '_remove_script_version', 11, 1);
?>
Mudah saja bukan? Jika penambahan kode sudah benar maka maka Anda sudah bisa menghilangkan query string pada website Anda. Lihat juga fungsi-fungsi penting theme wordpress lainnya, selamat mencoba!
Saja sudah mencobanya dan berhasil, tetapi masalah barunya untuk defered jquerynya selalu gagal, apa ada solusinya?
Thanks
coba pindahkan posisi jsnya ke bagian footer
sy udah pake cra diatas, tp knpa widget saya malah ga bisa didrag?
solusinya gmn mas?
kemungkinan fungsi javascriptnya terhalang jika query stringnya dibuang, sebagian script memang begitu. Ya mau tidak mau harus pilih prioritas mana yang ingin dicapai, hilangkan query stringnya atau utamakan widgetnya
Sy udah pake cara diatas, walau agak beda si (dulu dapet dari forum wp)
JS sama CSS udah beres sekarang tinggal di font awesome mas,
kira2 kaya begini : …. /fontawesome-webfont.woff?v=3.2.1
nah untuk font awesome ada triknya ga supaya ga muncul lagi suruh remove query string?
Kebetulan saya juga dulu bermasalah dengan itu, sampai skrpun masih belum nemu solusinya
Kalau fontawesome emang dari CSS nya mas, coba buka file fontawesome.css terus hilangkan query stringnya. 🙂
lalu dengan yg lain bagaimana man jefry? kan ga cuma itu yg dihilangkan :tongue:
Ya silahkan, semoga membantu 😉
ok gan saya coba triknya ya … terimakasih …