A lot of effort goes into minimizing the time needed to render a page on the server; however, it is easy to overlook optimization on the client-side. The total time needed to display a page can be divided into two intervals: server processing time and the time between when the first byte is received by a user's browser until the page has finished loading. Even if you're only serving static files, the total time to load a page can still be significant. This entry discusses several techniques developers can use to improve client-side load times.
When a browser requests a page, the HTML of that page usually contains additional server requests. These can be images, JavaScript includes, CSS includes, and embeded content like Flash or Java. Typically, browsers have around 4-8 request connections open at a time. It's not uncommon for a page to request many more items than this so taking steps to lower this number can provide a benefit. One technique for doing this is using "sprites". A sprite is a single include that contains a set of multiple images. By using a sprite, any images that are part of the design can be requested in a single request and then accessed via CSS.
Another way to reduce loading is to optimize images. Various utilities such as OptiPNG and PNGCrush can significantly reduce image sizes without sacrificing quality. smushit.com does this as well.
If the target audience is spread throughout the world, it may make sense to use a CDN (Content Distribution Network). A CDN is a set of severs placed in different geographical locations to reduce the distance between a user and the data.
Of course, if the browser already has the data requested by a page then there is no need to reload it. Browsers do this automatically through caching but it is possible to use expires headers to direct them to cache certain data longer than they normally would. To do this, you set the expiration date to a time far in the future. But, doing this means you must use a different filename if you want to change data that has been cached. Askapache.com goes over this in more detail and also provides some other suggestions.
Finally, it is important to be able to measure a page's performance before and after it has been optimized. One way to do this is by using the Firefox plugin, Firebug, which shows how long each request takes. YSlow, a plugin for Firebug, provides grades across 13 criteria. In general, the law of diminishing returns applies to the optimization process. Sometimes practicality makes certain enhancements unrealistic.
CDN can help you if you have limited number of objects on each web page. But now there are so lot of HTTP requests, that simple CDN won't speed up your website significantly. Your need more complex solution.
For PHP website you can use Web Optimizer - http://code.google.com/p/web-optimizator/ - which incorporates all possible actions for clientside optimization and can make your website faster than ligtning (and probably w/o any CDN).
A few things to add:
- The idea of a CDN is a good approach especially if the CDN uses different domain names. This is because using more than one domain name to route markup, images, CSS etc makes it possible for browsers (at least the older ones) to open multiple streams and this be able to use the available bandwidth better. Otherwise, there is the risk of the browser calling items (images, CSS etc) serially and thus loading items slowly.
- Markup optimization: CMS websites (e.g Drupal) with multiple modules often end up calling very many CSS and Javascript files. Being that a limited number of threads can be opened in parallel and to one domain name, this can severely slow down the loading of pages.
Front-end optimization often gets sidelined and more focus is given to DB and App server performance and all other fancy server-side performance tuning, forgetting that after all that tuning, the content has to be sent to the client browser.
Post new comment