Kode Blogger: Hasil penelusuran untuk Mempercepat loading blog

Menampilkan postingan yang diurutkan menurut relevansi untuk kueri Mempercepat loading blog. Urutkan menurut tanggal Tampilkan semua postingan

8 Jun 2011

CSS | Rabu, Juni 08, 2011

Kompres CSS Untuk Mempercepat Loading Blog

Kompres Code CSS Untuk Mempercepat Loading Blog, kiranya itulah yang akan saya bahas malam ini, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog With CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.

Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:

Seperti biasa, Login ke akun blogger sobat
Masuk Rancangan/Layout
Pilih Edit HTML
Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
Perhatikan Langkah-langkah berikut ini

1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.

Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:

<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

Buka situs CSS compressor disini
Setting pengaturannya seperti berikut:

Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'

Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

Terakhir klik Simpan

Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.

2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML

Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:

Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:

Blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
Buka situs CSS compressor disini
Settingnganya rubah seperti berikut:

Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'

Kemudian tempatkan hasil kompresannya diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

kemudian potong kembali pada kode diantara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>

Terakhir klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan Alhamdulillah tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS Untuk Mempercepat Loading Blog yang saya lakukan.
Selamat mencoba Sobat... Semoga bermanfaat.

Article Information:
Description: Kompres CSS Untuk Mempercepat Loading Blog
Reviewer: Viyan Pradita - Itemreviewed: Kompres CSS Untuk Mempercepat Loading Blog - Rating: 4.5

6 Agu 2012

JavaScript | Senin, Agustus 06, 2012

Cara Mempercepat Loading Blog With Script Lazyload

Cara Mempercepat Loading Blog With Script Lazyload - Cara mempercepat loading blog memang ada banyak macam dan cara, seperti yang jauh-jauh hari sudah pernah saya share disini yaitu antara lain, Kompres CSS Untuk Mempercepat Loading Blog, Cara Mempercepat Loading Blog With CSS External, dan masih ada banyak cara lain tentunya. Nah Script Lazyload awalnya saya tahu itu script/plugin untuk Wordpress, ternyata ada juga yang diterapkan di Blogspot.

jQuery Lazyload

Sebelum Sobat menerapkan script ini, sedikit saya beri ulasan sebelum dan sesudah menggunakan Script Lazyload.
Dengan tools ini Sobat mengetahui berapa kecepatan blog Sobat.
Dari situ Sobat bisa membedakan sendiri setelah dan sebelum menggunakan Script Lazyload ini.

Oke, berikut cara memasang Script Lazyload di Blogspot:

1. Login blogger pastinya
2. Masuk ke Rancangan
3. Klik Edit HTML dan klik Expand Template Widget (backUp template)
4. Cari kode </head>
5. Letakan script dibawah ini tepat diatasnya

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/easy-loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200});
});
</script>

6. Simpan Template.

Tambahan:
Pengalaman saya sendiri untuk kode blogger, tidak semua website/blog bisa lebih ringan menggunakan Script Lazyload ini.
Saat di cek, ada pula yang malah membuat blog lebih berat.
Jadi sebelum dan sesudah anda menggunakannya alangkah lebih baiknya sobat cek dulu disini.
Semoga bermanfaat.

Sumber referensi :
http://exitren.blogspot.com

11 Mei 2011

CSS | Rabu, Mei 11, 2011

Cara Mempercepat Loading Blog With CSS External

Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah website/blog, saya rasa trik ini sangatlah penting untuk dicoba. tidak jauh-jauh, sebagai contohnya blog saya ini, yang saya rasakan makin lama makin berat saja, hehehe :D dan kebanyakan blogger, bila koneksi lagi down pasti rada maleez tuh untuk mem-visite blog yang lumayan berat. hihihi :p
Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading Blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

sreenshot

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/pernak-pernik blog yang tidak begitu penting, dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting. Dan yang akan saya bahas kali ini adalah membuat CSS External.

Sebelumnya cobalah sobat cek berat loading blog sobat Disini

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode
<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan diatas atau sebelum kode:
]]></b:skin>

6. Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.
7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.
Bila belum mempunyai webhosting sendiri, silahkan lihat disini cara membuatnya.
8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/kodeblogger/JavaScript/blogku.css

Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.

Catatan:
Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.
Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu.

20 Jun 2011

Kompres Image | Senin, Juni 20, 2011

