Apa Itu JavaScript SEO? Begini Cara Optimasinya

JavaScript memiliki peran penting dalam membuat website menjadi dinamis dan lebih intuitif.

JavaScript memberikan user experiences (pengalaman pengguna) yang lebih interaktif.

Namun, dalam konteks SEO, JavaScript bisa menjadi tantangan bagi beberapa website, khususnya pada proses crawling (perayapan), rendering, hingga indexing.

Pasalnya, search engine terkadang mengalami kesulitan dalam memproses dan memahami konten yang dihasilkan oleh JavaScript.

Mau tahu lebih lanjut mengenai JavaScript dan hubungannya dengan SEO hingga tips untuk mengoptimasinya?

Silakan baca artikel ini hingga selesai!

Apa Itu JavaScript SEO?

Pertama, teman-teman harus memahami dulu tentang JavaScript.

JavaScript (JS) adalah sebuah scripting language (bahasa skrip) yang memungkinkan Anda untuk membuat, memperbarui, mengontrol website beserta kontennya secara dinamis.

JS bisa digunakan untuk menambahkan interaktivitas dan fungsionalitas pada website, membuatnya tidak hanya informatif, tetapi juga menarik dan responsif.

Di sisi lain, Javascript SEO adalah bagian dari technical SEO (SEO teknikal).

Fokus utamanya adalah pada optimasi website yang dibangun menggunakan JavaScript, memastikan bahwa mereka dapat dengan mudah di-crawl, di-render, dan terindeks oleh search engine.

Bagaimana Google Memroses JavaScript?

Untuk memperjelas penjelasan di atas, Google sendiri memroses aplikasi website berbasis JavaScript dalam tiga tahap utama, yaitu:

• Crawling
• Rendering
• Indexing

Berikut adalah gambar ilustrasinya:

Web crawler (perayap web) Google (lebih dikenal Googlebot) memulai prosesnya dengan menerima antrian halaman yang perlu di-crawl dan di-render.

Setelah itu, Googlebot membuat permintaan. Kemudian server mengirimkan dokumen dalam bentuk HTML-nya.

Setelah menerima dokumen HTML, Googlebot mengevaluasi dan menentukan sumber daya yang diperlukan untuk merender konten halaman dengan akurat.

Penting untuk dicatat, berdasarkan proses di atas, artinya Google “hanya” merayapi dokumen HTML.

Bukan file JS atau CSS, sebab rendering JavaScript memerlukan sumber daya yang sangat besar.

Sekarang coba teman-teman bayangkan tentang berapa besar sumber daya komputasi yang dibutuhkan oleh Googlebot untuk men-download, membaca, dan menjalankan JS untuk triliunan konten halaman di hampir 2 miliar website.

Tentunya sangat besar bukan?

Oleh karena itu, Google akan menunda rendering dokumen-dokumen dalam bentuk JavaScript.

Dokumen-dokumen (JavaScript yang ditunda) ini kemudian dimasukkan ke dalam antrian dan hanya diproses ketika sumber daya benar-benar tersedia.

Ketika nanti sumber dayanya memungkinkan, maka Chromium, yaitu browser Chrome tanpa antarmuka pengguna, akan melakukan render halaman dan menjalankan JavaScript-nya.

Setelah halaman di-render, Googlebot melakukan proses crawling ulang terhadap HTML yang sudah di-render untuk mengidentifikasi dan mengumpulkan link yang ada di halaman tersebut.

Link-link ini lalu ditambahkan ke dalam antrian crawl berikutnya.

Pada tahap terakhir, Google menggunakan HTML yang telah dirender untuk mengindeks halaman-halaman tersebut.

Tips Mengoptimasi JavaScript untuk SEO

Teman-teman dapat mengikuti beberapa tips di bawah untuk memastikan search engine dapat merayapi, merender, dan mengindeks konten JS Anda dengan benar.

1. Hindari File JavaScript yang di-download Berulang-ulang

Tips yang pertama adalah avoid JavaScript file proliferation di dalam jumlah file JavaScript di website Anda.

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

2. Hindari DNS Lookup yang Berlebihan

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.

3. Hilangkan JavaScript yang Tidak Efisien

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 menjadi lambat ketika dibuka.

Ketika website lambat, maka user experience akan dinilai jelek.

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

4. Hilangkan JavaScript yang Tidak Digunakan

File JavaScript yang tidak digunakan (unused JavaScript) juga termasuk dalam kategori inefficient, namun Alan mengatakan bahwa masalah 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.

5. Mengompres File JavaScript

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.

6. Atur Durasi Cache yang sesuai untuk Kode JavaScript

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.

Masalah yang Umum Terjadi pada JavaScript SEO

Berikut adalah beberapa masalah paling umum terjadi pada JavaScript SEO:

• Memblokir file .js di file robots.txt dapat mencegah Googlebot meng-crawl sumber daya yang ada. Artinya, Google tidak dapat merender dan mengindeksnya. Untuk itu, izinkan file tersebut untuk dirayapi oleh Googlebot.
• Google tidak akan menunggu dengan lama hingga konten JavaScript dirender. Konten Anda mungkin tidak diindeks karena kesalahan timeout (batas waktu).
• Search engine tidak dapat mengklik tombol. Maka, gunakanlah internal link (<a href="">) untuk membantu Googlebot menemukan halaman di website Anda.
• Saat menerapkan lazy-loading menggunakan JavaScript, pastikan Anda tidak menunda pemuatan konten yang seharusnya diindeks.
• Google sering mengabaikan tanda hash (#), jadi pastikan gunakan URL statis untuk halaman website Anda. Pastikan URL Anda terlihat seperti ini: (domainanda.com/slug), dan bukan seperti ini (domainanda.com/#/slug).

Demikianlah artikel mengenai apa itu JavaScript SEO beserta tips mengoptimasinya ini, jika teman-teman memiliki pertanyaan silakan tuliskan di kolom komentar di bawah atau bisa gabung ke grup Telegram DailySEO ID di sini.

Teman-teman juga bisa ajukan topik selanjutnya untuk kami bahas! Jika ingin belajar SEO dari ahlinya, yuk belajar di course-nya DailySEO ID!

Referensi:

https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics

https://www.semrush.com/blog/javascript-seo

https://www.youtube.com/watch?v=sq_-3WM4wZA