Tunda Parsing Javascript di WordPress [Menggunakan Tunda dan Async]

Situs WordPress yang memuat cepat memberikan manfaat serius dalam hal meningkatkan pengalaman pengguna bagi pengunjung, meningkatkan visibilitas situs web Anda di mesin telusur, dan meningkatkan lalu lintas organik situs Anda.

Halaman web berisi HTML, CSS, Javascript, dan gambar, dan masing-masing harus dioptimalkan untuk mengurangi waktu buka halaman. Gambar memiliki salah satu efek terbesar pada ukuran halaman sehingga penting untuk mengurangi ukuran file gambar menggunakan plugin pengoptimalan gambar WordPress.

Untuk lebih meningkatkan kinerja halaman, Anda dapat menunda penguraian javascript di WordPress yang berarti Anda dapat menyarankan browser untuk memuat konten halaman dan gambar sebelum Javascript dimuat. Mengambil ukuran ini berarti bahwa elemen Javascript seperti formulir dan bilah geser mungkin memerlukan beberapa detik tambahan untuk dimuat, tetapi ini adalah harga kecil yang harus dibayar karena waktu pemuatan halaman ditingkatkan secara signifikan.

Kode Javascript dapat dieksekusi nanti menggunakan dua teknik yang disebut Defer dan Async . Kedua metode didukung oleh plugin caching WordPress yang populer, meskipun solusi khusus akan memberi Anda sedikit lebih banyak kendali atas file Javascript mana yang dimuat nanti.

Pada artikel ini, saya akan menjelaskan apa manfaat menunda pemuatan file Javascript dan menunjukkan kepada Anda lima plugin WordPress yang bermanfaat akan menyederhanakan proses untuk Anda.

Saya mendorong Anda untuk membaca seluruh artikel untuk mendapatkan pemahaman penuh tentang topik ini, tetapi jika Anda seorang pemula, satu hal yang harus Anda ambil dari artikel ini adalah bahwa Defer dan Async dapat meningkatkan waktu pemuatan halaman situs web Anda secara signifikan.

Berbagai Cara Menunda Parsing Javascript di WordPress (Dengan Tunda & Async)

Javascript telah memantapkan dirinya sebagai blok bangunan penting situs web WordPress, digunakan untuk menampilkan tombol, formulir, galeri media, audio, video, penghitung waktu mundur, garis waktu media sosial, dan banyak lagi.

Sayangnya, Javascript juga merupakan salah satu alasan utama halaman web memuat dengan lambat karena browser harus berhenti, mengunduh, dan menjalankan setiap skrip sebelum dapat melanjutkan mem-parsing markup HTML halaman tersebut.

Parsing adalah proses di mana browser menganalisis dan mengonversi kode halaman ke format yang dapat dijalankannya. Kode apa pun yang menghentikan proses ini disebut "Pemblokiran Render" karena menunda proses rendering halaman untuk pengunjung.

Sumber daya pemblokiran render adalah alasan umum mengapa situs web WordPress memuat dengan lambat. CSS penting dapat ditampilkan sebaris untuk mencegah pemblokiran render, tetapi lebih baik menunda pemuatan Javascript nanti menggunakan Tunda atau Async untuk mencegah kode Javascript memblokir rendering halaman.

Ini juga praktik yang baik untuk menghapus kode Javascript yang tidak terpakai dan mengurangi waktu eksekusi Javascript. Salah satu cara untuk melakukannya adalah dengan mengurangi ukuran file Javascript yang besar melalui proses yang disebut Minification , yang menghapus spasi dan kode yang tidak diperlukan dari setiap file Javascript.

Salah satu metrik terpenting yang dipertimbangkan oleh layanan pembandingan situs web seperti Google PageSpeed ​​Insights dan GTmetrix adalah First Contentful Paint, yaitu waktu yang diperlukan untuk menampilkan konten pertama kepada pengunjung. Google menyatakan bahwa waktu FCP 0 hingga 1,8 detik baik dan 1,8 hingga 3 detik sedang. Apa pun di atas 3 detik dianggap lambat.

