Korelasi Pagespeed dan Mobile First Indexing

pagespeed seo

Perdebatan akan faktor pagespeed, apakah mempengaruhi search engine optimization (SEO), masih terus belanjut dikalangan para praktisi SEO.

Oleh karena itulah, saya pribadi akan bahas dimana letak hubungan antara pagespeed berpengaruh di SEO dan mana yang tidak.

Pada intinya, semua benar apa yang diperdebatkan itu, tapi kebanyakan tidak memahami dan tidak melakukan riset dimana letak benar dan tidaknya.

Pagespeed Berpengaruh di SEO

Secara garis besar, kecepatan website loading sangat berpengaruh di optimasi mesin pencari atau SEO. Apalagi di jaman mobile first indexing, yang kedepannya akan diberlakukan pada semua website oleh Google.

Tidak butuh skill khusus untuk memastikan bahwa pagespeed berpengaruhi di SEO, apalagi sekarang google sangat memperioritaskan pengalaman user.

Lalu apa sih mobile first indexing ?

Mobile first indexing adalah faktor peringkat suatu website akan ditentukan oleh robots perayap Google mobile. Meskipun nama bot nya tetap sama yaitu “Googlebot” tapi cara kerjanya beda.

Bot mobile google lebih banyak merayapi apa yang seperti user lihat di front-end suatu website. Bot ini kurang senang dengan konten yang membutuhkan aksi dari user untuk melihatnya.

Aksi ini biasanya normal ketika di versi desktop, seperti on-mouse over, on-click, accordion menu. Konten yang berada didalamnya akan cukup sulit diindex, meskipun bisa saja diindex tapi sangat lama.

Googlebot versi mobile, juga tidak begitu menyukai konten yang di skip perenderannya. Misalnya gambar dijadikan lazyload, membutuhkan aksi user versi mobile (onclick, dll).

Satu hal lagi, mobile first indexing kurang menyukai gambar dengan resolusi rendah (burem dan sebagainya), dikompress habis-habisan demi size kecil.

Robot perayapnya juga, tidak suka jika website memblock googlebot merayapi elemen file css, script (js), biasanya di file robots.txt atau file css, js dibuat password untuk aksesnya.

Jika konten website Anda berada di dalam menu-menu tersebut, silahkan coba tes, copy isi kontennya lalu paste (cari) langsung di Google.

Detail keterangan langsung dari Google bisa dibaca disini.

Optimasi Pagespeed Web Memperburuk SEO

Sekarang kita bahas, apakah pagespeed tidak mempengaruhi SEO. Saya justru menandainya bukan tidak mempengaruhi, bahkan memperburuk SEO website Anda.

Kenapa bisa begitu ?

Oke, dari keterangan diatas sudah terlihat faktor-faktor ketidak sukaan googlebot tadi. Sekarang kita bahas efeknya!

Kebanyakan pemilik website, ingin score test page halaman web setinggi mungkin, bahkan melupakan efeknya. Score pagespeed test dari google insight tidak terlalu merepresentasikan seo bakal maknyus.

Above the Fold Content

Above the Fold content adalah konten yang tampil di device Anda, sebelum melakukan scrolling.

Bagian ini sangat penting, dan seharusnya konten utama ada disini, mulai dari target kata kunci, call to action (CTA), kalimat pancingan dan lain sebagainya.

Sekarang kita bahas lazyload gambar

Kebanyakan web, situs memiliki gambar dibagian atas, seperti feature image lah. Lalu demi skor tinggi tinggi di pagespeed test malah gambarnya dibikin lazyload.

Ingat, lazyload images itu baiknya dilakukan pada gambar yang berada dibawah sebelum user melakukan scroll. Meskipun sebenarnya masih tidak Kami rekomendasikan. Apalagi jika server Anda cukup mumpuni.

Lalu Isi kontennya

Pertanyaan muncul, apakah konten Anda membutuhkan akses css, script agar bisa tampil ? terutama di bagian above the fold tadi !

Jika iya, sebaiknya hindari meng “defer” dan “async” css dan script. Karena konten Anda butuh tampil dari proses script & css. Apalagi konten tersebut konten pamungkas Anda.

Async, dapat memuat dan mengeksekusi meskipun dokumen belum sepenuhnya diparsing oleh browser.

Defer, mengunggu semua dokumen halaman di parsing oleh browser, baru script defer eksekusi load.

Defer sangat bagus untuk script yang tidak begitu penting, misalnya “tooltip” atau untuk keindahan saja. Async bagus untuk script yang tidak tergantung dengan script lain (script mandiri) atau script iklan.

Sebaiknya defer script, css yang dibutuhkan oleh konten dibawah halaman website Anda. Meskipun sebenarnya lebih direkomendasikan untuk tidak melakukannya, atau lebih selektif.

Justru pengejaran, obsesi scoring tinggi di test pagespeed, bisa menjebak Anda sendiri. Sehingga menyebabkan SEO website justru ambruk.

Mobile seo ini lebih menghargai design, color contras (font & backgroud), button yang cukup untuk jari jemari, dan link yang tidak mepet.

Pagespeed yang benar-benar diakses secara langsung, server mumpuni dan infrastruktur server & website benar. Bukan dari defer mengdefer, lazyload dll.

Kasus-kasus SEO website ambruk karena obsesi scrore pagespeed ini, kebanyakan terjadi pada website responsive. Lebih baik Anda bangun website versi mobile terpisah.

Google bisa memprediksi ukuran kelayakan jarak link, button apakah pas untuk jari mengkliknya.

Apalagi jari jemari seperti saya yang cukup besar, tentu makin kesulitan lagi.

Kalau faktor teknis, seperti pemberian label (aria-label dkk).

Begitu juga Script

