Followings are some best techniques to speed up your websites:
1. Include CSS in head – always render CSS file in the head section
2. JavaScript in footer – move JavaScript calls to web page footer.
3. Avoid inline CSS and JavaScript expressions. It increases html size and http
4. Avoid duplicate CSS & javascript code. Keep optimized files.
5. on window.onload
a. Render heavy JavaScript based objects on window.onload event. Like
- JS widgets
- Social media sharing buttons scripts
It will help to improve web page content loading time. Once browser completed rendering of main content then objects written on window onload event will be rendered into background and doesn’t require user to wait for them
7. Minify CSS & Javascript:
– Minification is the practice of removing unnecessary characters from code to reduce its size thereby improving load times.
When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced. Two popular tools for minifying JavaScript code are JSMin, Google Minify and YUI Compressor. The YUI compressor & Google Minify can also minify CSS.
8. Add expires headers on images, css and JavaScript components.
9. Optimize Images
After a designer is done with creating the images for your web page, there are still some things you can try before you FTP those images to your web server.
- You can check the GIFs and see if they are using a palette size corresponding to the number of colors in the image. Using imagemagick it’s easy to check using
identify -verbose image.gif
When you see an image using 4 colors and a 256 color “slots” in the palette, there is room for improvement. - Try converting GIFs to PNGs and see if there is a saving. More often than not, there is. Developers often hesitate to use PNGs due to the limited support in browsers, but this is now a thing of the past. The only real problem is alpha-transparency in true color PNGs, but then again, GIFs are not true color and don’t support variable transparency either. So anything a GIF can do, a palette PNG (PNG8) can do too (except for animations). This simple imagemagick command results in totally safe-to-use PNGs:
convert image.gif image.png
“All we are saying is: Give PiNG a Chance!” - Run pngcrush (or any other PNG optimizer tool) on all your PNGs. Example:
pngcrush image.png -rem alla -reduce -brute result.png - Run jpegtran on all your JPEGs. This tool does lossless JPEG operations such as rotation and can also be used to optimize and remove comments and other useless information (such as EXIF information) from your images.
jpegtran -copy none -optimize -perfect src.jpg dest.jpg - Use http://www.smushit.com/ysmush.it/ tool to optimize Images. It really helps to reduce image file size.
10. Optimize CSS Sprites
Arranging the images in the sprite horizontally as opposed to vertically usually results in a smaller file size.
- Combining similar colors in a sprite helps you keep the color count low, ideally under 256 colors so to fit in a PNG8.
- “Be mobile-friendly” and don’t leave big gaps between the images in a sprite. This doesn’t affect the file size as much but requires less memory for the user agent to decompress the image into a pixel map. 100×100 image is 10 thousand pixels, where 1000×1000 is 1 million pixels
11. Don’t Scale Images in HTML
Don’t use a bigger image than you need just because you can set the width and height in HTML. If you need
<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
then your image (mycat.jpg) should be 100x100px rather than a scaled down 500x500px image.
12. Make favicon.ico Small and Cacheable
The favicon.ico is an image that stays in the root of your server. It’s a necessary evil because even if you don’t care about it the browser will still request it, so it’s better not to respond with a 404 Not Found. Also since it’s on the same server, cookies are sent every time it’s requested. This image also interferes with the download sequence, for example in IE when you request extra components in the onload, the favicon will be downloaded before these extra components.
So to mitigate the drawbacks of having a favicon.ico make sure:
- It’s small, preferably under 1K.
- Set Expires header with what you feel comfortable (since you cannot rename it if you decide to change it). You can probably safely set the Expires header a few months in the future. You can check the last modified date of your current favicon.ico to make an informed decision.
13. Check page load times using “page speed” and “Yslow” add-ons which gives you bright idea about optimization.
Yslow – http://developer.yahoo.com/yslow/
14. Use Caching technique to cache webpages.
My Code Book 