Kecepatan Halaman adalah salah satu aspek terpenting dari situs web Anda. Tidak peduli berapa banyak yang ditawarkan situs web Anda, tidak ada yang suka menunggu beberapa menit sebelum situs web Anda dimuat. Secara bersamaan, jika situs web Anda memuat lebih cepat, kemungkinan besar akan mempertahankan pengunjung.
Selain itu, Kecepatan Halaman juga memperhitungkan peringkat situs web Anda di Mesin Pencari. Ini membantu perayap memahami seberapa efektif dan terpeliharanya situs web Anda. Dalam tutorial ini, kita akan melihat Cara Menunda Parsing JavaScript di WordPress.
Mengapa Tunda Parsing JavaScript Itu Penting?
Untuk memahami sepenuhnya konsep Tunda Parsing JavaScript, Anda perlu memahami bagaimana browser merender halaman web. Saat browser Anda meminta halaman, server web Anda mengirimkannya kembali, yang diunduh dalam bentuk dokumen HTML.
Dokumen HTML berisi beberapa elemen dan sumber daya yang dibaca browser ketika sumber daya tambahan diunduh. Dan akhirnya, halaman dirender hanya ketika semua sumber daya diunduh.
Buat Situs Web Luar Biasa
Dengan Elementor pembuat halaman gratis terbaik
Mulai sekarangSumber daya yang berukuran lebih besar membutuhkan lebih banyak waktu untuk diunduh. Gambar menyumbang sebagian besar sumber daya ini, itulah sebabnya penting untuk mengoptimalkan gambar Anda. Selain itu, Anda dapat menunda pengunduhan skrip yang tidak perlu dengan mengidentifikasinya dan mempercepat halaman web Anda.
Bagaimana Mengidentifikasi Script Yang Harus Ditunda?
Untuk situs web minimal yang tidak menggunakan banyak JavaScript, mungkin tidak ada skrip penting untuk memuat halaman. Sebaliknya, penting bagi situs web yang agak rumit untuk memiliki analisis terperinci dari semua skrip untuk memahami mana yang penting untuk memuat halaman.
Metode pertama untuk menghilangkan skrip yang tidak perlu adalah dengan menghapus skrip satu per satu dan secara bersamaan memeriksa kesalahan apa pun di konsol JavaScript. Pada saat yang sama, metode ini membutuhkan banyak usaha dan pengetahuan tentang JavaScript.
Metode lainnya adalah dengan menggunakan alat uji kecepatan untuk menilai skrip mana yang penting untuk pemuatan halaman. Salah satu alat ini termasuk GTmetrix , di mana Anda hanya perlu memasukkan URL situs web Anda, menunjukkan hasilnya. Di tab Kecepatan Halaman, Anda akan menemukan bagian Tunda Parsing Untuk JavaScript, yang akan menampilkan daftar skrip yang tidak perlu dimuat selama rendering halaman Anda saat diperluas.
Dengan menggunakan informasi tersebut, Anda dapat menghapus skrip yang tidak memperhitungkan rendering halaman Anda.
Atribut Tunda atau Async
Ada dua cara untuk menghilangkan pengunduhan skrip saat halaman dirender.
Pertama, dengan menambahkan atribut Defer ke tag skrip, Anda dapat memastikan bahwa browser tidak mengunduh sumber daya kecuali penguraian halaman dilakukan. Setelah rendering dan parsing halaman selesai, browser dapat mengunduh semua skrip yang ditangguhkan. Diberikan di bawah ini adalah contoh tag skrip yang menunjukkan cara menambahkan atribut defer ke halaman HTML.
>script src="path/to/script" defer/scriptDi sisi lain, Anda dapat menambahkan atribut async ke tag skrip. Ini akan memandu browser untuk memuat skrip secara terpisah. Ini berarti browser akan mulai mengunduh sumber daya ketika menemukan kode sambil secara terpisah mem-parsing HTML secara bersamaan. Di bawah ini contoh skrip yang diberikan menunjukkan cara menambahkan atribut async.
>script src="path/to/script" async/scriptKedua atribut ini berbeda dalam cara mengunduh sumber daya. Untuk situs web minimal, tidak mudah untuk melihat perbedaan antara atribut async dan defer. Pada saat yang sama, untuk aplikasi web yang lebih kompleks, disarankan untuk menggunakan teknik penangguhan.
Tunda Parsing JavaScript
Berikut adalah dua metode yang dapat Anda gunakan untuk Menunda Parsing JavaScript.
1. Sesuaikan File functions.php
Jika Anda terbiasa dengan pengembangan WordPress, Anda harus tahu bahwa bukanlah ide yang baik untuk membuat skrip dd langsung ke markup HTML. Tetapi Anda dapat menggunakan Fungsi WordPress Bawaan untuk meminta sumber daya.
Untuk menambahkan atribut async atau defer ke skrip Anda, Anda harus menambahkan fungsi berikut ke file functions.php tema WordPress Anda.
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;
}Pastikan untuk mengantrekan setiap skrip sebelum Anda menambahkan atribut defer dan async ke tag skrip.
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');
}2. Plugin untuk Menunda Parsing JavaScript
Maklum, tidak semua orang memiliki pengetahuan dan keterampilan yang cukup untuk mengikuti cara di atas. Oleh karena itu, untuk pemula, beberapa plugin dapat digunakan untuk Menunda Parsing JavaScript.
JavaScript asinkron
Async JavaScript adalah plugin WordPress gratis untuk digunakan yang dapat Anda instal di WordPress Anda untuk melakukan tugas.
Setelah Anda menginstal dan mengaktifkan plugin, buka pengaturan plugin dan centang opsi Aktifkan Async JavaScript .
Gulir ke bawah untuk memilih antara metode asinkron atau tunda .
Gulir ke bawah untuk opsi lebih lanjut di mana Anda dapat menambahkan atau menghapus skrip secara terpisah untuk asinkron dan menunda. Selain itu, Anda dapat menghilangkan plugin dan tema dari perubahan yang akan dibuat oleh plugin ini.
Optimalkan otomatis
Autoptimize adalah plugin lain yang memungkinkan Anda Menunda Parsing JavaScripts.
Setelah menginstal dan mengaktifkan plugin, centang opsi Optimalkan Kode JavaScript di halaman pengaturan . Ini akan menunda semua skrip yang tidak perlu dan memindahkannya ke footer.
Anda juga dapat menambahkan skrip untuk atribut async di tab Extra .
Anda dapat mengedit file functions.php atau menggunakan plugin seperti Autoptimize dan Async JavaScript . Ini adalah dua metode yang dapat diandalkan untuk menambahkan atribut async dan defer ke tag skrip.
Kami berharap teknik ini akan membantu Anda mempercepat situs web Anda. Jangan ragu untuk bergabung dengan kami di Facebook  dan  Twitter kami untuk tetap update tentang posting kami.
