Recent Post

Sponsored

Labels

addressbook 4 Online Tools Untuk Kompesi Blogger

Diposting oleh dev | , , | 15 komentar »

Blogger toolsSeperti kita ketahui kecepatan loading blog menjadi salah satu faktor SEO. Blog ini mungkin dapat dikategorikan sebagai blog yang cukup berat karena banyak sekali menggunakan javascript terutama pada bagian "3 kolom header" di atas. Oleh sebab itu saya seringkali berusaha melakukan kompresi untuk sedikit mempercepat loading blog tanpa merubah tampilan blog ini. Dibawah ini ada beberapa online tools yang sering saya pakai untuk melakukan kompresi pada blog ini:

1. CSS Compessor - Situs: CSS Drive
CSS compressor sebenarnya sudah pernah saya bahas pada postingan sebelumnya. Fungsi CSS compessor adalah untuk merapihkan dan menghilangkan spasi yang tidak terpakai pada kode CSS, hal ini dilakukan agar kode CSS lebih mudah dibaca saat blog kita dibuka. Untuk lebih jelasnya silahkan baca di postingan "Mempercepat Loading Page Pada Blogger".

2. HTML Compressor - Situs: Boryi.com
Fungsi dari HTML compressor tidak jauh berbeda dari CSS compressor, HTML compressor digunakan untuk merapihkan kode HTML pada blog kita.

3. JavaScript Compressor - Situs: Dean Edwars
Memasang JavaScript pada blog seringkali membuat loading blog menjadi berat, hal ini disebabkan biasanya kode javascript di hosting di luar blogger. Tapi, salah satu faktor lain kenapa kode javascript sering membuat loading blog menjadi berat adalah penyusunan kode javascript yang acak-acakan. Mungkin teman-teman sering memasang kode javascript dari penyedia widget seperti widget recent post, popular post dan sebagainya. Tapi pernahkah teman-teman memeriksa kode javascriptnya? coba perhatikan code javascript "menu tabview" pada sidebar blog ini sebelum di kompres:
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }

Dibawah ini kode javascript setelah di kompres:
function tabview_aux(TabViewId,id){var TabView=document.getElementById(TabViewId);var Tabs=TabView.firstChild;while(Tabs.className!="Tabs")Tabs=Tabs.nextSibling;var Tab=Tabs.firstChild;var i=0;do{if(Tab.tagName=="A"){i++;Tab.href="javascript:tabview_switch('"+TabViewId+"', "+i+");";Tab.className=(i==id)?"Active":"";Tab.blur()}}while(Tab=Tab.nextSibling);var Pages=TabView.firstChild;while(Pages.className!='Pages')Pages=Pages.nextSibling;var Page=Pages.firstChild;var i=0;do{if(Page.className=='Page'){i++;if(Pages.offsetHeight)Page.style.height=(Pages.offsetHeight-2)+"px";Page.style.overflow="auto";Page.style.display=(i==id)?'block':'none'}}while(Page=Page.nextSibling)}function tabview_switch(TabViewId,id){tabview_aux(TabViewId,id)}function tabview_initialize(TabViewId){tabview_aux(TabViewId,1)}
Hampir semua kode javascript yang ada di blog ini saya compress dan saya hosting ulang agar sedikit mempercepat loading javascript yang saya pasang. Untuk tips gratis menghosting javascript akan saya bahas pada postingan berikutnya.

4. Image Compressor - Situs: Dynamic Drive
Image compressor berfungsi untuk mengkompres ukuran gambar, sebenarnya saya lebih sering menggunakan Photoshop untuk mengkompres gambar, tapi buat teman-teman yang tidak terbiasa dengan Photoshop silahkan menggunakan layanan dari Dynamic Drive.

Mudah-mudahan beberapa online tools di atas bisa bermanfaat buat teman-teman blogger semua..

Backlink gratis untuk sahabat: Ihsan

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 15komentar ke “4 Online Tools Untuk Kompesi Blogger”
IHSAN said...
 date:

saya masih bingung bos

dimana perbedaan letak CSS, HTML dan java script pada kotak HTML blog blogger kita?

Joker said...
 date:

kurang ngerti aku

abecho said...
 date:

ada resikonya ga mas, soalnya belum terlalu ngerti masalah html sama cms, kalo photo seh enakan dikompres pake photoshop biar aman hehe

dev said...
 date:

@IHSAN: coba baca di postingan sebelumnya yang menerangkan tentang CSS compressor. kode CSS biasanya diawali dengan (.) sedangkan HTML dengan (<) sedangkan javascript biasanya diakhiri dengan kode .js

@Joker: sambil belajar saja broo, jangan lupa di backup dulu template sebelumnya..

@abecho: resikonya kalo salah tentu saja template menjadi acak2an. saran saya backup dulu template sebelumnya sebelum di compress. jadi kalo ada kesalahan tinggal di upload ulang..

taqin said...
 date:

hamm... hmm.... hmm...
lumayan ada ilmu yang bermanfaat, tanks sobat

Cinta Kasih Ibu said...
 date:

Ini yang sedang dicari akhirnya nemu juga sob.. makasih ya atas infonya.. inilah indahnya berbagi..

dev said...
 date:

@cinta kasih ibu: makasih mas, blog mas juga saya baca banyak banget yg bermanfaat buat pembacanya..terus berbagi mas..

@taqin: sama-sama..semoga bermanfaat..

tenyom said...
 date:

bermanfaat banget ini bang,jadi ga takut pake banyak javascript lagi

dev said...
 date:

@all: makasih sudah mampir ke blog ini :)

humoria said...
 date:

mudah-mudahan dengan membaca artikel ini,saya lebih gape untuk belajar komputer dengan macam-macam software

humoria said...
 date:

terima kasih atas berbagi ilmunya,semoga ada lagi artikel lainnya !

dev said...
 date:

@humoria: sama-sama mas, makasih juga kunjungannya..

Vizi said...
 date:

Makasi sobat poting'a bagus" uyy,,

Inabuy said...
 date:

mas saya seka banget dengan artikelnya karna semua bentuk kode blog dijelaskan cara compressnya, hanya saja ada yang kurang, yaitu dimana letak jelas masing-masing kode yang akan dicompress tidak dijelaskan sehingga untuk kita yang baru belajar jadi bingung yang mana css, yang mana javascript, yang mana html? mohon untuk dilengkapi....thanks

Tri Alhudy said...
 date:

cuma testing backling bang,,,:)


leave comment
back to top
comment notes

Post a Comment

devbook.net