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.
.png "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 design.so 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.
➨ 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.
<head>
<meta charset="UTF-8">
<title>Browser Diet</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<!-- JS -->
<script src="script.js"></script>
</body>
<meta charset="UTF-8">
<title>Browser Diet</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" media="all">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
<!-- JS -->
<script src="script.js"></script>
</body>
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 .
<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;
}
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 one.like 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');
@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 too.so these were the most basic html and css tips to increase website performance in all browsers.
0 comments :