Teman-teman pasti sering mendengar tentang JavaScript. Menggunakan JavaScript, website tampil lebih dinamis, atraktif, interaktif, dan akhirnya meningkatkan user engagement.
Lebih lanjut lagi, JavaScript bisa kita gunakan untuk mengeksekusi complex action di dalam website, karena JavaScript adalah bahasa pemrograman yang paling umum digunakan dalam membuat website.
Tapi sudah menjadi rahasia umum bahwa JavaScript juga memberikan beberapa masalah performa pada website, seperti page loading time, masalah rendering, crawling, indexing, dan sebagainya. Beberapa masalah ini akan memberikan dampak negatif dari aktivitas search engine optimization (SEO) yang sedang teman-teman lakukan.
Maka dari itu DailySEO ID akan mengutip tips dari Alan Kent, Developer Advocate Google, dari kanal Youtube Google Search Central tentang cara mengoptimasi website (khususnya website e-commerce) yang terkait dengan JavaScript library dan framework.
Topik ini kami angkat agar teman-teman praktisi SEO bisa memiliki pengetahuan yang cukup untuk bisa berdiskusi hal-hal yang sangat teknis dengan rekan-rekan web developer di kantornya.
Apa saja tipsnya? Mari kita mulai dari yang pertama.
Daftar Isi
- 1. Hindari file JavaScript yang di-download berulang-ulang (avoid JavaScript file proliferation)
- 2. Hindari DNS lookup yang berlebihan (avoid excessive DNS lookups)
- 3. Hilangkan JavaScript yang tidak efisien (eliminate inefficient JavaScript)
- 4. Hilangkan JavaScript yang tidak digunakan (eliminate unused JavaScript)
- 5. Mengompres file JavaScript (compress JavaScript files)
- 6. Atur durasi cache yang sesuai untuk kode JavaScript (set appropriate cache durations for JavaScript code)
- Penutup
1. Hindari file JavaScript yang di-download berulang-ulang (avoid JavaScript file proliferation)
Tips yang pertama adalah avoid JavaScript file proliferation di dalam jumlah file JavaScript di website Anda, atau dalam bahasa yang lebih sederhana, “hindari file JavaScript yang di-download berulang-ulang”.
Jumlah JavaScript file mungkin akan meningkat jika tidak diperhatikan, khususnya pada setiap UI component yang disimpan dalam file terpisah.
Karena dengan itu maka akan ada beban tambahan per file yang di-download khususnya untuk website yang hanya support HTTP1.
Cara Mendeteksi File JavaScript yang Terlalu Banyak
Ada beberapa tools yang bisa Anda gunakan ketika website Anda memiliki file JavaScript yang terlalu banyak, salah satunya adalah PageSpeed Insights yang dapat menggabungkan data dari real user dengan lab testing.
Untuk caranya silakan buka website PageSpeed Insight, lalu masukkan URL website atau URL halaman web yang spesifik.
Kemudian cek pada bagian Opportunity. Pada bagian ini terdapat sejumlah rekomendasi agar website Anda lebih optimal.
Sebagai contoh, pada tab report Keep request counts low and transfer sizes small, ketika kita expand bagian ini, maka akan tampil rangkuman total jumlah dan size Resource Type yang di-request, termasuk file JavaScript di dalamnya.
Bagaimana cara memperbaikinya? Sebenarnya ada beberapa teknik yang bisa Anda lakukan untuk mengurangi jumlah file yang akan di-download.
Tapi cara menguranginya akan tergantung pada fleksibilitas platform website yang Anda gunakan, sebab ada beberapa content management system yang tidak memberikan akses untuk melakukan simplify JavaScript.
Jika Anda memiliki akses untuk melakukan perubahan file JavaScript, teman-teman bisa menggabungkan beberapa small JavaScript file tersebut ke dalam satu file untuk menghasilkan satu file besar agar proses download menjadi lebih efisien.
Harap diingat, untuk website yang sudah support HTTP2 bisa ditingkatkan efisiensinya tanpa perlu melakukan penggabungan file, karena HTTP2 sendiri sudah mampu meningkatkan efisiensi download terhadap small JavaScript file yang jumlahnya banyak.
Baca juga: SEO Tools Gratis untuk Membantu Aktivitas SEO Kita
2. Hindari DNS lookup yang berlebihan (avoid excessive DNS lookups)
Terkadang kita menggunakan JavaScript dari website lain/pihak ketiga, atau disebut juga “menggunakan eksternal JavaScript”. Saat ini terjadi, website kita perlu mencari “alamat” alias DNS (Domain Name System) dari website lain tersebut sebelum me-load JavaScript file-nya.
Tips yang kedua adalah hindari DNS lookup yang berlebihan, alias avoid excessive DNS lookups untuk eksternal JavaScript. Jika file JavaScript di-load dari beberapa nama domain yang berbeda, maka sangat mungkin terdapat DNS lookup overhead per nama domain yang mereferensikan file JavaScript.
Intinya apabila terlalu banyak eksternal JavaScript sehingga DNS lookup-nya sampai berlebihan, hal tersebut akan memperlambat waktu load kunjungan pertama user di website Anda.
Untuk mengeceknya, silakan buka PageSpeed Insight lalu masukkan URL website Anda seperti biasa, kemudian cek bagian URL pada tab report Reduce JavaScript execution time, di sini akan tampil beberapa nama domain.
Anda juga bisa menemukan nama domain tersebut pada tab Network menggunakan Chrome Developer Tools.
Untuk mengurangi jumlah DNS lookup, coba pertimbangkan apakah memungkinkan untuk menyimpan salinan eksternal JavaScript langsung ke host website Anda sendiri. Meskipun terkadang cara ini bukanlah cara yang tepat untuk mengurangi DNS lookup.
Kenapa?
Sebab jika teman-teman menggunakan library JavaScript populer dari sumbernya langsung, ada kemungkinan library tersebut sudah tersedia di browser cache milik user dan hal ini sudah cukup untuk mengurangi DNS lookup request.
Tambahan: Memasukkan file JavaScript ke host website sendiri mungkin akan meringankan DNS lookup, tapi membuat file download menjadi dua kali lebih besar.
Baca juga: Update Terbaru Google Search Console: Report untuk Video yang Diindeks
3. Hilangkan JavaScript yang tidak efisien (eliminate inefficient JavaScript)
Selanjutnya adalah menghilangkan JavaScript yang tidak efisien (eliminate inefficient JavaScript) yang ada di website teman-teman.
Anda perlu tahu bahwa JavaScript yang kualitasnya buruk dapat membuat website Anda secepat siput (lambat) ketika dibuka.
Ketika website lambat, maka user experience akan terganggu.
Cara mendeteksinya kita bisa buka tab report Reduce JavaScript execution time di PageSpeed Insight. Jika terdeteksi, di sini akan tampil report jumlah CPU time yang relatif besar ketika mengurai atau mengeksekusi kode JavaScript.
Kita juga bisa mendeteksi masalah inefficient JavaScript pada tab report Eliminate render-blocking resources, yang mana JavaScript mungkin di-execute sebelum halaman web dapat di-render, dan membuat user menunggu lebih lama untuk melihat konten di dalam web.
Lalu, cek bagian Avoid document.write(), karena jika fungsi JavaScript document.write ini salah digunakan, maka hal tersebut bisa menjadi masalah yang akan mengganggu performa website teman-teman, karena fungsinya akan memblokir JavaScript operation lainnya dan menyebabkan inefficient JavaScript.
Bagi developer atau teman-teman yang mengerti programming JavaScript, silakan baca lebih lanjut mengenai permasalahan document.write().
Cek juga tab report Does not use passive listeners to improve scrolling performance, karena penggunaan passive listeners ini dapat membuat website Anda menjadi lambat.
Sebuah passive listeners adalah petunjuk bagi web browser bahwa kode JavaScript tidak melakukan panggilan function yang mencegah tindakan scrolling, dan tetap membiarkan browser melakukan scroll halaman web ketika JavaScript masih dalam proses di-execute.
Pembahasan membuat JavaScript menjadi lebih efisien adalah topik yang sangat luas sehingga tidak mungkin dibahas pada konten kali ini, dan Alan Kent menyarankan kita untuk membaca sumber-sumber di internet yang membahas sejumlah teknik mulai dari profiling existing code hingga menulis kode yang lebih efisien.
Baca juga: Cara Praktis Menemukan dan Memperbaiki Broken Link dalam Website
4. Hilangkan JavaScript yang tidak digunakan (eliminate unused JavaScript)
File JavaScript yang tidak digunakan (unused JavaScript) juga termasuk dalam kategori inefficient, namun Alan mengatakan bahwa problem ini dapat diselesaikan sendiri.
Memasukkan kode JavaScript yang sama berulang kali pada setiap halaman website akan menyebabkan penggunaan JavaScript yang tidak dibutuhkan.
Hal ini dikarena banyak website yang tidak menggunakan semua function yang disediakan oleh library atau JavaScript framework. Sayangnya kode JavaScript yang tidak digunakan tadi tetap di-download dan di-parse oleh web browser yang sudah pasti membuang-buang resource web host Anda.
Cara mendeteksinya adalah dengan membuka tab report Reduce unused JavaScript yang ada di PageSpeed Insight.
Bisa juga melihat tab report Avoid enormous network payloads.
Dan juga cek tab report Minimize main-thread work.
Untuk memperbaikinya, Alan menyarankan kita menggunakan teknik tree-shaking yang bisa mendeteksi JavaScript yang tidak pernah di-call pada website dan juga aman untuk dihapus.
Baca juga: Daftar Indikator Performa Technical SEO dalam Google Search Console
5. Mengompres file JavaScript (compress JavaScript files)
Pastikan file JavaScript di website Anda dikompresi saat di-download, khususnya pada file yang berukuran besar. Sebab jika tidak dikompresi, web browser harus menghabiskan lebih banyak CPU time dan membuat website Anda lambat.
Lihat report Enable text compression di yang tersedia PageSpeed Insight.
Di sini akan tampil sejumlah file yang perlu Anda kompresi.
Cara memperbaikinya tentu dengan melakukan kompresi file JavaScript tersebut, dan apabila Anda menggunakan Content Management System (CMS) seperti WordPress, maka Anda bisa melakukannya dengan mudah menggunakan plugin yang tersedia.
Pastikan lakukan kompresi file JavaScript ini dengan tepat agar tampilan dan fungsi website Anda tidak berubah atau bahkan rusak total.
Baca juga: Panduan Lengkap Google Analytics untuk SEO: GA4 dan Universal Analytics
6. Atur durasi cache yang sesuai untuk kode JavaScript (set appropriate cache durations for JavaScript code)
Pastikan file JavaScript Anda returned (dikembalikan) dengan cache expiry time headers yang sesuai.
Hal ini akan membantu web browser menghindari proses berlebihan saat mengecek file JavaScript kedaluwarsa yang ada di cache-nya.
Cara mendeteksinya adalah silakan cek tab Networking pada Chrome Developers Tools, di sini Anda dapat mengecek HTTP response headers untuk file JavaScript yang telah di-download. Carilah headers seperti Cache Control.
Cek juga tab report Serve static assets with an efficient cache policy di PageSpeed Insight.
Di sana akan tampil daftar file yang bisa Anda terapkan cache headers.
Cara mengoptimasi caching JavaScript file yang sering digunakan di dalam website adalah dengan mereferensikan file tersebut dari shared public location.
Karena apabila user mengunjungi website dengan file JavaScript yang sama, maka web browser dapat menggunakan salinan file yang telah di-download sebelumnya, dan tentunya akan meningkatkan kinerja website Anda.
Selain itu pastikan juga website Anda returning cache lifetime headers yang sesuai untuk membantu web browser menyimpan JavaScript di cache-nya.
Baca juga: Pekerjaan yang Membosankan vs Silaunya Hasil dari SEO (The Grind vs The Flash of SEO)
Penutup
Itulah 6 tips yang Alan Kent bagikan kepada kita di kanal Google Search Central.
Topik ini sulit? Kemungkinan besar iya. Tapi apakah BISA dimengerti? Tentu bisa!
Kami mengerti bahwa sebagian besar dari teman-teman praktisi SEO tidak memiliki pengetahuan programming/coding, sehingga topik ini relatif sulit dipahami dibanding topik-topik technical SEO lainnya.
Akan tetapi, ilmu seperti ini wajib diketahui oleh teman-teman SEO, walaupun kita tidak harus bisa coding untuk melakukan implementasi dalam hal-hal teknis. Pengetahuan seperti ini membuat teman-teman SEO bisa lebih dihargai dan lebih mudah berkomunikasi dengan tim web developer.
Cobalah untuk konsultasikan hal-hal di atas dengan tim web developer Anda, karena merekalah yang lebih memahami pembuatan, pengeditan, dan penghapusan file JavaScript, apakah memungkinkan atau malah merusak website Anda.
Mari bersama-sama membangun industri SEO di Indonesia yang sehat tanpa trik spammy, dan silakan ajukan pertanyaan seputar SEO dan Digital Marketing di grup Telegram DailySEO ID, yuk gabung di sini!
Sumber:
5 Comments
Kalo pakai framework vuejs, untuk optimasi meta tags, cannonical, dll bagaimana ya?
kalo tidak tahu coding bakal ribet, gimana cara kerjasama/minta bantuan ke developer ?
Saya sendiri bukan programmer, hanya sekedar tahu saja, jadi belum bisa jawab pertanyaan yang atas.
Untuk pertanyaan yang bawah, saran saya adalah dengan berkomunikasi dengan tim developernya Mas. Ada baiknya ketika sedang meeting di mana ada sejumlah atasan, kemudian jelaskan:
1. Hal ini harus diperbaiki untuk mendapatkan blabla…. (manfaat dari sisi SEO)
2. Jika tidak diperbaiki maka hasilnya blabla… (dampak negatif dari sisi SEO)
Mudah-mudahan mereka (tim developer) dan atasan akan mengerti.
Jangan lupa juga traktir tim developernya atau ajak mabar supaya semakin akrab. 😀
Pingback: Panduan Google PageSpeed Insight untuk Website Cepat - DailySEO ID
Google Tag Manager adalah salah satu elemen yang menyumbang performa website menurub, lalu solusinya gimana? Mohon contoh nyatanya, misalnya pasang script penangkal speed lambat.
Ditunggu balasannya, Thank’s…
Sharing is caring the say, and you’ve done a fantastic job in sharing your knowledge on your blog. It would be great if you check out my page, too, at YH6 about Article Marketing.