Yang harus Anda lakukan adalah memasukkan URL halaman ke layanan pembandingan situs web untuk melihat file Javascript dan CSS yang memblokir perenderan halaman. Seperti yang dapat Anda lihat dari tangkapan layar di bawah, file CSS dan Javascript pemblokiran perenderan memerlukan beberapa detik untuk diunduh, jadi jika Anda dapat menghilangkan sumber daya ini, laman Anda akan memuat lebih cepat secara signifikan.

Cara paling efektif untuk menghilangkan file Javascript yang memblokir render adalah dengan menggunakan atribut defer dan async . Atribut boolean ini hanya dapat digunakan dengan elemen skrip HTML saat atribut SRC digunakan untuk memanggil file eksternal.

 <script src="javascript.js"></script>

 <script defer src="javascript.js"></script>

 <script async src="javascript.js"></script>

Saat Anda menambahkan atribut defer atau async ke elemen skrip HTML, Anda menyarankan browser untuk mengunduh file pada saat yang sama saat halaman diuraikan. Dengan penangguhan, file dieksekusi setelah halaman sepenuhnya diuraikan.

Sebaliknya, atribut async adalah operasi asinkron yang mengeksekusi file segera setelah diunduh. Dengan demikian, total waktu untuk mem-parsing halaman dengan async akan sedikit lebih tinggi karena browser akan menghentikan parsing HTML sebentar untuk mengeksekusi file.

Jika Anda menentukan penangguhan dan async, browser akan menggunakan async.

Standar penting untuk dipahami adalah Document Object Model, yang sering disebut sebagai DOM. DOM mewakili seluruh dokumen, seperti file XML atau halaman HTML, sebagai objek tunggal. Elemen penting seperti head, body dan header, dapat dianggap sebagai cabang dari DOM.

Jika file Javascript tidak memerlukan informasi dari file lain atau dari DOM itu sendiri, sebaiknya gunakan metode async karena elemen penting halaman Anda akan ditampilkan lebih cepat. Ketahuilah bahwa async dapat menyebabkan kesalahan pada situs web Anda jika file tersebut meminta informasi yang belum dimuat.

Jika file Javascript membutuhkan informasi, penundaan adalah opsi yang lebih disukai karena memastikan semua konten diambil dengan benar sebelum file dijalankan.

Tujuan penangguhan dan async adalah untuk mengurangi pemblokiran rendering halaman dan Anda akan melihat peningkatan besar dalam waktu pemuatan halaman metode apa pun yang Anda gunakan.

Saya merekomendasikan untuk membaca artikel Zell Liew “Bagaimana dan kapan menggunakan atribut Async dan Tunda” untuk penjelasan yang lebih lengkap tentang kapan menggunakan defer dan async.

Cara Menunda Parsing Javascript Menggunakan Plugin WordPress

Sebagian besar panggilan Javascript di situs web Anda akan berasal dari tema WordPress dan plugin WordPress yang diaktifkan, oleh karena itu tidak praktis menambahkan atribut defer dan async secara manual ke elemen skrip.

Lebih baik menggunakan plugin WordPress kinerja untuk menunda penguraian javascript di WordPress dan menyederhanakan proses penerapan penangguhan atau async di seluruh situs web Anda.

Perhatikan fakta bahwa pengaturan konfigurasi yang salah akan menyebabkan masalah dengan desain situs web Anda. Misalnya, formulir kontak mungkin tidak ditampilkan dengan benar kecuali Anda memilih pengaturan konfigurasi yang tepat atau mengecualikan file formulir kontak dari pengoptimalan.

Trial and error, oleh karena itu, diperlukan untuk menemukan pengaturan konfigurasi yang tepat dan kinerja terbaik untuk situs web Anda.

