Mengatur Kode CSS Dan JavaScript Untuk Mempercepat Loading Blog

mempercepat loading blog dengan cara mengatur tampilan kode css dan kode javascriptBanyak cara untuk mempercepat loading blog. Pada postingan saya sebelumnya tentang mempercepat loading blog dengan menggunakan eksternal link kode CSS, sekarang bagaimana mempercepat loading blog dengan mengatur tampilan kode CSS dan JavaScript. Sebelumnya, saya berharap sobat membaca postingan jenis dan fungsi kode untuk mengatur tampilan widget blog karena berkaitan dengan postingan ini.

Secara umum, susunan kode template blog seperti berikut :

<b:skin><![CDATA[/*

CSS code

]]></b:skin>

</head>

Kode HTML

</body>
</html>



Untuk mempercantik blog, kemudian ditambahkan widget baru. Saya contohkan misalnya sobat ingin menambahkan widget Feature Content image slideshow.

Biasanya kode Feature Content tersebut terdiri dari 2 kode yaitu kode CSS dan kode JavaScript.
Untuk kode CSS, penempatan kodenya diatas kode

]]></b:skin>

dan untuk kode JavaScript biasanya ditempatkan di bawah kode

]]></b:skin> alias diatas kode

</head>


Struktur kode HTML untuk Feature Content biasanya seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='feature-content'>
<b:section class='feature' id='feature' preferred='yes'>
<b:widget id='HTML30' locked='false' title='Feature Content='HTML'/>
</b:section>
</div>
</b:if>

* Perhatikan yang berwarna merah
* Saya menggunakan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> sebagai contoh salah satu kode untuk menampilkan widget blog hanya pada main post dan label post saja. Beberapa widget Feature Content yang saya temui di template2 modifikasi menggunakan kode <b:if cond='data:blog.pageType == &quot;index&quot;'>. Untuk jenis dan fungsi kode yang lain bisa diliat pada postingan saya yang ini


Widget Feature Content sendiri biasanya hanya muncul pada main post dan label post saja dan akan hilang pada single post tetapi jika sobat melihat dari View Page Source (pada single post) kode CSS dan JavaScript Feature Content tersebut masih akan terlihat dan ini akan dianggap sebagai kode yang tetap ada didalam template blog. Bukankah itu akan mempengaruhi berat dan loading blog?? Terlebih lagi jika kode CSS dan JavaScript (terutama kode JavaScript) Feature Content tersebut besar.

Untuk mengakalinya, sobat bisa menggunakan trik sederhana ini.

1. Kode CSS.
Seperti yang saya tulis diatas, kode CSS Feature Content biasanya diletakkan diatas kode

]]></b:skin>

Sekarang, pindahkan kode tersebut menjadi dibawah kode

]]></b:skin>

dengan susunan kode seperti berikut :

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode CSS Feature Content disini

</b:if>
</style>

2. Kode JavaScript
Untuk kode JavaScript, tambahkan kode yang berwarna merah pada kode JavaScript tersebut sehingga susunannya akan seperti berikut :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='URL-JAVASCRIPT-CODE' type='text/javascript'/>
</b:if>

Save.

Sekarang sobat baca salah satu postingan sobat (single post) dan liat dari View Page Source. Kode CSS dan JavaScript untuk Feature Content tidak akan terbaca dan itu berarti mengurangi berat blog yang tentunya juga berpengaruh pada loading blog sobat.


Note :
- Perhatikan yang berwarna merah.
- Penggunaan kode <b:if cond='data:blog.pageType != &quot;item&quot;'> antara kode CSS, kode JavaScript dan untuk kode HTML harus sama.


Cara ini juga bisa digunakan untuk kode Auto Readmore. Auto Readmore biasanya juga hanya tampil pada main post dan label post saja. Jadi, tinggal tambahkan kode yang berwarna merah dibawah ini sehingga menjadi menjadi

<b:if cond='data:blog.pageType != &quot;item&quot;'>

Kode Auto Readmore

</b:if>


Untuk widget yang lain pun juga bisa. Yang penting dalam penggunaan cara ini adalah tau jenis dan fungsi kode untuk mengatur tampilan widget blog. Disamping itu juga, ada kode ato widget blog yang tadinya muncul tapi kemudian menghilang atau dari menghilang, kemudian baru muncul.

Semoga bermanfaat.

29 Comments

  1. thenks bos tutorialnya, BTW ane kopi nich artikel dan beberapa nya, sori bos bukannya nyuri tapi tuk tambah2 pengetahuan, salam kenadl dari

    ''Mamas''

  2. @Sobat Mamas : Silahkan mas.. Salam kenal juga..

  3. Hehe, logikanya kalau jawaScript ditaroh di awal, maka load jawaScript akan didahulukan. nah masalahnya jika lagi lemot koneksinya hal ini menyebabkan loading konten jadi terlambat.. hehe padahal yang paling diinginkan pengunjung adalah konten
    CMIIW

  4. Yupp... Bener mas. Itu cuma penomeran aja kok, hehehe... Dari beberapa postingan blog, baiknya kode Javascript diatas kode CSS. Ada juga ngepost kalo kode Javascript baiknya di bagian bawah alias diatas kode </body> tetapi cara ini tidak semua kode Javascript bisa diload..

  5. mohon dukungannya ya...

    di ahkhir kontes ini

    blog saya juga dofollow silahkan kunjungi

  6. ijin saya simpen artikel ini, penting banget dan perlu praktek soalnya.

    makasih!!

    salam
    Andrik Sugianto

  7. Jiahaha.. ini yg di cari2 sobat.. makasih ya tak bookmark dulu deh

  8. Walau agak puyeng juga tapi mesti dicoba nih

  9. nice info gan ..

    thanks ya :)

    oh iya gan ,, ada email ga ??

    ane mau tawarin sesuatu nih :)

    eail ke ane ya :)

  10. keren......

  11. @ All : Semoga bermanfaat

  12. bermanfaat banget artikelnya mas...
    salam kenal yach

  13. Wah bagus nih sob...

    Salam kenal n sukses selalu...


    Anda sudah saya follow...follow balik ya??hehe...

  14. makasih untuk artikelnya.. ane lebih sering pakai WP jadi semua lebih mudah ketimbang blogger.. :)

  15. Bagus infonya..Terima kasih gan.

  16. tipsnya menarik ijin dicopy tuk dipelajari. Salam

  17. #Sobat Situs Bebas dan Kerja Keras : Semoga bermanfaat..
    #Sobat : Warna Tulisan : Dengan senang hati mas..

  18. Thanks a lot for providing such a useful information.

  19. nice post kawan...

  20. Thanx, saya pernah blogwalking ke blognya senior kita2, katanya ada CSS JS yang dipotong dan di titipkan di Googlepage, tapi penjelasannya sangat buruk...

    Wah DoFollow juga? punya ku juga DoFollow, Ditunggu kunjungnnya...

  21. wih keren... pertama kali ane liat blog yang ngebahas sedetail ini, good job maju terus

  22. blog walking,,,,look seo magic n lowongan kerja semua bidang>>>>>>visit my blog

  23. maju7 terus gan

  24. Wah, penjelasannya simple tapi berat..
    Mantap ni infony..

  25. Ntu Menjadikan Blog Kita Tidak Valid XHTML Di W3
    Ada Cara Lain Gak ?

  26. loading blog yang cepat akan disukai pengunjung

  27. Saya simpan dulu mas artikelnya buat saya praktekan diblog saya. Biar blog saya bisa kenceng.....

  28. nice info gan ..

    thanks ya :)

Post a Comment

- Blog ini DoFollow tapi dimoderasi.

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

- Link taruhan & lendir tidak diperkenankan.