Mempercepat Loading Blog

"Sebuah cara yang mudah untuk mempercepat loading blog dengan hanya memindah penempatan suatu file tetapi cara ini mempunyai efek yang cukup signifikan untuk meningkatkan loading blog"

Blog yang berat bisa membuat tidak nyaman pengunjung yang datang. Banyak cara yang bisa dilakukan untuk mempercepat. Jika sebuah web ato menggunakan WordPress, bisa saya katakan lebih mudah mengaplikasikan trik-trik mempercepat loading blog. Akan tetapi saya pribadi menggunakan Blogpost yang gratisan sebagai media untuk ngeblog. Kebanyakan postingan yang membahas mempercepat loading blog khususnya untuk Blogpsot yang saya temui berkutat pada masalah seperti :
1. compress file css, javascript
2. penggunaan widget2 yang tidak perlu lebih baik tidak usah dipakai
3. script2 pemutar musik, animasi, flash/multimedia
4. penggunaan image/banner

Ada hal yang kurang dan menurut saya, hal tersebut penting karena sangat bermanfaat dan efeknya dalam mempercepat loading blog termasuk signifikan. Jika sobat lihat kode blog ini lewat view page code, akan tampak bahwa diatas kode ]]></b:skin> tidak ada deretan susunan file css template ini. Kenapa?? karena file css template ini sudah saya ganti menjadi sebuah linknya saja dimana file css tersebut saya upload ke Google Site dan saya hanya mengkopi link file tersebut dan menaruhnya bersama kode javascript seperti pada gambar dibawah ini.

file hosting cssPerhatikan yang saya garis bawah merah (klik gambar untuk memperbesar)

Awalnya saya mencoba setelah melihat demo2 WordPress theme yang hanya mencantumkan link file css. Terus saya coba untuk mengaplikasikan ke blog ini. Kemudian iseng ngetes kecepatan loading blog saya menggunakan tool dari seocentro, dan hasilnya ternyata bagus untuk blog saya alias berat blog berkurang. Saya coba untuk blog saya yang lain, Blogger Template by ireng_ajah juga sama. Ada pengurangan berat yang cukup signifikan dengan cara tersebut.

Berikut ini hasil perbandingan sesudah dan sebelum menggunakan cara tersebut pada Just a Blog dan Blogger Template by ireng_ajah.

1. Just a Blog

Screenshot loading blog Just a Blog dengan file css diatas kode ]]></b:skin>

Screenshot loading blog Just a Blog dengan file css yang diambil hanya linknya saja.


2. Blog Tree Blogger Template

Screenshot loading blog Free Blogger Template dengan file css diatas ]]></b:skin>

Screenshot loading blog Free Blogger Template dengan file css yang diambil hanya linknya saja.

Perhatikan yang saya garis bawah merah (klik gambar untuk memperbesar)

Just a Blog yang awalnya 99847 bytes menjadi 93366 bytes (berkurang 6000an bytes)

Blogger template by ireng_ajah yang awalnya 61747 bytes menjadi 53911 bytes (berkurang 7000an bytes)

Suatu penurunan berat blog yang cukup signifikan, bukan??


Bagaimana caranya??

Cukup cut dan paste file css blog sobat ke Notepad. Jangan lupa filenya di simpan dalam bentuk .css. Kalo sudah, upload dan kopi url file css tersebut. Perlu diperhatikan juga web file hostingnya cari yang sudah terbukti akan hal koneksi. Jangan sampai ketika dikunjungi malah tidak bisa mengakses blog gara2 koneksi web file hostingnya tidak stabil, apalagi sering macet. Kalo saya memakai fasilitas dari Google Site untuk segala urusan upload file2 saya.

Jika sudah, letakkan url file css tersebut di bawah kode ]]></b:skin>
dengan susunannya seperti ini :

<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>

Repotnya jika memakai cara diatas adalah ketika mau edit2 blog karena harus buka dulu file cssnya dan upload lagi tapi saya pikir gak terlalu jadi masalah karena ngedit2 blog juga gak tiap hari ini, hehehehehhee...

(emang tiapa hari apa yang mau di edit reng..??)

Selain trik diatas, hal sepele tetapi bermanfaat dalam meningkatkan loading blog yaitu dalam hal penulisan link alamat web/blog. Diusahakan untuk setiap link alamat web/blog yang ada di blog sobat untuk memakai tanda "/" (tanpa tanda kutip) alias garis miring pada akhir link alamat web/blog tersebut. Misalnya

