Cara Menunda Parsing JavaScript

Cara Menunda Parsing JavaScript Di WordPress (4 Metode)

Apakah Anda menjalankan situs WordPress Anda melalui alat pengujian kinerja hanya untuk mendapatkan instruksi untuk menunda penguraian JavaScript di WordPress?

Menerapkan perubahan ini dapat berdampak positif pada waktu muat halaman situs Anda, terutama bagi pengunjung seluler. Tapi peringatannya bisa agak sulit untuk dipahami, itulah sebabnya kami akan menjelaskan dengan tepat apa artinya menunda penguraian JavaScript dan bagaimana Anda dapat menerapkan perubahan ini di situs web WordPress Anda.

Menunda Parsing JavaScript di WordPress

Jika Anda pernah menjalankan situs WordPress melalui Google PageSpeed Insights, GTmetrix, atau alat pengujian kecepatan halaman lainnya, Anda mungkin menemukan saran untuk menunda penguraian JavaScript.

Pada dasarnya, ketika seseorang mengunjungi situs WordPress Anda, server situs Anda mengirimkan konten HTML situs web Anda ke browser pengunjung tersebut.

Browser pengunjung kemudian mulai dari atas dan melewati kode untuk merender situs Anda. Jika saat berpindah dari atas ke bawah ia menemukan JavaScript apa pun, ia akan berhenti merender halaman lainnya hingga ia dapat mengambil dan mem-parsing file JavaScript.

Ini akan melakukan ini untuk setiap skrip yang ditemukannya, yang dapat berdampak negatif pada waktu pemuatan halaman situs Anda karena pengunjung perlu menatap layar kosong saat browser mereka mengunduh dan mem-parsing semua JavaScript.

Jika skrip tertentu tidak diperlukan untuk fungsi inti situs Anda (setidaknya pada pemuatan halaman awal ), Anda tidak ingin itu menghalangi pemuatan bagian yang lebih penting dari situs Anda, itulah sebabnya halaman alat pengujian kecepatan selalu memberi tahu Anda untuk menunda penguraian JavaScript.

Jadi apa artinya menunda penguraian JavaScript?

Pada dasarnya, situs Anda akan memberi tahu browser pengunjung untuk menunggu mengunduh dan/atau mengurai JavaScript hingga setelah konten utama situs Anda selesai dimuat. Pada saat itu, pengunjung sudah dapat melihat dan berinteraksi dengan halaman Anda, jadi waktu tunggu untuk mengunduh dan mengurai JavaScript tidak lagi memiliki efek negatif.

Dengan mempercepat waktu muat paruh atas konten Anda, Anda membuat Google senang dan menciptakan pengalaman yang lebih baik dan lebih cepat bagi pengunjung Anda.

Bagaimana Mengenalinya Jika Anda Perlu Menunda Parsing JavaScript

Untuk menguji apakah situs WordPress Anda perlu menunda penguraian JavaScript, Anda dapat menjalankan situs Anda melalui GTmetrix. GTmetrix akan memberi Anda nilai dan juga mencantumkan skrip khusus yang perlu ditangguhkan:

*Tunda penguraian tes JavaScript di GTmetrix*

Berbagai Metode untuk Menunda Parsing JavaScript

Ada beberapa cara berbeda untuk menunda penguraian JavaScript. Pertama, ada dua atribut yang dapat Anda tambahkan ke skrip Anda:

Asinkron
Menunda

Kedua atribut memungkinkan browser pengunjung mengunduh JavaScript tanpa menjeda penguraian HTML. Namun, perbedaannya adalah meskipun async tidak menjeda penguraian HTML untuk mengambil skrip (seperti perilaku default), async menjeda pengurai HTML untuk mengeksekusi skrip setelah diambil.

Dengan defer, browser pengunjung akan tetap mengunduh skrip saat mem-parsing HTML, tetapi mereka akan menunggu untuk mem-parsing skrip hingga parsing HTML selesai.

Grafik dari Growing with the Web ini menjelaskan perbedaannya dengan sangat baik:

Opsi lain, yang oleh Patrick Sexton dari Varvy rekomendasikan, menggunakan skrip untuk memanggil file JavaScript eksternal hanya setelah pemuatan halaman awal selesai. Ini berarti browser pengunjung tidak akan mengunduh atau menjalankan JavaScript apa pun hingga pemuatan halaman awal selesai.

Terakhir, pendekatan lain yang akan Anda lihat adalah memindahkan JavaScript ke bagian bawah halaman. Namun, metode ini bukanlah solusi yang bagus karena, meskipun halaman Anda akan terlihat lebih cepat, browser pengunjung akan tetap menampilkan halaman saat memuat hingga semua skrip selesai. Ini dapat menghentikan beberapa pengunjung untuk berinteraksi dengan halaman Anda karena menurut mereka konten tidak termuat sepenuhnya.

Cara Menunda Parsing JavaScript di WordPress (4 Metode)

Untuk menunda penguraian JavaScript di WordPress, ada tiga rute utama yang dapat Anda ambil:

Plugin – ada beberapa plugin WordPress gratis dan premium yang bagus untuk menunda penguraian JavaScript. Kami akan menunjukkan cara melakukannya dengan dua plugin populer.
Metode Varvy – jika Anda paham teknologi, Anda dapat mengedit kode situs Anda secara langsung dan menggunakan cuplikan kode dari Varvy.
File Functions.php – Anda dapat menambahkan potongan kode ke file functions.php tema anak Anda untuk menunda skrip secara otomatis.

Anda dapat mengklik di atas untuk melompat langsung ke metode pilihan Anda atau membaca semua teknik untuk menemukan yang terbaik untuk Anda.

1. Plugin Async JavaScript Gratis

Async JavaScript adalah plugin WordPress gratis dari Frank Goossens, orang yang sama di balik plugin Autoptimize yang populer. Ini memberi Anda cara sederhana untuk menunda parsing JavaScript menggunakan async atau defer.

Untuk memulai, Anda dapat menginstal dan mengaktifkan plugin gratis dari WordPress.org. Lalu, buka Pengaturan → Async JavaScript untuk mengonfigurasi plugin. Di bagian atas, Anda dapat mengaktifkan fungsionalitas plugin dan memilih antara async dan defer. Ingat:

Async mengunduh JavaScript saat masih mem-parsing HTML tetapi kemudian menjeda parsing HTML untuk mengeksekusi JavaScript.
Tunda mengunduh JavaScript saat masih mem-parsing HTML dan menunggu untuk mengeksekusinya hingga parsing HTML selesai.

Cara Menunda Parsing JavaScript — Cara menggunakan plugin Async JavaScript

Lebih jauh ke bawah, Anda juga dapat memilih cara menangani jQuery . Banyak tema dan plugin sangat bergantung pada jQuery, jadi jika Anda mencoba menunda penguraian skrip jQuery, Anda mungkin merusak beberapa fungsi inti situs Anda. Pendekatan teraman adalah mengecualikan jQuery, tetapi Anda dapat bereksperimen dengan menundanya. Pastikan untuk menguji situs Anda secara menyeluruh.

Lebih jauh ke bawah, Anda juga dapat secara manual menyertakan atau mengecualikan skrip tertentu agar tidak ditangguhkan, termasuk fitur ramah pengguna yang bagus untuk memungkinkan Anda menargetkan tema atau plugin tertentu yang aktif di situs Anda:

*Async JavaScript sertakan/kecualikan aturan.*

2. Gunakan Plugin WP Rocket

Selain banyak teknik pengoptimalan kinerja lainnya, WP Rocket dapat membantu Anda menunda penguraian JavaScript di tab Pengoptimalan File di dasbor WP Rocket. Cari opsi Muat JavaScript ditangguhkan di bagian File JavaScript .

Sederhanakan penguraian Javascript dengan plugin dari panel kontrol terpusat.

Seperti plugin JavaScript Async, WP Rocket juga memungkinkan Anda mengecualikan jQuery untuk menghindari masalah dengan konten situs Anda:

Silahkan baca lebih banyak : Membersihkan Cache DNS Pada Linux

3. Gunakan Metode (Kode) yang Direkomendasikan Varvy

Sebelumnya, kami menyebutkan bahwa Patrick Sexton dari Varvy merekomendasikan penggunaan cuplikan kode yang menunggu untuk mengunduh dan menjalankan JavaScript hingga setelah situs Anda menyelesaikan pemuatan halaman awalnya.

Anda dapat mengimplementasikan metode ini dengan men-tweak cuplikan kode yang disediakan Varvy dan kemudian menambahkan skrip ke tema Anda tepat sebelum tag </body> penutup.

Berikut kode dari Varvy :

<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>

Pastikan untuk mengganti “defer.js” dengan nama/jalur file sebenarnya dari file JavaScript yang ingin Anda tunda. Kemudian, Anda dapat menggunakan hook wp_footer untuk menyuntikkan kode melalui file functions.php tema anak Anda.

Dengan pendekatan ini, Anda akan membungkus kode Varvy menjadi 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
}

4. Tunda JavaScript melalui File functions.php

Terakhir, Anda juga dapat menambahkan atribut defer ke file JavaScript Anda tanpa memerlukan plugin dengan menambahkan potongan kode berikut ke file functions.php Anda:

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 );

Intinya, cuplikan ini memberi tahu WordPress untuk menambahkan atribut defer ke semua file JavaScript Anda kecuali jQuery.

Ringkasan

Menunda penguraian JavaScript di situs WordPress Anda merupakan pertimbangan kinerja yang penting.

Setelah Anda menggunakan salah satu metode di atas untuk menunda penguraian JavaScript di WordPress, sebaiknya lakukan dua hal:

Uji situs Anda untuk memastikan bahwa penangguhan skrip tertentu tidak merusak konten paro atas utama. Sekali lagi, ini biasanya terjadi dengan jQuery, itulah sebabnya banyak alat memungkinkan Anda mengecualikan jQuery.js. Namun, itu bisa terjadi dengan skrip lain juga.
Jalankan situs Anda melalui GTmetrix lagi untuk memastikan bahwa situs Anda menunda skrip sebanyak mungkin (Anda mungkin tidak mendapatkan skor sempurna jika Anda mengecualikan jQuery – tetapi skor Anda seharusnya lebih baik).

Artikel ini telah terbit di : Kinsta