Posted on May 25th, 2010Never check the patience of web user by providing a slow web page, most of the users will just quit and opt for another one. Slow web pages are vital problems of a website. Many attractive websites are built using cutting edge technologies with magnificent graphics support and multimedia, but these add up to a large data content that increases the download data and time.
From the search engine point of view slow loading websites have poor ranking as well. Faster web means faster web pages and the search engine ranking will definitely depend on the speed of web page. If your website needs a good ranking from Google it is necessary that the loading time of web page be short.
A web page definitely takes time to load which is depended on connectivity, server response time, file size and context. Latest survey suggests that on an average a person will wait for only 4 sec for the web page to load.
The causes of slow web page are too many HTTP requests, uncompressed JavaScript, use of a heavily loaded server which can’t provide a high bandwidth, use of large images and flashes that are also being loaded from the same server.
Now to decrease the load time we need to know what the present load time is and what can be done to this. There are many tools out there to check the loading time.
Tools To Analyze Website Loading Time
1. YSlow
YSlow is a Firefox add-on that is a popular web speed-testing tool which is a yahoo product. YSlow analyzes web page and suggests way to improve their performance. YSlow lists all components in the web page. It checks the web page and provide grade for each guideline and provides an overall score as well. It also provides a summary of HTTP. YSlow will provide information on cookies in addition to calculating the size of a page in the instance of both primed and empty cache. YSlow can check for unwanted scripting and indicate them for removal and supports tools like JSLint and Smush.IT, inbuilt in it.
2. Pingdom Tools
Pingdom tool tests the whole page with all objects. It simulates the way a web page is loaded in a browser and indicates the time for presenting each of the objects like image, flash, CSS, RSS. We can view the objects in load order hierarchy. After each test we get a summary of total objects, total load time and size. This tool does not calculate time for objects included in JavaScript. This tool can provide the total number of external domain objects also.
3. Free speed test
Freespeedtest.com is a helpful one for load time test although it does not have many features. What makes this tool unique is that this tool tests the load time through multiple data centers across the world. Thus it provides load time and response time of a web page at different locations around the globe.
4. Web Page Analyzer – 0.98
Website Optimization provides this tool. It provides a global report. This is an online tool in which one has to just enter the URL of the web page to calculate the page size, and download time. It returns data based on various Internet connections. The script calculates the size of individual elements and sums up each type of web page component. Based on these page results the script then advice on how to improve page load time.
5. Web load tester
Web load tester will help us to obtain information on how our web site responds to traffic. This is a virtual website loader which evaluates the web page upon loading. This tester has an advanced feature of scheduled testing which is available in 3 forms. You can use the service at any time, day or night, to ensure that your websites and applications are ready for any number of visitors. This includes various tests like HTTP test, SOAP test, DATABASE test. Each test is loaded as per our requirement. The virtual loads are provided from Amazon farm.
6. Jmeter
Apache Jmeter is a 100% java tool for load testing and measuring performance of web pages. It can simulate heavy load and testing is done under this scenario. From the load test point of view, uses of JMeter are:
- Can test HTTP and SOAP.
- GUI design with faster operation.
- Caching and offline analysis.
- Various plug-ins are available.
Initially this tool was developed for web applications but its functionality has been expanded.
7. Aptimize.com
Aptimize is known for its unique way of reporting. Similar to others it takes URL as input and gives a detailed report as email in about 10 minutes. The report is in pdf format. This tool possesses capability of showing multiple loading times. It also separately shows server processing time and browser processing time. The most enchanting feature of this is that in the report it specifies what is to be done and how much time can be saved by optimizing the CSS, JavaScript and HTML.
8. Website speed check
Website speed check is also a way to check load time of a given website. This test gives load time for the connection bandwidth and gives the load time for most popular bandwidth available across the globe. Web site speed check also provides detailed number and size of all images, CSS and JavaScript in the web page.
9.Website goodies
Website goodies is also a simple tool which shows the load time and estimates it. It gives page load time and size at the click of a button. It is a simple and user friendly one without any additional features.
10.Web tool hub
WebToolHub is a tool that has two analysis modes. In the simple mode it just shows load time and speed on different Internet connections of web page in general. In the advanced mode loading time and speed of each and every element of the site is shown in detail. It is a very handy tool.
Website Speed Optimization Tips
Now knowing the load time and factors causing it, it is time to wipe out this delay. So now considering measures to reduce the load time of a web page, the prior ones are listed below:
1. A fast and less loaded server
This one is a must or else the server must have enormous bandwidth to accept all incoming connections. This is because a website can never be fast if it is served slow. So keep this in mind before hosting the website. It is a must that the hosted server must have a low ping value.
2. Make fewer HTTP requests
HTTP request is that request for a file from server. This number and size should be low for high page speed. This is a most crucial factor governing page speed. If more of HTTP request is necessary in case of static file then use the expires header which can reduce 80% of load time.
3. Adding an expires header
If your site is rich in images and graphics then it is necessary that you use this feature so that you can save band width as well as download time for the user. Expires header use elements like images, CSS and even the script. The advantage of this is that no multiple download occurs on multiple visit of same web page. This can be done by adding a line of code to your .htaccess file in the root directory of your site. The only care to be taken is that be sure to make change in name of file if an update is processed.
4. Place CSS at top and JavaScript at bottom
Placing CSS at top helps to render the page immediately while other components are still loading. The page appears to be loaded on the user’s machine, so the user eyes can begin scanning the offerings, all the while the JavaScript is catching up in the rears and loading in the background.
5. Place CSS and JS external
Doing this enables the browser to cache them and thus makes the load faster. This avoids the download of JS and CSS file every time. When the file is required it is just pulled out from the local host, thereby cutting short the time to load.
6. Using sub domain for parallel download
Parallel downloads are used for simultaneous file download. This is a great way to save time if the user has sufficient bandwidth.
To set this up:
- Create 3 or more Sub domains on your server
- Place your images in a folder in each of the sub domains
- Replace the image locations in your site to the paths of the newly created sub domains.
Now with JavaScript files, this doesn’t exceed beyond two parallel downloads at a time.
7. Use XHTML instead of tables
Implementation XHTML is difficult, so perform this only if you have knowledge in it. However use of XHTML decreases the download time. This step is not meant to draw table using XHTML but code as tables.
8. Image formats to be used when you upload images
All formats of image vary in quality and color.
GIF is suitable for images with few colors like logos, text & line art. When saving a GIF file, make sure you use a small color palette.
JPG is good for images with lots of colors & details like photographs. Decrease the quality of a JPG image before saving. It will still look good for a web image.
PNG, a format especially for websites, has great quality – both transparent & non-transparent – is most useful when you’re in need of quality transparent images.
PNG is most widely accepted as format of image in web pages.
9. Use compressed CSS smartly
Common property must be defined once together. Mention every style in the CSS. If a page uses large CSS file, then define it in that page only so that user not viewing that particular page has no need of loading it. Compress the CSS file to decrease the size.
10.Merge and compress JavaScript
Remove the unnecessary spaces, tabs, and various other selected characters, thereby reducing the overall size of the JS. With a smaller file you will be able to have a faster page load. Use JSMIN to minimize your JavaScript. If JavaScript is used only in few pages use them in those pages only.
11. Use HTTP Compression
HTTP compression is one of the most effective steps with a little effort. Most of browsers & web servers support HTTP compression. Using it, your files are sent to the visitor compressed and un-compressed on their side and you can save up to 90% of the load time for the text based files.
Two popular compression schemes are:
- HTTP compression: a feature of the web server (can be enabled on the server side)
- Gzip: can be enabled at the site level.
12. Leverage Google Ajax libraries
Caching is one good way to reduce your page load time. By using Google Ajax libraries, you can decrease the site download time if the script is cached in user’s browser. Using scripts hosted on Google reduces the wait time for Google bots
13. Reduce DNS look ups
Whenever a domain name is typed in the web browser address field, the browser performs a DNS look up to the IP address. The more locations your site has to access, the more DNS lookups that must occur. Do your best to keep these as low as possible. On average it takes about 60-100 milliseconds to do a DNS look up.
Not finally but the most important one is better coding with separate static and dynamic content. Besides the coding of CSS and HTML, dynamic coding directly affects the page performance. Connections to database must be as few as possible and moreover keep database size as small as possible.
Reduce Website Loading Time – Resources
1. YSLOW
YSlow as explained earlier is a website speed testing tool but it also give summary on what is to be done to increase speed of that particular page.
2. JavaScript compressor
JavaScript compressor is a free online tool that can compress JS code. This helps to reduce size of java codes.
3. CSS drive
This is also a free online tool similar to JavaScript compressor only difference is that it compress CSS codes
4. Google AJAX library
The Google AJAX Libraries is a content distribution network and loading architecture for the most popular, open source JavaScript libraries.
5. Amazon S3Fox Organizer
Amazon S3Fox organizer helps to organize and store files onto Amazon S3. It can be interfaced with any browser and helps to run website with better efficiency
6. DBMonitor
DBMonitor is a powerful tool to determine the database structure and then scale it down if possible. It is open source software and helps to tune the structure and index. It supports most of the common databases like MySQL, PostgreSQL and Oracle. This is because it supports JBDC drives. This application is relevant in this scenario because the major factor affecting load time is database structure and volume.
The best way to increase the speed of a web site is to make the code optimized at the time of development itself so a hassle free fast loading website can be obtained easily.