After changing the template some time ago, a problem loading the blog tends to be longer than the template appear before them. Of course this effect is not good. Yang first effect is the inconvenience visitors. Even more so when there's impatience and then embodied in action "Close wrote aaaaah, i lazy, lo-la bangeeetzz". Secondly, Google is currently performing a penalty for the website / blog that has a load time is too long. As a result, ranking in the search index can be dropped, in other words, SEO is weak.
One thing I did was attempt to compress PNG images with PngGauntlet. The result is rather to reduce the size without reducing image quality. In addition, other steps are performed, one of them: streamlining CSS. Hopefully loadtime now been reduced though not maximal (hopefully eventually ga ya).
Back to the CSS. CSS file is the entire contents of the CSS style rules that exist in the template HTML, XML, and others. All rules are then summarized into one as a file that is read by the browser. Well, in this section, there are many rules no need to remove so that we can not take the space as more and more space the greater the file size.
Then how do I reduce file size CSSnya?
There are a few examples of the following rules:
For example, rules on the header-wrapper,
#header-wrapper {background: url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;
height: 150px;
margin-top: padding: 0px 0px 0px 0px;
text-align: center;
border: 1px solid #000;
}
Contoh di atas adalah penataan CSS secara standar, dimaksudkan agar browser dapat membaca aturan dengan baik dan urut. Namun pada saat ini, semua browser telah memiliki kecepatan dan kemampuan baca yang tinggi (anda sudah tidak pake IE 6 yang kuno itu lagi kan?), sehingga aturan seperti di atas tidak menjadi hal wajib. Aturan di atas memiliki white space (sisa ruang) dan juga spasi. Kita dapat melakukan perampingan pada ruang-ruang tersebut. Contoh:
In the example the following styling:#header-wrapper{background:url(http://www.freeimagehosting.net/uploads/e439563253.jpg) no-repeat #000;height:150px;margin-top:padding:0px 0px 0px 0px;text-align:center;border:1px solid #000;}
{Margin-top: 15px;
Margin-right: 10px;
Margin-bottom: 15px;
Margin-left: 15px; }
Style margin above can be streamlined with CSS short-hand and reduce spacenya:
{Margin:15px 10px;}
Because the upper and lower margins as well as the right and left together, we can streamline the way over, which represents the size of 15px and 10px below the top-right-left represents. If all the same margin, for example 15px, we just write: {margin: 10px}. Note that all the rules and walk starts from the top clockwise: top, right, bottom, and left.
Well this is the easier part. You can use some CSS compression tools and services at a glance you immediately get the result. Please visit:
Or you can search other sites by googling with the keyword "css compression tool".
a. Copy all of the CSS rules template HTML / XML.
b. After logging into the site CSS compression services you select, paste all the code and click 'compress', 'optimize', and ebagainya lains.
c. Wait a few moments and complete results will come out with the last file size after compression and comparison. Even small differences will greatly affect the reduction loadtime page.
d. Download backup template prior to edit HTML pages.
e. Delete section where you copied earlier and enter the result aturanCSS compression to the part.
f. Preview and if there is no problem anymore, save.clue:
The whole CSS code located on the head. More precisely, all CSS code display manager is located between <b:skin> and]]> </ b: skin>.
Select the type / compression options 'standard' or the like on CSS compression tool you use.
Good luck and hopefully useful.
0 komentar:
Post a Comment