Tips mempercepat loading blog

Setelah dua postingan kemarin untuk mempercantik postingan yaitu  Bikin Textarea Cantik untuk Code dan  DIV Keren untuk Tampilkan Code  yang berfungsi untuk menampilkan code script, kali ini Sakahayang mencoba menganalisa loading blog dari alur proses  code xml template. Bagi sobat-sobat pengunjung tetap Sakahayang  apakah merasakan ada perbedaan loading blog ini dari sebelumnya? Apakah sekarang terasa lebih cepat dari hari sebelumnya?

Sebenarnya prosentase loading time tetap tak mengalami perubahan seperti yang dilaporkan google speed dan GTMetrix  yaitu  sekitar 93%  setelah saya lakukan optimasi jauh-jauh hari sebelumnya. Hampir semua orang tidak akan memungkiri pendapat saya yaitu : "Saat kita mengunjungi blog yang menjadi fokus kita adalah CONTENT.,   bukan widget, header atau yang lainnya.".   Hayo siapa yang tak sependapat dengan saya????

Nah karena yang jadi fokus pengunjung adalan CONTENT, maka saya berfikir bisakah pengunjung blog tidak perlu menunggu loading blog 100% mereka sudah  bisa melihat dan membaca content blog? Dengan kata lain widget, footer belum terload semuanya  tapi pengunjung sudah bisa membaca content.

Ternyata behasil apa yang saya harapkan setelah saya utak-atik template. Sebelumnya saya analisa terlebih dahulu urutan komponen-komponen yang di loading secara garis besarnya.

<a href='http;//toolbarku.blogspot.com'>Toolbarku</a> 

Dari kode xml template, dengan step-step loading sebagai berikut :

1. Setting background warna hitam
2. Loading header, <div id='header-wrapper'> ,,,,, </div>
3. Loading menu, <div id='menu-wrapper'> ,,,,, </div>
4. Loading content dimana background masih HITAM mengikuti settingan awal, <div id='main-wrapper'> ,,,,, </div>
5. Loading middlebar yang berisi widget, <div id='middlebar-wrapper'> ,,,,, </div>
6. Loading sidebar yang berisi banner sponsor, <div id='sidebar-wrapper'>,,,,, </div>
7. Background content berubah jadi putih, <div class='clear'>&#160;</div>
8. Loading footer,  <div id='footer-wrapper'>,,,,, </div>

Terlihat dari urutan loading Blog Sakahayang  diatas, setelah content terload pada step 4, tapi pengunjung belum bisa membaca konten karena background masih mengikuti background awal yaitu hitam, dia akan menunggu sampai step ke-7 dimana  seluruh widget di middle dan sidebar terload. Ini yang membuat mengapa terasa lambat padahal content sudah terload.

Dengan demikian kita akan merasa loading blog terasa lambat, padahal menurut google speed dan gtmetrix mencapai 93% nilai yang dianggap cepat. Tapi perasaan pengunjung pasti merasa lambat karena content sudah tampak namun belum bisa membacanya karena background masih hitam.

Urutan loading blog seperti di atas tidak bisa kita ubah, sudah saya coba, tapi hasilnya jadi acak-acakan tidak sesuai layout yang diharapkan. Juga sudah saya coba  perintah xml  <div class='clear'>&#160;</div> pada step 7 saya sisipkan setelah step 4 namun hasilnya juga tata letak blog menjadi acak-acakan.
<a href='http;//toolbarku.blogspot.com'>Toolbarku</a>
Kemudian saya cari stylesheet (CSS) untuk content dengan id=main-wrapper.  Oooo ternyata pada settingan CSS untuk content  tidak ada settingan background, sehingga akan terasa lambat.
#main-wrapper{width:530px;float:left} Saya coba update CSS tersebut diatas cuma menambahkan background putih, menjadi sebagai berikut :

#main-wrapper{width:530px;float:left; background:#FFF}

Hasilnya menakjubkan seperti yang anda rasakan ,,,,,,

Step-step loading tetap seperti semula, namun ketka loading berlangsung baru distep 4 pengunjung sudah bisa membaca konten, sehingga difikiran mereka merasa loadingnya lebih cepat padahal kalo diukur tetap tak mengalami perubahan di kisaran 93% menurut google speed.

1. Setting background warna hitam
2. Loading header, <div id='header-wrapper'> ,,,,, </div>
3. Loading menu, <div id='menu-wrapper'> ,,,,, </div>
4. Loading content dengan background berwarna PUTIH,  <div id='main-wrapper'> ,,,,, </div>
5. Loading middlebar yang berisi widget, <div id='middlebar-wrapper'> ,,,,, </div>
6. Loading sidebar yang berisi banner sponsor, <div id='sidebar-wrapper'> ,,,,, </div>
7. Lackground content berubah jadi putih, <div class='clear'>&#160;</div>
8. Loading footer, <div id='footer-wrapper'> ,,,,, </div>

Semoga bermanfaat bagi kecepatan loading blog sobat.