access_time
hourglass_empty
person_outline

Cara Menghapus Query String dari Static Resource di WordPress

Di artikel ini, kami akan menjelaskan cara menghapus query string dari static resource di WordPress. Dengan ini, Anda dapat meningkatkan performa kecepatan situs Anda dan memberikan user experience terbaik untuk pengunjung Anda. Namun, sebelum itu, mari bahas terlebih dahulu apa itu sebenarnya query string.

Apa itu query string?

Terkadang, Anda akan menyadari instruksi untuk menghapus query string ketika menguji performa website Anda dengan menggunakan GTMetrix atau Pigdom.

Lalu, apa sebenarnya query string itu? Sederhananya, query string adalah versi dari sebuah file. Anda dapat mendefinisikannya sebagai URL yang memuat simbol “&” dan “?”. Sebagai contohnya:

https://www.hostinger.com/tutorials/wp-includes/js/jquery/jquery.js?ver=1.12.4

?ver=1.12.4 adalah deretan yang dikenal dengan query string. Developer menggunakan query string untuk cache-busting. Yang mana, itu adalah proses memecahkan isu cache dengan mengidentifikasi versi file di sebuah situs. Dengan begitu, browser tidak akan keliru men-cache asset jika ada asset baru lain yang tersedia.

Mengapa Harus Menghapus Query String?

Query strings sebenarnya penting untuk dynamic resource karena asset, seperti multimedia, CSS, file JavaScript, dan lainnya, lebih sering berubah dibandingkan static resource. Itu lah mengapa identifikasi kedua hal tersebut harus dibedakan untuk menghindari kesalahan caching.

Jika Anda memiliki static resources, Anda tidak terlalu memerlukan query string. Faktanya, static resource dapat menghindarkan server web dari data caching, sehingga membuat website Anda menjadi lambat.

Ingat bahwa website yang lambat akan memberi pengaruh buruk pada performa SEO Anda dan user experience secata keseluruhan.

Mkaa dari itu, kami sangat merekomendasikan untuk menghapus query string dari static resource di WordPress. Kami akan menunjukkan caranya di bawah ini.

Menghapus Query String dari Static Source di WordPress

Di panduan ini, Anda akan mempelajari dua cara, yaitu dengan memodifikasi file functions.php dan yang kedua adalah dengan menggunakan plugin WordPress.

Menghapus Query String dari Static Source WordPress dengan Kode

Penting: Kami ingin mengingatkan Anda untuk berhati-hati ketika memodifikasi kode. Penting untuk membackup data terlebih dahulu jika nanti mengalami suatu kendala.

  1. Pada Dashboard WordPress, navigasikan mouse Anda ke Appearance -> Theme Editor -> Theme Functions.
  2. Copy dan paste kode di bawah ini ke file functions.php. Setelah selesai, klik Update File.
    // Remove query string from static files
    
    function remove_cssjs_ver( $src ) {
    
    if( strpos( $src, '?ver=' ) )
    
    $src = remove_query_arg( 'ver', $src );
    
    return $src;
    
    }
    
    add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
    
    add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

Menghapus Query String dari Static Source dengan Menggunakan Plugin

Ada kalanya ketika menggunakan metode sebelumnya, Anda mengalami suatu kendala atau eror. Mungkin juga Anda enggan dengan koding. Jika begitu, Anda patut untuk mengisntal Speed Booster Pack.

Plugin ini merupakan plugin WordPress all-in-one yang membantu meningkatkan kecepatan website Anda. Salah satu fiturnya adalah menghapus query string dari halaman Anda.

  1. Pada halaman admin WordPress, arahkan kursor Anda ke Plugins -> Add New. Cari lah Speed Booster Pack, lalu instal dan aktifkan plugin tersebut.
  2. Masuk lah ke menu Speed Booster dan aktifkan Remove query strings yang berada di tab General. Anda juga dapat mengaktifkan opsi optimasi lainnya jika berkenan. Lalu, klik Save Changes setelah Ada selesai dengan setupnya.
    setting plugin untuk hapus query string

Agar situs WordPress Anda terhindar dari pembuatan query strings, Anda dapat menggunakan plugin W3 Total Cache.

  1. Instal dan aktifkan W3 Total Cache. Masuk ke bagian setting melalui menu Performance.
  2. Pilih Browser Cache dan centang opsi Prevent caching of objects after settings change. Setelah itu, jangan lupa klik Save all settings.
    simpan pengaturan

Bagus! Sekarang Anda sudah menghapus query strings dan juga membuat website Anda berhenti membuat query strings.

Menguji Hasil Menghapus Query Strings

Sekarang, skenarionya adalah Anda telah berhasil menghapus query strings, maka ini adalah saat yang tepat untuk menguji performa situs Anda. Kami akan menggunakan GTMetrix untuk menampilkan hasil tes sebelum dan sesudah optimasi.

Di bawah ini adalah contoh sebelum kami menerapkan proses optimasi:

proses optimasi

Sedangkan yang di bawah ini adalah hasil setelah kami berhasil menghapus query strings:

setelah dihapus

Kesimpulan

Situs dengan dynamic resource menggunakan query strings untuk mengidentifikasi versi asset berbeda antara satu dengan yang lainnya.

Namun, pada situs dengan static resource, query strings menghalau website untuk melakukan caching secara tepat, sehingga membuat performa website melambat. Maka dari itu, kami sarankan untuk menghapus semuanya agar terhindar dari masalah kedepannya.

Untuk meringkas panduan ini, berikut kami hadirkan langkahnya secara singkat:

  • Mengedit file functions.php — cari file functions.php Anda melalui Appearance -> Theme Editor -> Theme Functions. Masukkan kode yang kami sediakan ke file functions.php seperti yang kami contohkan sebelumnya.
  • Menggunakan plugin — instal Speed Booster Pack dan aktifkan opsi Remove query strings dari tab Genera. Dengan menggunakan plugin W3 Total Cache, masuk ke menu Browser Cache dan uncheck opsi Prevent caching of objects after settings change option.

Penulis

Author

Nadia Agatha / @nadiaagathapramesthi

Nadia merupakan penerjemah lepas sejak 2016, kini ia menjadi penerjemah untuk Hostinger. Ia gemar membaca dan melakukan penelitian seputar penerjemahan dan sosiolinguistik. Disamping itu, ia juga suka bermain dengan kucingnya dan bercengkrama bersama teman-temannya di waktu senggang.

Tutorial terkait

Ketik balasan

Komentar*

Nama*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jadilah bagian dari Hostinger!