This week we had a discussion in office about how to reduce the page loading time. YSlow is the best tool to check page performance. Current YSlow uses 22 rules. These points are sorted according to the importance. In those 22 rules we decided to start with first 6 points. YSlow documentation describes very well about 6 points. Lets take a look at these 6 points.
Minimize HTTP requests
- Use simple UI design.
- Combine all css files into single file.
- Use css sprites
Use a Content Delivery Network
To implementing geographically dispersed content, no need to redesign the application architecture. As a first step start serving your static files from CDN servers.
Add an Expires or a Cache-Control Header
Browsers will store the information in the cache. For browser to store data in the cache server has to send Cache-Control Header. Keep the expiration time very far like after 10 years, so that browser will keep on loading data from the cache without sending request to server. So that loading time of the page will reduce. But first time when a page is loaded it has to send request to server to get data, from the second time onwards the browser will load from cache.
Browsers can understand the gzip, deflate format of content. So server can send compressed data using gzip or deflate. By compressing the data we can reduce the size of data upto 70%. To compress the data we no need to do any special things in our code. Just specify Content-Encoding: gzip in your server configuration. Apache 1.3 uses mod_gzip, Apache 2.x uses mod_deflate. You can specify this for nginx or lighthttp servers also like this.
Put Stylesheets at the Top
We need to keep style sheets in the header, because the page can render progressively. When the page is loading progressively, user can see the information without waiting for long time. User did not get pissed off.
Put Scripts at the Bottom