Performance Tweaking with Client Side Script

Bài đăng này đã không được cập nhật trong 8 năm

Is Performance Really an Issue?

Most people include I myself have never visit same web page more than three time when that web page have a slow respon time. And I will find other web pages which better speed than that. Therefore, When your web site is slow than your competitor, you will lost visitor come to your site. So how can I increase my web performance?

How can I tweek my web performance?

There are serveral methods which help us to improve web performance such as increase physical hardware, use third party(CDN), optimize server side and optimize client side.

Today, I am going to talk about optimize client side which could help us to improve our web performance. I am going to focus on applying HTML, CSS, Javascript, and Image best practices.

1. Tweaking HTML for Performance

Shrink Your HTML File Size with HTML Tidy

When we develop our web site, we use format from some style giude for help us and other developer easy to understand our code. And it has alot of white space which make our html file is big. Therefore, we need HTML Tidy minimize our file size and keep its functionality by just removing unnecessary white space and comments. So browser will take less time to download our file.
Reference JavaScript Files at the End of Your HTML

Normally on common web site development practices, and most tutorials, tell you to reference your external JavaScript files from within the <head> portion of your HTML documents. But you can improve the performance of your pages by referencing these files right at the end of your markup, just before the </body> tag. Because the web browser process render layout is from top to bottom and when found some external link, it will wait and download file until the download completed and than it continue render layout. So it will cause some delay on rendering layout to user.

Reduce the Number of HTTP Requests

When web site have many HTTP Requests so the web server will be more busy on serving service to its client. There are two techniques for reducing number of HTTP request
1. Good Division and Structure: use only external style sheets, scripts, and assets file which needed for that web page.
2. Combine Files: by combine some common file into one, it will decrease the number of HTTP request for download those file.
Don’t Load Every Asset from Your Home Page

When you load all assets for your web site the size of your file will increase and download time also increase. So you should call only assets file which needed for your page.
Reduce Domain Name Lookups

Normally, we always put our CSS and Javascript file into third party(CDN). But when your web site have reference to many CDN, it will cause your client host to run DNS look up for those that mean it will take time to do that. For best suggestion you should use only 2 CDN for your web page.
Split Components Across Domains

You should divide your assets among the available domain names in this way, you are able to introduce a potentially large performance boost to your pages. Don’t forget the suggested limit of two to four separate domains, to avoid the DNS lookup performance burden.
Other methods:
- Avoid Linking to Redirects
- Reduce the Number of HTML Elements
- Don’t Link to Nonexistent Files
- Reduce the Size of HTTP Cookies

2. Tweaking Your Style Sheets for Performance

Shrink Your CSS File Size with CSS Tidy

Same as HTML Tidy. here link to CSS Tidy

Use the CSS Sprite Technique

These is the technique which help you to reduce HTTP requests. With CSS Sprite you can put all asset images into one file.
Speed Up Table Layouts

When the web browser read your code on <table>. The browser then needs to calculate the widths of each table cell, which it attempts to do intelligently based on the width of the contents of each cell in the table. This means the browser usually needs to read in the data for the entire table before it is able to render it correctly. Therefore, the CSS table-layout: fixed style rule reduces this constant calculation and reevaluation work the browser must do to render your HTML tables.

  table {
   table-layout: fixed;
  }

Use Shorthand Values

By using shorthand values for your CSS it could save your CSS file size and improving the download time, without sacrificing maintainability or scalability. Here, we’ll look at some shorthand for:

colors: Ex: use #000 instead of #000000 and Black
margins and padding: Ex: use margin: 10px 5px 3px 2px; instead of maigin-top: 10px; margin-right: 5px; margin-bottom: 3px; margin-left:2px;
borders: these styles can be combined into a single style rule for customizing your borders. Ex:


  /* applies 1px wide, solid black border to each side of the element */
  border: 1px solid #000;
  /* applies same border style to the top side of the element only */
  border-top: 1px solid #000;
  /* sets top border width to 2px, left and right borders to 3px and bottom to 1px */
  border-width: 2px 3px 1px;
  /* sets the top and bottom borders black, and left and right borders red (#f00) */
  border-color: #000 #f00;

backgrounds: these styles can be combined into a single style rule for customizing your background. Ex:

  /*
   Use the following format for shorthand background properties.
  */
  background: color image repeat attachment position;
  /*
  The image image1.jpg should appear from at the top-left position (0, 0) of the element,
  it should not tile in any direction and it should scroll along with the page as normal. Underneath the image should appear a red background, filling the dimensions of the element.
 */
 p {
  background: #f00 url(image1.jpg) no-repeat scroll 0 0;
 }

fonts: these styles can be combined into a single style rule for customizing your font. Ex:

  /*
Use the following format for shorthand font styles. Observe the location of
the slash (/) character, between the font size and line height attributes. Also
note that there can be multiple font family values, separated by commas, to
allow for backup typefaces in the case that the preferred face is not available.
font: style variant weight size/line-height family
*/
p {
font: italic small-caps bold 1.2em/1.8em Arial, Helvetica, sans-serif;
}

lists: these styles can be combined into a single style rule for customizing your list. Ex:

  li {
/*
Use the following format for shorthand list styles.
list-style: type position image;
*/
list-style: circle inside url(mybullet.gif);
}

Other methods:
- Don’t Use the @import Command
- Avoid CSS Filters and Expressions in IE
- Avoid Inefficient CSS Selectors

3. Tweaking Your JavaScript for Performance

Shrink Your JavaScript File Using Dojo ShrinkSafe

Dojo ShrinkSafe has function same as HTML Tidy and CSS Tidy. It use to compress javascript file. Here link to Dojo ShrinkSafe

Access JavaScript Libraries Through CDNs

Using CDNs can reduces the distance your data needs to travel over the Internet. They have the added benefit of being available in the end user’s browser cache if that user has visited another site referencing the same library from the same URL.
Boost Core JavaScript Performance
A memoizer is a function that doubles as a storage mechanism. It saves the results of previous executions of that function routine so that future calls to the function with identical inputs will return the output from the list of stored results, instead of computing the result again. This improves the performance of functions that are called multiple times throughout your code. You can read more from this article Faster JavaScript Memoization For Improved Application Performance
Use Efficient String Concatenation: you can use array for concatenating strings, which does not suffer the same performance penalty. Here we can use

var myArray = [];
var visitor = 'Rathanak Jame';
myArray.push('Welcome, ');
myArray.push (visitor);
myArray.push(', to Viblo.');
myArray.join('');

instead of

var visitor = 'Rathanak Jame';
var outputString = "Welcome, " + visitor + ", to Viblo.";

Use Regular Expressions: Regular expressions provide a useful, powerful, and efficient way to perform string manipulation and pattern matching—faster than any other method. You can read more on my post about Regular Expression template for web development
Reduce Activity in Loops: you can read more in here

Not good

      for (i = 0; i < arr.length; i++) {

Good

      l = arr.length;
      for (i = 0; i < l; i++) {

Other methods:
- Timing
- Improve Ajax Performance
- Improve DOM Performance

4. Tweaking Your Images for Performance

For this point please read more detail on my previous post about Image Responsive

Conclusion

In this article has provided lots of idea to help improve the speed of your web page, through HTML markup, your style sheets, your images, and your JavaScript code.

Remember that your end users won’t notice good performance; they will only feel the pain of poor performance. Don’t give them any reason to complain. Take advantage of the wealth of information in this chapter, and give your site visitors the experience they deserve.

For more technique please read these book: Odell Den. "Pro JavaScriptTM RIA Techniques: Best Practices, Performance, and Presentation". 2009