Panduan Pemasar untuk Rendering Sisi Server

Bahasa pemrograman bukanlah konsep yang mudah untuk dipahami, terutama ketika pekerjaan SEO Anda terutama difokuskan pada sisi non-teknis. Tapi ada satu hal tentang SEO teknis: pengetahuan tentang itu membantu Anda memahami perubahan yang perlu dilakukan situs web Anda untuk peringkat mesin pencari yang lebih baik.
Saat Google meluncurkan Core Web Vitals pada bulan Juni, yang merupakan bagian dari pembaruan Pengalaman Halamannya, setiap pemasar yang belum melihat lebih dekat pada SEO teknis akan ingin melakukannya sekarang.
Dan ketika situs web Anda dibangun di atas kerangka kerja JavaScript, satu bagian yang perlu digali adalah rendering sisi server.

Apa itu rendering sisi server?

Render sisi server adalah ketika proses mengambil halaman web, mengambil kode, menampilkan konten di layar — semuanya terjadi di server.
Di RS:

• Server mengirimkan respons yang siap diberikan ke browser;
• Browser merender halaman, membuatnya siap untuk dilihat dan kemudian browser mendownload JavaScript;
• Browser kemudian mengeksekusi React saat halaman siap untuk dilihat, dan
• Halaman web kemudian siap untuk interaktivitas.

Cara semuanya terjadi telah menjadikannya pilihan yang lebih baik untuk jenis rendering lainnya: rendering sisi klien (di mana JavaScript dirender oleh browser, alias klien) dan rendering dinamis (di mana pengguna mendapatkan konten yang dirender oleh server klien dan mesin telusur dapatkan konten yang dirender sisi server). Bahkan Google mendorong pengembang web untuk memilih rendering sisi server.
Mengapa?

[Studi Kasus] Mengelola perayapan bot Google

Dengan lebih dari 26.000 referensi produk, 1001Pneus membutuhkan alat yang andal untuk memantau kinerja SEO mereka dan memastikan bahwa Google mencurahkan anggaran perayapannya pada kategori dan halaman yang tepat. Pelajari cara berhasil mengelola anggaran perayapan untuk situs web e-niaga dengan OnCrawl.

Baca studi kasus

Kelebihan SSR

• Ini membantu memuat halaman web ketika koneksi internet pengguna lambat
• Ini memungkinkan pemuatan halaman yang cepat, berkontribusi pada pengalaman pengguna yang lebih baik
• Itu membuat halaman HTML penuh, mencegah proses pengambilan data yang memakan waktu
• Ini memungkinkan halaman dimuat, dengan semua elemennya, bahkan ketika pengguna memiliki perangkat yang kurang bertenaga, seperti smartphone generasi lama
• Ini berkontribusi pada kinerja SEO karena memungkinkan mesin pencari merayapi dan mengindeks halaman secara akurat; bot dapat merayapi halaman dengan mudah karena mereka memahami JS

Secara keseluruhan, SSR membantu Anda melayani pelanggan online dengan lebih baik karena pengunjung situs Anda tidak akan menunggu halaman untuk ditampilkan di perangkat mereka. Transisi halaman yang cepat juga memastikan pengguna Anda tidak pernah mendapatkan halaman kosong, memungkinkan mereka untuk segera menggunakan situs Anda.
Karena Google sedang meningkatkan kampanyenya untuk memberikan hasil yang lebih akurat dengan peningkatan algoritme yang dibangun berdasarkan pengalaman pengguna, SSR lebih baik untuk kinerja SEO Anda dibandingkan dengan rendering server-klien.
Tetapi seperti yang lainnya dalam pemasaran digital, pendekatan tunggal jarang berhasil untuk semua orang. Dalam beberapa kasus, rendering sisi server bisa menjadi masalah. Seperti yang dikatakan Google, SSR “bukan peluru perak.”

Kerugian dari SSR

• Ini melibatkan banyak pekerjaan karena melakukan aplikasi yang sama dua kali: sekali di klien dan kemudian di server.
• Itu bisa menunda waktu ke byte pertama
• Ini dapat memengaruhi tautan internal atau kualitas halaman karena tidak dapat merender JS pihak ketiga (misalnya, konten yang dibuat pengguna, ulasan produk, dll.) atau konten apa pun yang tidak ada dalam HTML statis Anda; bot tidak akan dapat melihatnya
• URL yang tidak diperbarui dapat berarti bot tidak akan dapat melihat artikel baru, yang dapat menyebabkan lalu lintas terlewat

