Slow website means losing users, so every website you have should be as responsive as possible. Usually optimize performance requires professionals to achieve it but there are some best practices related to contents of your website which can optimize the website. Website owner can also use tools like yslow or pagespeed to gauge the performance of their website and use some of the tips in this article. We are discussing below the best practices which can be used to get maximum performance from the website.
In the previous article, we discussed about optimize performance of socialengine using caching system. In this article, we would discuss about optimize performance of any website by tunning server settings and following best practices for static contents. Using these tips can improve the speed of a website by 30%-70%. Though we did this improvements for socialengine but these tips can be used for any custom built website built on on any technologies like JEE, Microsoft .NET, PHP or Ruby on Rails. We are sharing these tips so that anyone can optimize performance of their own website. We are more focusing on the checklist approach. You can get the details in references section at the end of this article.
Note: We had followed this approach while optimizing a socialengine 4 website for one of our client.
Improve Performance by enabling HTTP compression
Using deflate module
or using gzip module
Add expires headers
Minify and combine css
Use Google’a AJAX Libraries API or Yahoo’s ComboHandler
Yahoo’s Combo Handler and Google’s AJAX Libraries API both serve content from their CDNs and potentially increase the chance that your visitors will already have a file in their browser cache. Neither service serves custom content that you provide. You may wish to use these services to serve popular libraries and Minify to serve your code.
Optimize image size
Use the resized image that fix the content of the page rather than resizing it in the image tag e.g. if you wanted to display 60×60 image while original image size is 480×480 then some developer tries to make change in the image tag by defining the dimensions.Using smaller image at this place would allow faster loading of the image as smaller image size would be much lesser than the original image size. Optimize the image by reducing the unnecessary bytes from the image. There are many tools like smushit or GIMP which can you used to optimize the images.
Use css image sprite
CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. With this style, images are combined into one larger image at defined X and Y coordinates. There are many tools like SpriteMe and Sprite Creator which can help you to create sprite of the images and generate css for them.
Serve static content from a cookieless domain
Static content, such as images, JS and CSS files, don’t need to be accompanied by cookies, as there is no user interaction with these resources. You can decrease request latency by serving static resources from a domain that doesn’t serve cookies. This technique is especially useful for pages referencing large volumes of rarely cached static content, such as frequently changing image thumbnails, or infrequently accessed image archives. We recommend this technique for any page that serves more than 5 static resources. You can use put your contents in separate server(may be subdomain) or file storage service like Amazon S3.
Use alternative web server
There are plenty more good alternatives for the Apache web server, so if you have a more specialized need, take a look at them, maybe you’ll find something that suits you better. Many of these alternative web servers are free to use. Nearly all offer a lightweight, highly scalable server solution. Some even outperform Apache. The 5 web servers we will be looking at as real alternatives to Apache are:
Please feel free to send your suggestions or any other technique which can improve website speed.