How to optimize the web page loading?

Problem description

Creating a web site is an art. Web designers use HTML and CSS to design layout and JavaScript to give dynamic behavior of the web page. Well. When we create a big web site, which has more web pages, we need to use multiple CSS styles and calling multiple JavaScript functions to give the dynamic behavior.

Few styles in CSS and few HTML tags have potential drawbacks. For ex, multiple usage of <img> tag with animated gif files will slowdown your webpage render. Multiple usage of ajax call without return statement may not respond your next Ajax call...!

It is better to know the best practices before you start to design your web site. . Researchers say

" if we use 25% optimization techniques, we can improve 62% the performance. " – JavaScript for Web Developer by Nicholas C.Zakas- Pg 385 -

In this document, I have enclosed few tips to optimize the performance of the web site.

server.

Tips #2: Call CSS/JavaScript files ‘style_v1.0.1.css’ ‘style_v1.0.1.js’

Always keep the stylesheet and javascript file in the above format. It is easy to the browser to identify and load these files.

Tips #3: Place css and javascript in external files

Generally, the search engine spiders will look for your page’s header content, title of your page and alternative tags for image tag. They will not look the content of your web page. Therefore, keeping the css and javascript as external file and putting reference inside the <head> </head> tag or <title></title>will be useful for the search engine to crawl and index your site quickly. Moreover, keeping a javascript or css file as external will help Browser to cache for next use and is good for multiple visits.

For ex, Assume that you are creating a web page with a name "Mumbai University" for an educational institute and you are creating a css or javascript file with the name "Model Question.css" or "End_semester_QuestionModel_collection.jss". If anyone searches in the Google with the key term "University questions model" or "Model Question paper", your web page will list in the search result though your web page title is "Mumbai University: !

 

 

 

 

when it is possible

 

.

Ex. If you need to display some text, instead of creating image with that text, add the text suitable formatted with css.

Tips #6: Reduce "<!-- -->", "," ,whitespace and <br />

Adding of even one character increases the size of the page. As bigger is the page size as slower will be the loading time. So to decrease the page size reduce comments and white spacing.

Tips #7: Reduce Cookie Size

It's important to keep the size of cookies as low as possible to minimize the impact on the user's response time.

Tips #8: Put ‘/’ at the end of every href (if its possible)

             Ex. href=http://www.aspnetsource.com/.

 

solid;

Tips #10: Reduce < .. class="class_name" .. >

<div>

<p class="class_name"> ... </p>

<p class="class_name"> ... </p>

<p class="class_name"> ... </p>

</div>

.class_name

{

color: #ff0000;

}

can be optimized to:

<div class="class_name">

<p> ... </p>

<p> ... </p>

<p> ... </p>

</div>

.class_name p

{

color: #ff0000;

}

Tips #11: Avoid ‘animated’ gifs and Flash

Animated Gifs and Flash could have huge size, which will slow down the page loading.

Tips #12: Choose appropriate formats of images

When you choose the image format, please keep the following in your mind.

  1. GIF format of images works best for solid colors and sharp-edged transitions from one color to other.
  2. JPEGs works best for continuous gradations of many colors or grey tones.

 

filename (if external css) in the cache and reuse it.

 

Tips #14: Place javascript at the bottom of the page (if it is possible)

Place javascript at the bottom of page as much possible, because the problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser will not start any other downloads, even on different hostnames.

In some situations, it is not easy to move scripts to the bottom. If, for example, the script uses document. write() to insert part of the page's content, it cannot be moved lower in the page. There might also be scoping issues. In many cases, there are ways to work around these situations.

An alternative suggestion that often comes up is to use deferred scripts. The DEFER attribute indicates that the script does not contain document.write, and is a clue to browsers that they can continue rendering. Unfortunately, Firefox does not support the DEFER attribute. In Internet Explorer, the script may be deferred, but not as much as desired. If a script

can be deferred, it can also be moved to the bottom of the page. That will make your web pages load faster.

Tips #15: Avoid the use of query params in image URLs, etc

Browsers refuse to cache any URL containing a question mark by default.

Tips #16: Use short style names

By using short style names, you can save space, especially when you refer to multiple styles.

Tips #17: Specify the height and width attributes for <img> tag

When specify the height and width attributes for <img>, the browser allows to map the layout of your page while the images are being loaded.

Tips #18: Avoid for-each like functionality in JavaScript array object.

The for-in loop requires the script engine to build a list of all the enumerable properties and check for duplicates prior the start.

If your code inside for loop does not modify the array it iterates pre-compute the length of the array into a variable len inside for loop scope.

Slow:

var sum = 0;

for (var i in arr)

{

sum += arr[i];

}

Faster:

Var sum=0;

for (var i = 0, len = arr.length; i < len; i++)

{

sum += arr[i];

}

Tips #19: Make the favicon.ico Small and Cacheable

If you do not care about it, the browser will still request it, so its better not to respond with a 404 Not Found.

Tips #20: Minimize DOM Access

Accessing DOM elements with JavaScript is slow.

Advantages of optimization techniques

1. The loading of the web page will reduce. It is very useful for the people who use the internet with less bandwidth.

2. Researchers say if we use 25% optimization techniques, we can improve 62% the performance.

你可能感兴趣的:(load)