• Pencadangan Situs Web – Cadangkan situs web Anda sebelum Anda mengaktifkan plugin pengoptimalan WordPress
• Uji Kinerja – Uji kinerja halaman utama di situs web Anda dan setiap kali Anda mengubah pengaturan konfigurasi pengoptimalan
• Tinjau Situs Web Anda – Pastikan tidak ada bagian dari situs web Anda yang rusak setelah mengubah konfigurasi

Jika Anda mengalami masalah besar saat menunda penguraian javascript, kembalikan ke pengaturan default plugin. Plugin juga dapat dihapus instalasinya jika tidak bekerja selaras dengan situs web Anda.

1. Optimalkan otomatis

Autoptimize adalah solusi pengoptimalan WordPress serbaguna yang memungkinkan Anda menggabungkan dan memperkecil Javascript, CSS, dan HTML. Konten yang dioptimalkan di-cache untuk meningkatkan kinerja. Cache ini dapat dengan cepat menjadi terlalu besar, jadi saya mendorong Anda untuk menggunakan Autoclear Autoptimize Cache untuk menghapus cache secara otomatis.

Meskipun Autoptimize dikenal untuk agregasi file, itu juga dapat digunakan untuk menunda penguraian file Javascript sehingga tidak memblokir render. Kode Javascript dan CSS juga dapat ditampilkan sebaris dan ada opsi pengoptimalan tambahan untuk gambar, Google Font, emoji, dan lainnya.

2. Plugin Async JavaScript

Dikembangkan oleh pencipta Autoptimize, Async JavaScript memungkinkan Anda menerapkan async dan menunda file Javascript di seluruh situs web Anda. Ini memberi Anda kendali penuh atas setiap file Javascript, memungkinkan Anda untuk mengecualikan jQuery, file Javascript tertentu, plugin WordPress, dan tema WordPress. Jika mau, Anda dapat menentukan dengan tepat file Javascript mana yang akan disinkronkan dan mana yang akan ditunda.

Salah satu fitur paling keren dari Async Javascript adalah panduan penyiapan yang menjalankan uji kinerja pada GTmetrix untuk semua kemungkinan pengaturan konfigurasi untuk situs web Anda. Ini adalah penghemat waktu yang bagus karena hasilnya menunjukkan dengan tepat seberapa cepat situs web Anda dengan setiap konfigurasi, tetapi pastikan untuk memeriksa situs web Anda setiap saat untuk memastikan tidak ada aspek situs web Anda yang rusak.

3. Perf penting

Perfmatters adalah toolbox kinerja WordPress premium yang menawarkan lusinan fitur kinerja unik. Dengan harga eceran mulai dari $24,95 per tahun, plugin ini memungkinkan Anda menunda penguraian file Javascript (semua file JS) di situs web Anda. File jQuery dapat disertakan dalam penangguhan dan Anda juga dapat mengecualikan file Javascript tertentu. Pilihan keren lainnya adalah Javascript Delay, yang hanya akan memuat file Javascript saat ada interaksi pengguna.

Perfmatters dapat digunakan untuk menonaktifkan fitur inti WordPress untuk meningkatkan keamanan dan kinerja. Ini juga memungkinkan Anda menentukan URL masuk khusus, memuat konten sebelumnya, memuat gambar dengan malas, mengintegrasikan Google Analytics, mengoptimalkan Google Font, dan banyak lagi.

Fitur favorit saya adalah pengelola skrip karena memungkinkan Anda untuk mengaktifkan dan menonaktifkan file Javascript dan CSS untuk setiap halaman di situs web Anda. Ini akan sangat mengurangi ukuran halaman karena pengembang WordPress memiliki kebiasaan buruk memuat file Javascript dan CSS di seluruh situs web Anda, meskipun hanya diperlukan di beberapa halaman.

4. Pembersihan Aset

