TIPS AGAR TEMPLATE BLOGGER MOBILE KLASIK BISA BERLARI SECEPAT AMP

Speed control
Speed control 
SEDERHANAKAN!
Segala yang kita inginkan selalu ada harganya. Tidak terkecuali blogging, jika sobat inginkan sebuah tema atau template blog yang lengkap cantik dan berhiaskan banyak gadget, dapat dipastikan halaman bloggernya akan segera menjadi lambat. Sementara kita tahu kecepatan adalah hal yang vital  bagi teknik SEO di dunia blogging zaman sekarang.
Trik ini cocok bagi anda yang sudah terlanjur menggunakan template mobile klasik biasa: Jangan ragu membuang widget widget dan atribut yang tidak penting, atau cari saja alternatif yang lain yang materialnya lebih alami untuk bloggger.

Itu bukan mitos melainkan alasan karena memang tuntutan teknis sang mesin pencari. Semua jenis algoritma web tidak akan dapat menafikan itu. Jika kita membuat robot di dunia nyata sekalipun, jika segala hal membutuhkan kecepatan maka yang cepatlah yang akan menang.

Tidak perduli sobat menggunakan template AMP atau template klasik responsive biasa jika halaman web sobat dapat berlari lebih cepat maka blog sobat akan di index lebih cepat dan tiba di garis finish lebih duluan!

Semakin cepat loading halaman sebuah blog semakin besar peluangnya untuk di rekomendasikan oleh mesin pencari kepada para pengunjung sebaliknya halaman blog yang lambat akan "diabaikan" oleh mesin pencari karena terlalu banyak memakan sumber daya: yakni waktu. Diibaratkan hanya pengunjung pengunjung yang "tersesat" yang mampir dan saat mereka menemukan kenyataan blog kita susah di akses, mereka akan segera kabur mencari halaman lain. Mereka akan menemukan halaman yang cepat dan ramai pengunjungnya dan segera berinteraksi disana.

1. REMOVE GADGET/WIDGET FOLLOWER.
cukup signifikan memberatkan loading

Sebenarnya gadget apapun akan memberatkan loading blog. Namun Gagdet Follower atau pengikut: Sobat boleh coba pasang gaget ini dan test pada GMETRIX dan klik YSLOW perhatikan link prioritas yang disarankan untuk di hapus maka link daripada gagdet "Follower" ini pasti masuk, test juga di Google pagespeed insight. Mengapa ini terjadi? Karena Gadget ini memuat banyak link eksternal dari profile para blogger pengikut berikut link halaman mereka.

Jika sobat tidak merasa penting penting amat dengan gagdet ini lebih baik tidak usah dipasang, namun Gagdet ini juga sangat bermanfaat terhadap performa blog karena menjadi hampir mirip backlink yang selalu di kejar kejar oleh para blogger sampai saat ini. Sayangnya menurut saya karena dia mengurangi kecepatan loading template blog sampai 10% secara sangat signifikan, Gagdet ini harus diperbaiki karena sangat mengurangi pengoptimalan SEO dari segi kecepatan.

Kecepatan adalah hampir menjadi harga mati sebuah blog di zaman sekarang, jika sobat mengutamakan kecepatan JANGAN PASANG GADGET FOLLWER INI. Lepaskan dan relakan saja dia pergi. Sobat silahkan pasang gadget popularpost atau label karena beberapa gadget memang sangat ringan dan tidak memberatkan loading halaman blog.

Saya juga sangat menyarankan jika tidak penting penting amat jangan memasang banner atau LOGO yang mengandung link dari blogspot orang lain kecuali memang ada bisnis yang menguntungkan.

Misalnya pada side bar blog sobat hindari pemasangan widget yang menampilkan LOGO namun juga mengandung link aktif ke blogspot orang lain. Kekeliruan kita menyangka itu adalah cara bertukaran backlink, namun melalui analisa SEO yang lebih mengutamakan kecepatan atribut atribut itu untuk masa sekarang hanya akan menjadi sampah didalam template sobat. Apalagi Algoritma Google selalu berubah rubah setiap waktu. Pemilik link juga tidak terlalu diuntungkan dengan hal ini.

Alternatif: Jadilah lebih aktif di kolom komentar dan rajin blogwalking.

2. GANTI TOMBOL SHARE PIHAK PIHAK KETIGA.
tombol ringan pihak ketiga yang fast loading

Saya sangat suka dengan tombol share AddThis, selain memudahkan kita berbagi agar postingan kita dibaca di beberapa medsos. AddThis sangat lengkap, hampir semua platform berbagi dia punya. AddThis juga telah menghilangkan tombol GPlus.

Tentu saja AddThis membantu pengoptimalisasian halaman blog, misalnya melalui tool newsletter, opsi related post dan laporan trafik blog. Akan tetapi AddThis sangat berat dan mengurangi  hampir 12% kecepatan blog

JANGAN PASANG TOMBOL BERBAGI INI jika sobat mengutamakan kecepatan blog!

