While working on a website, I noticed that website was not loading as fast as I would like it to. This prompted me to research more on it and find ways to optimize website’s performance. During this research, I came across many useful resources and tools which were very helpful. Following are some of the resources and tools that I’d like to share:
1. Use caching
Most, if not all, websites use databases to store content. This provides unique opportunity to use caching. Caching turns dynamic content into static content so that database is not queried every time a page loaded. These static copies are refreshed in a timely manner or when there is new content. This also alleviates load on web and database servers. For example, Drupal has a core module to not only enable caching but also compressing CSS and JS files (which we will discuss momentarily).
2. Compress JS and CSS
Compressing JS and CSS files is a great way to reduce web page size. CSS size, that I was working on, was reduced from 413KB to 16KB and JS size was reduced from 65K to 16KB; which also included combining all CSS and JS code in two files. There are many tools which can be used to compress CSS and JS. Two of those websites for compressing CSS and JS are http://www.csscompressor.com and http://jscompress.com.
3. Use external JS and CSS
Browsers tend cache resources like JS and CSS while loading a site. If we use CSS and JS files which are hosted on an external site used by many sites then browsers will only need to cache it for one site and re-use cached files for other sites. This technique is getting to be widely used throughout the internet for the benefit it provides. A word of caution, only use content from a trusted source because if it goes offline then it will affect your site even if your site is working as expected.
4. Use Ajax wherever possible
If your website provides content that can be loaded after page has completed loading then try to use Ajax. This can be used in cases like adding content dynamically when page end is reached (similar to Facebook).
5. CSS Sprites
CSS sprite is the method of combining multiple imagse into one image and then using CSS and background positioning these images can be displayed where needed. Using this method, browser will only need to load one image rather than multiple images and then re-use that image for other parts of the site. A good working example of this can be found at http://www.alistapart.com/articles/sprites.
6. Image format
Selecting proper image format when needed can have hue impact on website performance. One of those situations is using jpeg format for photographc images rather than gif format which is suited for text images.
7. Tools for testing speed
There are many online tools that you can (and should) use to test loading time of your website. These tools can point various resources (images, js or css) which ae dding to load time. Use these results wisely and work on a method to reduce load time of those resources. Some of these tools are http://loadimpact.com, http://tools.pingdom.com, http://www.webpagetest.org and http://gtmetrix.com.
Other than above mentioned tips, there are many ways for you to optimize your pages such as sending compressed pages using PHP (http://php.net/manual/en/function.ob-gzhandler.php). As technology evolves, new methods of optimization will be invented. So, keep an eye open for those advancements. I will do my best to research any new techniques and share with you all.