10 Best Practices to speed up your website

Website loading speed has become the most important part of the website development from last few years. In other words the target is not only developing website but to code effectively in order to improve the response time of the website. As professional web design company has recommended a few essentials of how to optimize for website loading speed as mentioned below:

1. Make lower Http Requests

As website is composed of web elements or components like images, style sheets, scripts, Flash etc… If we tend to reduce these elements on a website it reduces the number of http requests to the server and thus in turns it increases the loading speed of the website at client’s browser.

Consider the following ways to reduce the http Requests to the web server.

Index	Way	Description
1.	Website Design	Make a simple web design which is the best way to reduce your http requests. Simple web design reduces the number of web elements on a web page & as a response user always get small html rendered page.
2.	Combined Files	Using lower amount of script files like JavaScript or CSS is the good way to increase your website loading speed. For example make a single CSS external file of the website, Compiling a code into a single file can be a challenging work but it improves the response time.
3.	CSS Sprites	CSS sprites are the best way to reduce your website images requests. First combine your images into a single background image and use CSS properties like CSS-background-image and background-position properties to display the desired image segment.

2. Reduce DNS Look ups

DNS stands for Domain Name System. It is the concept used for the URL resolution that is resolve domain name into IP address and vice versa. As to remember IP addresses for every website is a difficult task so DNS work exactly same like checking phone numbers for a person name in the telephone directory.

When a user enters a website address (URL) into the address bar, the DNS resolver takes 20 to 120 milliseconds to resolve the hostname into the IP address. Browser cannot download anything from the hostname until the DNS resolving process is completed.

To speed up the process of DNS Resolution, DNS lookups (Forward lookups, Reverse Lookups) are cached for the better performance. Internet caching Server is the option which can be installed either locally (LAN) or installed by the Internet Service Provider.

Following are ways that internet caching can be done to speed up the DNS Resolution process.

Index	Way	Description
1.	Caching on the Individuals Computer	DNS information is stored on every individual’s computer via DNS Client Service (Microsoft Windows) into the Operating System cache.
2.	Browsers Cache	Many of the browsers allow for storing cache, As long as the cached data is remain inside the browser there is no need to consult Window Cache.
3.	Microsoft Internet Explorer Browser Cache	IE Caches DNS lookup for 30 mins (By default). The settings can be modified by the “DNSCacheTimeout” in the Registry Settings
4.	Mozilla Firefox Browser	Firefox caches DNS lookups for 1 mins. The settings can be changed via “network.dnsCacheExpiration” and can be enhanced up to 1 hour.

When the Browser & the Computer DNS cache are empty, the DNS lookups will be equal to the unique host names in a web page.

And the number of sources that contain host names are as mentioned below:

• Page Urls
• Style sheets
• Flash Objects
• Script Files
• Images

So always try to reduce the number of host names which in turns reduces the number of DNS lookups and as a result it improves the response time of the website.

3. Avoid Redirects

URL Redirection is the technique used for making the web page available under many URL’s. Moreover URL redirection is accomplished using 301 & 302 status code. Consider the following example of http headers in a 301 Response:

HTTP/1.1 301 Moved Permanently

Location: http://example1.com/newuri

Content-Type: text/html

URL redirection can be implemented for the following reasons:

• Due to user typing mistakes for example if the domain is example.com, but user mistakenly type for “exampel.com” or “exemple.com” so he is redirected to the correct domain.
• If the website has changed from old to the new domain address, here we can use URL redirection concept.
• Search engines usually have the record of old URL address and it might be possible that in few years your URL address has changed, but when user comes from Search engine, he get the old URL, in this situation URL redirection is used.

Inspite of above mentioned reasons, it is not recommended to use URL Redirect because it slowdowns the user’s experience.

4. Reduce Cookie Size

Cookie is a piece of code that resides in the user’s computer and is used to save the important information about the user. For example few websites take personal information of a user on each visit to a website. When we click on “save for the next time”, the information is stored on the client’s pc as a cookie.

So http cookie is stored either for the personalization or authentication. But there are few important considerations while storing a cookie for a website (which are beneficial in improving the response time of the website):

• Remove unnecessary Cookies
• Make your cookie size as low as possible.
• Place cookie at the appropriate domain level, so that it may not affect the other sub domains.
• Set cookie valid expiry date.

5. Put Style sheets at the Top

