Cara Menggabungkan External JavaScript pada WordPress
access_time
hourglass_empty
person_outline

Cara Menggabungkan External JavaScript pada WordPress

Website yang lambat dapat menimbulkan masalah besar. Namun, ada banyak cara untuk mengatasinya. Di antara berbagai macam solusi, salah satu cara yang dapat Anda coba yaitu dengan menggabungkan external JavaScript secara benar pada WordPress.

Meski cara ini begitu simpel, tetapi kami jamin hasilnya akan memuaskan. Dalam artikel ini, kami akan menjelaskan mengapa Anda harus menggabungkan file-file external JavaScript pada WordPress dan bagaimana cara melakukannya dalam beberapa langkah sederhana.

Mengapa Anda harus Menggabungkan File External JavaScript?

Seperti yang Anda tahu, ketika Anda me-request halaman HTML tertentu, browser akan mengirimkan inquiry untuk semua resource yang dibutuhkan. Semua file, termasuk file JavaScript, akan diambil dari server dan dimuat kembali ke browser.

Pada tiap request, file JavaScript didownload secara bersamaan tetapi dieksekusi sesuai dengan urutan tampilannya di HTML. Pengunduhan terpisah dapat memperlambat kecepatan loading situs web dan proses sequence-nya akan membuat website menjadi semakin lambat.

File JavaScript dan file CSS adalah sumber render-blocking yang terjadi pada website. Browser tidak akan memuat komponen-komponen yang lainnya kecuali ketika semua file sudah termuat secara utuh. Karena file-file ini umumnya terletak di bagian atas sebuah halaman web, hal tersebut dapat menyebabkan berbagai masalah.

Untuk memastikan apakah situs mengalami permasalahan ini, kinerja situs web Anda perlu diperiksa dengan menjalankan uji kecepatan website.

Ada berbagai situs yang dapat membantu Anda untuk melakukan uji kecepatan website seperti Pingdom, GTMetrix, dan Google PageSpeed Insights. Yang perlu Anda lakukan hanyalah memasukkan link situs web, dan mengklik Analyse.

Berikut adalah contoh hasil uji kecepatan situs kami:

GTMetrix combine external JavaScript

Google Page Speed

Hasil uji kecepatan yang ideal seharusnya berada pada kategori hijau (cepat). Atau setidaknya, pastikan situs Anda tidak berada pada kategori merah. Jika hal tersebut terjadi, Anda harus segera melakukan penanganan.

Biasanya, Anda akan mendapatkan peringatan jika ada lebih dari lima file JavaScript ditemukan. Dengan menemukan persoalannya, Anda siap untuk menyelesaikan masalah tersebut.

HTTP/2

Mengimplementasikan teknologi terbaru seperti HTTP/2 akan selalu menguntungkan. Jika provider hosting Anda mendukung teknologi tersebut  seperti Hostinger, Anda mungkin tidak perlu menggabungkan file external JavaScript karena provider tersebut mendukung download paralel.

Dirilis di 2015, HTTP/2 (Hypertext Transfer Protocol versi ke 2) merupakan versi yang lebih mutakhir dari pendahulunya yaitu HTTP/1.1 yang telah menjadi standar komunikasi online sejak 1989. Peningkatan pada protokol baru tersebut bertujuan untuk:

  • Memperbaiki kecepatan memuat halaman situs web
  • Mengaktifkan unduhan paralel
  • Mengaktifkan multiplexing
  • Membuat kompresi request header
  • Head-of-line atau pemblokiran paket

Versi baru ini memiliki beberapa metode untuk mengurangi latency yang berdampak kinerja situs web secara keseluruhan.

Perlu diingat bahwa tutorial penggabungan file external JavaScript ini ditujukan  untuk mereka yang masih menggunakan HTTP/1.1.

Bagaimana Cara Menggabungkan file-file External JavaScript pada WordPress?

Seperti yang disebutkan sebelumnya, beberapa file JavaScript akan menambah total waktu render dan memicu sebuah peringatan ketika melakukan uji kecepatan loading halaman.

Sebagai solusinya, Anda dapat menggabungkan berbagai file external JavaScript pada WordPress, menjadikannya satu dan menghapuskan sisanya. Jika Anda menyalin dan menempelkan skrip yang benar, maka file gabungan JavaScript tersebut dapat bekerja secara normal seperti file yang terpisah.

Meski kesan menyalin dan menempelkan skrip ini simpel, mengerjakan kodenya akan cukup menantang. Karena mempelajari JavaScript itu sulit, melakukan task ini secara asal-asalan akan menimbulkan masalah lain.

Jadi, untuk mempermudah dan meminimalisir resikonya, Anda dapat menggunakan plugin untuk menggabungkan file external JavaScript di WordPress.

Salah satu plugin terbaik untuk menggabungkan external JavaScript adalah Autoptimize.

Plugin ini dapat membantu Anda untuk me-minify file HTML, CSS, atau JavaScript. Kami merekomendasikan Autoptimize karena plugin ini diupdate secara rutin, dengan lebih dari 900.000 instalasi aktif, plugin ini sangat direkomendasikan.

Meskipun Anda dapat menggunakannya secara gratis, Anda juga bisa mendapatkan versi premiumnya untuk mendapatkan lebih banyak fitur: Autoptimize Pro Configuration seharga 167 USD dan Complete Speed Optimisation seharga 671.74 USD.

Setelah diinstal dan diaktifkan, Anda dapat mengakses WordPress dashboard -> Settings -> Autoptimize. Dibawah tab JS, CSS & HTML, Anda dapat mencentang Optimise JavaScript Code. Setelah itu, klik Save Changes.

Autoptimize Settings untuk mempercepat website

Proses optimisasi berlangsung secara otomatis, sehingga Anda dapat segera menguji kecepatan loading halaman web lagi untuk melihat perubahannya.

Selain itu, jika ingin menggabungkan file CSS, Anda juga dapat mencentang opsi Optimize CSS Code. Bila Anda menggunakan CDN, Anda dapat memilih semuanya termasuk CDN options.

Kesimpulan

Kecepatan loading begitu penting untuk website apapun. Jika Anda menghadapi masalah terkait kecepatan loading halaman web, cobalah untuk perbaikinya secepat mungkin.

Untuk mempercepat waktu loading, Anda dapat menggabungkan file external JavaScript. Namun, penanganan secara manual mungkin membutuhkan skill pengkodean.

Jika Anda ingin menghindari kesalahan ketika menggabungkan file external JavaScript, kami menyarankan untuk menggunakan plugin agar prosesnya lebih mudah. Autoptimize adalah satu plugin WordPress terbaik untuk menyelesaikan isu tersebut. Setelah menginstal Autoptimize, Anda dapat mengoptimalkan halaman web secara otomatis.

Penulis

Author

Nadia Agatha / @nadiaagathapramesthi

Nadia merupakan penerjemah lepas sejak 2016, kini ia menjadi penerjemah untuk Hostinger. Ia gemar membaca dan melakukan penelitian seputar penerjemahan dan sosiolinguistik. Disamping itu, ia juga suka bermain dengan kucingnya dan bercengkrama bersama teman-temannya di waktu senggang.

Tutorial terkait

Ketik balasan

Komentar*

Nama*

Email*

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Jadilah bagian dari Hostinger!