Mempercepat Loading WordPress dengan Defer Parsing JavaScript - Niagahoster Blog

Mempercepat loading WordPress bisa dilakukan dengan defer parsing JavaScript. Pada umumnya untuk JavaScript diletakan antara tag <head></head>. Ketika diakses, website akan memuat kode tersebut dari atas sampai bawah. Hal ini dapat cukup merepotkan, terutama jika Anda memiliki banyak JavaScript atau string yang cukup panjang. Proses yang berjalan dapat memakan banyak waktu sebelum konten website dapat ditampilkan, karena menunggu semua JavaScript dimuat.

Dengan melakukan defer parsing JavaScript, blog Anda tidak akan perlu menunggu sampai loading JavaScript selesai, sehingga loadingnya akan lebih cepat. Pada tutorial ini, kami akan mengulas dua cara melakukan defer parsing JavaScript pada WordPress.

Apa yang Anda Perlukan?

Sebelum Anda memulai langkah pertama, pastikan bahwa Anda memiliki:

  • Akses ke dashboard admin WordPress
  • Akes ke akun FTP/cPanel

Langkah 1: Analisa Website

Untuk menemukan JavaScript mana yang memerlukan proses defer parsing, Anda dapat menganalisa website WordPress Anda menggunakan GTMetrix terlebih dahulu.

Skor yang direkomendasikan pada GTMetrix sekitar 71%. Di bawah ini adalah contoh hasil analisa pada website WordPress.

mempercepat loading wordpress

Langkah 2: Lakukan Defer Parsing JavaScript pada WordPress

Ada beberapa pilihan yang bisa digunakan untuk melakukan defer parsing JavaScript pada WordPress.

PENTING – Pastikan Anda melakukan backup website sebelum memulai proses terlebih dahulu.

Pilihan 1 – Mempercepat Loading WordPress dengan Defer Parsing JavaScript Menggunakan Plugin WordPress

Salah satu cara mudah dan cepat untuk defer parsing JavaScript pada WordPress adalah dengan menggunakan plugin WP Deferred JavaScript.

Plugin lain yang dapat digunakan untuk melakukan defer parsing JavaScript adalah Speed Booster Pack, suatu plugin yang menyediakan beberapa teknik optimasi pada WordPress.

Dalam contoh ini kami menggunakan plugin Speed Booster Pack. Silakan lakukan instalasi terlebih dahulu, kemudian aktifkan. Setelahnya Anda dapat klik menu Settings pada plugin tersebut.

cara mempercepat loading blog

Centang bagian Defer parsing of javascript files dan klik Save Changes.

meningkatkan loading website

Jika Anda belum mengetahui cara menginstal plugin pada WordPress, Anda dapat mengikuti panduan berikut ini.

Pilihan 2 – Melakukan Defer Parsing JavaScript Melalui functions.php

Untuk melakukan defer parsing JavaScript, silakan copy code di bawah ini dan letakkan pada baris di bawah script dalam file wp-includes/functions.php.

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

Langkah 3: Tes Perubahan

Gunakan tool GTMetrix untuk mengetes perubahan. Berikut adalah hasil setelah melakukan defer parsing JavaScript.

kecepatan blog

Voila! Pada langkah ini Anda telah meningkatkan performa website agar memiliki akses lebih cepat.

Kesimpulan

Melalui tutorial singkat ini Anda telah mengetahui cara mempercepat loading WordPress melalui defer parsing JavaScript. Semakin cepat dan mudah website diakses, semakin besar pula kemungkinan traffic Anda meningkat karena pengunjung dapat mengakses informasi di website Anda lebih nyaman.

Sampaikan segala pertanyaan Anda pada kolom komentar di bagian bawah halaman ini. Dapatkan juga ulasan terbaru seputar dunia online langsung di email Anda hanya dengan klik tombol Subscribe! 😊

Subscribe Sekarang

Dapatkan beragam artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Subscribe sekarang dan raih kesuksesan bersama kami!

  • Rismanto

    Ini yang saya cari min, untuk blogger pemula, atau yang belum ngerti masalah HTML, CSS dll, pasti ini sangat membingungkan sekali. Berharap blognya bisa diakses dengan cepat, eh pas di tes di Page Speed Insight nya google ternyata nilainya kurang dari 50, dan melihat keterangan kesalahan, hanya bisa ngelus dada, apa daya kemampuan untuk memperbaiki tidak mumpuni.

  • Ellys

    itu klo wordpress gan, klo misalnya custom web? yang tidak ada mengunakan sistem plugin? gmn caranya gan?

    • Waryanto

      Dapat dengan cara menambahkan script berikut sebelum tag </body>, silakan ganti code "defer1.js", "defer2.js", "defer3.js" dengan nama file javascript website Anda.
      Pastikan juga Anda sudah melakukan backup website untuk mengantisipasi website error. 🙂

      <script type="text/javascript">
      function parseJSAtOnload() {
      var links = ["defer1.js", "defer2.js", "defer3.js"],
      headElement = document.getElementsByTagName("head")[0],
      linkElement, i;
      for (i = 0; i < links.length; i++) {
      linkElement = document.createElement("script");
      linkElement.src = links[i];
      headElement.appendChild(linkElement);
      }
      }
      if (window.addEventListener)
      window.addEventListener("load", parseJSAtOnload, false);
      else if (window.attachEvent)
      window.attachEvent("onload", parseJSAtOnload);
      else window.onload = parseJSAtOnload;
      </script>

  • SEO Tools

    Kadang mengunakan 'Defer" untuk file javascript dapat merusak fungsi javascript it sendiri, sebagai contoh javascript yang digunakan untuk membuat floating navigasi bar, ketika menggunakan defer pada javascript it, maka floating nav barnya tidak akan bekerja lagi.

    Klo menurut ane sih, mending di compress dan di combine ke 1 javascript file z, itu sudah memboost page speed web kamu.

    • Waryanto

      Halo,

      Terimakasih masukkannya, hal tersebut memang benar, akan terdapat beberapa fungsi pada website yang tidak berjalan dengan baik.

  • Amin

    Sangat membantu, segera dipraktikan..
    Thanks

  • APE

    saya coba di web saya untuk langkah pertama menggunakan plugin terjadi error pada slider homepage menjadi hilang, untuk langkah kedua saya pasang kode tersebut pada script paling bawah pada wp-include/function.php tidak ada efek sama sekali itu gimana ya min?

    • Waryanto

      Menggunakan cara ini memang akan berpengaruh pada fitur yang menggunakan JavaScript menjadi tidak berfungsi dengan baik

  • buku yasin

    Telah saya coba tapi hasil nya belum bisa 100% hanya sampai Grade 51%

  • villa puncak adproperti

    saya sudah coba cara di atas dengan menerapan
    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' defer ";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );

    tapi tidak berhasil ya
    masih tetap,kira kira apa yang salah ?

  • Rubber Art

    Mas, pasang script di funtion.php nya setelah apa ya? atau bebas pasang di mana aja. Trims mas. salam sukses.

    • Yasin K

      Bebas, bisa dimasukkan di paling bawah juga.

Scroll Up