Kompres File Image, Mengurangi Beban Loading Blog

Sudah banyak cara untuk kompres file image, dan banyak software untuk mengkompres gambar/file image, dan yang akan saya share disini yaitu Image Compression Tools, adalah sebuah software untuk meresize/mengkompres ukuran gambar, khususnya gambar berformat, JPEG dan GIF. ukuran file dari software ini juga sangatlah kecil, jadi sobat bisa dengan cepat untuk mendownloadnya.
Tidak lengkap rasanya bila kita tidak menggunakan tolls ini, melengkapi postingan saya sebelumnya yaitu Kompres CSS Untuk Mempercepat Loading Blog, dan Cara Mempercepat Loading Blog With CSS External, biar makin mantap, gunakan juga tolls ini. Dan pastilah sangat dibutuhkan untuk para blogger seperti kita, karena dalam ngeblog pastinya kita mesti menaruh/membutuhkan yang namanya image/gambar, entah itu untuk demo, mempermudah dalam menjelaskan dalam sebuah artikel, ataupun yang lainnya.

Dengan tolls ini Anda dapat dengan mudah mengubah ukuran, selain untuk kompres dan mengoptimalkan file gambar Anda, pastinya semakin gambar itu kecil ukurannya, maka berat loading blog juga akan tertlong. Cara penggunaanya'pun sangatlah praktis dan mudah. Bila Anda tertarik, silahkan lagsung saja unduh software'nya dibawah ini:

Download: Image Compressor 5.0.1.74 full.zip (1,756 KB)
Password: kode-blogger.blogspot.com

Keterangan:
Karna format filenya ZIP, jadi Anda harus mengExtrak terlebih dahulu, dengan password yang sudah saya sebutkan diatas.
Software ini full version, untuk crack sudah ada didalam file download, begitu juga cara membuat menjadi full version.
Karena software ini tidak bisa mengkompres "file.png" (bisa mengkompres tapi file jadi tidak transparan), mungkin akan saya share pada postingan saya selanjutnya. Dan cukup sampai disini untuk postigan Image Compression Tools, Mengurangi Beban Loading Blog.
Semoga bermanfaat, salam Kode Blogger \m/

19 Nov 2012

Hack | Senin, November 19, 2012

Tips Mempercepat Loading Form Komentar Blog

Setelah kemarin mengulas trik URL Redirect pada blog, sekarang kita masuk kebagian optimasi loading blog, yaitu Cara Mempercepat Loading Form Komentar Blogspot.
Tips yang saya terapkan juga cukup mudah cuman 2 (dua) langkah, yaitu dengan sedikit mengedit kode HTML saja.
Sebelum saya jelaskan lebih lanjut pahami terlebih dahulu kode HTML untuk Form komentar blog dibawah ini.

1. Kode HTML Original Form Komentar
2. Kode Yang Sudah DiModifikasi
3. Tutorial

Sedikit ulasan, seperti yang kita tahu,form komentar blog ini mempunyai/mengandung banyak error dan tidak valid HTML. Setelah sobat lihat kode HTML yang Ori dan yang sudah dimodifikasi, pasti rada sedikit aneh kan dengan kodenya?? Anehnya karena pemanggilan iframe'nya dibuat terpisah menjadi dua bagian. Kode src yang biasanya digunakan untuk memanggil data external, lah koq dipisah. Inilah yang sedikit membuat loadingnya lambat.

Pehatikan saja load elemen bagian sidebar pasti lebih duluan nongol daripada form komentar. Seharusnya kan form komentar yang nongol duluan karena satu urutan setelah konten. Iya sih, sekilas memang tidak kelihatan/tidak terlalu diperhatikan. Tapi bila sobat ada yang merasakan hal yang sama dengan saya (haha kek lirik lagu galau aja yah!! :p ) Sobat bisa sedikit meminimalisir loading form komentar dengan cara berikut.

Tutorial

1. Langsung wae mlebu Edit HTML dan Lanjutkan. Jangan lupa centang pada "Expand Widget Template, dan tidak ada salahnya buat BackUp template sobat.

2. Cari kode dibawah ini

Kode HTML Original Form Komentar

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='' width='100%'/>

Penjelasan:
Perhatikan kode HTML diatas, pada data:post.commentFormIframeSrc dan juga src='' itu yang bikin aneh, target "src iframe" yang dibiarkan kosong.

