Tutorial Menambahkan Atribut Defer dan Async Javascript di WordPress tanpa plugin

150

Get now "Themes MedianWP UI for WordPress" for only $15, Buy Now! or view Demos

Tutorial Menambahkan Atribut Defer dan Async Javascript di WordPress tanpa plugin
Tutorial Menambahkan Atribut Defer dan Async Javascript di WordPress tanpa plugin

WordPress memuat sejumlah referensi JavaScript eksternal setiap kali halaman dirender.

  1. Apa itu atribut Async dan Defer?
  2. Metode 1: Menambahkan async atau defer ke Semua Skrip
  3. Metode 2: Menambahkan async atau defer ke Semua scripts dengan Pengecualian Beberapa
  4. Metode 3: Menambahkan async atau defer ke scripts Tertentu

Ini termasuk scripts standar yang ditambahkan oleh wordpress dan beberapa yang ditambahkan oleh tema dan plugin Anda menggunakan fungsi wp_enqueue_scripts. Bergantung pada jenis skrip, scripts mungkin terletak di bagian head, body, atau footer halaman web Anda.

scripts yang terletak di dalam bagian head dan body halaman dapat menyebabkan penundaan pemuatan halaman karena browser mencoba memuat dan menjalankan scripts ini bahkan sebelum konten halaman yang sebenarnya.

Inilah sebabnya mengapa scripts ini disebut sebagai javascript pemblokiran render.

Salah satu cara untuk mengatasi masalah ini adalah dengan memindahkan semua scripts Anda ke footer halaman, tetapi jika hal ini tidak memungkinkan, opsi lainnya adalah menambahkan atribut defer atau async ke tag scripts Anda.

Mari kita lihat apa saja atribut ini dan bagaimana atribut tersebut dapat membantu Anda meningkatkan waktu muat halaman.

Apa itu atribut Async dan Defer?

Inilah yang dilakukan atribut async dan defer:

Atribut Async: Atribut async memuat scripts secara asinkron. Dengan kata lain, memastikan bahwa scripts dimuat secara asinkron di sepanjang konten halaman lainnya, setelah itu dijalankan.

Defer Attribute: Atribut defer menunda pemuatan skrip. Ini memastikan bahwa scripts dijalankan hanya setelah semua konten halaman selesai dimuat.

Kedua atribut ini didukung dengan baik di semua browser modern termasuk Firefox, Chrome, dan Internet explorer. Internet explorer telah menambahkan dukungan untuk atribut ini sejak IE10.

Contoh tag script dengan atribut async dan defer adalah sebagai berikut:



Berfungsi untuk menambahkan atribut ‘async / defer’ ke scripts pemblokiran render Anda

Pada artikel ini, kita akan melihat tiga metode berbeda untuk menambahkan atribut ini ke javascript pemblokiran render Anda. Cara-cara tersebut adalah sebagai berikut:

  • Metode 1: Menambahkan defer / async ke semua scripts tanpa kecuali.
  • Metode 2: Menambahkan defer / async ke semua scripts dengan pengecualian beberapa.
  • Metode 3: Menambahkan defer / async hanya ke scripts selektif. (Metode paling fleksibel karena memungkinkan Anda menambahkan asinkron ke beberapa scripts dan menunda yang lain.)

Anda dapat menggunakan metode apa pun yang sesuai dengan kebutuhan Anda.

Metode 1: Menambahkan async atau defer ke Semua Skrip

Jika Anda ingin menambahkan atribut async atau defer ke semua scripts tanpa kecuali maka Anda dapat menggunakan kode berikut.

Buka halaman functions.php tema Anda dan tambahkan kode ini ke bagian bawah halaman.

