Cara Menunda Parsing JavaScript di WordPress

Baik Anda menjalankan situs web WordPress atau situs web lainnya, Anda harus tahu bahwa ukuran penting dari kinerja situs web Anda adalah kecepatan halaman.

Jika Anda menggunakan salah satu alat pengujian kinerja situs seperti GTmetrix atau Google PageSpeed ​​Insights, Anda mungkin disarankan untuk menunda penguraian JavaScript.

Sekarang, frasa tersebut dapat membingungkan, tetapi memainkan peran penting dalam meningkatkan waktu buka situs web Anda.

Jadi, apa yang dimaksud dengan penangguhan parsing JavaScript?

Baiklah, kita akan membicarakan ini nanti secara rinci. Singkatnya, penundaan penguraian JavaScript memungkinkan browser memuat konten situs web terlebih dahulu, tanpa menunggu skrip selesai diunduh.

Proses ini penting karena browser merender dan mengunduh JavaScript dari server sebelum memuat konten situs web lainnya. Ini merusak kecepatan situs web Anda dan mengganggu waktu buka halaman Anda.

Untungnya, menunda penguraian JavaScript adalah cara terbaik untuk mengurangi masalah.

Saya telah menjelaskan lima metode yang terbukti untuk menunda penguraian JavaScript di WordPress dalam artikel ini. Namun sebelum itu, mari dapatkan lebih banyak wawasan tentang apa arti frasa tersebut dan ketahui apakah Anda perlu menunda penguraian Javascript.

Mari kita mulai!

Apa yang Anda maksud dengan Menunda Parsing JavaScript di WordPress?

Sebelum Anda memahami teknik untuk menunda penguraian JavaScript, Anda harus mengetahui bagaimana browser web merender halaman web.

Pertama-tama, ketika browser Anda mengirim permintaan ke server web Anda, browser menerima halaman, yang diunduh dalam bentuk dokumen HTML. Dokumen HTML ini mencakup teks, kode yang merender berbagai elemen DOM, dan sumber daya yang berbeda seperti gambar, lembar gaya, dan skrip.

Secara default, browser mengunduh sumber daya ini secara berurutan. Penguraian halaman web dilanjutkan hanya setelah semua sumber daya diunduh. Selain itu, sumber daya yang besar berdampak buruk pada waktu buka halaman web Anda.

Setiap kali browser Anda menelusuri kode untuk merender situs web Anda, browser akan berhenti merender jika menemukan JavaScript apa pun. Proses dihentikan hingga dapat mengambil dan mengurai file JavaScript. Ini berdampak negatif pada kecepatan situs web Anda.

Untungnya, proses penundaan penguraian JavaScript memberi tahu browser untuk menunggu mengunduh dan mengurai file JavaScript hingga konten utama situs web Anda selesai dimuat. Sampai di sini, pengunjung Anda dapat berinteraksi dengan situs web Anda sehingga waktu yang dibutuhkan untuk mengunduh dan mengurai JavaScript tidak lagi membahayakan waktu buka situs Anda.

Bagaimana Mengetahui Anda Perlu Menunda Parsing JavaScript?

Seperti yang kami katakan sebelumnya, alat pengujian kinerja situs seperti GTmetrix, Google PageSpeed ​​Insights, atau Alat Kecepatan Mesin WP sering menyarankan Anda menunda penguraian JavaScript ketika mereka menganalisis situs web Anda.

GTmetrix, khususnya, memberi Anda nilai dan mencantumkan skrip tertentu yang perlu ditunda untuk meningkatkan kecepatan pemuatan halaman Anda.

Anda cukup memasukkan URL situs web Anda dan menunggu alat untuk menilainya. Saat penilaian selesai, buka tab PageSpeed ​​dan perluas bagian Tunda penguraian JavaScript.

Bagian ini menawarkan daftar skrip non-esensial yang dimuat selama proses rendering, seperti yang ditunjukkan pada contoh di bawah ini:

Atribut Async vs. Tunda

Sangat penting untuk memastikan bahwa mengunduh skrip tidak mengganggu rendering halaman web. Ada dua cara untuk melakukannya:

• tidak sinkron
• Menunda

Anda dapat menyertakan atribut async ke tag skrip sebagai:

 <script src= “path/to/script” async> </script>

Ini memberitahu browser Anda untuk memuat skrip secara asinkron. Tepatnya, browser mengunduh sumber daya segera setelah menemukannya dalam kode tetapi melanjutkan untuk mengurai HTML saat sumber daya masih diunduh.

Di sisi lain, Anda dapat menambahkan atribut defer ke tag skrip sebagai:

 <script src= “path/to/script” defer> </script>