3. Pindahkan kode data:post.commentFormIframeSrc kedalam target src'' yang kosong. Sehingga menjadi seperti dibawah ini:

Kode Yang Sudah DiModifikasi

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

Penjelasan:
Kalau dilihat kode tersebut ada 2, jadi ganti semuanya saja.

4. Langkah terakhir simpan template.

Seperti itulah Tips Mempercepat Loading Form Komentar Blog. Selamat mencoba dan ditunggu tanggapannya.

21 Jun 2011

Tips SEO | Selasa, Juni 21, 2011

Belajar Mengenal SEO On Page dan Off Page

Mumpung ada kesempatan dan waktu luang, jadi saya sempat-sempatkan untuk memposting artikel ini, yaitu Belajar Mengenal SEO On Page dan Off Page. Membicarakan SEO dan Belajar SEO saya rasa tidak ada bosannya, dan tidak ada habisnya, bener-bener gawe nyong mumet! haha... bahasa ngapak'nya keluar deh :p
Ini merupakan permainan strategi dalam blog, khususnya dalam hal SEO, Strategi SEO yakni bagaimana agar keyword yang dibidik (sniper kali yah) menempati urutan strategis dalam search engine. Seperti yang kita ketahui,Mbah google lah yang sering dijadikan jurinya. Hah, maka dari itulah kita sangat memerlukan yang namanya strategi antaranya yaitu SEO Onpage dan SEO Offpage. Oleh karena itu juga saya rasa kita wajib mengenal apa itu SEO Onpage dan SEO Offpage.

1. SEO Onpage
SEO Onpage adalah strategi dalam segala bentuk optimasi search engin pada blog atau website yang dimaksud. Strategi onpage lebih ditujukan pada penyerangan search engine terhadap keyword tersebut.

Beberapa contoh penerapan SEO Onpage, yang saya dapat dari blognya Kang Rohman (maap neh kang, saya nyontek dikit) :

Penggunaan nama domain
Judul Blog
Judul Posting
Deskripsi
Penggunaan Headings (H1,H2,H3, H4, dst…)
Penggunaan kata tebal, miring, garis bawah, dan lain sebagainya
Internal linking ( tautan ke halaman posting lain yang masih dalam bagian blog yang dimaksud)
Penggunakan tag alt pada setiap gambar
Memepercepat waktu akses blog
Dan asih banyak lagi yang lainnya

Cara untuk Optimasi hal-hal yang saya sebutkan diatas, bisa sobat cari di blog kode blogger ini, tapi bila enggan mencarinya sobat bisa melihatnya di Tips SEO dan Mempercepat Loading Blog

2. SEO Offpage
SEO Offpage adalah segala bentuk teknik optimasi search engine yang di lakukan di luar blog atau website yang di maksud. Strategi offpage ini lebih bersifat support dan bahkan menjadi inti support dalam mendongkrak keberadaan blog di search engine.

Beberapa contoh penerapan SEO Offpage
Strategi offpage bisa dilakukan dengan link building, diantaranya:

Submit ke directory/Submit site map ke webmaster tools
Link exchange dengan sesama teman blogger
Iklan review untuk mendulang link
Lomba yang memberikan linkback ke blog penyelenggara, Seperti Kontes SEO.
Ping, dsb.

SEO Offpage lebih kearah backlink, karena semakin banyak yang merekomendasikan maka blog anda akan lebih mendapatkan perhatian dari search engine.

Dari hal diatas saya bisa mengambil kesimpulan, kesimpulane inyong yaitu:
Strategi onpage bisa dilakukan sekali, sedangkan untuk offpage harus dilakukan berkali-kali lipat untuk bisa mendorong posisi di search engine. Dan dari pengalaman yang sudah-sudah, saya rasa kita harus lebih berhati-hati dalam melakukan strategi Onpage, terutama pada waktu mengganti meta title ataupun meta conntent, dan juga jangan terlalu sering mengganti template blog, karena efeknya bisa sedikit banyak membuat kita kerepotan! Contoh korbannya yo saya ini ?? Hahaha... Bila penasaran sobat bisa liahat pengalaman saya akibat kontes SEO.

