Loading Blog Cepat tanpa Sidebar untuk Versi Mobile

Ini merupakan artikel yang ingin saya share kepada teman-teman untuk berbagi pengalaman tentang kecepatan blog saat dibuka melalui ponsel/mobile.

Sebagaimana yang kita ketahui bahwa rata-rata pengunjung telah menggunakan smartphone untuk mengetahui apa saja informasi yang ingin mereka dapatkan, itu artinya kesempatan blog kita dibuka melalui desktop hanya sekitar 10-30% saja, sedangkan selebihnya itu dibuka melalui Mobile/ponsel/smartphone.

Nah, dengan perubahan pengguna untuk membuka blog dengan ponsel inilah yang membuat saya mengambil keputusan untuk menghilangkan sidebar-wrapper blog terwujud.com.

Alasan menghilangkan karena saya telah menanalisis pageview afilasi Idwebhost yang ada di sidebar bawah, untuk pageview nya begitu turun secara drastis, berbeda di tahun sebelumnya.

“Hal di atas mengindikasi kan bahwa pengunjung tidak begitu rajin melakukan scroll ke bawah, sebab mereka hanya menginginkan informasi yang mereka cari.”

Jadi, dapat dipastikan bahwa kolom sidebar yang kita tempatkan iklan, popular post, label atau lain sebagainya seperti blog ini, volume pengunjung melihatnya sangat minim. Oleh sebab itulah saya mencoba untuk menghilangkan sidebar blog saya pada versi mobile.

Tujuan saya menghilangkan sidebar pada blog terwujud.com tidak lain karena untuk memanjakan pengunjung yang kuota dan koneksi internetnya sangat memprihatinkan, so niatnya ibadah lho heehee. Selain itu, kabar baiknya adalah terkait dengan nilai SEO di mata Search engine seperti Google, mereka menilai jika blog yang mempunyai kecepatan loading yang optimal dan maksimal, maka nilai dan peringkat blog tersebut akan diperhitungkan.

Menggunakan CSS

Bagi yang ingin menghilangkan sidebar tertentu, maka gunakanlah CSS. Contohnya saya, untuk sidebar blog ini terbagi dalam 3 bagian yaitu .sidebar1-wrapper, .sidebar2-wrapper dan .sidebar3-wrapper. Nah, jika ingin menghilangkan satu atau dua sidebar, maka cukup menggunakan kode seperti dibawah ini:

@media (max-width: 650px){
.sidebar1-wrapper {display:none !important;}
}

Ingin semua sidebar?, salin kode dibawah ini:

@media (max-width: 650px){
#sidebar-wrapper{display:none !important;}
}

Pilihan:
Untuk ukuran tipe mobile, teman-teman bisa menentukan mana yang ingin disembunyikan sidebarnya, untuk itu silahkan rubah angka pada versi mobilenya, jika ingin tidak tampil pada ponsel ukuran kurang dari 5 inchi, maka kodenya @media (max-width: 320px), untuk pengaturan selanjut bisa dirubah sendiri sesuai keinginan teman-teman.

Hilangkan sidebar Versi Desktop secara Manual

Untuk membuat tampilan artikel melebar, maka teman-teman bisa menggunakan kode:

<style>
#sidebar-wrapper {display: none !important;}
.main-wrapper{width: 100%}
#terwujud-wrapper {display: none !important;}
</style>

Ingat: Jika iklan ingin dihilangkan seperti iklan yang letaknya diheader, maka silahkan cari dulu kode widget iklannya, contohnya seperti blog ini kodenya #terwujud-wrapper, maka saya cukup menambahkannya saja. Lihat kode di atas, kelihatan kan !

DEMO sudah bisa teman-teman lihat pada artikel ini.

Membuat artikel tampil melebar tanpa sidebar ini tidak dibuat otomatis, seperti halaman Jasa Review pada blog ini. Saya lebih memilih secara manual saja. Jadi mana saja artikel yang ingin dioptimalkan tampilannya, cukup dengan memasukkan kode di atas ke dalam versi HTML (letaknya bertetangga dengan Compose). Jadi, artikel lainnya tidak akan terganggu dan tidak akan berubah. Gimana, asyik bukan !.

Jika ada kode atau cara lain yang lebih menarik, teman-teman bisa share lho ke saya !, semoga bermanfaat.