Ini memberi tahu browser Anda untuk tidak mengunduh sumber daya sampai menyelesaikan penguraian halaman web. Setelah selesai menguraikan dan merender, itu mengunduh daftar skrip yang ditangguhkan yang ditemuinya sebelumnya.

Perbedaan utama antara atribut async dan defer adalah ketika sumber daya diunduh.

Jika Anda memiliki aplikasi web yang ringkas, disarankan agar Anda menggunakan penangguhan untuk memastikan saling ketergantungan terpenuhi. Selain itu, jika Anda hanya memiliki beberapa skrip di jalur rendering, Anda tidak akan keberatan dengan perbedaan antara penggunaan kedua atribut ini.

Berikut adalah contoh untuk memahami atribut async dan defer:

Katakanlah Anda memiliki dua skrip JS1 dan JS2.

Syaratnya adalah JS2 muncul dalam kode setelah JS1, JS2 memiliki ketergantungan pada JS1, tetapi JS1 lebih besar dari JS2.

Sekarang, jika Anda menggunakan async , mungkin saja JS2 selesai mengunduh sebelum JS1 diunduh sepenuhnya. Ini mengarah ke kesalahan karena JS2 dieksekusi tanpa adanya JS1.

Di sisi lain, jika Anda menggunakan defer , JS1 dan JS2 diunduh secara berurutan, pastikan tidak ada kesalahan.

Mengapa Anda Perlu Menunda Parsing JavaScript?

Kami telah menyebutkan sebelumnya bahwa kecepatan halaman adalah aspek paling penting yang membuat atau menghancurkan kinerja situs web Anda. Karena file JavaScript cukup besar dan membutuhkan waktu lebih lama untuk dimuat, menunda eksekusi untuk sementara terbukti berguna untuk meningkatkan kecepatan situs web Anda.

Berikut ini adalah beberapa alasan mengapa Anda perlu menunda penguraian JavaScript di WordPress:

1. Untuk Meningkatkan Peringkat Pencarian:

Ketika Google atau mesin pencari lainnya mengevaluasi situs web Anda untuk peringkat mesin pencari, mereka mengambil kecepatan halaman sebagai titik ukuran kritis. Jika situs web Anda memuat lebih cepat, itu pasti akan muncul di halaman pertama hasil mesin pencari.

Sesuai penelitian, 1 dari 2 orang mengharapkan halaman dimuat dalam waktu kurang dari 2 detik. Jika situs web Anda tidak dapat dimuat dengan benar dalam waktu 2 detik, Google akan lebih memilih pesaing Anda daripada Anda. Oleh karena itu, ini dapat berdampak negatif pada peringkat pencarian Anda.

Oleh karena itu, perlu untuk menunda penguraian JavaScript sehingga ada peningkatan yang signifikan dalam waktu buka situs web Anda.

Jika Anda mencari lebih banyak opsi untuk mempercepat situs WordPress Anda, lihat 7 teknik SEO di halaman ini yang akan menggandakan lalu lintas pencarian Anda.

2. Untuk Meningkatkan Tingkat Konversi:

Jika situs web Anda memuat lebih lambat, pengunjung Anda pasti akan meninggalkannya dan mencari opsi lain yang lebih baik. Karena pengguna Anda sering mencari informasi yang cepat dan andal di situs web Anda, halaman yang dimuat dengan lambat dapat menjadi pembunuh suasana hati.

Demikian pula, jika Anda menjalankan situs afiliasi dan menjual produk melalui situs web Anda, Anda akan mengharapkan pengguna Anda untuk mengambil lebih banyak tindakan di sana. Namun, halaman web yang lebih lambat dapat mencegah pengunjung Anda mengambil tindakan apa pun.

Penelitian yang dipresentasikan di HubSpot menunjukkan bahwa penundaan bahkan satu detik dalam waktu pemuatan situs web menurunkan tingkat konversi sebesar 7% . Itulah pentingnya meningkatkan waktu buka situs web Anda dan meningkatkan tingkat konversi.

Teknik untuk menunda penguraian JavaScript membantu Anda meningkatkan kecepatan situs web dan meningkatkan tingkat konversinya.

3. Untuk Memberikan Pengalaman Pengguna yang Lebih Baik:

Tidak punya otak! Situs web yang lebih lambat menciptakan pengalaman pengguna yang buruk. Jika situs web Anda membutuhkan waktu lebih lama dari biasanya untuk memuat, Anda dapat mengharapkan pengunjung Anda meninggalkan situs web Anda, dan dengan demikian meningkatkan rasio pentalannya.

