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
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network. Most of the modern browser supports data compression for html, CSS and JavaScript. Downloading of compressed data shall reduce the downloading time and allows your website to open faster. You can easily enable the compression on apache web server by editing config file or changing .htaccess at the root of the application.
Using deflate module
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
or using gzip module
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Add expires headers
Adding expires headers do not affect the site load time for a first time visitor but you will be surprised how much the page load time decreases (faster page load) for subsequent page views/return visits from that visitor. Expires header specifies a time far enough in the future so that browsers won’t try to re-fetch images, CSS, javascript etc files that haven’t changed (this reduces the number of HTTP requests) and hence the performance improvement on subsequent page views.
To add expires header to the image, CSS, javascript files add the following to your .htaccess file
#Expire Header <FilesMatch ".(ico|jpg|jpeg|png|gif|js|css|swf)"> ExpiresDefault "access plus 2 hours" or # Expire images header ExpiresActive On ExpiresDefault A0 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/ico A2592000 ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000
Minify and combine javascripts
Removing extra spaces, line break, indentation, comments from the files can reduce size of the file and enabling faster downloading. There are tools like JSMin or the YUI Compressor which can be used to minify the javascripts. Combining multiple javascripts in one file shall allow better compression and lesser http threads from the browser thus other resource can be downloaded in parallel.
Minify and combine css
Minifying CSS has the same benefits as those for minifying JS: reducing network latency, enhancing compression, and faster browser loading and execution.Several tools are freely available to minify JavaScript, including the YUI Compressor and cssmin.js
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:
- Nginx
- LiteSpeed
- Lighttpd
- Hiawatha
- Cherokee
Please feel free to send your suggestions or any other technique which can improve website speed.
It is possible to do performance tuning by yourself, or getting developers to do this. However, in our experience, the community owners are really more focused on making their community an engaging experience via functionality or graphics. Similarly, most developers can write PHP code, but very few have the experience of various tools for improving performance. One of the solutions we thought was to bake this optimization right into the hosting, so we have teamed up with Acenet hosting to provide you hosting for SocialEngine and Phpfox with built-in PHP, web server and database performance enhancements. Custom optimization may be required when your community grows huge, but that is different for everyone and we will continue to provide it as a separate service.
