Cara Mempercepat Loading Blog Tampilan Mobile

Cara Mempercepat Loading Blog Tampilan Mobile – Algoritma google saat ini sedang memprioritaskan kenyamanan pengunjung dengan memilih blog dengan loading cepat, alhasil website / blog dengan loading cepat akan mendapatkan tempat bagus di search engine. Tapi yang jadi masalah adalah, Tampilan mobile biasanya sangat sulit mendapat loading cepat (Berdasarkan Pagespeed Insight Google).

Apalagi jika blog kamu mempunyai iklan yang terpasang, mendapat nilai hijau di tampilan mobile terasa sangat sulit. Tapi tenang, semua ada caranya, disini dilihat dulu kamu menggunakan blogspot atau menggunakan wordpress self hosting, karena keduanya tentu mempunyai perbedaan cara mengoptimasi kecepatan loading blognya.

Dan lagi, kebanyakan blogger jika sudah menghadapi hal seperti ini (Loading lama) biasanya cara mengatasinya dengan ganti template saja, padhal hal itu 100% salah. Kapan bot google bisa merayapi kerangka blog kamu dengan sepenuhnya jika template terus terusan di ganti? Jadi hindari ganti template mending gunakan cara di bawah ini :

Cara Mempercepat Loading Blog Tampilan Mobile WordPress

cara mempercepat loading blog tampilan mobile

Disini saya akan membahas untuk pengguna wordpress self host dulu saja, karena akhir akhir ini saya lagi suka ngetik dan urusin SEO di blog saya yang ini. Kasus ini bermula ketika saya menghadapi masalah yang sama, blog ini mempunyai loading yang buruk sampai mendapat nilai yslow merah dan tampilan mobile juga mendapat point 43, bahkan sebelum ada iklan adsense.

Tapi apa saja yang saya lakukan? Sehingga bisa mendapat nilai seperti gambar di atas? Sebenarnya terbilang gak kenceng kenceng amat loadingnya, tapi di banding sebelum saya melakukan cara di bawah ini sudah sangat memuaskan dan kerasa banget kecepatannya. Langsung simak :

1. Jangan salah server Hosting

Ini nih, saya salah disini pada awalnya, saya membeli hosting langsung pilih saja tanpa melihat servernya (Karena buru buru pengen install wordpress) alhasil saya memilih server amerika. Emang ada masalah dengan server amerika? Tentu tidak ada, masalahnya ialah target pembaca saya itu berasal dari Indonesia.

Ketika orang Indo membuka situs yang berserver di amerika (Semakin jauh server negara dari Indo semakin lama loadnya) akan memberikan waktu lama untuk server memberikan tampilan web sepenuhnya, alasan spesifiknya saya kurang paham, ya intinya seperti itu.

Kemudian saya mengganti dengan hosting Berserver di Indonesia saat ini, dan kecepatan load blog saya sudah naik beberapa point, tapi masih merah kalau di tampilan Mobile 🙁 Lanjut ke cara di bawah

2. Install Plugin Caching

Cache yang menumpuk akan membuat blog sangat lama di buka, maka dari itu kamu butuh menggunakan plugin untuk membersihkan cache cache tersebut. Disini saya menggunakan WP Fastets Cache, gunakan itu untuk setiap kali habis edit sesuatu di website kamu.

Dan lakukan pembersihan cache secara berkala ketika kamu suka pasang dan copot plugin plugin di wordpress, dengan menggunakan cara ini poin yslow saya mulai nambah menjadi kuning. Disitu saya lumayan puas lah. Tapi ketika saya pasang adsense point tampilan mobile langsung merah lagi 😀

Dan ketika saya cek sendiri dengan mengakses blog saya ini lewat hp memang benar adanya jika loading blog tampilan hp saya sangat bejat, bahkan kalau saya jadi pengunjung sih ogah buat nunggu lama lama page yang gak kebuka, hal ini jadi buruk untuk SEO kita karena bounce rate akan meningkat dan akan buruk di mata google.

