JavaScript
Satu bagian dalam membangun situs mobile-friendly yang membutuhkan pertimbangan matang adalah penggunaan JavaScript untuk mengubah perenderan dan perilaku situs pada perangkat yang berlainan. Penggunaan umum JavaScript mencakup penentuan iklan dan variasi resolusi gambar yang ditampilkan di halaman tersebut.
Bagian ini menjelaskan berbagai pendekatan untuk menggunakan JavaScript serta hubungannya dengan rekomendasi Google terkait penggunaan desain web yang responsif.
Konfigurasi umum
Ada tiga implementasi JavaScript yang populer bagi situs mobile-friendly:
JavaScript-adaptif: Dalam konfigurasi ini, semua perangkat mendapatkan konten HTML, CSS, dan JavaScript yang sama. Saat JavaScript dijalankan di perangkat, rendering atau perilaku situs akan diubah. Jika sebuah situs memerlukan JavaScript, ini merupakan konfigurasi yang direkomendasikan oleh Google.
Deteksi gabungan: Dalam implementasi ini, situs menggunakan deteksi JavaScript dan sisi server atas kemampuan perangkat untuk menayangkan kontenyang berbeda ke perangkat yang berbeda.
JavaScript yang ditayangkan secara dinamis: Dalam konfigurasi ini, HTML yang sama ditayangkan untuk semua perangkat, tetapi JavaScript ditayangkan dari URL yang secara dinamis menayangkan kode JavaScript yang berbeda tergantung pada agen-pengguna perangkat.
Penjelasan secara mendetailnya :
JavaScript-adaptif
Dalam konfigurasi ini, URL menayangkan konten yang sama (HTML, CSS, JavaScript, gambar) ke semua perangkat. Render atau perilaku situs hanya akan diubah ketika JavaScript dijalankan di perangkat. Hal ini serupa dengan cara kerja desain web responsif yang menggunakan kueri media CSS.
Misalnya, suatu halaman menayangkan HTML yang sama ke semua perangkat, yang menyertakan elemen <script> yang meminta URL eksternal yang menayangkan JavaScript. Semua perangkat yang meminta URL JavaScript mendapatkan kode yang sama. Ketika dijalankan, JavaScript mendeteksi perangkat dan memutuskan untuk mengubah sesuatu tentang halaman tersebut, misalnya menyertakan gambar yang smartphone-friendly atau menambahkan kode, bukan alternatif desktop.
Konfigurasi ini sangat erat kaitannya dengan desain web yang responsif, dan algoritme kami bisa mendeteksi penyiapan ini secara otomatis. Selanjutnya, konfigurasi ini tidak memiliki persyaratan untuk header HTTP Vary karena URL halaman dan asetnya tidak menyajikan konten secara dinamis. Karena keuntungan ini, jika perangkat Anda memerlukan penggunaan JavaScript, ini adalah konfigurasi yang kami sarankan.
Deteksi gabungan
Deteksi gabungan adalah penyiapan saat server bekerja sama dengan JavaScript pada klien untuk mendeteksi kemampuan perangkat dan mengubah konten yang ditayangkan.
Konfigurasi ini sangat erat kaitannya dengan desain web yang responsif, dan algoritme kami bisa mendeteksi penyiapan ini secara otomatis. Selanjutnya, konfigurasi ini tidak memiliki persyaratan untuk header HTTP Vary karena URL halaman dan asetnya tidak menyajikan konten secara dinamis. Karena keuntungan ini, jika perangkat Anda memerlukan penggunaan JavaScript, ini adalah konfigurasi yang kami sarankan.
Deteksi gabungan
Deteksi gabungan adalah penyiapan saat server bekerja sama dengan JavaScript pada klien untuk mendeteksi kemampuan perangkat dan mengubah konten yang ditayangkan.
Misalnya, sebuah situs mungkin memilih untuk mengubah render konten berdasarkan jenis perangkat, apakah berupa desktop atau smartphone. Dalam hal ini, situs web dapat menyertakan JavaScript yang mendeteksi dimensi layar, yang kemudian dikirim ke server yang memperbarui atau mengubah kode yang dikirim ke perangkat. Biasanya, JavaScript menyimpan kemampuan perangkat yang dideteksi di cookie yang dibaca server pada kunjungan berikutnya dari perangkat yang sama.
Mengingat bahwa server mengembalikan HTML yang berbeda ke agen-pengguna yang berbeda, deteksi gabungan dianggap sebagai jenis konfigurasi penayangan dinamis. Detail lengkapnya dijelaskan di bagian penayangan dinamis, tetapi untuk meringkasnya secara singkat, situs harus menyertakan header respons HTTP "Vary: User-agent" saat ada permintaan untuk URL yang menayangkan konten HTML berbeda ke agen-pengguna yang berbeda.
JavaScript yang ditayangkan secara dinamis
Dalam konfigurasi ini, HTML yang sama ditayangkan ke semua perangkat yang mencakup elemen <script> untuk menyertakan file JavaScript eksternal yang dapat memiliki konten berbeda, bergantung pada permintaan agen pengguna. Artinya, kode JavaScript ditayangkan secara dinamis.
Dalam hal ini, sebaiknya file JavaScript ditayangkan dengan header HTTP "Vary: User -agent". Tindakan ini merupakan sinyal bagi cache Internet dan Googlebot bahwa JavaScript mungkin berbeda bagi agen-pengguna yang berbeda, dan merupakan sinyal bagi Googlebot untuk meng-crawl file JavaScript menggunakan agen-pengguna Googlebot yang berbeda.