/*function to add async to all scripts*/
function exthemes_js_async_attr($tag){

# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'exthemes_js_async_attr', 10 );

Catatan: Fungsi di atas akan menambahkan atribut async ke semua skrip. Ganti, async = “async” dengan defer = “defer” jika Anda ingin menggunakan atribut defer sebagai gantinya.

Metode 2: Menambahkan async atau defer ke Semua scripts dengan Pengecualian Beberapa

Metode di atas menambahkan atribut async atau defer ke semua skrip. Jika sebaliknya Anda ingin menambahkan atribut ini ke semua scripts dengan sedikit pengecualian, Anda dapat menggunakan kode ini:

/*function to add async to all scripts*/
function js_async_attr($tag){

# Do not add async to these scripts
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js');
 
foreach($scripts_to_exclude as $exclude_script){
	if(true == strpos($tag, $exclude_script ) )
	return $tag;	
}

# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Catatan: Ganti, async = “async” dengan defer = “defer” pada kode di atas, jika Anda ingin menggunakan defer.

Ganti script-name1.js, script-name2.js, dll. Dengan nama-nama script yang ingin Anda kecualikan. Lihat Metode 3 di bawah jika Anda tidak tahu cara menemukan nama skrip.

Metode 3: Menambahkan async atau defer ke scripts Tertentu

Bergantung pada scripts dan fungsinya, Anda mungkin ingin ‘defer’ atau memuatnya secara asinkron.

Seperti disebutkan sebelumnya, scripts yang ditangguhkan hanya dijalankan setelah halaman selesai dimuat sepenuhnya, jadi jika scripts Anda perlu dijalankan selama pemuatan halaman, atribut async akan lebih sesuai.

Dengan mengingat hal ini, fungsi di bawah akan memungkinkan Anda menambahkan atribut defer atau async ke scripts selektif.

Mari kita lihat bagaimana ini bisa dicapai:

Langkah 1: Langkah pertama adalah menemukan dan membuat daftar semua scripts pemblokiran render yang ingin Anda tambahi atribut defer atau async.

Cara sederhana untuk melakukannya adalah dengan menggunakan alat Kecepatan Halaman Google atau alat serupa lainnya seperti yang ditawarkan oleh GTmetrix.com

Kunjungi salah satu alat ini dan masukkan URL ke salah satu halaman posting tunggal Anda dan klik ‘Analisis’. Setelah hasilnya muncul, buat daftar scripts yang terdaftar di bawah render blocking javascript.

Cara lain tentunya adalah dengan memeriksa sumber HTML halaman web Anda dan kemudian menggunakan ‘find’ (CTRL + F) untuk mencari semua file .js yang muncul di paro atas.

Langkah 2: Langkah kedua adalah menemukan nama scripts unik untuk semua scripts yang ingin Anda tangguhkan atau asinkron.

Anda dapat dengan mudah melakukan ini menggunakan wawasan Google PageSpeed.

Cukup periksa scripts Anda di bawah bagian ‘Hilangkan JavaScript yang memblokir perenderan’. Anda dapat menggunakan nama scripts sebagai nama unik.

Misalnya: Mari kita ambil scripts berikut:

https://sitename.com/wp-content/plugins/thrive/js/compat.min.js?ver=1.500.18

Nama unik untuk mengidentifikasi scripts di atas adalah compat.min.js.

Anda juga dapat menemukan nama scripts dengan memeriksa sumber HTML situs web Anda:

Untuk melakukannya, cukup buka halaman posting blog Anda di browser dan periksa sumber HTML halaman ini (Anda dapat melihat sumber HTML halaman dengan mengklik ‘CTRL + U’ pada keyboard Anda). Sesampai di sana, gunakan fungsi Find di browser Anda (CTRL + F) dan cari kata kunci, script type = ‘text / javascript’. Sekarang Anda seharusnya dapat melihat semua tag scripts Anda. (lihat gambar di bawah)

Cukup salin nama tag scripts dan gunakan sebagai nama skrip.

Seperti yang ditunjukkan pada gambar di bawah, nama unik untuk scripts adalah string yang dapat digunakan untuk mengidentifikasi scripts secara unik.

Langkah 3: Buka file functions.php tema Anda dan tambahkan kode berikut ke akhir file.

$scripts_to_defer variable berisi perintah scripts yang akan ditangguhkan dan $scripts_to_async variable berisi perintah scripts yang akan dimuat secara asinkron.

Pastikan untuk mengedit kode dengan nama scripts Anda.

/*function to add async and defer attributes*/
function defer_js_async($tag){

## 1: list of scripts to defer. (Edit with your script names)
$scripts_to_defer = array('script-name1.js', 'script-name2.js', 'script-name3.js');
## 2: list of scripts to async. (Edit with your script names)
$scripts_to_async = array('script-name1.js', 'script-name2.js', 'script-name3.js');
 
#defer scripts
foreach($scripts_to_defer as $defer_script){
	if(true == strpos($tag, $defer_script ) )
	return str_replace( ' src', ' defer="defer" src', $tag );	
}
#async scripts
foreach($scripts_to_async as $async_script){
	if(true == strpos($tag, $async_script ) )
	return str_replace( ' src', ' async="async" src', $tag );	
}
return $tag;
}
add_filter( 'script_loader_tag', 'defer_js_async', 10 );

Penjelasan Kode: Fungsi ini menambahkan atribut defer atau async ke tag scripts dengan menambahkan filter ke wordpress script_loader_tag.

Kita mulai dengan menyimpan nama unik scripts yang perlu menggunakan defer dan async dalam perintah dan kemudian menggunakan perulangan foreach untuk menjalankan perintah ini. Setiap kali loop berjalan, ia mencoba menemukan posisi nama file unik di tag scripts menggunakan fungsi strpos (posisi string). Jika fungsi strpos mengembalikan TRUE (menunjukkan posisi string unik telah ditemukan di tag skrip), atribut defer atau async ditambahkan menggunakan fungsi PHP str_replace (string replace). Jika tidak, tag dikembalikan tanpa modifikasi apa pun.

Contoh:

Misalkan Anda ingin menambahkan atribut defer ke scripts berikut:



Dan tambahkan atribut async ke scripts berikut:



Nama unik untuk mengidentifikasi dua scripts pertama adalah: contact-form-7 dan powerpress / player.min.js. Nama unik untuk mengidentifikasi dua scripts terakhir adalah: comment-reply.min.js dan twentytwelve / js / navigation.js

Setelah Anda mendapatkan namanya, Anda dapat menambahkannya ke kode di atas sebagai berikut:

## 1: list of scripts to defer.
$scripts_to_defer = array('contact-form-7', 'powerpress/player.min.js');
## 2: list of scripts to async.
$scripts_to_async = array('twentytwelve/js/navigation.js', 'comment-reply.min.js');

Catatan: Pastikan untuk membungkus nama scripts dalam tanda kutip tunggal dan pisahkan dengan koma. Anda dapat menambahkan nama sebanyak yang Anda inginkan menggunakan metode ini.

Jika Anda tidak memiliki scripts untuk ditunda, Anda dapat membiarkannya sebagai array kosong seperti berikut dan sebaliknya:

## 1: list of scripts to defer.
$scripts_to_defer = array();
## 2: list of scripts to async.
$scripts_to_async = array('twentytwelve/js/navigation.js', 'comment-reply.min.js');

Setelah selesai, simpan file functions.php dan periksa web Anda untuk memastikan bahwa atribut defer dan async telah ditambahkan.

Catatan Penting: Jika Anda menggunakan plugin ‘WP Super Cache’, maka pastikan untuk menghapus cache setelah menambahkan kode ke file functions.php Anda. Periksa kembali menggunakan Google Pagespeed setelah itu. Jika Anda tidak menghapus cache, perubahan Anda tidak akan terlihat setidaknya selama 5 hingga 6 jam.

Catatan Penting 2: Periksa sumber HTML (CTRL + U) halaman Anda untuk memastikan bahwa atributnya telah ditambahkan.

Source Tutorial to Add Defer and Async Attributes to Render Blocking Javascript in WordPress – orbitingweb.com