Aspek kunci lain untuk SSR adalah bahwa itu berarti biaya untuk bisnis karena rendering terjadi di server Anda. Tetapi ini adalah biaya yang mungkin ingin Anda investasikan karena jenis rendering ini dapat berkontribusi pada pengoptimalan Data Web Inti.

Mengapa RSK relevan dengan CWV?

Pengembang web dan SEO telah bekerja selama berbulan-bulan untuk mengantisipasi peluncuran CWV. Sekitar 60 persen agensi SEO yang disurvei sibuk meningkatkan skor CWV klien. Jika Anda menggunakan SSR, Anda mungkin tidak perlu melakukan pekerjaan besar untuk memenuhi harapan.
Karena SSR memfasilitasi kecepatan, situs web Anda sudah dapat melakukannya dengan baik dengan salah satu metrik: Cat Konten Terbesar (LCP).
LCP berfokus pada pengalaman pemuatan yang dirasakan. Ini mengukur waktu buka halaman saat gambar atau teks terbesar halaman web terlihat di viewport. Apa yang ingin Anda tuju untuk mendapatkan skor yang baik adalah pemuatan halaman 75 persen pada <2,5 detik.
Tantangan utama untuk mendapatkan LCP yang baik adalah JS dan CSS yang memblokir render; waktu pemuatan sumber daya yang lambat, respons server yang lambat, dan rendering sisi klien.
Pergeseran ke SSR hanyalah salah satu solusi untuk meningkatkan skor LCP karena masalah Anda mungkin tidak terbatas pada CSR. Anda sebaiknya bekerja sama dengan pengembang web untuk mengidentifikasi terlebih dahulu apa yang menyebabkan LCP Anda lag.
Jika sumber halaman mengungkapkan kode yang tidak masuk akal (dan pengembang Anda akan memberi tahu Anda), maka masalahnya mungkin CSR. Jika pengembang Anda menemukan TTFB buruk, maka Anda mungkin berurusan dengan waktu respons server yang lambat.
Metrik CWV lainnya adalah:

• Penundaan Input Pertama, yang berfokus pada daya tanggap, dan
• Pergeseran Tata Letak Kumulatif, yang berfokus pada stabilitas visual.

Keduanya tidak relevan dengan SSR, jadi ini adalah metrik yang Anda mungkin ingin lebih berusaha karena SSR sebagian menangani LCP.

Bagaimana cara mengetahui apakah SSR merender halaman web dengan benar?

Cara terbaik untuk mengetahui apakah SSR merender halaman Anda dengan benar adalah dengan menggunakan alat. Salah satunya adalah Tes Mobile Friendly. Ini adalah alat yang memberi Anda gambaran tentang bagaimana halaman web Anda akan muncul di Googlebots dan menunjukkan kesalahan selama rendering, jika ada.
Google Search Console juga memiliki Alat Inspeksi URL yang memungkinkan Anda melihat apakah mesin telusur merender halaman Anda. Gunakan untuk memeriksa konten yang hilang atau kesalahan apa pun yang terkait dengan JavaScript atau CSS yang diblokir.
Anda juga dapat membuka View Render Source, yang merupakan ekstensi Chrome gratis. Ini akan memberi tahu Anda bagaimana browser merender halaman dari HTML aslinya ke DOM yang berfungsi. Ekstensi akan mengilustrasikan perbedaan antara versi mentah dan yang dirender, dengan menyoroti bagaimana JS memodifikasi halaman pada waktu render.
Ekstensi Chrome lain untuk dicoba adalah SiteCrawler. Perayap berkemampuan JS merayapi peta situs, tautan, dan gambar serta membandingkan laman khusus HTML dan laman berkemampuan JS.

Pembungkus

Sebagian besar pekerjaan SEO melibatkan pengoptimalan untuk halaman yang telah "dikirim" ke klien atau browser. Tetapi ketika Anda memeriksa bagaimana halaman-halaman itu "mendapatkan" ke klien dan bagaimana Anda dapat meningkatkan bagaimana hal itu terjadi, pengguna memiliki waktu yang lebih baik di situs web Anda.
Bot merayapi halaman Anda dengan benar. Halaman Anda diindeks. Situs Anda memiliki peringkat mesin pencari yang lebih baik.
Pembaruan mesin pencari bersama dengan perubahan perilaku konsumen juga menuntut perubahan pada situs web Anda. Dengan peluncuran CWV yang akan datang, sekarang adalah saat yang tepat untuk melihat SSR, aspek teknis yang akan memengaruhi upaya SEO Anda.