Test page responsiveness with:
- Firebug (Firefox plugin) tells you how long it takes to load each web component.
- If you decide to use Firebug, then also install page speed for Firebug.
- In Safari you can check show develop menu and enable Safari’s web inspector.
- Similar to Firebug, but also gives some suggestions and gives the total size of the page.
- Yslow (Yahoo’s Firefox plugin)
- Gives a report card on performance.
Optimizine page responsiveness with:
- Server side optimization
- This probably only accounts for ~3% of the delay for most sites, but might be worth doing for the sake of saving system resources, especially on high-traffic sites.
- Decrease browser load time.
Optimize browser load time by Making fewer HTTP requests
Use centralized libraries.
For example, Google AJAX libraries are probably already loaded in your visitors’ cache because they’ve probably already been to a site that made them download these libraries.
Combine many browser include files into one.
- Combine cascading style sheets into “all.css”
- Don’t combine centralized libraries (such as the Google AJAX libraries). It’s counterproductive because you will probably end up de-optimizing browser load time by forcing your visitors to download the same data twice.
Use a Content Distribution Network (CDN) to deliver static content.
This is particularly useful for sites that deliver video or large images. There are many types of static content which can be delivered more efficiently through a Content Distribution Network. Content is distributed by servers which cache static content at the edge which is most highly available (usually geographically the closest) to the “user”.
Here’s an example of how to configure Ruby on Rails to use a CDN as an “asset host”:
Define your CDN as an asset host:
ActionController::Base.asset_host = "cdn.asherbond.com"
Use a helper method:
<% image_tag("large-hi-res.jpg") %>
Ruby on Rails pulls files from the asset host every time you use certain helper methods.
The html result of that image_tag method would look something like this: