Trik Mempercepat Loading Blogger

Apakah agan pengguna blogger..? Cool..! Berapa lama waktu yang dibutuhkan untuk mengakses blog agan..?  Bila membutuhkan waktu lebih dari 10 detik maka agan wajib memperbaiki template blognya.
Untuk melakukan pengetesan speed, silahkan gunakan GTmetrix.com karena disana agan akan mendapatkan laporan terperinci penyebab loading menjadi lambat.
Berikut beberapa trik yang bisa kita pakai agar loading blog bisa lebih cepat.


Trik Mempercepat Loading Blogger

1. Lakukan Backup Template

Tidak perduli sehebat apa agan dalam membuat template, agan wajib melakukan yang satu ini, karena hasil backup ini nanti pasti akan kita butuhkan saat terjadi error pada template

Backup Template Blogger


2. Buang semua Widget yang tidak dibutuhkan pembaca

Terkadang banyak sekali kita temui blog yang mempunyai banyak hiasan atau statistik didalamnya, dan itu biasanya akan membuat blog kita sangat lambat, karena blog harus memproses suatu code yang terkadang bukan dari blog itu sendiri, sedangkan pembaca tidak terlalu memperhatikan hal tersebut, mereka hanya membutuhkan informasi yang ada pada blog kita.

3. Buang code Javascript Inject Blogger ( Custom Template..! )

Blogger selalu menginject / memasukkan secara otomatis code javascript pada bagian  body, tepatnya  pada bagian bawah sebelum </body>, code tersebut tidak berpengaruh sama sekali pada tampilan blog, tapi sangat memberatkan server, karena banyaknya code yang mereka tanam pada bagian bawah body.
Untuk membuangnya silahkan rubah code </body>  dengan code berikut :

&lt;!--
</body>
--&gt;
&lt;/body&gt;


Dengan adanya code diatas, maka sekarang code yang mereka inject akan menjadi sekedar "comment code" yang tidak perlu diproses oleh browser

4. Buang CSS Default Blogger Template

Trik ini ane khususkan bagi agan yang memakai template selain milik blogger, jadi berhati hatilah dalam menggunakan trik berikut, dan pastikan agan sudah membackup template agan.
Kalau point 3 adalah javascript sekarang style atau CSS , pada blogger kita selalu dan wajib memakai code <b:skin>...........</b:skin> sebagai pengganti code <style id='page-skin-1' type='text/css'>...........</style>, ini sebenarnya adalah code yang blogger butuhkan untuk memasukkan code css blogger, oleh karena itu blogger selalu memakai id='page-skin-1' pada bagian style, saat ID tersebut terload, maka blogger akan menginject 2 css secara otomatis :
  • https://www.blogger.com/static/v1/widgets/859616579-widget_css_bundle.css
  • https://www.blogger.com/dyn-css/authorization.css
Walaupun kita tau blogger menginject bagian <b:skin>, kita tidak bisa langsung membuangnya begitu saja, jadi sekali lagi kita akan membuatnya menjadi sebuah comment code, yang tidak perlu diproses oleh browser.   

WARNING..!!  Trik yang satu ini bisa berpengaruh pada tampilan template agan.
Seperti halnya pada trik yang pertama, kita lakukan hal yang serupa pada bagian <b:skin> dengan merubahnya menjadi sekedar comment code, dan browser tidak perlu melakukan proses httprequest.

1. Silahkan rubah code <b:skin> dengan <style>
2. Rubah penutup code </b:skin> dengan </style>
3. Masukkan code berikut sebagai pengganti code <b:skin>

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- <b:skin></b:skin>


5. Berikan Ukuran Yang Sesuai Gambar

Jangan pernah merubah ukuran gambar menggunakan CSS, buatlah gambar dengan ukuran sesuai yang dibutuhkan, dan masukkan ukuran gambar tersebut kedalam code image contoh :

<img alt='webjalanan' title='www.webjalanan.com' height='100' width='100' src='/image_ukuran_100x100.jpg'/>

