One of the factors that makes the visitors do not stay longer in our blog, or even they cancel their visit to our blog, is the loading time when they open our blog. This case becomes the problem to us to increase the traffic. Some cases make our blog too long to access are:
- Slow connection of internet we use
- Too many blog’s accessories such as any banner, shoutbox, Google friend connect widget, recent post widget, recent comment widget, and more.
- Too many big sized images
- The size of Cascading Style Sheet (CSS) is too big, and more.
For point 1, the blog owner can do nothing, but for point 2 to 4, the blog owner can interfere to manage it by choosing the most important widgets or accessories to be installed. For the images, we can choose the right file format (jpg.png.gif) with flexible color optimization.
In this article, I would like to try sharing with you about how to make the CSS of our blog template is not too big in size.
Need to know that one of the things that make the CSS of our blog template too big is the number of lines. So, the more we make new lines, the bigger size the CSS will be. If we see to the tidiness and easiness to edit, the CSS with new lines, will be better, but the for the size, it can be a problem because it can make our blog slow to be accessed.
The example of CSS code in tidy but big in size:
body
{
width:auto;
margin:0;
padding:0;
font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif;
background: #B0BFC2;
color: #000000;
}
The example of CSS code in less tidy but smaller in size:
body
{
width:auto; margin:0; padding:0; font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif;
background: #B0BFC2; color: #000000;
}
The example of CSS code in not tidy and a bit hard to edit, but the smallest in size:
body{width:auto; margin:0; padding:0; font-family: ‘Trebuchet MS’,Verdana, Arial, Helvetica, sans-serif; background: #B0BFC2; color: #000000;}
From the three examples of CSS code writing form, please choose as you like and need. But if you want your blog is not heavy to load, or easy to access, I suggest you to choose the third writing format.
To do compression to the size of CSS code, you can do it manually, but you also can do it by compression tool. One of the websites providing the CSS compressing tool is http://www.cssdrive.com/index.php/main/csscompressor/. If you have not yet known, this CSS code is located between <b:skin> and </b:skin> where you can find it in Edit HTML on your blog.
With this compressor, the compression of CSS code becomes easier. You only need to enter your CSS code in the field available. But before you process the compression, you should backup your CSS code to anticipate an error. Look the image below:
After you enter your CSS code, click on button Compress-it and copy the result to replace the old CSS code. Then Save. It is very easy, isn’t it?
You can see the example of the result of the CSS compression of my blog.
Happy trying
Related posts:
9 Responses
Nice info, but is it will save/secure for our template?
Yes, I have practice it. If you fear an error occurred, backup your CSS code before.
Great job my friend. I never know about it before. Thks god i found this blog with this nice info. Thks a lot bro.
Good luck
nice info KB
i wait next post.thankz
Btw, tips ini bisa buat blog berat gak?
salam kenal
@edylaw: with this tip, your blog can loading faster than before.
my blog how fast or slow loading, kang abeh ?
opo kui,ra mudeng,hehe
Wew… keren nich bahasa inggrisnya,, buat aku gak ngerti..hehehehe
tapi good dech…