Wasimasif's Blog

Recently I have been working on performance optimization of a site. There are several guidelines available from Yahoo! and Google. These include techniques from optimization of CSS code to use of CDN, yes the list includes a lot.
What are the top techniques which can benefit any site the most? In this post I will list top 3 techniques and describe them briefly.

The top techniques are

1. Reduce HTTP Requests
2. Use browser cache properly
3. Compress your content with gzip

Reduce HTTP Requests

Reducing the components (images, JS, CSS) on a page reduces the HTTP requests. Popular ways to reduce the components include, using image sprites, image maps, combine multiple CSS and JS files into one.

If you see this page test you will notice that only 11 HTTP requests are made to fully load home page of an eCommerce site, which is very few as compared to similar sites.

One important thing you also need to check if Keep-Alive is on. For most servers its on by default. This allows persistence connections for HTTP requests. Other wise new connection is made for each request.

Use browser cache properly

A first-time visit to a page may require several HTTP requests to load all the components. Using browser cache can avoid unnecessary HTTP requests on next page. Browser cache should be used for all components including images, js, CSS, and Flash etc. This not only reduces number of HTTP requests it also saves a lot of bandwidth for visitor and server.

See the repeat view test result which shows only one request is made rest of components are served from local browser cache.

Cache is utilized by setting proper expiry headers for components. Read my other post Using browser cache image expiry for performance which explains how to set these headers.

Compress your content with Gzip

Compressing HTML, CSS and JS etc reduces response times by reducing the size of data sent. Gzip is the most used and effective compression available. Gzip normally reduces the response size by about 70%. All major browsers support Gzip compression. This saves a lot of bandwidth on client and server end at very small CPU cost. In my post Compress your web pages I have explained gzip in bit more detail.

To make your website successful its important that its availability is 100%. Site downtime can cause serious damage in SEO and drop in sale.
What can cause down time?
Well there can be a lot of reasons for a site being down. This includes database server issues, web server server issues and DNS issues etc.

How can you monitor it?
For database related issues you can write a piece of code which can send email whenever its unable to connect database.

For server side or DNS related issues you can use some free websites which monitor your sites and send email or SMS alters. There are many paid services available which provide advance monitoring. They can monitor site from multiple geo locations and send alters.

Few free sites providing basic monitoring are

• http://www.freesitestatus.com/en/
• http://www.montastic.com
• http://www.serviceuptime.com

Recently had to setup local domains for my php projects. Normally I use http://localhost/project_directory urls for normal project, but for a new project I had to setup few local domains. For existing projects I still need localhost (127.0.0.1) available along local domains like project.localhost.com. Setting up local domains and virtual hosts is easy and I found it worth sharing.

I am using Windows Vista Business with WampServer Version 2.0 installed. This method should also work for standalone apache installation.

First we need to add host entry in windows host. To do this, open file C:\Windows\System32\drivers\etc\hosts in some text editor, by using Open With menu from right click.

Note that C: represent your drive where windows is installed, in most cases it will be C: but it can be different.

You will see content smiler to

# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host

127.0.0.1 localhost
::1 localhost

Now add this line
127.0.0.1 project.localhost.com
at the end. Here you can add any custom domain like projectname.local etc.

The line added tells windows to resolve to local IP when ever this domain name is requested by browser etc. Be sure not to add any live existing domains as they will be resolved to localhost instead of live host.

Now we need to add virtual host entry in Apache server so we can server our project files. For this apache config file which in this case is C:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf. Open the file with text editor and find following lines

# Virtual hosts
# Include conf/extra/httpd-vhosts.conf

The second line tells conf file to include another configuration file which contains virtual host configurations. The line is commented by default so we have to enable it.
Now remove # sign from start of the second line and save file, so the line will look Include conf/extra/httpd-vhosts.conf.
Now open file C:\wamp\bin\apache\Apache2.2.11\conf\extra\httpd-vhosts.conf to add virtual host entries.
Add following lines to the file.

<VirtualHost 127.0.0.1>
DocumentRoot "C:/websites/myproject/public/"
ServerName project.localhost.com
ServerAlias project.localhost.com
</VirtualHost>

You may also need to remove any example virtual hosts.

After this restart your apache and test the url http://project.localhost.com/ in browser.

You all must be aware of browser cookies. Browser cookies allows site to store small amount of data on your PC.
These can be used to store visitor preferences etc. These cookies can be viewed and cleared easily.

There is another feature called “Flash Cookies” or in technical terms called “Local Shared Object”. This allows sites to store cookie like data on visitor PC. These cookies are created through adobe flash player. With the default settings, flash player does ask user’s permission to store this data.

Many sites like google, youtube etc use flash cookies. So next time you want to clear cookies, don’t forget to clear these. You can view and delete these cookies by visiting this page http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager07.html

To improve response time of web page to visitor, it is highly recommended that web page should be compressed with gzip. Compression reduces response times by reducing the size of the HTTP response. YSlow and PageSpeed rate this as very important aspect of performance. To see how gzip compression works see my other post about gzip compression.

According to Yahoo, Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Good thing about gzip is that almost 90% of browsers support this compression.

CRE Loaded already have built in system to enable gzip compression for pages. This feature is disabled by default but can be enabled easily. To enable gzip go to admin area and click on “Configuration” > “GZip Compression” menu. Here you can enable gzip compression by editing “Enable GZip Compression” configuration.