Following are the necessary points for placing style sheets at the top:

• It is recommended that style sheets are needed to be placed at the top of the html documents because it helps in rendering html in the progressive manner.
• As internet users might have slow internet connection so they are required any visual feedback like a progress bar in percentage, but in our case html page is the progress indicator itself, because if we use to place our CSS at the top of the html page (in the head section), our html page will render in the progressive manner.
• But if you place at the bottom of the page, it is expected that you will not get the fine page loading or either you will see the white blank page, just because of the reason mostly browsers do not render html in which CSS is placed at the bottom of the page.

6. Use Get for Ajax Request

There are two ways of submitting Html form. These ways are dependent on the Form attribute called Method which has two values, one is Get and other is Post.

Method = GET:

Get is the default method of posting the Form and used when there is requirement of getting/retrieving data.

Method = POST:

Whereas Post is used when there is a requirement of storing or updating data and/or ordering a product or sending an email. And post is the encoding way of sending values to the web server.

Recommendation of Using Ajax

It is recommended that when you use XMLHttpRequest, always go for Get Method. Because Post is two way process while Get takes only one tcp packets to send. The maximum length of a URL is 2k in IE, after that you will not be able to use GET.

Method Get is meant for retrieving data, so use Get when you are only requesting any information from Server.

7. Make JavaScript and CSS as an External File

CSS and JavaScript files should be used externally because it gives the benefit of improving response time of the website.

• The reason is if you use JavaScript or CSS file externally, the browser usually caches these files and when user requests for the website, it renders the html in small size with less http Request (Due to the Browser Cache).
• But if we use inline JavaScript or CSS file, these files are downloadable every time when users request for the website, thus it increases the size of the html page with less http requests (by  default).

8. Minimize DOM Access

Dom stands for Document Object Model. With the help of Dom you can access every piece of html. But it is recommended that our web page must have lower amount of DOM elements. In other words a complex web page means more bytes to download; also it means slower DOM access via JavaScript.

In order to check your DOM elements you can use command in the Mozilla firebug add-one as mentioned below:

Document.getElementByID(‘*’).length

For the optimize use of html elements you should compare your home page with the busiest page like Yahoo which is still under 700 html elements.

9. Optimize Images

• Images are the important part of the website and thus are required to optimize before placing into the website.
• It is not common that everybody have a high speed internet connection, in order to improve the response time for every user; Images need to be optimized accordingly.
• Try to convert GIF into PNG. Mostly designers hesitate to using PNG Images because of the reason that it is not supported by majority browsers but it was the matter of past.
• See your GIF images if they are using palette size corresponding to the no of colors in the image.
• You can use imagemagick its easy to check with:

Identify -verbose image.gif

• There is a room for improvement when you see an image with 4 colors and a 256 color slots in the palette.

10. Keep Components Under 25K

After the implementation of web 2.0, everybody likes to use web with their mobile phones, so you as a web designer or developer should optimized your website for the mobile phones. I Phone do not cache WebPages more than a size 25K. (Note that it is the uncompressed size). Here minification is important because gzip alone is not only the way to compress.

Conclusion

One of the main issues on the Internet is, still, website loading speed. So with the above mentioned practices you may get benefited for your website or page loading speed.

10 Tools To Spice Your UNIX Shell Scripts

There are some misconceptions that shell scripts are only for a CLI environment. You can easily use various tools to write GUI and/or network (socket) scripts under KDE or Gnome desktops. Shell scripts can make use of some of the GUI widget (menus, warning boxs, progress bars etc). You can always control the final output, cursor position on screen, various output effects, and so on. With the following tools you can build powerful, interactive, user friendly UNIX / Linux bash shell scripts.

#1: notify-send Command

Creating GUI application is not just expensive task but task that takes time and patience. Luckily, both UNIX and Linux ships with plenty of tools to write beautiful GUI scripts. The following tools are tested on FreeBSD and Linux operating systems but should work under other UNIX like operating systems.

The notify-send command allows you to send desktop notifications to the user via a notification daemon from the command line. This is useful to inform the desktop user about an event or display some form of information without getting in the user's way. You need to install the following package:
$ sudo apt-get install libnotify-binIn this example, send simple desktop notification from the command line, enter:

 
notify-send "rsnapshot done :)"
 

Sample outputs:

Fig:01: notify-send in action

