Tips & Tricks

Create Webpage Faster Render Browser #part 1

All Internet users want to access the site with maximum rendering speed, this is the task of Web developers how to quickly generate websites that are rendered by the browser.

Speed ??rendering a browser is generally influenced by several factors: HTML DOM structure, CSS, Javascript, Image is loaded, and others. Here are simple tips that really affect the speed of your web page of the course 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 the far right to left.

Better

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

 

compared with

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

 

Because too many rules and hierarchies that must be outlined.

Minimize the occurrence of Round Trip Time (RTT)

Round Trip Time is the time it takes the client (browser) request and the server sends a response. Examples of its use is to avoid using @ import CSS. For example you have a script that includes load second.css first.css

@import url("second.css")

way above will enhance the RTT, why? because the browser can not pass up downloading in parallel scripts from files that are imported. We recommend using the following method:

<link rel="stylesheet" type="text/css" href="firts.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>

 

 

<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>

 

Tags
Show More

Muhammad Azam

Don't think about what can happen in a month. Don't think what can happen on a year. Just focus on the 24 hours in front of you and do what you can to get closer to where you want to be.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close
Close