Dengan memberikan code ukuran lengkap ( width dan height ) maka image tersebut dapat langsung di proses oleh browser, tanpa perlu menunggu pengecekan ulang pada css file, jadinya si browser tidak perlu mondar mandir hanya karena ukuran image ^_^

6. Minimize Code ( Optioonal )

Minimize code adalah hal yang lumayan melelahkan, karena kita akan membuang semua sepasi antara code, untuk css kita bisa menggunakan CSS minifier : http://cssminifier.com, dan untuk javascript kita bisa memakai Javascript compressor : http://javascriptcompressor.com

Untuk code yang lain kita harus merubahnya secara manual, karena banyak code blogger yang membutuhkan penanganan secara khusus, dan ingat untuk selalu membuat backup baru sebelum memperkecil atau minimize code, karena kita sendiri akan kesulitan saat membaca code bila sudah di minimize.


Dengan 6 point diatas kita sudah memperkecil ukuran template, sayangnya pada blogger kita tidak bisa merubah cache header yang juga mempunyai pengaruh besar pada waktu loading website.
Tidak apalah, setidaknya kita sudah mengurangi 80% dari loader yang standard. ^_^





Related Artikel Trik Mempercepat Loading Blogger

10 comments:

  1. Anonymous9/15/2015

    Terima kasih gan informasi yang bermanfaat,
    blognya cepet banget,boleh minta templatenya gak...hehehe

    ReplyDelete
    Replies
    1. Sama-sama gan semoga bermanfaat,
      template ane jelek gan, malu mau bagi-bagi ^_^

      Delete
  2. Anonymous9/23/2015

    kalau ukuran gambar postingan blogger
    kita perkecil dari postingan itu, kira2 pengaruh gak gan

    ReplyDelete
    Replies
    1. Untuk blogger agan bisa merubah ukurannya dengan mengedit link gambarnya gan

      Contoh kalau ingin meng-croping ukuran gambar menjadi 300x300
      tinggal ganti code s1600 menjadi s300-c
      http://............./s300-c/....namagambar.jpg

      Contoh Live Image :
      Original : http://4.bp.blogspot.com/-YCBNrniNc9c/VfCbGCj2heI/AAAAAAAAAFw/JpmZMaPjz6c/s1600/PageSpeedReport-Webjalanan.jpg

      Hasil croping : http://4.bp.blogspot.com/-YCBNrniNc9c/VfCbGCj2heI/AAAAAAAAAFw/JpmZMaPjz6c/s300-c/PageSpeedReport-Webjalanan.jpg

      Delete
  3. Kalau css https://www.blogger.com/static/v1/widgets/859616579-widget_css_bundle.css di hapus bahaya ngga tuh, soalnya di The W3C CSS Validation Service https://www.blogger.com/static/v1/widgets/859616579-widget_css_bundle.css banyak errornya

    ReplyDelete
    Replies
    1. Tergantung dari templatenya gan,
      kalau agan memakai banyak widget bawaan blogger,
      maka bisa dipastikan akan banyak widget bawaan tersebut yang tampilannya bakalan berbeda,
      bahkan tidak berfungsi pada sebagian widget,

      pada blog webjalanan ini, ane buang code CSS bawaan blogger tersebut,
      jadi setiap ane mau pasang widget, ane ambil sebagian code css yang ane perlukan saja.


      :: Catatan ::
      agan bisa melihat dan memilah milah isi CSS dengan membuka link itu gan :
      https://www.blogger.com/static/v1/widgets/859616579-widget_css_bundle.css

      biar bisa terbaca aganbeautify dulu codenya disini :
      http://www.cleancss.com/css-beautify

      Bila sudah tinggal agan ambil sebagian CSS sesuai dengan Widget yang tidak berjalan karena pengaruh CSS tadi.

      Atau kalau lagi urgent, agan copy aja langsung dan masukkan dalam
      <style>
      /* paste disini gan */
      </style>

      Delete
  4. <style type="text/css">
    <!--

    Kalau kode yang itu di taruh di bagian mana ya gan?

    ReplyDelete
    Replies
    1. itu untuk pengganti code <b:skin>sampai </b:skin> gan
      copy lengkap code diatas bisa agan letakkan sebelum code </head>

      Delete