2013 SEO Tips


Best Blogger Tips


Expert Tips To increase traffic


100 Online Tools


Increase your google index rate


Improve alexa rank


51 SEO Tools


Essential PHP Scripts

7 HTML and CSS Tips To Improve Website Performance In All Browsers

Want to make your website like twitter .So do what they say to improve website in all browsers .Here you will get 7 html and css tips to improve performance.

A Complete Guide To Improve Website Performance In All Browsers
A Complete Guide To Improve Website Performance In All Browsers

Do you ever think how twitter and other popular websites performs well in all browsers ? what are their secret ? well only they know their secret but till yesterday but today they are sharing their method how they did it.below you will find all resources where they share secret of such popular and responsive below are best 7 html and css tips to improve website or blog performance in all browsers.

Here are some of their recommendation in short and below you will all detailed information.

➨ Do not use inline and embedded code because they increase HTTP requests and slows down your webpage.

➨ Put your css styles in top and JavaScript at bottom the correct way to insert them because if you will use css at bottom first the page will be downloaded without css and hence makes site ugly if not loaded properly.

<meta charset="UTF-8">
<title>Browser Diet</title>

<!-- CSS -->
<link rel="stylesheet" href="style.css" media="all">
<p>Lorem ipsum dolor sit amet.</p>

<!-- JS -->
<script src="script.js"></script>

this is the correct way to put your css and JavaScript code in your webpage.

➨ Always minify your HTML code and add comments in your code to make it more readable. Or you can use automated tools to minify your html code.because it removes extra spaces covered in the form of white-spaces. you also know how to compress your css code .

➨ Use async in your javascript attributes like this

<script async src="example.js"></script>

➨ you can also minify your css code by using comments and indentation.
.center {
width: 960px;
margin: 0 auto;

/* --- Structure --- */

.intro {
margin: 100px;
position: relative;

now we can change this code to less size css code.

.center{width:960px;margin:0 auto}.intro{margin:100px;position:relative}

➨ Always combine multiple css files in one place.

<link rel="stylesheet" href="structure.css" media="all">
<link rel="stylesheet" href="banner.css" media="all">
<link rel="stylesheet" href="layout.css" media="all">
<link rel="stylesheet" href="component.css" media="all">
<link rel="stylesheet" href="plugin.css" media="all">

As you can see here will be 5 HTTP request so to reduce this request and to fasten the page loading speed combine all of the css files and make them in this.

<link rel="stylesheet" href="main.css" media="all">
And the result is less number of HTTP requests and faster loading page.

➨ Always use <link> at the place of @import

<link rel="stylesheet" href="style.css">
@import url('style.css');

As you can see above are two methods of adding css stylesheet to your webpage now prefer one then the second one because when use second method browser can not download the asset in parallel and can stop other assets these were the most basic html and css tips to increase website performance in all browsers.