http://blogcenti.blogspot.com/

Tanda "/" pada akhir alamat itu sebagai identitas untuk web server bahwa link tersebut langsung menuju kesasar alamat tersebut. Biasanya link2 tersebut menjadi link pada menu blog atau link blog lain yang tukeran link.

Untuk trik dan tips meningkatkan loading blog yang lain, bisa mengunjungi alamat ini dimana salah satunya seperti trik diatas.


Tapi kecepatan loading blog seringkali terbentur akan tampilan blog. Kadang untuk mengejar tampilan blog yang bagus, indah, tidak lagi peduli akan kecepatan blog. Selera tiap blogger emang berbeda tetapi jika kecepatan dan keindahan blog berjalan beriringan, bukankah itu sesuatu yang lebih baik??


Update tanggal 17-01-2010

Ada yang ketinggalan tentang cara untuk mempercepat loading blog. Jika blog sobat menggunakan file css atau file javascript untuk widget blog sobat dimana file tersebut ditempatkan dibawah kode ]]></b:skin>, misalnya untuk widget related post, tabview, slider image atau yang lain, usahakan file2 tersebut berada dalam satu alamat web file hosting yang sama. Kenapa?? Karena dengan file hosting yang berbeda, bisa jadi alamat server file hosting tersebut juga berbeda dan jika koneksi salah satunya sedang bermasalah, tentunya juga akan menggangu loading blog kita. So, akan lebih baik jika file2 tersebut berasa dalam 1 alamat.

Disamping itu juga, jika suatu widget mempunyai beberapa kode file, misal slideshow1.js, slideshow2.js, ada baiknya file2 tersebut digabung menjadi 1, misalnya menjadi slideshow.js

Ada penurunan ukuran blog lagi setelah saya menggabungkan file javascript untuk menu accordion jika dibandingkan hasil pada postingan mempercepat loading blog padahal sudah ada tambahan 5 postingan


Update tanggal 23-01-2010

Apabila template blog sobat masih menggunakan
Variable Definitions untuk file css-nya, maka trik ini tidak akan berfungsi. Untuk keterangan lebih lanjut soal Variable Definitions, ada pada postingan ini


Update 28-03-2010

Just a Blog dan Free Blogger Template Ajah sebagai contoh diatas sudah ganti template lagi tetapi masih menggunakan cara diatas


Note :
- Sudah susah2 ngutak-ngutik blog supaya kecepatan blog lebih baik tetapi jika kecepatan akses yang akses blog kita termasuk lemot, jangan salahkan yang punya blog lho.. hehehehehehehe...

- Gambar di atas diambil sebelum postingan ini (ya iyalah.. piye tho kowe ki reng..??)