Nah di bawah ini cara yang ampuh menurut saya untuk mempercepat loading blog tampilan mobile, cara ini saya diberitahu oleh suhu wordpress di facebook ketika saya bertanya cara mempercepat loading wordpress self hosted, langsung saja baca ya.

3. Swift Performance Lite

Swift Performance Lite bisa membantu mempercepat loading blog dengan cara meminimalisir penggunaan js dan mengoptimisasi gambar gambar di page kamu, karena penggunan gambar dan js yang berlebihan memang sangat berpengaruh terhadap loading page blog kamu (Khususnya tampilan mobile).

Nah disitu ada banyak settingan yang bisa kamu lihat, di bawah ini saya kasih tau settingan saya yang di ajarkan oleh suhu wordpress, bisa kamu contoh bisa kamu akal sendiri saja sesuai kebutuhan, yang pasti settingan di bawah ini membuat loading blog penulistamu.com cepet banget.

Cara setting Swift Perfomance Lite Untuk Mempercepat Loading Blog Tampilan Mobile

cara mempercepat loading blog tampilan mobile wordpress

Di dalam menu cache saya memberikan ceklis ke Enable Caching.

  • Caching Mode : Disk Cache With PHP
  • Easyi Loader Saya aktifkan
  • Browser cache saya enable
  • Gzip juga saya Enable
  • Yang lain tidak saya enable

Kemudian di menu Optimization di bawah ini yang saya setting :

  • Optimize perbuild Only saya aktifkan
  • Optimize In Background saya aktifkan
  • Minify HTML aktif (Wajib)
  • Limit Simultaneous Thread juga saya aktifkan
  • Maximum Threads saya isi hanya 3

Swift Performance ini ada versi berbayar dan gratisan, jika gratisan hal di atas sudah cuku membantu sekali, tapi jika berbayar kamu bisa mengatur Optimisasi Gambar dan CPU. Supaya lebih kencang, tidak saya jelaskan lebih lengkap karena sudah mudah sekali aturnya. Terlebih jika sudah berlangganan, kamu akan mendapat panduannya.

Cara Mempercepat Loading Blog Tampilan Mobile Di Blogger / Blogspot

cara mempercepat loading blog tampilan mobile

Nah sekarang beralih ke pengguna blogger, jika membuat blog dengan menggunakan blogger terbilang sulit untuk mengatur pagespeednya karena tidak ada plugin plugin pembantu seperti memakai wordpress. Tapi dari blogger inilah saya belajar ngeblog selama kurang lebih 5 tahun, dan banyak pelajaran yang saya ambil terutama untuk Optimisasi SEO Blogger.

Sudah banyak template yang saya coba di blogger dan memang tampilan dekstop rata rata semua mempunyai poin hijau, tapi di tampilan mobile untuk mencapai kuning saja susahnya minta ampun kalau sudah ada iklan yang terpasang. Nah tapi saya juga punya jurus andalan tersendiri untuk mengakali hal itu, simak langsung caranya :

NOTE : Praktek disini menggunakn template Buatan Mas Sugeng VioMagz (Template sejuta umat hehe). Template ini di claim punya pagespeed yang wuss wuss, tapi apa daya itu cuman berlakuk di tampilan dekstopnya saja, Di Mobile kenceng sih kalau gak ada iklannya.

1. Compress Gambar Sebelum Upload

Hal ini wajib kamu lakukan mengingat blogger tidak punya plugin untuk melakukan optimisasi gambar secara otomatis, gambar yang kamu pakai usahakan tidak berkapasitas besar, bahkan jangan sampai ratusan kb. Banyak alat untuk mengcompress gambar menjadi kecil tanpa membuat gambar itu jelek.

Seperti whatsapp, foto yang awalnya 2mb pun kalau dikirim lewat whatsapp jadinya palingan cuman 50kb, tapi fotonya juga tidak buruk buruk amat. Jadi kalau gak punya atau gak tahu alat compress ya pakai saja whatsapp itu untuk alternatifnya hehe,

Hal ini harus dilakukan di semua image yang ada di blog kamu agar kecepatannya tidak hanya dalam satu dua page saja, tapi secara menyeluruh.