Anda harus mempertimbangkan untuk menunda penguraian JavaScript sehingga file JS hanya dapat dieksekusi setelah konten halaman web Anda dimuat. Teknik ini membantu Anda mempercepat situs WordPress Anda dan menawarkan pengalaman terbaik yang luar biasa kepada pengguna Anda.

Lima Metode Berbeda untuk Menunda Parsing JavaScript di WordPress

Untuk menunda penguraian JavaScript, Anda dapat memilih salah satu dari tiga rute utama, termasuk:

• plugin
• Metode Varvy
• File Functions.php

Dengan menggunakan rute ini, kami telah membuat lima metode berbeda untuk menunda penguraian JavaScript di WordPress.

Metode 1: Menggunakan Plugin JavaScript Async Gratis

Async JavaScript adalah plugin WordPress gratis yang membantu menghilangkan JavaScript yang memblokir render di konten paruh atas.

Plugin ini menawarkan Anda kendali penuh atas skrip mana yang akan ditambahkan atau dikecualikan atribut async atau defer untuk meningkatkan kinerja situs web WordPress Anda. Hal yang harus Anda ingat sebelum memilih antara async dan defer adalah:

• Async mengunduh JavaScript saat masih mem-parsing file HTML tetapi kemudian menjeda penguraian HTML untuk mengeksekusi file JavaScript.
• Tunda unduhan JavaScript saat masih mem-parsing file HTML dan menunggu untuk menjalankannya setelah penguraian HTML selesai.

Berikut adalah setiap langkah untuk menunda penguraian JavaScript di WordPress menggunakan plugin Async JavaScript:

Pertama, redirect ke Plugins -> Add New dari dashboard WordPress Anda.

Sekarang cari plugin Async JavaScript di bilah pencarian lalu Instal dan Aktifkan .

Setelah Anda selesai menginstal dan mengaktifkan plugin, buka halaman Pengaturan untuk membuat perubahan yang diperlukan.

Sekarang, centang opsi Enable Async JavaScript dan pilih Defer as Async JavaScript Method seperti yang ditunjukkan pada gambar di bawah ini:

Untuk opsi lebih lanjut, Anda dapat menggulir ke bawah ke halaman. Di sini, Anda dapat menyertakan skrip yang ingin Anda terapkan tag asinkron dan tunda dan juga menambahkan daftar skrip untuk dikecualikan.

Anda juga dapat membuat daftar plugin dan tema yang dapat dikecualikan dari perubahan apa pun yang dibuat oleh plugin Async JavaScript.

Setelah Anda membuat perubahan yang diperlukan, gulir ke bawah ke bagian bawah halaman dan tekan tombol Simpan Pengaturan .

Metode 2: Menggunakan Plugin WP Rocket

WP Rocket disebut sebagai salah satu plugin caching WordPress paling kuat yang membuat situs web Anda dimuat dengan cepat dalam beberapa klik. Plugin ini menawarkan caching halaman, cache preloading, kompresi file statis, dan banyak fitur keren lainnya.

Selain itu, WP Rocket juga membantu Anda menunda penguraian JavaScript di tab Pengoptimalan File di dasbor WP Rocket.

Setelah Anda membeli, menginstal, dan mengaktifkan plugin WP Rocket, arahkan kembali ke opsi Pengaturan dan klik tab Pengoptimalan File dari menu untuk memulai.

Setelah itu, gulir ke bawah ke bagian File JavaScript, centang opsi Load JavaScript deferred , dan aktifkan Safe Mode for jQuery .

Saat Anda menyelesaikan seluruh proses, gulir ke bawah ke akhir halaman dan klik tombol Simpan Perubahan .

Metode 3: Menggunakan Plugin W3 Total Cache

W3 Total Cache adalah plugin WordPress penting lainnya yang meningkatkan SEO dan pengalaman pengguna situs web Anda. Ini meningkatkan kinerja situs web Anda dan mengurangi waktu buka dengan memanfaatkan integrasi Jaringan Pengiriman Konten (CDN).

W3 Total Cache gratis dan sangat efektif. Anda dapat menggunakan plugin ini untuk menunda penguraian JavaScript di situs WordPress Anda.

Berikut adalah setiap langkah untuk menunda penguraian JavaScript di WordPress menggunakan plugin W3 Total Cache:

Pertama, redirect ke Plugins -> Add New dari dashboard WordPress Anda.

Sekarang cari plugin W3 Total Cache di bilah pencarian lalu Instal dan Aktifkan .

Setelah Anda selesai menginstal dan mengaktifkan plugin, buka Performance -> General Settings dari sidebar kiri WordPress Anda untuk membuat perubahan yang diperlukan.

