|
Leverage browser caching: specify expiration dates for css, js and images to be greater than one week. This reduces fetches for new content every time the user reloads the page.
Specify image dimensions. Your images don't have dimensions therefore the browser has to spend time calculating the image dimensions from the image metadata. This takes time. Just specify <img width='' height=''.
If possible combine images into CSS sprites. In your site, all images have to be downloaded each. In most browsers, images from the same domain are not allowed more than 4 each to be downloaded at the same time. Better, use a CDN to allow for parallel downloads.
Minify your CSS. Many IDEs e.g PHP Designer offer minifying features. That reduces the CSS file sizes thus a smaller file to download.
Minify Javascript too.
Serve scaled images as OracleGuy suggested. Instead of having the HTML and CSS scale it for you.
For JS and CSS files which have little lines of code in them , just inline the code instead i.e put it in the main HTML/PHP file. This reduces the need to fetch/download multiple files and instead download one large file.
Last edited by Redcoder; 11-02-2012 at 02:08 PM..
|