Make Webpages Rendered Faster by Browser

Browser render
All Internet users want to access the site with maximum rendering speed, it is the task of Web developers to make websites that are fast rendered by the browser.

Browser rendering Speed generally influenced by several factors such as: HTML DOM structure, CSS, Javascript, Image and others. Here are simple tips that really affect the speed of your webpage that consists of a series of scripts which is then translated into a visual form in the browser client.

HTML DOM
Use a good structure in accordance with the hierarchy and functions.

CSS
Browser describes each structural element (DOM Tree) and then the engine will match every browser CSS style rules that match that has been declared. In the process, the CSS engine evaluates each rule from right to left.

body{color:#333;....}
a.Title{ font-size:2.0em;... }

Much better

body{color:red;....}
div ul li a.Title{ font-size:2.0em;... }

than this, because too many rules and hierarchies that must be outlined.

Minimize the occurrence of Round Trip Time (RTT)
Round Trip Time is the time takes by client (browser) sends request and the server sends a response. Examples of its use is to avoid using @ import CSS.

For example if you have a script that includes second.css

@import url("second.css")

The code above will enhance the RTT, why? because the browser can not parallel downloads scripts from files that are imported. use the following method instead:

<link rel="stylesheet" type="text/css" href="first.css" />
<link rel="stylesheet" type="text/css" href="second.css" />

Notice the order of style and script in the following cases:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
</head>

render Result

Than this one:

<head>
<link rel="stylesheet" type="text/css" href="stylesheet1.css" />
<link rel="stylesheet" type="text/css" href="stylesheet2.css" />
<link rel="stylesheet" type="text/css" href="stylesheet3.css" />
<script type="text/javascript" src="scriptfile1.js" />
<script type="text/javascript" src="scriptfile2.js" />
</head>

render result2

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>