Cara Mempercepat Website WordPress Metode Defer Javascript & Async Javascript

23 0
Cara Mempercepat Website WordPress Metode Defer Javascript & Async Javascript

Cara Mempercepat Website WordPress Metode Defer Javascript & Async Javascript

Pada Artikel sebelumnya mengenai Cara Mempercepat Website WordPress dengan cara Image Optimization. Tentunya urusan tersebut sangat membantu kecepatan website. Namun tidak menyeluruh rasanya bilamana kita tidak melanjutkan cara mempercepat situs berikutnya, yakni dengan teknik Defer Javascript atau Async Javascript.

Di dalam dunia developing website, JavaScript dirasakan sebagai “parser blocking resource”. Ini berarti bahwa Javascript memiliki keterampilan untuk menutup atau menghentikan sedangkan Loading HTML (halaman website) sehingga mengakibatkan bottleneck. HTML bakal mulai pulang berjalan saat Javascript telah berlalu di loading. Bottleneck pastinya tidak ramah terhadap user.

Faktanya, situs yang baik tersebut mempunyai rata-rata kecepatan selama 3 – 5 detik guna memuat semua isi halamannya. Nah, untuk menanggulangi bottleneck pada javascript, untung saja terdapat 2 buah cara attribut. yang kesatu ialah Async Javascript (JS dan HTML loading secara simultan) dan pun Defer Javascript (HTML di loading dulu sampai selesai, baru Javascript dijalankan.)

Mari anda lihat lebih mendetail perbedaan dari Async Javascript dan Defer Javascript.

Normal Javascript Load

sebelum anda masuk ke ulasan Async dan Defer, anda telitit dulu gimana teknik kerja loading Javascript di suatu website. Standarnya, Javascript tersebut ketika mulai di loading, secara otomatis bakal menghentikan seluruh proses parsing html.

mengakibatkan website loading, tanpa terdapat apapun yang muncul.

Contoh Normal Javascript

<html>
<head> ... </head>
<body>
    ...
    <script src="script.js">
    ....
</body>
</html>

Javascript di loading di dalam konten Body, yang nantinya akan menyebabkan bottleneck laksana dibawah ini

Jika anda lihat grafik diatas, maka HTML Parsing (loading element halaman web) merasakan Pause saat Javascript mulai dimuat di tengah jalan.

BACA JUGA  Apa itu Error 502 Bad Gateway?

Setelah javascript sudah berjalan (execution), maka barulah HTML parsing kembali berlangsung dan menuntaskan loading website.

Async Javascript Load

Lain halnya dengan Async Javascript yang memungkinkan Javacript Fetch guna dijalankan bersamaan dengan HTML Parsing. Jadi HTML parsing tersebut tidak butuh pause ketika javascript berada di loading.

Namun butuh kalian ketahui, cara Async Javascript ini tetap akan memperbolehkan Javascript guna dieksekusi sebelum penutupan HTML Parsing. Yang mengakibatkan terkadang, cara async tidak bekerja dengan baik pada beberapa Javascript plugin, justeru justru buat website semakin lemot. Biasanya, cara Async ini sangat sesuai digunakan guna plugin javascript yang sedang di simpan atau ditarik dari source eksternal.

Tapi kembali lagi, kalian mesti mengerjakan riset terlebih dahulu sebelum memahami perubahan pada kecepatan situs kalian.

Yuk anda lihat grafik dari Async Javascript :

Defer Javascript Load

Metode yang bakal kita kupas dalam “cara mempercepat situs wordpress” satu lagi ialah Defer Javascript. Nah sedikit bertolak belakang dengan cara sebelumnya, Defer Javascript pun memungkinkan suatu plugin guna load bersamaan dengan HTML Parsing.

Namun bedanya, Defer Javascript akan menyangga semua Javascript agar di eksekusi saat HTML parsing sudah selesai. Jadi simplenya, Defer Javascript engga bakal kasih Javascript guna loading sebelum HTML berlalu di parsing. Resikonya ialah terjadi kehancuran plugin Javascript, dan telah dapat dijamin JQuery tidak akan barangkali dapat berjalan.

Yah inginkan gimana ya, HTML udah berlalu di loading, JQuery baru di eksekusi, besar kemungkinannya tentu gak dapat running. Nah, Defer Javascript ini cocoknya guna plugin-plugin yang tidak memprovokasi tampilan website. Misalnya, Google Analytics.js, Adsense.js, Popup.js atau widget eksternal yang tidak memprovokasi tampilan situs secara umumnya.

BACA JUGA  Cara Meningkatkan SEO Website Dengan Merubah Struktur URL Permalink

Coba anda lihat grafik dari Defer Javascript :

Cara Menggunakan Async & Defer Javascript

Oke sesudah paham perbedaan ketiganya, anda lanjut ke tutorialnya.

  • Untuk memahami Javascript apa yang butuh di defer atau async, Anda bisa menganalisa situs WordPress Anda memakai GTMetrix terlebih dahulu. Skor rata-rata yang direkomendasikan pada GTMetrix selama 71%.
  • Jika terjadi dibawah nilai itu, maka situs kalian paling direkomendasikan untuk mengerjakan Defer dan Async Javascript.
  • Buka wordpress kalian > Lalu tambahkan plugin baru mempunyai nama Async Javascript

 

  • Install dan Aktifkan laksana biasa Masuk ke halaman
  • Setting Plugin tersebut di Settings > Async Javascript
  • Dari settingan ini, kalian ceklist Enable Async Javascript
  • Gunakan Method : Defer (untuk cara global gunakan defer)
  • jQuery dapat kalian aktifkan cara Async
  • Untuk Script To Async kalian dapat pilih .js yang secara umum dapat mempengaruhi tampilan web. Misalkan extend-lib.js, retina.min.js, ajax.js, webfont.js
  • Sedang guna Script to Defer kalian dapat paksa plugin yang agak bengal dan engga ngaruh ke tampilan website, andaikan Google Analytics.js atau PopUp.js
  • Kalian juga dapat disable plugin tertentu dengan menginput Plugin Exclusions Selesai, dan
  • hasil akhirnya sesudah di test pulang di GTMetrix

Oke, sangat gampang kan? nah andai kalian bertanya, apakah dapat melakukan Defer Javascript dan Async Javascript tanpa memakai plugin.

Jawabannya BISA! Untuk mengerjakan defer parsing JavaScript, kalian dapat copy code inilah ini dan letakkan pada baris di bawah script dalam file wp-includes/functions.php. Tapi saya engga rekomendasi input ini secara manual ya. Apalagi bila ada beberapa dari anda yang masih pemula, rasanya cukup mempunyai resiko untuk mengedit file core semacam functions.php.

BACA JUGA  Mempercepat Website Dengan Membersihkan Kode Internal

Sebetulnya kalaupun plugin yang saya rekomendasikan tidak berfungsi, masih terdapat lagi plugin beda yang dapat kalian gunakan. Misalnya : WP Deferred JavaScript. atau Speed Booster Pack Sip. Sekian tutorial anda mengenai teknik mempercepat situs wordpress episode kedua kali ini dengan mengerjakan Defer Javascript.

 

carijasa.website

carijasa.website

Hello I'm cakra I'm a web developer and Digital MarketingPlease Contact me!!!!

Leave a Reply