73 Comments

  1. Infonya mantap. Thanks ya.

  2. wah ... nais inpho .. berlaku untuk wordpress nggak yaaa ...

  3. @ sobat Manusiaonline : Kalo untuk wordpress, setahu saya file css nya sudah seperti tips diatas.

  4. wow..pinter ya sampeyan...tips bagus mas...loading blog ini juga kerasa cepet nih...

  5. @ Sobat Oelil : Terimaksih mas.. Saya juga merasakan perbedaan yang signifikan setelah menggunakan cara diatas..

  6. Ada tapinya ga Mas ?, maksud sy ad pengalaman error ga waktu mraktekin cara mempercepat blog ini.

    Blog sy yg pake blogspot (http://jeri27.blogspot.com), termasuk blog kura-kura. Bagus jg buat diterapin.

  7. @ Sobat Aku Cuma... : Gak ada eror mas.. eror akan muncul apabila koneksi server web tempat upload file css lg eror..

  8. bleh di coba nih terimakasih telah berbagi

  9. Artikel ini saya bookmark dulu ya mas. Mau saya baca di rumah. Nanti saya komentari lagi kalo udah baca tuntas.

  10. Blogku termasuk yang berat loadingnya..
    Tapi karena aku takut otak atik blog (takut malah berantakan) jadi ya aku cuekin aja selama ini...
    Aku gak mahir sih dalam otak atik blog... :(

  11. Bagaimana cara upload ke google site? Pada menu apa ya mas? Mohon dijelaskan secara konkret. Thx sebelumnya.

  12. Info ini yang saya cari cari karena beberapa kali... pakai external css ..saya nggak berhasil dengan hosting di google code. Saya akan coba dengan google site. Oh.. ya... css saya dah dikompress .. apakah masih memungkinkan dihost di google site..? Trims

  13. @ Sobat Lembaga Pelatihan : Masih bisa mas. File css blog saya juga sudah saya kompress.

  14. Blog Sya trmasuk berat loadingnya. Sya jg udh potong css templatenya, trus sya upload ke google site. Tp ktika di coba membuka blog sya malah jd brantakan. Jd sya kembalikan lg sperti smula. Kira knpa y, Apa da yg slah dg css-nya ?

  15. Trmksh atas jawabannya n kunjungannya..
    Brarti template blog sya gak bisa di potong y mas...

  16. Jika tempat hosting file berlainan, jumlah http request perlu diperhitungkan.

    Untuk halaman blog ini, 4 script saya disable, 5 sisanya saya enable. Jadi sebagai pengguna, saya ngalah aja. :) Silakan pasang aksesoris sesuai selera. Edukasi pengguna sepertinya lebih baik dibanding terus-terusan menekan pengelola/desainer blog. :)

    Untuk kompresi CSS dan javascript, apakah semua peramban Web (termasuk versi mobile/small screen) sudah mendukung? :)

    Memisahkan CSS, X/HTML, dan javascript adalah salah satu prinsip standar Web versi W3C.

  17. Mas Dani : Ada yang gak aku paham neh mas. Langsung ke TKP akhhh.. hehehehe..

    Sampai saat ini saya merasa nyaman dengan tampilan blog saya ini. Mungkin terkesan egois.

    Kecuali versi mobile/small screen yang belum saya coba, alhamd blog saya ini bisa tampil seperti yang saya harapkan pada browser2 yang umum dipakai oleh pengguna internet

  18. Banyak tips yang ok2 disini sob.. makasih ya..

  19. Betul sekali sobat dan saya dah lama pake cara ini lumayan juga jadi ringan

  20. Saya juga dah lama pake cara di atas sobat n hasilnya sangat ok

  21. Wah kok tetap ga mudeng juga ya. maklum Newbie. ada ga yang bisa kasih pelajaran lebih jelas lagi. pake gambar mungkin!

  22. mas tapi setelah aku praktekan kok layout tempaltenya kocar-kacir ya? mohon bimbingannya terim

  23. @ Sobat Saung dan Link Tea : Jadi keterusan juga saya dengan cara ini, hehehehe...

    @ Sobat Banjulisa : Inti dari cara tersebut adalah kode css template di upload ke web hosting file seperti Google Site dan kita hanya mengambil link dari file css tersebut dan menaruhnya di blog kita.

    @ Sobat Kabari Bos : Seperti pada update postingan tanggal 23-01-2010 dan saya melihat template yang sobat gunakan, kode css template sobat masih menggunakan Variable Definition. Variable Definition css tersebut harus diterjemaahkan langsung ke kode CSSnya.

  24. Thank's Bro artikelnya sangat bermanfaat

  25. Terima kasih mas infonya, bener kata mas di atas hanya berkutat pada compress file css, penggunaan widget2 yang tidak perlu lebih baik tidak usah dipakai,
    script2 pemutar musik, animasi, flash/multimedia,
    penggunaan image/banner. Justru ini yang dicari, namun saya selalu gagal upload ke site googlenya, gimana ya???

  26. Mkasih makasih makasih, Nice post. Kapan2 gw pasti balik lagi ke sini, sekarang coba di praktekan dulu

  27. saya kurang terlalu paham sob dengan cara itu
    ada langkah lengkapnya tidak?
    salam dari pamekasan madura

  28. wah ... ternyata seperti itu yach gan...

  29. saya udah baca dari awal sampai habis.. cuma kok gak ngerti ya.. heheh..

    mu tanya ajah mas kalau blog punya ku termasuk cepet gak mas.. tolong di cek ya mas. nanti saya dan di jawab disini ajah.. nanti saya dateng lagi ke blognya mas ini terimakasih ..

  30. setelah aku coba caba ternyata kok blm bisa...
    coba terus sampai bisa ni..

  31. Manteb juga tipsnya sob...

  32. Thanks.. gan aku nyoba nih teorinya, minta do'anya mudah2an berhasil...

  33. Mantab nih tips ijin nyobain

  34. makasih tutorialnya gan..
    ada bbrp pertanyaan nih...
    1. gmn cara menaruh link di gugel site?
    2. cara gabungin file.js gmn?

    makasih .. ditunggu jawabannya post commentnya dah ane subcibe lo!! ;)

  35. di coba aghhhh, thanks ya gan

  36. tambahan.. Klo mw enteng pilih template warna putih, kyk punyakuw.. Wk..wk

  37. thanks bos..baru belajar bikin blog nih (http://loviabatikdancraft.blogspot.com/)

    semoga tipsnya berhasil...

  38. Salam kenal mas, bagus artikelnya, thanks ya atas infonya...

  39. Sayangnya template punyaku masih pake variable definitions, jadi ga bisa..

  40. trims buat tips nya gan..

    javascript juga kadang buat lemot. :D

  41. Mudah2n berhasill

  42. mampir ke blog ane....!!!
    http://andravino.blogspot.com/

  43. kalau terlalu lama bukanya pengunjung bisa kabur.

  44. Tapi banyak yang suka tampilan ngejreng paadahal bikin web jadi berat

  45. @Mercedes-Benz Mobil Mewah Terbaik Indonesia dan pulsa elektrik termurah :

    Rajin koment disetiap postingan ane gan. Tarik terus gan.. mumpung DoFollow :D:D

  46. yang lagi mau jual kebun sengon mau bagi info nich tentang bibit jabon dan kayu jabon bagi yang suka bertani

  47. mampir nich dari jaksel..

  48. mantabs gan..sepertinya harus di coba ni..
    nice info..

  49. mantap mas bro........

  50. untuk kompresi gambar tanpa mengurangi kualitasnya tuh sepeerti apa om?

  51. wah bermanfangat iki...perlu dijajal..

  52. lumayan ada sedikit efek nya..

  53. sebenarnya aq pengen bangen
    otak-atik
    aq g faham betul mas....
    apa ada cara yg ringkes lg...?

  54. @Matematika dan aq : Cara yang lebih ringkes bisa dengan kompress CSS. Hilangkan widget/aksesoris blog yang gak perlu, misalnya Whos is Online (berat), live traffic dr feedjit, dll (ini menurutku lho mas..) Hapus widget blog yang berat misalnya Archive, Follower (blog ini malah ada, hehehe...)

  55. Blog utama saya tidak seperti pada blog editan terbaru saya, coba sob cek kecepatan blog ane yang ini http://pendaftaranregistrasionline.blogspot.com/

    hasilnya : http://gtmetrix.com/reports/pendaftaranregistrasionline.blogspot.com/o9NTfKdH

  56. bner, ternyata lbh cepet..

  57. CSS menambah kompleksitas, jadi klo diatur secara bijak loading blog pasti menurun. tutorial yang sangat bagus

  58. Kalu loading lambat pengunjung pada kabur melulu....

  59. Loading blog yang cepat akan lebih disukai oleh pengunjung

  60. Mempercepat loading blog hanya dengan memindahkan penempatan suatu file

  61. kebetulan blogku loadingnya berat, perlu saya coba segera nih moga works

  62. loading blog yg cepat berbanding lurus dengan jumlah traffik dan earning adsense

  63. saya sudah coba dan lumayan berhasil, thanks gan

  64. tutornya singkat, jelas, padat dan yg ptg berhasil

  65. mempercepat loading blog dengan otak atik edit html

  66. iya banyak sekali yang saya lihat blog yang memakai fitur music di dalamnya, mungkin si pemilik blog beranggapan klo ada fitur musik di blognya, ntar pengunjungnya bakalan berlama-lama main di blognya. Iya kalo internet visitornya kenceng, kalau lama? dijamin langsung out sebelum ke load semua tuh blog

  67. info yang menarik gan ,,,,,


  68. artikel yang sangat berguna nambah lagi ilmu saya,, terima kasih untuk artikel yang bermanfaatnya, salam kenal ijin ditunggu kunjungan baliknya.. terima kasih
    Tips SEO Marketing http://tips-seo-marketing.blogspot.com

    Tips SEO Marketing

  69. wah bener - bener ringan sob blognya maknyos nih... ijin coba ah cara diatas hehehe... :)

  70. Manteb juga tipsnya sob...

  71. Nice gan tipsnya. Terimakasih ya

  72. ini cara yang bagus, terima kasih sudah menjelaskan secara detail

  73. Masih bisa diterapin gak gan buat tahun 2016 ini?
    Saya masih ada permasalahan dalam speed soalnya sedikit lagi

Post a Comment

- Blog ini DoFollow tapi dimoderasi.

- Silahkan gunakan Name Author sebagai Keyword karena Link Live tidak diperkenankan.

- Link taruhan & lendir tidak diperkenankan.