Alternatif: pasang AddToAny. Tombol AddToAny memiliki hampir semua platform yang dimiliki oleh AddThis, namun sampai saat ini AddToAny belum menghapus tombol GPlus. Mungkin akan dilakukan pas tiba hari "H"-nya nanti. AddToAny walaupun juga membebani kecepatan namun terasa jauh lebih enteng.

Cara bekerja API kedua aplikasi web ini mungkin berbeda yang disesuaikan dengan target dan kebutuhan masing masing mereka. Jadi saya menyarankan jika sobat membutuhkan tombol berbagi dari pihak ketiga yang simple, ringan dan tidak memberatkan loading sobat bisa memilih memasang AddToAny.

Namun jika sobat memilki sedikit pengatahuan kode HTML lebih baik membuat sendiri tombol tersebut. Saya menggunakan tombol berbagi AddToAny.

3. HILANGKAN LINK AWSOME
Namun link pemanggilnya memberatkan loading blog

Jika diatas tadi kita membahas gagdet yang bisa dipasang melalui pengaturan pada dasbor blogger blogspot, kali ini kita harus merombak template melalui opsi >>pengaturan>>tema>>edit HTML.
Agar supaya halaman blogger dapat menampilkan ikon ikon awsome maka di dalam tag <head> harus di pasang link awsome, seumpama melatakan link pemanggil ikon atau font awsome dibawah ini diatas tag </head>:

<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Pada daftar YSLOW di GMetrix link ini secara nyata membebani kecepatan hingga beberapa puluh kilobyte, sekian prosen dari ukuran template sederhana secara keseluruhan. Saya menyarankan jika "pernik-pernik" hiasan tidak terlalu penting mengapa kita harus menanamkan link yang dapat menunda kecepatan? Lebih baik menggunakan tema yang sederhana dan menghiasinya langsung dari internal template.

Misalnya, ketika membuat template ini saya juga memasang  link "pemanggil" font awsome 5 yang lebih kompatibel dengan HTML 5 ketimbang link contoh diatas, linknya adalah:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"/>

Tetapi samasekali tidak ringan, dan cukup signifikan merugikan kecepatan maka saya segera membersihkannya melalui halaman editor HTML blogspot.

Alternatif:
Jika blog tetap menginginkan ikon pasang saja ikon SVG, secara default (bawaan) template blogger juga menggunakan ini. Untuk memahami cara menggunakannya saya berencana akan membuatkan tutorial sederhananya.

Saya juga berfikir mungkin trik CSS bisa membantu membuat blog saya sedikit "berwarna"
Dan pada halaman editor HTML bagian dimana CSS ditempatkan saya mencari elemen elemen yang dapat saya manipulasi untuk merubah tampilan blog. Contohnya:
  1. Border dash. Saya dapat menuliskan perintah CSS untuk membuat border, style dan mewarnainya. Membentuk bulat dan lengkungannya.
  2. Mengurangi penggunaan JavaScript. Saya hanya terpaksa menggunakannya ketika harus menambahkan fungsi "klik" pada menu navigasi terutama yang mengandung menu dropdown.
  3. Warna CSS. Saya membuat warna gradasi dengan kode HEX, rgb untuk mengkombinasikan dua warna. Sesekali saya gunakan bahasa program tingkat tinggi he he he dengan menuliskan "blue" utnuk warna biru.
Trik diatas saya praktekan pada tema blog ini yang walaupun memiliki konten konten berat dan gambar gambar ilustrasi yang beratnya juga tidak karuan ternyata mampu berlari pada kecepatan 92 pada pengujian PageSpeed. Dan problem blog ini masih pada head expires yang belum bekerja pada pengujian GMetrix bagian YSlow-nya.

4. HINDARI PEMAKAIAN JAVASCRIPT

Saya hanya memasang satu kode javascript untuk keperluan mengaktifkan fungsi dropdown pada menu navigasi blog ini. Saya ada menyinggung perihal WebAssembly yang diklaim jauh lebih cepat loading dibanding dengan JavaScript.

Tapi saya belum tahu cara menerapkannya untuk menggantikan tugas mulia dari JavaScript ini. Misalnya pada template ini saya hanya memasang perintah JavaScript diatas didalam tag <body>:

<script>
function myFunction() {
  var x = document.getElementById(&quot;Header1&quot;);
  if (x.className === &quot;topnav&quot;) {
    x.className += &quot; responsive&quot;;
  } else {
    x.className = &quot;topnav&quot;;
  }
}
</script>

Intinya jika anda ingin tema blognya cepat jangan terlalu banyak memasang dan menggunakan JavaScript, pemasangan javascript yang berlebihan selain memberatkan loading secara signifikan juga akan mempengaruhi prilaku dan tampilan template yang menjadi buruk.

5. GUNAKAN FORMAT GAMBAR WEBP
setelah di convert melalui converter di hape android

Sebelum menambahkan gambar kedalam postingan, berupa konten atau artikel sebaiknya "convert" terlebih dahulu gambar tersebut menjadi format  WEBP. Dalam setiap penjelasan terkait perihal kecepatan loading halaman blog, pihak ahli dan Google akan mengingatkan kita untuk menggunakan format gambar terbaru yang lebih ringan dan kompatibel pada halaman web yakni format baru gambar WEBP .

Webp adalah format gambar digital terbaru dari Google.

Webp mampu mereduksi ukuran gambar sampai 25%  nyaris tanpa kehilangan kualitasnya dibanding format JPG atau PNG. Sehingga jika anda seorang pengembang web, penggunaan webp pada gambar yang diunggah akan mempercepat situs yang anda buat. Selain itu, Weppi juga mendukung gambar bergerak/animasi, seperti pada format gambar GIF, yang mana tidak bisa dilakukan oleh format JPG dan PNG.

Beruntungnya hari ini Browser browser utama mulai mendukung Webp ya karena keuntungan beban yang ringan dan alasan kecepatan loading tadi. Dan lebih menyenangkan lagi pada zaman dimana kita sudah bisa ngeblog melalui tablet dan hape Android yang mana aplikasi converter gambar untuk merobah format JPG,PNG dan lainnya kedalam format WEBP. Anda bisa mendownloadnya di Play Store.

Oleh karenaGoogle sangat merekomendasikan template blog yang cepat sehingga mereka juga mengemukakan projek AMP. Google juga terang terangan mengingatkan arti penting sebuah kecepatan dan mengapa sebuah halaman yang cepat akan diutamakan.

Itu bukan mitos melainkan alasan teknis mesin pencari. Semua jenis algoritma tidak apat menafikan itu. Jika kita membuat robot di dunia nyata sekalipun, jika segala hal membutuhkan kecepatan maka yang cepatlah yang akan menang.

Tidak perduli apakah kita menggunakan template AMP atau template klasik responsive biasa jika halaman web kita dapat berlari lebih cepat maka blog kita harus di index lebih cepat dan tiba di garis finish lebih duluan!

Semakin cepat loading halaman sebuah blog semakin besar peluangnya untuk di rekomendasikan oleh mesin pencari kepada para pengunjung sebaliknya halaman blog yang lambat akan "diabaikan" oleh mesin pencari kaerna terlalu banyak memakan sumber daya: yakni WAKTU. Diibaratkan hanya pengunjung pengunjung yang "tersesat" yang mampir dan saat mereka menemukan kenyataan blog kita susah di akses, mereka akan segera kabur mencari halaman lain. Mereka akan menemukan halaman yang cepat dan ramai pengunjungnya dan segera berinteraksi disana. Alasan ini fair dan cukup adil.

www.editblogtema.net

11 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Pemakaian java script ndak perlu dihindari, hanya cukup seperlunya saja yg digunakan sesuai kebutuhan.

    BalasHapus
  2. wah informasi bagus gan... kayaknya mulai sekarang untuk gambar saya akan menggunakan format...webp...
    terima kasih gan...

    BalasHapus
    Balasan
    1. download saja converternya. Dan lagian bisa juga di covert online kok

      Hapus
  3. Baca artikel ini, saya jadi tersinggung. Karena semuanya ada di tema blog saya. Walau ada keinginan untuk mengurangi atau menghapus itu ada ,tapi bagaimana lagi, tema blog saya photographer jadi ya terpaksa deh.

    BalasHapus
    Balasan
    1. Nah photographer web kan gak apa apa klo menggunakan format WEBP, soalnya secara visula gak bakal merugikan kualitas, ukuran lebih kecil hingga 25% malah menguntungkan space dan kecepatan blog.

      Lagian di masa depan memang format ini yang akan diterima lebih luas oleh para photographer di website mereka.

      Hapus
  4. Kalau template blog saya emang simple nggak terlalu banyak widget jadi loadingnya cepat aja

    BalasHapus
    Balasan
    1. Ya karena agan pake salah satu tamplate bawaan blogspot terbaru: Soho, contempo, emporio. Tema tama ini sangat responsive, mobile friendly.

      Hanya sedikit saja membutuhkan sentuhan desain melalui opsi blogger desainer tema, memang sudah cukup baik sekali buat ngeblog

      Hapus
  5. Meski artikel ini dikhususkan untuk pengguna blogger, tapi sebagian memang bisa digunakan untuk pengguna wordpress. Dan saya sampai saat ini masih bingung apa saja yang penting untuk diletakkan di widget, yang terpikirkan cuma latest dan populer post. Entahlah, latest post ini sebenarnya wajib atau gk, kadang kepikiran orang yang mengunjungi pun kalau betah mah pasti bakal buka halaman depan yang pasti bakal nemu latest post.


    Oh, yang javascript setuju banget, seenggaknya pake yang penting saja, kalo untuk menghias blog saya rasa mending gk usah klo malah ngurangi kecepatan.

    BalasHapus
  6. Latest dan popular itu ringan. Lagipula wordpress sangat terbantu dengan banyaknya add on yang tersedia.

    BalasHapus
  7. Sebagai seorang pemula,ada tidak tips biar full 100,saat ini saya menggunakan tema sederhana tanpa melampirkan foto pada setiap artikel saya

    BalasHapus
    Balasan
    1. Full AMP? Lebih baik download template AMP saja sudah banyak versi gratisnya kok

      Hapus
Lebih baru Lebih lama

Formulir Kontak