CSS memang relatif lebih ringan daripada Javascript namun pada saat render mereka ini memblokir kecepatan halaman blog menuju server karena banyaknya tautan penghubung ke dalam librari librari di website mereka masing masing. Terutama jika elemen dari fitur yang dibuat terbebani oleh link link misalnya link awesome untuk menampilkan ikon yang cantik, link jquerry untuk tombol ekspresi dan reaktifnya. Pokoknya mereka yang sebenarnya terpisah dari sistem internal HTML inti Blogger itu sendiri. Harus dipanggil untuk mengaktifkannya.
Bahkan sebuah fitur 'Back To Top' sebuah tombol kecil yang di klik untuk mengembalikan halaman dengan cepat ke atas, memiliki tiga hal berikut:
- Kode CSS.
- Kode Javascript, jquery.
- Link font Awesome, atau link provider ikon lainnya.
Ketiga hal di atas terbukti racun yang ampuh menyakiti dan sekaligus melukai kecepatan halaman blog kita - terutama jika kita mempercayai bahwa elemen kecepatan adalah salah satu faktor SEO yang penting, hingga Google sempat meng-anak emaskan halaman AMP oleh karena demi kecepatan ini.
Akan tetapi apakah tidak bisa membuat tombol yang dapat di klik dan mengembalikan halaman yang sudah di scroll jauh kebawah untuk halaman blogger? Bisa asalkan kalian tetap mengutamakan kesederhanaan.
Jika kalian menggunakan salah satu dari 4 template terbaru:
- Contempo cari kode: <b:template-script async='true' name='indie' version='1.0.0'/>
- Emporio cari kode: <b:template-script async='true' name='vegeclub' version='1.0.0'/>
- Soho cari kode: <b:template-script async='true' name='fancy' version='1.0.0'/>
- Notable cari kode: <b:template-script async='true' name='rockpool' version='1.0.0'/>
Maka letakan saja kode berikut di atas masing masing pada salah satu dari 4 kode di atas tadi:
<a class='trans color-hover' href='#' id='jump-top-button'>
<center><span class='block black color-hover'><abbr title='klik untuk kembali ke atas'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>
<path d='M13,18H11V10L7.5,13.5L6.08,12.08L12,6.16L17.92,12.08L16.5,13.5L13,10V18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='currentColor'/>
</svg></abbr></span>
<span class='block color-hover upper'/></center>
</a>
Lalu save template.
Kelebihan menggunakan matode ini adalah: Tombolnya simple, cepat dan tidak mempengaruhi kecepatan. Sedangkan kekurangannya adalah tidak stylish. Namun bagi Kalian yang mengusung kesederhanaan model ini tampaknya akan cocok.
Thanks gan, saya akan mempelajari trik2 yg ada diblog ini untuk menambah pengetahuan saya
BalasHapusSaya newbie yg butuh banyak asupan
Sama sama mas Lutfi, newbie yang bersemangat untuk sukses 😊
HapusJk mau yg model kayak yg aktif di halaman agan skrg ini yaitu dg simbol warna merah kecil mungil tp tetep smat mudah di lihat gimana gan?
BalasHapusInfo link tutornya ke email ya gan
Terima kadih