Here is another code with additional options:

 
....
alert=18000
live=$(lynx --dump http://money.rediff.com/ | grep 'BSE LIVE' | awk '{ print $5}' | sed 's/,//g;s/\.[0-9]*//g')
[ $notify_counter -eq 0 ] && [ $live -ge $alert ] && { notify-send -t 5000 -u low -i   "BSE Sensex touched 18k";  notify_counter=1; }
...

Sample outputs:

Fig.02: notify-send with timeouts and other options

Where,

• -t 5000: Specifies the timeout in milliseconds ( 5000 milliseconds = 5 seconds)
• -u low : Set the urgency level (i.e. low, normal, or critical).
• -i gtk-dialog-info : Set an icon filename or stock icon to display (you can set path as -i /path/to/your-icon.png).

For more information on use of the notify-send utility, please refer to the notify-send man page, viewable by typing man notify-send from the command line:
man notify-send

#2: tput Command

The tput command is used to set terminal features. With tput you can set:

• Move the cursor around the screen.
• Get information about terminal.
• Set colors (background and foreground).
• Set bold mode.
• Set reverse mode and much more.

Here is a sample code:

#!/bin/bash
 
# clear the screen
tput clear
 
# Move cursor to screen location X,Y (top left is 0,0)
tput cup 3 15
 
# Set a foreground colour using ANSI escape
tput setaf 3
echo "XYX Corp LTD."
tput sgr0
 
tput cup 5 17
# Set reverse video mode
tput rev
echo "M A I N - M E N U"
tput sgr0
 
tput cup 7 15
echo "1. User Management"
 
tput cup 8 15
echo "2. Service Management"
 
tput cup 9 15
echo "3. Process Management"
 
tput cup 10 15
echo "4. Backup"
 
# Set bold mode
tput bold
tput cup 12 15
read -p "Enter your choice [1-4] " choice
 
tput clear
tput sgr0
tput rc

Sample outputs:

Fig.03: tput in action

For more detail concerning the tput command, see the following man page:
man 5 terminfo
man tput

#3: setleds Command

The setleds command allows you to set the keyboard leds. In this example, set NumLock on:

setleds -D +num

To turn it off NumLock, enter:

setleds -D -num

• -caps : Clear CapsLock.
• +caps : Set CapsLock.
• -scroll : Clear ScrollLock.
• +scroll : Set ScrollLock.

See setleds command man page for more information and options:
man setleds

#4: zenity Command

The zenity commadn will display GTK+ dialogs box, and return the users input. This allows you to present information, and ask for information from the user, from all manner of shell scripts. Here is a sample GUI client for the whois directory service for given domain name:

#!/bin/bash
# Get domain name
_zenity="/usr/bin/zenity"
_out="/tmp/whois.output.$$"
domain=$(${_zenity} --title  "Enter domain" \
	            --entry --text "Enter the domain you would like to see whois info" )
 
if [ $? -eq 0 ]
then
  # Display a progress dialog while searching whois database
  whois $domain  | tee >(${_zenity} --width=200 --height=100 \
  				    --title="whois" --progress \
			            --pulsate --text="Searching domain info..." \
                                    --auto-kill --auto-close \
                                    --percentage=10) >${_out}
 
  # Display back output
  ${_zenity} --width=800 --height=600  \
	     --title "Whois info for $domain" \
	     --text-info --filename="${_out}"
else
  ${_zenity} --error \
	     --text="No input provided"
fi

Sample outputs:

Fig.04: zenity in Action

See the zenity man page for more information and all other supports GTK+ widgets:
zenity --help
man zenity

#5: kdialog Command

kdialog is just like zenity but it is designed for KDE desktop / qt apps. You can display dialogs using kdialog. The following will display message on screen:

 
kdialog --dontagain myscript:nofilemsg --msgbox "File: '~/.backup/config' not found."
 

Sample outputs:

Fig.05: Suppressing the display of a dialog

See shell scripting with KDE Dialogs tutorial for more information.

#6: Dialog

Dialog is an application used in shell scripts which displays text user interface widgets. It uses the curses or ncurses library. Here is a sample code:

>#!/bin/bash
dialog --title "Delete file" \
--backtitle "Linux Shell Script Tutorial Example" \
--yesno "Are you sure you want to permanently delete \"/tmp/foo.txt\"?" 7 60
 
# Get exit status
# 0 means user hit [yes] button.
# 1 means user hit [no] button.
# 255 means user hit [Esc] key.
response=$?
case $response in
   0) echo "File deleted.";;
   1) echo "File not deleted.";;
   255) echo "[ESC] key pressed.";;
