Pernah mengukur kecepatan halaman blog menggunakan matrik Google PageSpeed? Ya pernah dong. Saya gagal fokus pada bagian LCP (Largest Contenful Paint) karena itu adalah salah satu biang kerok lambatnya halaman berpacu di jaringan web, sangat melukai performa kecepatan. Pada pengukuran akan menghasilkan data sebagai berikut:
Tentu saja saya tidak akan mempermasalahkannya jika ia tidak di gunakan sebagai sinyal bagi mesin pencari di Google console Webmaster. Terutama pada bagian data web inti ini bisa mencerminkan kegagalan mengoptimalkan halaman sebuah web termasuk halaman blog. Lalu apa biang keroknya?
Setelah klik disana terdapat salah satu datanya: Jika ingin halaman jadi wuss dan ringan kita harus menghapus javascript yang tidak dipergunakan dari dalam template. Malangnya kemanapun mencarinya di halaman editor HTMLblogger Javascript itu tidak di temukan. Walaupun sudah tekan CTRL+ALT. dan memasukan kata kunci, tidak ada. Javascript itu adalah:
…widgets/53698643-widgets.js
Para blogger senior umumnya menyarankan agar kita 'menghentikan' aktivitas sang javascript yang tidak terlihat dengan merubah atau mengganti tag penutup body yakni </body> dengan <!–</body>–></body> dan setelah itu halaman memang menjadi ringan, tapi apa yang terjadi kemudian?
Begini akibatnya:
- Tombol reply komentar berhenti berfungsi, hampir tidak ada cara untuk memperbaikinya, kecuali mengembalikan kode </body> seperti semula.
- Widget 'contact form' berhenti bekerja
- Search form atau menu pencarian tidak berfungsi lagi
- Widget Wikipedia juga jadi tidak berfungsi
- Widget arsip blog berhenti bekerja
- DLL
Melihat akibat yang ditimbulkan di atas, bagi saya itu semua adalah harga yang harus ditebus dan sangat mahal karena bagi saya terutama tombol reply komentar itu penting dan widget menu pencarian juga.
IDENTITAS TEMPLATE MELALUI IKATAN JAVASCRIPT
Tapi tunggu, karena saya menggunakan template terbaru blogger di bawah kode yang 'tidak di temukan' tersebut ada kode desain template notable:
…res/247…-rockpool_compiled.js
Kodenya ada di dalam 5 varian blogger terbaru dengan masing masing perbedaan penulisan:
- Notable: <b:template-script async='true' name='rockpool' version='1.0.0'/>
- SOHO: <b:template-script async='true' name='fancy' version='1.0.0'/>
- Contempo: <b:template-script async='true' name='indie' version='1.0.0'/>
- Emporio: <b:template-script async='true' name='vegeclub' version='1.0.0'/>
- Essential: <b:template-script async='true' name='strm' version='1.0.0'/>
Jadi untuk notable saya menghapus : <b:template-script async='true' name='rockpool' version='1.0.0'/> dan menyelidiki dampaknya.
- Benar, ia membuat kolom pencarian menjadi tidak bekerja.
- Ia menghilangkan efek sticky header template template terbaru
- Tapi, ia tidak mempengaruhi kolom reply pada komentar sama sekali.
Bagi saya itu masih worth. Tidak apa apa mengorbankan tombol pencarian, toh saya dapat menggantinya dengan yang kustom.
Jadi saya meneliti hal hal berikut:
XML:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Pengaturan CSS terkait dengannya adalah:
body.variant-rockpool_deep_orange .centered-top-secondline .PageList .overflow-popup li a{color:#000}body.variant-rockpool_pink .blog-name h1,body.variant-rockpool_pink .blog-name h1 a{text-transform:none}body.variant-rockpool_deep_orange .post-filter-message{background-color:$(header.background.color)}
Lupakan kode kode xml dan CSS di atas, itu hanya penelusuran keterkaitan kode terhadap struktur template, gunanya bagi saya adalah bagaimana memahami setiap kode bekerja dan berdampak terhadap kinerja template secara keseluruhan.
Setelah saya menghapus kode tersebut dan membuang widget bawaan tombol bawaan astaga, loading yang tadinya di ukur hanya di kecepatan 50-65 untuk mobile berubah drastis menjadi 85-90!.
Dan yang lebih aneh setelah saya periksa kembali data kecepatan di PageSpeed java script yang disuruh hapus bebanya sekarang telah jauh berkurang:
Sebelum:
Sesudah:
- Memperbaiki ukuran dimensi gambar
- Menghilangkan resource yang memblokir render halaman]
- Mengurangi penggunaan javascript
- dll
Setelah melakukan perbaikan perubahan tidak akan serta-merta terjadi, karena berbeda dari anggapan sebagian orang bahwa yang melakukan tugas mengumpulkan data adalah Google bot atau robot.txt, sebaliknya baik google bot atau robot.txt tidak mengambil bagian dari tugas ini, yang melakukannya justeru peramban Google Chrome! Tool matrix pagespeed harus membaca data yang di kumpulkan melalui UX peramban chrome terlebih dahulu, barulah setelah score terkumpul bedasarkan itu, score real time performa halaman web kita dapat di tampilkan di dalam matriks search console di halaman webmaster.
MENGAPA KITA HARUS PERDULI?
Karena pada matrik penilaian di search consol Google memberikan skor dan peringatan terkait performa halaman dan jika halaman tidak sesuai dengan standar, maka halaman tersebut berpotensi mengalami penurunan trafik lalu di ikuti oleh penghasilan.
Kita harus mempebaiki data halaman blog yang di tandai merah oleh Google, jika tidak halaman akan mulai rusak secara perlahan. Ini terutama bagi para blogger yang halamannya telah di monetisi, perbaikan biasanya akan selalu diikuti oleh peningkatan performa dan peningkatan trafik.
Perbaikan disini lebih ke struktur template. Dengan teknik dan desain yang valid, tepat dan akurat pastinya akan meningkatkan pengalaman pengguna pada saat menggunakan halaman tersebut.
Dan alih alih menghapusnya, kita tidak dapat melakukannya karena javascript tersebut di remote dari sisi server ke librari, lalu ke dalam template kita. Kita hanya dapat mengurangi 'aktivitasnya' yang sangat merugikan kecepatan loading tersebut.
Makasi banyak kak ilmunya, saya ngikutin step yang kompres CSS dan hapus identitas template yg pakai javascript. Simple tapi langsung merubah skor di pagespeed
BalasHapus