Setelah itu, gulir ke bawah ke bagian Minify dan centang opsi Enable . Selain itu, pilih opsi Manual dari mode Minify dan klik tombol Simpan semua pengaturan untuk melanjutkan.

Sekarang, arahkan ke tab Performance -> Minify dari sidebar kiri dan gulir ke bawah ke judul JS , di mana Anda dapat melihat bagian Operasi di area dengan dua tag HTML.

Pilih Non-blocking menggunakan opsi “defer” pada jenis Embed dari tag </head> Sebelum .

Di bagian yang sama, Anda dapat melihat judul manajemen file JS di mana Anda perlu memilih tema WordPress aktif Anda dan klik tombol Add a Script untuk memasukkan URI JavaScript yang ingin Anda parse.

Anda dapat menambahkan URI sebanyak yang Anda inginkan dengan mengklik tombol Add a Script .

Setelah Anda menyelesaikan perubahan, klik tombol Save Setting & Purge Cache untuk melanjutkan.

Setelah itu, gulir ke bawah ke bagian CSS . Anda kemudian dapat mengklik tombol Tambahkan lembar gaya di bawah header manajemen file CSS untuk memasukkan URI lembar gaya CSS. Anda dapat menambahkan lebih dari satu berdasarkan saran yang diberikan oleh alat pemantau kecepatan online.

Setelah Anda menyelesaikan perubahan, klik tombol Save Setting & Purge Cache untuk melanjutkan.

Metode 4: Menggunakan Metode Rekomendasi Varvy

Metode lain, yang direkomendasikan oleh Patrick Sexton dari Varvy, menggunakan skrip untuk memanggil file JavaScript eksternal setelah pemuatan halaman awal selesai. Ini berarti bahwa browser tidak akan mengunduh atau menjalankan JavaScript apa pun sampai halaman web selesai dimuat.

Anda dapat menggunakan metode ini dengan mengubah potongan kode yang disediakan Varvy dan kemudian menambahkan skrip ke file tema Anda tepat sebelum tag </body> penutup.

Berikut kode untuk ditambahkan di bagian tubuh tema Anda untuk menunda penguraian JavaScript di WordPress:

 <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "defer.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script>

Catatan: Pastikan Anda mengubah defer.js menjadi nama file JavaScript eksternal Anda. Setelah itu, Anda dapat menggunakan kait wp_footer untuk memasukkan kode melalui file functions.php tema anak Anda.

Dengan pendekatan ini, Anda dapat membungkus kode Varvy seperti ini:

 /** Defer parsing of JavaScript with code snippet from Varvy */ add_action( 'wp_footer', 'my_footer_scripts' ); function my_footer_scripts(){ ?> REPLACE_WITH_VARVY_SCRIPT <?php }

Berikut adalah setiap langkah dari metode ini dijelaskan dengan gambar yang jelas:

Masuk ke dasbor WordPress Anda dan arahkan ke Penampilan -> Editor Tema

Sekarang, klik pada file header.php dari sisi kanan layar dan kemudian paste kode yang disebutkan di atas sebelum menutup </body tag>.

Setelah itu, klik tombol Perbarui File .

Metode 5: Menggunakan File functions.php

Jika Anda memiliki ide tentang pengembangan WordPress, Anda harus terbiasa dengan fakta bahwa Anda tidak boleh menambahkan skrip langsung melalui markup HTML. Sebagai gantinya, Anda perlu menggunakan fungsi WordPress bawaan untuk meminta sumber daya dan juga Mencadangkan situs web Anda jika perlu.

