Skip to main content

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.

Popular posts from this blog

Jangan pernah takut dibenci orang lain

Perkataan,perbuatan,penampilan,tingkah laku kita,dll entah itu secara sadar ato tidak sadar bisa membuat orang lain benci,marah,tidak suka atau apalah itu yg sejenis, haiah..kaya homo ae..upss... Cara ngungkapinnya juga bisa secara langsung, "Aku benci kamu.." atau mungkin cukup dalam hati aja,kaya judul lagu???

Keadaan tersebut sadar atau tidak kita sadari sering kali terjadi disekitar kita,baik itu ma temen sendiri atau mungkin ma orang lain yg gak kita kenal sekalipun. Jika hal tersebut terjadi pada diri sobat?? Gimana dan bagaimana perasaan sobat?? Stay cool kah?? marah2 kah?? Balik benci ma orang itu kah?? atau kah..kah..yg lain?? halah..opooo..kuii..

Jangan pernah takut dibenci orang lain

Setiap orang punya karakter sendiri2 yang mencerminkan dirinya,baik itu dari segi penampilan,sikap,tingkah laku dll. Kasarannya, INILAH AKU.. Urusan orang suka atau gak suka ma apa yg ada dalam diri kita,emang aku pikirin,haiah..

Cara orang menilai orang lain beda2. Kalopun ada orang yang…

Axorys : Responsive Blogger Template - 8 Pilihan Style

Beberapa hari lalu, rilis Axorys Blogger template tapi itu adalah Versi Gratis. Dan sekarang, saya merilis Versi Premium. Secara umum, fiturnya sama dengan yang versi gratis tapi saya tambahkan beberapa fitur baru.

Fitur Axorys Blogger Template Versi Premium8 predefined styles : Axorys Blogger templtae premium versi tersedia dalam 8 varian styles. Anda bisa pilih yang sesuai.

List of styles :
Big Header
Big Header Small ThumbnailBig Header Big ThumbnailBig Header Masonry StyleBig Header Default Style (support jump-link)Shrink Header
Shrink Header Small ThumbnailShrink Header Big ThumbnailShrink Header Masonry StyleShrink Header Default Style (support jump-link)Fully responsive Blogger template : Semua styles Axorys Blogger template sudah responsive.
Template Designer : hampir semua variable mendukung Template Designer. Anda bisa mengganti gambar latar, warna latar, warna link, tipe font, ukuran font, warna font, dll dengan mudah.
Featured posts : Penambahan featured posts untuk postingan yan…

Jaman Sekolah Dulu vs TimNas Senior

Melihat TimNas Senior sekarang, jadi teringat ketika jaman masih sekolah dulu. Cukup sederhana tapi ada benarnya dan saia merasakan itu. Semua itu gak lepas dari gimana cara mengajar guru, memberikan pemahaman akan pelajaran kepada anak muridnya.

Ketika kita suka dan senang dengan cara mengajar guru, suka dengan cara memberi pemahaman pelajaran, kita akan lebih semangat dalam belajar. Dan untuk pelajaran yang susahpun apabila cara guru menerangkan dan memberi pemahamanan secara tepat, pelajaran itu gak kan terasa sulit dan susah.


Kekalahan 4-0 dari Qatar tadi malam membuat peluang TimNas untuk melangkah ke babak berikutnya kualifikasi Piala Dunia Brasil 2014 tertutup. Mungkin hal ini sudah diprediksi sebelumnya tapi yang jadi masalah selama saia mengikuti perkembangan dari pertandingan pertama, semangat dan jiwa petarung pemain TimNas tidak ada !! Ada apa ini?? Siapakah yang patut disalahkan?? Pemain?? Dalam hal ini adalah pelatih. Kenapa??

Seperti yang sudah saya tulis diatas, sebuah a…