Sama halnya dengan script-script atau module yang di implementasikan pada sebuah website dan themes. Ada model theme yang memang tidak butuh banyak script namun ada juga yang sebaliknya.

Jika sebuah website dan theme nya mengharuskan load script C menunggu script B dan B menunggu script A. Jika script B defer padahal script C tidak, maka sama saja memblockingnya.

Apalagi jika sampai dihilangkan sama sekali script tersebut demi mengejar pagespeed score.

Satu hal lagi tambahan, mobile google juga kurang menyukai url source memakai relative url (/css-saya.css), sebaiknya gunakan absolute url (https://website-saya.com/css-saya.css).

Baik itu di html maupun dalam source css (dalam elemen css). Seperti images, fonts url yang biasanya seperti (../assets/css-saya.css) atau font woff, ttf, eot dan sebagainya.

Jadi, sudah clear kan, dimana letak faktor pagespeed tadi, dengan performa SEO situs.

Oiya, sedikit tampahan, kami memiliki layanan jasa seo yang full support, semua hal teknis, konten dan sebagainya akan kami optimalkan. Karena kami adalah holistic seo agency pertama di Indonesia.

Justru yang paling penting untuk dioptimalkan adalah:

Sebisa mungkin gunakan css dan script yang memang terpakai untuk website. Singkirkan unused css dan script, tapi jika takut rusak tampilannya bisa di skip bagian ini.

Minimalkan jumlah gambar, gambar kecil di footer bisa pakai css sprite. Tapi andai banyakpun tidak apa-apa sebenarnya, apalagi sudah di cache. Jika Anda memakai WP, sudah otomatis responsive dan create tumbnail.

Jaman dulu, masih memakai http/1.1 (meskipun masih ada juga sekarang). Jika hosting sudah support http/2, tidak perlu lagi menggabungkan css jadi satu. Hal ini justru memperberat ukuran dan browser merendernya.

Biasanya, beberapa tutorial lama masih mengharuskan menggabungkan css, script jadi satu. Di era http/2 (skrg sudah http/3 malah), sistem transfer file secara pararel.

Hindari menggunakan library dari banyak beda domain. Misalnya scriptnya dari jquery com, css dari bootstrap, fontnya dari googleapis, fontawesomenya dari sana juga, belum lagi ditambah dari google analytics & font gstatic.

Karena ini akan memakan banyak waktu bagi browser untuk memanggil masing-masing dns library tersebut. kalau kita contohkan misalnya seperti:

Kamu ada berlima bertamu ke tempat teman, masing-masing beli menu camilannya beda-beda dan jauh. Yang satu beli kopi, ada beli pisang goreng, ada roti, ada chiki dan air mineral.

Yang datang baru yang beli kopi dan chiki. tentu tidak asik kan ngopi sambil makan chiki. tetap harus nunggu pisang goreng dulubiar matching. itu cuma contoh sambil santai aja.

Jadi, lebih bagus dipisah css apa adanya, paling coba singkiran yang tidak terpakai saja. Jika terpisah maka ukuran akan kecil sehingga lebih cepat.

Apakah preload mempengaruhi?

Preload pada dasarnya bagus, tapi jika diakses untuk pertama kali, tetap saja preload tidak ngaruh. Preload berfungsi saat akses kedua kali dan seterusnya.

Aktifkan juga fungsi hot linking agar gambar atau file statis website tidak bisa dipasang diluar website / domain asli (same origin). Tutorialnya banyak bertebaran di internet.

Bagaimana dengan Gambar?

Seperti yang diuraikan diatas, hindari untuk menggunakan lazyload image, kurangi saja ukuran size nya tapi kualitas gambarnya usahakan masih bagus.

Bisa menggnakan teknik responsive image <picture>, srcset, sizes. Tapi di wordpress rata-rata sudah otomatis dan memproduksi gambar versi thumbnailnya.

Yang perlu diperhatikan juga adalah justru exif data di gambar, serta metadata nya. Jika memakai gambar dengan copyright dan lisense tidak boleh di distribusikan ulang, sebaiknya hindari.

Atau jika memakai adobe photoshop pasti akan ada metadata xml nya dibagian atas gambar, hapus saja bagian itu.

Untuk exif datanya, Anda bisa hilangkan saja. Ada tool yang bisa membantu dengan cepat proses ini.cari saja di Google namanya exiferaser. Cukup download tanpa perlu di instal kok.

Bonus Tentang 404 Error

Sebenarnya, artikel tentang error not found 404 sudah dibahas disini. Tapi akan coba saya tambahkan sedikit, karena sering ada yang bertanya masalah tersebut.

Error 404 jangan terlalu dirisaukan, hal itu tidak begitu mempengaruhi kesehatan situs dari sisi SEO.

TAPI

Error 404 jadi masalah serius jika terpasang di internal link, mirip seperti kalau kita bicara ke seseorang lalu memberikan bukti salah, gak ada. Efeknya, Anda seperti berbohong!

Dan Google gak suka dibohongi

Satu hal lagi, jika Anda menerapkan firewall security. Yang otomatis block bot jika mengakses file not found 404 lebih dari jumlah tertentu, misalnya 200 dalam 1 menit.

Lalu websitemu ada sekitar ribuan file 404, apa yang terjadi ?

Oiya, satu hal lagi. Jika menggunakan custom 404 page,sebaiknya hindari pengunaan gambar, css, script dan atribut lainnya. Cukup css kecil dan full screen.

Inilah faktor 404 yang harus lebih diperhatikan.

Btw, sekedar informasi, team Smartdigital.id selalu melakukan riset terkait optimasi mesin pencari

Salam.

Avatar for Subhan

Subhan adalah konsultan SEO di Smartdigital Agency, Beliau sering melakukan riset & analisa terkait Search Engine Optimization (SEO).