Tips Membuat Design Blog Cepat

Discussion in 'Blogger' started by Virlyz82, Oct 24, 2014.

  1. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    [​IMG]

    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 async="async" pada Jquery

    Untuk format jquery dalam template biasanya seperti ini :

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

    Code:
    <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

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

    Demikian sedikit tips blogger semoga bermanfaat

    SOURCE
     
    Hafizh likes this.
  2. Hafizh

    Hafizh Member

    Joined:
    Jul 24, 2014
    Messages:
    172
    Likes Received:
    6
    Trophy Points:
    18
    Google+:
  3. Tedy Maryadi

    Tedy Maryadi Member

    Joined:
    Oct 22, 2014
    Messages:
    73
    Likes Received:
    5
    Trophy Points:
    8
    malah puyeng *bingung*,, mas, coba buka http://www.tanyatedy.com .

    melalui koneksi internet mas, gimana kira-kira lambat atau gimana? mohon bantuannya :D ,, maklum newbie.. itu template dari luar dan mungkin saya terlalu banyak menggunakan css dan jquery dari luar juga... mas, ditunggu loh ;)
     
  4. asli3rut

    asli3rut Member

    Joined:
    Sep 6, 2014
    Messages:
    641
    Likes Received:
    44
    Trophy Points:
    28
    Betul sekali mas, saya sendiri tidak suka yang ribet dalam urusan tampilan, biar disukai google, guatlah yang sangat sederhana dengan navigasi yang bagus, lihatlah tampilan layanan-layanan google, seperti itulah yang saya suka. oh yah kadang perintah "async" tidak diterima oleh template ya, jadi harus di parse dulu
     
  5. abditea

    abditea Member

    Joined:
    Sep 24, 2014
    Messages:
    503
    Likes Received:
    23
    Trophy Points:
    18
    Berguna banget nih tipsnya, coba ane praktekin ah*bagus*
     
  6. AhmadWafa

    AhmadWafa Member

    Joined:
    Oct 2, 2013
    Messages:
    867
    Likes Received:
    16
    Trophy Points:
    18
    Google+:
    Wah mantab ini perlu di bookmark dan di pelajari :D . . . ane coba praktekin ye masgan.
     
  7. debays

    debays Active Member

    Joined:
    Jul 18, 2014
    Messages:
    1,409
    Likes Received:
    58
    Trophy Points:
    48
    thanks infonya, udah dapat speed lumayan kira2 0,5 detik.
     
  8. babolonly

    babolonly Member

    Joined:
    Feb 9, 2013
    Messages:
    541
    Likes Received:
    34
    Trophy Points:
    28
    Google+:
    saya juga gak mudeng yang beginian..lebih mudah lagi beli aja template premium. banyak yang sudah fast loading..dari segi Onpage pun sangat Josss
     
  9. BEIM

    BEIM Active Member

    Joined:
    Mar 17, 2014
    Messages:
    1,358
    Likes Received:
    36
    Trophy Points:
    48
    biasanya sih yang gampang cari aja script template yg udah jadi, banyk kok yg share :D
     
  10. Yusuf.S

    Yusuf.S Well-Known Member

    Joined:
    May 4, 2014
    Messages:
    1,156
    Likes Received:
    100
    Trophy Points:
    63
    Google+:
    Akan saya coba cara no. 4 saya baru tahu soalnya :D
     
  11. ninafaira

    ninafaira Member

    Joined:
    Sep 14, 2014
    Messages:
    168
    Likes Received:
    6
    Trophy Points:
    18
  12. didi

    didi New Member

    Joined:
    Jul 21, 2014
    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    1
  13. exabytes-id

    exabytes-id Member

    Joined:
    Oct 3, 2013
    Messages:
    866
    Likes Received:
    35
    Trophy Points:
    28
    yang pasti yang paling utama dalam membuat template adalah gunakan javascrpit seperlunya jika makin sedikit javascipt yang di gunkan akan semakin baik dan akan cepat loadnya.
     
  14. ziuma

    ziuma Well-Known Member

    Joined:
    May 23, 2014
    Messages:
    1,563
    Likes Received:
    240
    Trophy Points:
    63
    maaf den @Tedy Maryadi
    perasaan saya dilarang naruh link aktif di kotak komentar. naruhnya di signature


    ...ada link aktifnya...maaf
     
  15. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    skedar berbagi pengalaman saya aja mas bro
     
  16. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Silakan smpyan baca di komentar blog saya ...trims
     
  17. andixa90

    andixa90 New Member

    Joined:
    Oct 26, 2014
    Messages:
    6
    Likes Received:
    0
    Trophy Points:
    1
    Google+:
    Om mastah,.. terkait async itu,..
    sepertinya akan membuat tampilan blog sedikit berantakan,..
    krn dlu pernah nyoba di blog saya beberapa widget jd tidak berfungsi dengan baik,..
    CMIIW
     
  18. azreal

    azreal Member

    Joined:
    Oct 17, 2014
    Messages:
    39
    Likes Received:
    2
    Trophy Points:
    8
    tips yang sangat bermanfaat.. blog harus ringan.. supaya loading bisa cepat and engak bikin bete
     
  19. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Memang ada beberapa template ga fix dengan metode ini
     
  20. Virlyz82

    Virlyz82 Member

    Joined:
    Jan 23, 2014
    Messages:
    67
    Likes Received:
    2
    Trophy Points:
    8
    Google+:
    Kasian pengunjung klu harus nunggu lama2
     
Loading...

Share This Page