2. Cara Mempercepat Loading Blog Tampilan Mobile dengan LazyLoad Image

Di blogger kamu tidak bisa mengatur untuk masalah cachingnya, jadi setiap pengguna yang mengunjungi blog kamu terpaksa mendownload satu persatu halaman yang di tampilkan di layar mereka, itu sebab utama blogger ini punya pagespeed yang jeblok.

Nah dengan script Lazyload ini kamu ada kesempatan untuk menaikan score pagespeed kamu, apa sihh lazyload ity? Lazyload adalah script untu menunda suatu pemanggilan file sebelum dilakukan suatu aktifitas di dalam blog itu sendiri. Cara pasang langsung bisa kamu baca di bawah ini :

Cara pasang Script Lazy Load Di Blogspot

  • Masuk Ke Menu Theme / Tema >> Edit HTML
  • Cari dulu Tag HTML / Kode <img> , Kode ini merupakan kode dari thumbnail blog. Di setiap template pastinya berbeda intinya seperti di bawah ini :

<img expr:alt=’data:post.title’ expr:title=’data:post.title’ expr:src=’resizeImage(data:post.firstImageUrl, 225, “225:170”)’/>

  • Cari saja, kodenya pasti mirip mirip kok meskipun ada yang berbeda.
  • Kalu udah ketemu lakukan sedikit edit di seperti di bawah ini :
  1. Tambahkan class=’lazy’ pada tag imagenya
  2. Ubah expr;src menjadi expr-data-src
  3. Tambahkan src, dan valuenya di isi dengan :

data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=

  • Sehingga hasil akhirnya menjadi seperti ini : <img class=’lazy’ expr:alt=’data:post.title’ expr:title=’data:post.title’ expr:data-src=’resizeImage(data:post.firstImageUrl, 225, “225:170”)’ src=’data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=’/>
  • Nah itu bagian kecilnya, sekarang lanjut pasang script lazyloadnya.
  • Cari kode </body> (Dengan CTRL+F aja biar cepat carinya)
  • Lalu copy kode di bawah ini dan taruh codenya di atas </body>


  • Setelah itu simpan tema kamu.
  • Selesai.

Lazyload ini untuk gambar saja, kamu juga harus optimisasi untuk iklannya juga, karena iklan juga butuh di lazyload agar iklan tidak di load secara bersamaan dengan page supaya menghasilkan loading yang tepat, intinya page harus sudah ke buka dan sudah bisa di baca meskipun belum sepenuhnya terbuka.

3. Jangan Terlalu Banyak Menghias Blog

Dalam artian menghias yaitu jangan menggunakan hal yang aneh aneh seperti cursor jadi bentuk sesuatu, terus ada musik di dalam blog, jangan ada yang melayang layang dan gemerlap di blog (Itu blog atau diskotik). Yang simple namun elegant saja biar enak di pandang. Yang baca pun nantinya gak sakit mata.

Terlebih menghias blog itu pasti menambahkan kode kode html dan javascript yang notabene hal itu memperberat loading blog, jadi blogmu belum terbuka pengunjung malah kabur terlebih dahulu.

Tapi ini saya kecualikan untuk blog yang memang tipenya personal sih, blog yang gak cari visitor dan gak butuh optimisasi, jadi blognya real curhatan atau ketikan untuk diri sendiri, kalau itu silahkan edit sesuka kamu. Bebas hehe.

Penutup…

Ya itu dulu saja menurut saya untuk cara mempercepat loading blog tampilan mobile baik di wordpress atau blogger, kalau ada update an terbaru atau tips tertentu tentang hal ini pasti saya update disini kok. Jadi jangan lupa berlangganan blog ini ya, gratis kok, dapat pemberitahuan lagi jika ada update an terbaru hmmm.

Setelah ketik artikel di atas saya pengen nih bikin artikel Blogspot VS WordPress dari segi kualitas SEO nya, karena saya sedang mengurus blog dari kedua platform tersebut boleh dong saya share pengalamannya, besok saya buatkan artikelnya > Perbedaan WordPress dan Blogspot Dari Segi SEO

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *