Tips dan Trik: Cara Membuat Blog Cepat Loading dan Ringan Di Akses

Cara Membuat Blog Cepat Loading dan Ringan Di Akses

Kadang-kadang, saat ane mengunjungi blog atau website di dunia maya, ada beberapa blog (termasuk blog ane) yang bisa bikin hati panas sampe mo mecahin mouse ato ngebanting modem (pengalaman ane). Padahal, tanpa ane sadari mereka berkata dengan muka sedih,

"Apa salahku...?"

MENGHARUKAN...!

Jadi, siapa yang salah???
Yang bersalah adalah blog yang loadingnya lama banget alias berat. Lambat loding!

Kenapa blog lambat loading nya?
Beberapa penyebabnya adalah terlalu banyak widget di dalam blog, terutama widget iklan. Bisa juga karena template blog yang terlalu banyak memakai corak gambar/image untuk background nya. Dan bisa juga terjadi karena koneksi internet yang lambat!!!

Cara mengatasinya?
Buka situs www.cssdrive.com, pilih menu Tools, kemudian klik sub menu CSS Compressor. Atau buka langsung link ini http://www.cssdrive.com/index.php/main/csscompressor/ . Kemudian agan akan dibawa kehalaman untuk mengompres kode CSS.

Contoh gambar:

Kemudian , ambil kode HTML blog ente pastekan kedalam kotak yang disediakan, klik tombol Compress-it!, tunggu sampai selesai proses.

Selanjutnya, ambil kode HTML yang telah selesai di kompres, pastekan kembali kedalam blog agan.

Terkadang, kode HTML yang di kompres tidak dapat disimpan kembali. Jika terjadi, pandai2lah menyikapinya. Jangan kompres semua kode HTML nya, tapi ambil sebagian kode yang dirasa lebih penting untuk cepat loading, seperti untuk isi postingan saja.

Ane hanya ngambil kode ini saja untuk di kompres pada blog ini:

/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
}

html body .content-outer {
min-width: 0;
max-width: 100%;
width: 100%;
}

a:link {
text-decoration: none;
color: $(link.color);
}

a:visited {
text-decoration: none;
color: $(link.visited.color);
}

a:hover {
text-decoration: underline;
color: $(link.hover.color);
}

.body-fauxcolumn-outer .cap-top {
position: absolute;
z-index: 1;

height: 276px;
width: 100%;

background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
_background-image: none;
}

/* Columns
----------------------------------------------- */
.content-inner {
padding: 0;
}

.header-inner .section {
margin: 0 16px;
}

.tabs-inner .section {
margin: 0 16px;
}

.main-inner {
padding-top: $(date.space);
}

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
padding: 0 5px;
}

*+html body .main-inner .column-center-inner {
margin-top: -$(date.space);
}

#layout .main-inner .column-center-inner {
margin-top: 0;
}

/* Header
----------------------------------------------- */
.header-outer {
margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
color: $(header.text.color);
}

.Header .description {
font: $(description.font);
color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
padding-left: 0;
padding-right: 0;
margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
padding-top: $(header.padding.top);
}

/* Tabs
----------------------------------------------- */
.tabs-outer {
overflow: hidden;
position: relative;
background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
position: absolute;
width: 100%;

border-top: 1px solid $(tabs.border.color);

}

.tabs-cap-bottom {
bottom: 0;
}

.tabs-inner .widget li a {
display: inline-block;

margin: 0;
padding: .6em 1.5em;

font: $(tabs.font);
color: $(tabs.text.color);

border-top: 1px solid $(tabs.border.color);
border-bottom: 1px solid $(tabs.border.color);
border-$startSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li:last-child a {
border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */
h2 {
font: $(widget.title.font);
color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.main-inner .section {
margin: 0 27px;
padding: 0;
}

.main-inner .column-left-outer,
.main-inner .column-right-outer {
margin-top: $(widget.outer.margin.top);
}

#layout .main-inner .column-left-outer,
#layout .main-inner .column-right-outer {
margin-top: 0;
}

.main-inner .column-left-inner,
.main-inner .column-right-inner {
background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat 0 0;

-moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}

#layout .main-inner .column-left-inner,
#layout .main-inner .column-right-inner {
margin-top: 0;
}

.sidebar .widget {
font: $(widget.font);
color: $(widget.text.color);
}

.sidebar .widget a:link {
color: $(widget.link.color);
}

.sidebar .widget a:visited {
color: $(widget.link.visited.color);
}

.sidebar .widget a:hover {
color: $(widget.link.hover.color);
}

.sidebar .widget h2 {
text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget {
background-color: $(widget.background.color);
border: 1px solid $(widget.border.color);
padding: 0 $(widget.padding.side) 15px;
margin: 20px -16px;

-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}

.main-inner .widget h2 {
margin: 0 -$(separator.outdent);
padding: .6em $(separator.outdent) .5em;
border-bottom: 1px solid $(widget.border.bevel.color);
}

.footer-inner .widget h2 {
padding: 0 0 .4em;

border-bottom: 1px solid $(widget.border.bevel.color);
}

.main-inner .widget h2 + div, .footer-inner .widget h2 + div {
border-top: $(title.separator.border.size) solid $(widget.border.color);
padding-top: $(widget.padding.top);
}

.main-inner .widget .widget-content {
margin: 0 -$(separator.outdent);
padding: 7px $(separator.outdent) 0;
}

.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
margin: -$(widget.padding.top) -15px 0;
padding: 0;

list-style: none;
}

.main-inner .widget #ArchiveList {
margin: -$(widget.padding.top) 0 0;
}

.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
padding: .5em 15px;
text-indent: 0;

color: $(widget.alternate.text.color);

border-top: $(list.separator.border.size) solid $(widget.border.color);
border-bottom: 1px solid $(widget.border.bevel.color);
}

.main-inner .widget #ArchiveList ul li {
padding-top: .25em;
padding-bottom: .25em;
}

.main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
border-top: none;
}

.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
border-bottom: none;
}

.post-body {
position: relative;
}

.main-inner .widget .post-body ul {
padding: 0 2.5em;
margin: .5em 0;

list-style: disc;
}

.main-inner .widget .post-body ul li {
padding: 0.25em 0;
margin-bottom: .25em;

color: $(body.text.color);

border: none;
}

.footer-inner .widget ul {
padding: 0;

list-style: none;
}

.widget .zippy {
color: $(widget.alternate.text.color);
}

/* Posts
----------------------------------------------- */
body .main-inner .Blog {
padding: 0;
margin-bottom: 1em;

background-color: transparent;
border: none;

-moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
-goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.main-inner .section:last-child .Blog:last-child {
padding: 0;
margin-bottom: 1em;
}

.main-inner .widget h2.date-header {
margin: 0 -15px 1px;
padding: 0 0 $(date.padding.bottom) 0;

font: $(date.font);
color: $(date.text.color);

background: $(date.background);

border-top: $(date.border.size) solid $(date.border.color);
border-bottom: 1px solid $(widget.border.bevel.color);

-moz-border-radius-topleft: $(date.header.border.radius.top);
-moz-border-radius-topright: $(date.header.border.radius.top);
-webkit-border-top-left-radius: $(date.header.border.radius.top);
-webkit-border-top-right-radius: $(date.header.border.radius.top);
border-top-left-radius: $(date.header.border.radius.top);
border-top-right-radius: $(date.header.border.radius.top);

position: $(date.position);
bottom: 100%;
$(date.side): $(date.header.position);
text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h2.date-header span {
font: $(date.font);
display: block;
padding: .5em 15px;
border-left: $(date.border.size) solid $(date.border.color);
border-right: $(date.border.size) solid $(date.border.color);
}

.date-outer {
position: relative;
margin: $(date.space) 0 20px;
padding: 0 15px;

background-color: $(post.background.color);
border: 1px solid $(post.border.color);

-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);
}

.date-outer:first-child {
margin-top: 0;
}

.date-outer:last-child {
margin-bottom: $(date.last.space.bottom);

-moz-border-radius-bottomleft: $(date.last.border.radius.bottom);
-moz-border-radius-bottomright: $(date.last.border.radius.bottom);
-webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);
-webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);
-goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);
-goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);
border-bottom-left-radius: $(date.last.border.radius.bottom);
border-bottom-right-radius: $(date.last.border.radius.bottom);
}

.date-posts {
margin: 0 -$(separator.outdent);
padding: 0 $(separator.outdent);

clear: both;
}

.post-outer, .inline-ad {
border-top: 1px solid $(post.border.bevel.color);

margin: 0 -$(separator.outdent);
padding: 15px $(separator.outdent);
}

.post-outer {
padding-bottom: 10px;
}

.post-outer:first-child {
padding-top: $(post.first.padding.top);
border-top: none;
}

.post-outer:last-child, .inline-ad:last-child {
border-bottom: none;
}

.post-body {
position: relative;
}

.post-body img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);

-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(image.border.radius);
-webkit-border-radius: $(image.border.radius);
border-radius: $(image.border.radius);
}

h3.post-title, h4 {
font: $(post.title.font);
color: $(post.title.text.color);
}

h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}

h3.post-title a:hover {
color: $(link.hover.color);
text-decoration: underline;
}

.post-header {
margin: 0 0 1em;
}

.post-body {
line-height: 1.4;
}

.post-outer h2 {
color: $(body.text.color);
}

.post-footer {
margin: 1.5em 0 0;
}

#blog-pager {
padding: 15px;
font-size: 120%;

background-color: $(pager.background.color);
border: 1px solid $(widget.border.color);

-moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
-goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

-moz-border-radius: $(widget.border.radius);
-webkit-border-radius: $(widget.border.radius);
-goog-ms-border-radius: $(widget.border.radius);
border-radius: $(widget.border.radius);

-moz-border-radius-topleft: $(pager.border.radius.top);
-moz-border-radius-topright: $(pager.border.radius.top);
-webkit-border-top-left-radius: $(pager.border.radius.top);
-webkit-border-top-right-radius: $(pager.border.radius.top);
-goog-ms-border-top-left-radius: $(pager.border.radius.top);
-goog-ms-border-top-right-radius: $(pager.border.radius.top);
border-top-left-radius: $(pager.border.radius.top);
border-top-right-radius-topright: $(pager.border.radius.top);

margin-top: $(pager.space.top);
}

.blog-feeds, .post-feeds {
margin: 1em 0;
text-align: center;
color: $(feed.text.color);
}

.blog-feeds a, .post-feeds a {
color: $(feed.link.color);
}

.blog-feeds a:visited, .post-feeds a:visited {
color: $(feed.link.visited.color);
}

.blog-feeds a:hover, .post-feeds a:hover {
color: $(feed.link.hover.color);
}

.post-outer .comments {
margin-top: 2em;
}

Fungsinya?

Saat blog di akses, yang pertama terlihat adalah potingan blog, bukan widget atau lainnya, Dan harus diingat, tujuan utama pengunjung mengunjungi blog agan adalah untuk membaca informasi didalamnya. Bukan untuk menjadi member, melihat kategori, arsip blog, apalagi untuk iklan.

Sedikit saran, cukup 1 (satu) postingan pada halaman utama.

Selamat mencoba dan lihat hasilnya...