Oia, katanya juga dalam hal ini, baik SEO Onpage dan SEO Offpage itu harus seimbang yah?? Walahh... inyong juga gak begitu tahu berapa perbandingannya, berapa persen untuk Onpage dan Offpage. Tapi kalo dipikir-pikir sih, lebih banyak melakukan Offpage daripada Onpage.
Yahh.. itulah yang bisa saya share kali ini, tentang Belajar Mengenal SEO On Page dan Off Page. Dan saya yakin sobat blogger pasti punya pendapat dan strategi sendiri-sendiri dalam hal ini, jadi... mari kita saling berbagi sob!!
Jangan segan-segan untuk memberi kritikan dan masukan yah, saya tunggu lho komentarnya. Semoga bermanfaat.
Salam Blogger Banjarnegara \m/

Baca juga sumber referensi'nya: Kolom Tutorial

Article Information:
Description: Belajar Mengenal SEO On Page dan Off Page
Reviewer: Viyan Pradita - Itemreviewed: Belajar Mengenal SEO On Page dan Off Page - Rating: 4.5

20 Okt 2012

SEO | Sabtu, Oktober 20, 2012

Postingan Blog Deindex di SE (Search Engine) Google

Bingung juga kenapa ada beberapa dari postingan kode-blogger bisa hilang (De-Index) di pencarian google. Seperti yang sedang saya alami sendiri beberapa hari ini, khususnya untuk postingan Cara Mempercepat Loading Blog With Script Lazyload. Problemnya, kadang muncul kadang hilang di SE (Search Engine) Google. Padahal di PageOne.

Berikut adalah beberapa alasan dari pengalaman saya sendiri. Alasan kenapa postingan blog bisa hilang di SE (Search Engine) yaitu:

1. Update Algoritma, Maintenance dan Semacamnya
Seperti yang sudah sobat ketahui, dalam beberapa bulan ini ditahun 2012, Google sudah mengUpdate Sistem pencarian, lebih tepatnya soal Algoritma Google beberapa kali. Berikut ulasan update algoritmanya:

-Panda Update : 20 Sept. 27, 2012
-EMD Update : 1 Sept. 28, 2012
-Penguin Update : 3 Oct. 5, 2012
-Top Heavy : 2 Oct. 9, 2012

Bisa dilihat kan dalah 1tahun bisa berapa kali update ?? Mungkin faktor diatas jg berpengaruh pada posisi blog kita di SE (itu menurut persepsi saya sendiri loh).

2. Sifat Google yang suka berbagi Trafic
Gak jauh beda dengan efek algoritma google yang baru, bagi para blog/website baru yang sekarang sedikit lebih di tonjolkan khusunya di pencarian google. Blog baru yang sudah terindex, begitu juga dengan postingannya, sedikit banyak dari mereka pasti muncul di PageOne, walaupun cuman bertahan beberapa jam/hari saja.
Dengan alasan inilah google memberikan kesempatan kepada semua website dan blog yang baru menjadi tumbuh dan berkembang, sehingga lebih memacu semangat dalam memuat berita.

3. Duplikat Konten
Ini neh yang kadang ribet diatasi, kalau dari blog saya sendiri mungkin jarang saya temuin duplikat konten karna kesalahan saya sendiri. Tapiiiiiii.... yang bikin repot and jengkel yaitu para Kopasser.. (Haha.. para pengKopas konten orang), yang dengan sengaja menjliplak habis isi konten blog kita. Dan inipun sudah saya alami dari dulu, Banyak sekali blog yang isi kontennya sama persis dengan postingan-postingan saya, dan tanpa diberi link sumber.
Ya memang sih google lebih pintar memilah-milah mana si Konten ORI (Asli), tp tetep aja gawe jengkel !! upssS.. curhar dikit :P
Dan sedikit banyak faktor diatas mempengaruhi hasil pencarian di Search Engine (SE).

Masih ada sebenarnya beberapa alasan yang membuat de index di SE, tapi beberapa alasan diatas yang sudah saya jelaskan itu menurut apa yang ada diotak saya, dan dari beberapa pengalaman saya sendiri.
Karena tujuan awalanya saya membuat postingan ini juga sebenarnya ingin ~~BERTANYA~~ kepada para sobat blogger ?? Jadi... semoga ada yang berkenan berbagi ilmu dan bisa membantu memberi solusi atau pemecahan masalah saya diatas.

Ditunggu tanggapannya Sob !! Sekian dari saya dan terimakasih.... \m/

Kode Blogger