Anda dapat menggunakan atribut defer ke file Javascript Anda dengan menambahkan potongan kode ke file functions.php Anda.
Untuk itu, Anda harus pergi ke Theme Editor dari dashboard WordPress Anda. Setelah itu, klik function.php dan tambahkan kode berikut ke dalamnya:

 function defer_parsing_of_js( $url ) { if ( is_user_logged_in() ) return $url; //don't break WP Admin if ( FALSE === strpos( $url, '.js' ) ) return $url; if ( strpos( $url, 'jquery.js' ) ) return $url; return str_replace( ' src', ' defer src', $url ); } add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

Cuplikan ini memberi tahu WordPress untuk menambahkan atribut defer ke semua file JavaScript Anda kecuali JQuery.
Anda juga dapat dengan mudah menambahkan kode berikut untuk menggunakan atribut async atau defer ke file JavaScript Anda melalui file functions.php :

 add_filter('script_loader_tag', 'add_defer_tags_to_scripts'); function add_defer_tags_to_scripts($tag){ # List scripts to add attributes to $scripts_to_defer = array('script_a', 'script_b'); $scripts_to_async = array('script_c', 'script_d'); # add the defer tags to scripts_to_defer array foreach($scripts_to_defer as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' defer="defer" src', $tag); } # add the async tags to scripts_to_async array foreach($scripts_to_async as $current_script){ if(true == strpos($tag, $current_script)) return str_replace(' src', ' async="async" src', $tag); } return $tag; }

Jangan lupa bahwa sebelum Anda menambahkan atribut async dan defer ke tag skrip, Anda perlu mengantrekan setiap skrip agar WordPress dapat mengaksesnya. Berikut kode untuk itu:

 add_action('wp_enqueue_scripts', 'enqueue_custom_js'); function enqueue_custom_js() { wp_enqueue_script('script_a', get_stylesheet_directory_uri().'/script_a.js'); wp_enqueue_script('script_b', get_stylesheet_directory_uri().'/script_b.js'); wp_enqueue_script('script_c', get_stylesheet_directory_uri().'/script_c.js'); wp_enqueue_script('script_d', get_stylesheet_directory_uri().'/script_d.js'); }

Ketika Anda selesai menambahkan kode ke file functions.php, klik tombol Update File .

Berikut adalah setiap langkah dari metode ini dijelaskan dengan gambar yang jelas:

Masuk ke dasbor WordPress Anda dan arahkan ke Penampilan -> Editor Tema

Sekarang, klik pada file functions.php yang terletak di sisi kanan layar. Anda kemudian dapat menempelkan kode yang disebutkan di atas dan klik tombol Perbarui File untuk menyimpan perubahan yang diperlukan.

Plugin Alternatif Untuk Menunda Parsing JavaScript Di WordPress

Jika Anda mencari opsi lain selain plugin Async JavaScript dan WP Rocket untuk menunda penguraian JavaScript di WordPress, Anda punya banyak. Beberapa di antaranya adalah:

1. Paket Penguat Kecepatan:

Ini adalah plugin WordPress gratis dengan antarmuka yang mudah digunakan untuk membantu Anda dengan pengoptimalan JavaScript dan banyak teknik pengoptimalan kecepatan lainnya.

Kelebihan Paket Penguat Kecepatan:

• Sangat sederhana dan mudah digunakan dan dilengkapi dengan antarmuka pengguna yang interaktif
• Membantu pengoptimalan JavaScript, pengoptimalan CSS, pemuatan lambat, dan integrasi Jaringan Pengiriman Konten (CDN)
• Diperbarui secara teratur untuk kinerja luar biasa dan peningkatan bug

Kekurangan Paket Speed ​​Booster:

• Ada risiko bahwa mengaktifkan plugin ini atau salah satu fiturnya mungkin bertentangan dengan plugin lain di situs web Anda

2. WP JavaScript yang Ditangguhkan:

Plugin WordPress ini menunda pemuatan semua JavaScript yang ditambahkan melalui wp_enqueue_script(), menggunakan LABJS. Hasilnya adalah optimalisasi waktu pemuatan yang tepat.

Kelebihan WP Deferred JavaScripts:

• Sangat mudah digunakan dan merupakan salah satu solusi paling populer di pasaran
• Dirancang secara eksplisit untuk menunda penguraian JavaScript di WordPress, bukan hanya sebagai fitur tambahan

Kontra dari WP Deferred JavaScripts:

• Pembaruan jarang dan mungkin tidak kompatibel dengan versi WordPress yang lebih baru
• Dapat menyebabkan plugin lain di situs web Anda rusak

FAQ (Pertanyaan yang Sering Diajukan)

Kesimpulan

Sangat penting untuk menunda penguraian JavaScript di WordPress untuk meningkatkan kecepatan dan kinerja situs web Anda. Kami harap Anda akan menemukan artikel ini berwawasan luas karena kami telah menyajikan berbagai cara untuk melakukan teknik ini, yang melibatkan penggunaan plugin dan menambahkan kode ke file tema sendiri.

Jika Anda merasa sulit untuk menambahkan kode ke file tema, kami sangat menyarankan Anda untuk menggunakan plugin yang disebutkan di atas untuk menunda penguraian JavaScript. Plugin mudah digunakan, dan Anda dapat menyelesaikan seluruh proses dalam beberapa klik.

Setelah Anda menyelesaikan prosesnya, pastikan untuk menjalankan situs web Anda melalui alat pengujian kinerja situs seperti GTmetrix untuk memastikan situs web Anda menunda skrip sebanyak mungkin.

Apakah Anda memiliki masalah dan pertanyaan tentang cara menunda penguraian JavaScript di WordPress? Tembak mereka di bagian komentar di bawah!