Asset CleanUp adalah plugin WordPress pengoptimalan kaya fitur yang memungkinkan Anda memperkecil, menggabungkan, dan menunda penguraian file Javascript dan CSS. Pengelola CSS dan JS-nya bekerja dengan cara yang mirip dengan pengelola skrip Perfmatter, memungkinkan Anda untuk menentukan apakah suatu file dimuat pada halaman tertentu. Anda juga dapat menonaktifkan pengaturan inti WordPress, membersihkan kode HTML, mengoptimalkan Google Font, dan banyak lagi.

Lisensi tunggal untuk Asset CleanUp Pro dijual seharga €42,36 per tahun. Memutakhirkan memungkinkan Anda untuk menempatkan kode sebaris dan menentukan async dan menunda file Javascript berdasarkan halaman demi halaman. Itu juga membuka kunci pengelola plugin dan memberi Anda kendali lebih besar atas bagaimana aset dimuat di situs web Anda.

5. Pramuat Dorong HTTP/2

HTTP/2 Push Preload memungkinkan Anda mendorong dan melakukan pramuat file Javascript dan CSS di seluruh server yang didukung HTTP2 menggunakan fungsi pemuatan enqueue. Ini dapat diterapkan ke semua file atau Anda dapat memilih untuk mengonfigurasi setiap sumber daya secara terpisah. Jenis sumber daya meliputi skrip, gaya, audio, sematkan, ambil, font, gambar, objek, dan video.

Saat Anda memasukkan URL file Javascript, Anda dapat memilih untuk menyinkronkan, menunda, atau menghapus. HTTP/2 Push Preload memungkinkan Anda menentukan aturan kapan setelan ini akan diterapkan. Anda dapat menentukan aturan Javascript untuk sumber daya untuk semua halaman, untuk ponsel atau desktop, untuk posting dan halaman tertentu, untuk kategori, halaman pencarian, halaman WooCommerce, dan lainnya.

Pikiran Akhir

Javascript terus menjadi metode pilihan untuk menambahkan konten dinamis dan elemen interaktif ke situs web. Karena banyak tema dan plugin WordPress menggunakan Javascript, penting untuk menunda penguraian javascript di WordPress dan menggunakan defer dan async untuk memastikan halaman dirender dengan cepat dan mengurangi pemblokiran rendering halaman.

Anda akan menemukan fungsionalitas untuk menerapkan penangguhan dan async di banyak plugin WordPress, meskipun solusi yang saya rujuk dalam artikel ini memberi Anda lebih banyak kendali atas file Javascript Anda.

Di situs web saya sendiri, saya menggunakan Autoptimize untuk agregasi file dan Async JavaScript untuk penangguhan Javascript. Saya senang dengan Async Javascript, meskipun HTTP/2 Push Preload mungkin merupakan pilihan yang lebih baik bagi banyak pemilik situs web karena ini memberi Anda kontrol yang lebih baik di mana pengaturan pengoptimalan diterapkan.

Pembersihan Aset dan Perfmatters menawarkan fitur dan fungsionalitas serupa, jadi saya tidak menyarankan untuk menggunakannya bersamaan. Asset CleanUp Pro tidak diragukan lagi menawarkan kontrol yang lebih baik dan fitur yang lebih canggih, meskipun saya terus menggunakan Perfmatters di situs web saya sendiri untuk membersihkan WordPress karena lebih mudah digunakan. Kedua solusi tersebut akan meningkatkan penyiapan pengoptimalan WordPress apa pun, bahkan jika Anda menggunakan plugin WordPress yang berbeda untuk menunda penguraian javascript untuk mengurangi pemblokiran perenderan halaman.

Saya mendorong Anda untuk menguji semua plugin WordPress ini untuk menunda penguraian javascript dan melakukan beberapa pengujian untuk memastikan Anda memiliki konfigurasi terbaik.

Semoga beruntung.

Kevin