esac

See the dialog man page for details:
man dialog

A Note About Other User Interface Widgets Tools

UNIX and Linux comes with lots of other tools to display and control apps from the command line, and shell scripts can make use of some of the KDE / Gnome / X widget set:

• gmessage - a GTK-based xmessage clone.
• xmessage - display a message or query in a window (X-based /bin/echo)
• whiptail - display dialog boxes from shell scripts
• python-dialog - Python module for making simple Text/Console-mode user interfaces

#7: logger command

The logger command writes entries in the system log file such as /var/log/messages. It provides a shell command interface to the syslog system log module:

 
logger "MySQL database backup failed."
tail -f /var/log/messages
logger -t mysqld -p daemon.error "Database Server failed"
tail -f /var/log/syslog
 

Sample outputs:

Apr 20 00:11:45 vivek-desktop kernel: [38600.515354] CPU0: Temperature/speed normal
Apr 20 00:12:20 vivek-desktop mysqld: Database Server failed

See howto write message to a syslog / log file for more information. Alternatively, you can see the logger man page for details:
man logger

#8: setterm Command

The setterm command can set various terminal attributes. In this example, force screen to turn black in 15 minutes. Monitor standby will occur at 60 minutes:

 
setterm -blank 15 -powersave powerdown -powerdown 60
 

In this example show underlined text for xterm window:

 
setterm -underline on;
echo "Add Your Important Message Here"
setterm -underline off
 

Another useful option is to turn on or off cursor:

 
setterm -cursor off
 

Turn it on:

 
setterm -cursor on
 

See the setterm command man page for details:
man setterm

#9: smbclient: Sending Messages To MS-Windows Workstations

The smbclient command can talk to an SMB/CIFS server. It can send a message to selected users or all users on MS-Windows systems:

smbclient -M WinXPPro <1
Message 2
...
..
EOF

OR

 
echo "${Message}" | smbclient -M salesguy2
 

See smbclient man page or read our previous post about "sending a message to Windows Workstation" with smbclient command:
man smbclient

#10: Bash Socket Programming

Under bash you can open a socket to pass some data through it. You don't have to use curl or lynx commands to just grab data from remote server. Bash comes with two special device files which can be used to open network sockets. From the bash man page:

1. /dev/tcp/host/port - If host is a valid hostname or Internet address, and port is an integer port number or service name, bash attempts to open a TCP connection to the corresponding socket.
2. /dev/udp/host/port - If host is a valid hostname or Internet address, and port is an integer port number or service name, bash attempts to open a UDP connection to the corresponding socket.

You can use this technquie to dermine if port is open or closed on local or remote server without using nmap or other port scanner:

# find out if TCP port 25 open or not
(echo >/dev/tcp/localhost/25) &>/dev/null && echo "TCP port 25 open" || echo "TCP port 25 close"

You can use bash loop and find out open ports with the snippets:

 
echo "Scanning TCP ports..."
for p in {1..1023}
do
  (echo >/dev/tcp/localhost/$p) >/dev/null 2>&1 && echo "$p open"
done

Sample outputs:

Scanning TCP ports...
22 open
53 open
80 open
139 open
445 open
631 open

In this example, your bash script act as an HTTP client:

#!/bin/bash
exec 3<> /dev/tcp/${1:-www.cyberciti.biz}/80
 
printf "GET / HTTP/1.0\r\n" >&3
printf "Accept: text/html, text/plain\r\n" >&3
printf "Accept-Language: en\r\n" >&3
printf "User-Agent: nixCraft_BashScript v.%s\r\n" "${BASH_VERSION}"   >&3
printf "\r\n" >&3
 
while read LINE <&3
do
   # do something on $LINE
   # or send $LINE to grep or awk for grabbing data
   # or simply display back data with echo command
   echo $LINE
done

See the bash man page for more information:
man bash

A Note About GUI Tools and Cronjob

You need to request local display/input service using export DISPLAY=[user's machine]:0 command if you are using cronjob to call your scripts. For example, call /home/vivek/scripts/monitor.stock.sh as follows which uses zenity tool:
@hourly DISPLAY=:0.0 /home/vivek/scripts/monitor.stock.sh