AJAX [Asynchronous JavaScript And XML] arose as a new means to create interactive Web pages. Microsoft rolled out ASP.NET AJAX extensions to help developers cope. But, while AJAX is powerful, it can also be hard to work with. Some tips from online giant Yahoo have value for any would-be AJAX front-end developer.

In a recent blog on "Best Practices for Speeding Up Your Web Site," the Yahoo developer's forum highlighted a number of key elements for fast websites. They highlighted 34-best practices divided into seven categories: 1) content; 2) server; 3) cookies; 4) CSS; 5) JavaScript; 6) images; and 7) mobile.

Top-of-the-list recommendation is making fewer HTTP requests. The authors note that 80% of end-user response time is spent on the front-end downloading page components like images, stylesheets, and scripts. The easiest way to do this is to simplify the page's design and combine files, scripts, and CSS.

Using a content delivery network to disperse the delivery of static content can also make a big difference. They recommend Akamai Technologies, Mirror Image Internet, or Limelight Networks. Yahoo claims to have improved end-user response times by 20% just by moving the static content to these kinds of services. You can also extend the expiration of these static contents far into the future to reduce new requests because the client can store them locally.

Another strategy is to compress components into Gzip files, which are the most popular and effective compression method at this time. This can reduce the size of files by an average of 70%. In rare cases, this can create problems, but this is becoming less of an issue as the use of older browsers drop off.

You can also move stylesheets to the head of the document, to make the page appear to load faster, because the page renders progressively. Older browsers are unable to render content progressively when the stylesheet is at the bottom of the document. Scripts on the other hand should be put down at the bottom because they block parallel downloads.

Other components, like JavaScript and CSS should be stored in external documents rather than the main webpage document. Most browsers cache them better when they are stored externally. When stored in the browser, they get downloaded every time the page is opened.

Another trick is to reduce the number of unique host names in a website document. Most browsers have a built in DNS cache that lasts for about 30-minutes by default. When content needs to be pulled from multiple sites, the browser has to do a DNS lookup for each unique host name. But when all of the content comes from one host, the browser only has to do one lookup for the entire web page.

For more great tips and more in-depth specifics, check out the full blog.

This was first published in June 2008

There are Comments. Add yours.

 
TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy
Sort by: OldestNewest

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.