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

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…

Ini Konser Iwan Fals dan Slank !!

Sebuah konser musik tidak afdol apabila tidak ada penontonnya. Segala macam cara kadang dilakukan hanya untuk melihat artisnya beraksi dipanggung. Entah itu dengan manjat, nunggu jebolan, ato jika di pinggiran tempat konser ada pohon tinggi, rela naek itu pohon walopun anginnya gak lagi sepoi-sepoi.

Ada yang menarik jika saya mengamati konser2 musik, terutama konser musik diluar (outdoor) entah itu dari berita di tipi, atau lihat langsung. Bukan pada artisnya yang lagi manggung. Bukan pada tampilan panggungnya. Bukan pada tata panggungnya. Bukan pula pada tata suaranya tetapi pada penonton yang melihat konser tersebut.

Hampir sebagian besar konser musik outdoor, bendera OI (Orang Indonesia - Iwan Fals) dan Slank berkibar mewarnai konser padahal konser yang berlangsung bukan konser Iwan Fals ataupun konser Slank !! Gak peduli itu konser dangdut, konsernya Padi, Dewa, atau band lain atau konser kompilasi band2. Bendera OI dan Slank selalu berkibar ditengah2 para penonton.

Sebuah pertanyaa…

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…