To test gzip compression you can use this tool http://www.gidnetwork.com/tools/gzip-test.php. You can also use YSlow to confirm gzip.

Like every other eCommerce solution CRE Loaded provides a password protected admin area to manage all aspects of the site. Any unauthorized access to admin area can cause damage to site’s important data, any leakage of customer’s payment details can cause more issues and damage to site.

CRE Loaded team has done good job to make this area secure by use of encrypted passwords, https access etc. Recent 6.4.1 release includes password hardening task to further enhance security. Still there is a lot, which you can do to protect admin area.

In this post I will list few guidelines to enhance admin area protection. The post also includes basic methods to apply these guidelines.

So here are the guidelines.

1. Don’t use default http://mycresite.com/admin/ structure
2. Use password protected directories
3. Restrict access to specific IPs only
4. Use secure user names and passwords

1. Don’t use default http://mycresite.com/admin/ structure

In default installation admin area is installed in /admin/ folder and accessible from http://mycresite.com/admin/ URL. As this default location is publicly known hackers can easy launch attempts to break in.

To avoid this issue it is strongly recommended that you don’t install and use admin are on default location. With little effort you can change this location by

• Rename admin folder: One simple way is to rename admin folder to some different name which is not easy to guess. For example 234admin80907. You will need to update this folder path in {new_admin_folder}/includes/configure.php. You will need to update following configurations
  1. DIR_WS_HTTP_ADMIN
  2. DIR_WS_HTTPS_ADMIN
  3. DIR_FS_ADMIN
• Install on different domain: Admin area is completely independent from rest of the site so it can be installed on completely different domain or sub domain. This way makes its location more sure and non guessable.
  To do this move /admin/ folder (or whatever you renamed it to) on separate location (e.g public_html/admin/), and point your separate domain or sub domain to this folder. Using a sub domain is easier than complete new domain as many sub domains are allowed under same hosting.
  Please use non guessable domain or sub domain to make is more secure.
  You will need to update these changes in includes/configure.php of this folder. You will need to change following configurations
  • HTTP_SERVER
  • HTTPS_ADMIN_SERVER
  • DIR_WS_HTTP_ADMIN
  • DIR_WS_HTTPS_ADMIN
  • DIR_FS_ADMIN

  Note: For sub domain you may need high level SSL certificate which can work on main and sub domain without error.

2. Use password protected directories

Always protect your admin folder with additional password. Most of the hosting packages include feature to make some directories password protected from there control panel. This user name and password will be asked by browser even before the login page is displayed so this can be a good weapon to protect your admin area.

3. Restrict access to specific IPs only

You can also restrict access to admin area from specific IPs only easily. By this admin area will only be accessible from specified IPs only. For this you will need to edit .htaccess file under admin/ folder.
To do this download admin/.htaccess file and open it with some text editor. Put following code in .htaccess file

Order Deny,Allow
Deny from all
Allow from 100.100.100.100, 100.100.100.101


and uploaded.

Here 100.100.100.100 is example ips put your list of comma separated IPs. The code tells server to block all requests unless they are from specified IPs.

4. Use secure user names and passwords

No matter if it is password of admin area or password protected directories, use user names and passwords which are not easily guessable. Do not very user names like admin, administrator etc. A good password should mix alphabets, numbers, special characters etc to avoid easy brute force attacks.

Recently found a bug in payment module “Credit Card UK with CVC”. I was using this module with CRE Loaded pro 6.4.0.

This payment module sends middle digits of CC and CVV code in an email to admin. Due to the bug this CVV code value was missing.

To fix the issue open file includes/modules/payment/cc_uk.php in editor and find line

$this->cc_issue = (isset($_POST['cc_issue'])) ? $_POST['cc_issue'] : '';

after this line add line

$this->cc_ccv = (isset($_POST['cc_ccv'])) ? $_POST['cc_ccv'] : '';

and you are done. Save the file and test.

Please be sure to backup your file before editing.

Visitor click recording is very effective way of knowing behavior of visitors. Its results can help improve site navigation and flow.

In this post I will discuss two methods to record clicks. The two methods are

• Event Tracking of Google Analytics
• Third party click recording

Event Tracking of Google Analytics

Google Analytics (GA) provides a handy to record clicks and events. As most of the sites already have GA installed it becomes easy to use its event tracking.

Syntax for the recording function is

._trackEvent(category, action, optional_label, optional_value)

• category (required) The name you supply for the group of objects you want to track.
• action (required) A string that is uniquely paired with each category, and commonly used to define the type of user interaction for the web object.
• label (optional) An optional string to provide additional dimensions to the event data.
• value (optional) An integer that you can use to provide numerical data about the user event.

For example if you need to record clicks on a link following will be the code.

<a onclick="pageTracker._trackEvent('Page', 'Click', 'My Link')" href="#">My Link</a>

Here pageTracker is GA’s main object that is used to track page views etc. If you are not using standard GA JavaScript code this might have different name.

The code to work properly you ensure that pageTracker is available other wise the code will generate error. Also it is good idea to write a custom function to use _trackEvent. For example you can create a JavaScript function and call this function in your links. In this function you can write code to call _trackEvent.

The function can look like this

<script>
function myTracking(category, action, label, value){

if(typeof(pageTracker)!='undefined'){
pageTracker._trackEvent(category, action, label,1);
}
}
</script>

The above function will not generate error if pageTracker is not initialized properly.
Official documentation can be found at http://code.google.com/apis/analytics/docs/tracking/eventTrackerGuide.html