Wednesday, October 22, 2014

Blog Cantik Dan Cepat

tips kecepatan loading blog


Blog Cantik Dan Cepat - Akibat koneksi internet yang lambat akhir - akhir ini aktivitas blogging jadi terkendala. Jangankan mau update postingan, buka browser aja udah kluwer2 lama banget ga muncul homepagenya.
Haduuuh

Ini yang kemudian muncul dibenak saya tentang betapa pentingnya kecepatan loading blog, agar mudah diakses walaupun dengan koneksi yang lelet sekalipun. Kadang kita terlena dan sibuk dengan mendesign blog yang keren tanpa mempertimbangkan kecepatan blog. Kalau kita lihat pada pengembangan web design saat ini banyak yang hanya mementingan tampilan saja, tanpa memperdulikan dari sisi kecepatan. Sebagai contoh design yang sedang ngetren saat ini adalah One Page HTML yang menggunakan plugin dari pihak luar baik CSS, maupun javascript dari framework bootstrap, flat ui, semantic ui dan sebagainya. Dengan plugin seperti ini para designer web akan dimudahkan dalam mengatur tata letak dan tampilan blog sesuai keinginan. Namun sebelumnya harus menginstall framework bootstrap terlebih dulu dalam template blog kita. Untuk kalian yang ingin mencobanya bisa mengunjungi http://www.layoutit.com

Lalu pertanyaanya apakah semua blog yang cantik bisa cepat ???

Jawabannya bervariasi

Untuk yang menggunakan High speed internet connection mungkin ini ga ada masalah, karena sebenarnya banyak faktor yang mempengaruhi kecepatan loading blog. Namun yang terutama sekali adalah faktor bentuk dan design dari blog itu sendiri. Biasanya blog yang cantik dan keren banyak menggunakan efek - efek dari pihak luar ( eksternal ) baik CSS , Javascript dan Jquery Plugin ( Jquery UI ) dan lain lain. Semakin banyak kita menggunakannya tentu akan menambah beban loading pada blog kita.

Tips membuat design blog cantik dan cepat :

1. Warna

Menggunakan kontras warna yang tidak menyolok, kita bisa memilih kontras warna Flat UI. Flat UI Color atau lebih lengkap lagi Flat UI Color Picker.

2. Metode Inline CSS

Dalam hal ini biasanya CSS baik font awesome maupun CSS efek lainya, jika memang diperlukan anda bisa mengubah dari CSS Eksternal ke inline CSS. Pilih efek yang kita perlukan saja kemudian masukkan ke dalam CSS template sebelum kode ]]></b:skin> . Dengan begini kita sudah mengurangi beban loading, jadi tidak perlu lagi memanggil ke hosting CSS eksternal tadi. Tips mempercepat blog seofriendly

3. Metode Inline Javascript

Tidak menutup kemungkinan efek tampilan yang keren dan menakjubkan menggunakan bantuan javascript dari luar ( eksternal ) anda bisa mengubahnya menjadi inline javascript ke template blog.

4. Menambahkan Asynchronous pada Jquery

Untuk format jquery dalam template biasanya seperti ini :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>
Ubah menjadi

<script async="async" src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js' type='text/javascript'/>

Ini berguna untuk mengatasi render blocking javascript yang mempengaruhi kecepatan loading blog di Google Speed Insight

5. Meminimalkan Gambar

Usahakan dalam menggunakan gambar tidak berlebihan, gunakan font awesome sebagai ganti icon gambar. Update font awesome versi 4.1.0 saat ini udah sampai versi 4.2.0

6. Kompress CSS HTML Javascript

Anda bisa menggunakan layanan kompress online

7. Jangan Menggunakan Inline CSS Attribution


 < div style='clear: both;' / >
Ganti kode di atas dengan kode

 <div class='clear'/>

Kemudian tambahkan kode css .clear{clear:both} ini sebelum kode ]] >< /b:skin >

8. Optimalkan CSS Delivery Ke Blog

 Ganti kode

<head> menjadi &lt;head&gt;
 Ganti kode

</head> menjadi &lt;!--<head/>--&gt;

Setelah itu check seberapa cepat blog anda di GT Metrix dan Speed Tool lainnya

Demikian sedikit tips blogger semoga bermanfaat