Web optimization
- by hmloo
1. CSS Optimization Organize your CSS code Good CSS organization helps with future maintainability of the site, it helps you and your team member understand the CSS more quickly and jump to specific styles. Structure CSS code For small project, you can break your CSS code in separate blocks according to the structure of the page or page content. for example you can break your CSS document according the content of your web page(e.g. Header, Main Content, Footer) Structure CSS file For large project, you may feel having too much CSS code in one place, so it's the best to structure your CSS into more CSS files, and use a master style sheet to import these style sheets. this solution can not only organize style structure, but also reduce server request./*--------------Master style sheet--------------*/
@import "Reset.css";
@import "Structure.css";
@import "Typography.css";
@import "Forms.css";
Create index for your CSS
Another important thing is to create index at the beginning of your CSS file, index can help you quickly understand the whole CSS structure./*----------------------------------------
1. Header
2. Navigation
3. Main Content
4. Sidebar
5. Footer
------------------------------------------*/
Writing efficient CSS selectors
keep in mind that browsers match CSS selectors from right to left and the order of efficiency for selectors
1. id (#myid) 2. class (.myclass) 3. tag (div, h1, p) 4. adjacent sibling (h1 + p) 5. child (ul > li) 6. descendent (li a) 7. universal (*) 8. attribute (a[rel="external"]) 9. pseudo-class and pseudo element (a:hover, li:first)
the rightmost selector is called "key selector", so when you write your CSS code, you should choose more efficient key selector. Here are some best practice:
Don't tag-qualify
Never do this:div#myid
div.myclass
.myclass#myid
IDs are unique, classes are more unique than a tag so they don't need a tag. Doing so makes the selector less efficient.
Avoid overqualifying selectors
for example#nav a
is more efficient thanul#nav li a
Don't repeat declarationExample:
body {font-size:12px;}h1 {font-size:12px;font-weight:bold;}
since h1 is already inherited from body, so you don't need to repeate atrribute.
Using 0 instead of 0px
Always using #selector { margin: 0; } There’s no need to include the px after 0, removing all those superfluous px can reduce the size of your CSS file.
Group declaration Example: h1
{
font-size: 16pt;
}
h1
{
color: #fff;
}
h1
{
font-family: Arial, sans-serif;
}
it’s much better to combine them:h1
{
font-size: 16pt;
color: #fff;
font-family: Arial, sans-serif;
}
Group selectorsExample: h1
{
color: #fff;
font-family: Arial, sans-serif;
}
h2
{
color: #fff;
font-family: Arial, sans-serif;
}
it would be much better if setup as:h1, h2
{
color: #fff;
font-family: Arial, sans-serif;
}
Group attributeExample: h1
{
color: #fff;
font-family: Arial, sans-serif;
}
h2
{
color: #fff;
font-family: Arial, sans-serif;
font-size: 16pt;
}
you can set different rules for specific elements after setting a rule for a grouph1, h2
{
color: #fff;
font-family: Arial, sans-serif;
}
h2
{
font-size: 16pt;
}
Using Shorthand PropertiesExample: #selector
{
margin-top: 8px;
margin-right: 4px;
margin-bottom: 8px;
margin-left: 4px;
}Better: #selector
{
margin: 8px 4px 8px 4px;
}Best: #selector
{
margin: 8px 4px;
}
a good diagram illustrated how shorthand declarations are interpreted depending on how many values are specified for margin and padding property.
instead of using:#selector
{
background-image: url(”logo.png”);
background-position: top left;
background-repeat: no-repeat;
}
is used:#selector
{
background: url(logo.png) no-repeat top left;
}
2. Image Optimization
Image Optimizer
Image Optimizer is a free Visual Studio2010 extension that optimizes PNG, GIF and JPG file sizes without quality loss. It uses SmushIt and PunyPNG for the optimization. Just right click on any folder or images in Solution Explorer and choose optimize images, then it will automatically optimize all PNG, GIF and JPEG files in that folder.
CSS Image Sprites
CSS Image Sprites are a way to combine a collection of images to a single image, then use CSS background-position property to shift the visible area to show the required image, many images can take a long time to load and generates multiple server requests, so Image Sprite can reduce the number of server requests and improve site performance. You can use many online tools to generate your image sprite and CSS, and you can also try the Sprite and Image Optimization framework released by The ASP.NET team.
