There are numerous tools available online, which allow you to test and analyze page loading speed of your Website. You can either use them online or download them for testing purpose. You will also notice, there are some paid and premium tools available for testing page loading speed. Almost every tool tests the speed and just shows suggestions to improve the performance, which doesn’t helps much. However there are few tools available which allow you to optimize speed at higher levels. With the combination of these tools you can boost the page loading speed of your site to only a few seconds. Read on to find out, which tools are these and how you can use them.
Download and install these exciting Firefox add-ons one by one:
- Firebug: allows you to analyze HTML/CSS/JS, and modify the layout on-the-fly. In addition, you can extend its feature with below mentioned extensions.
- Google PageSpeed: is an extension to Firebug. It allows you to test your Website’s Page Loading Speed and shows suggestions how you can improve its performance. Follow the suggestions and make your Website speedy.
- Yahoo! YSlow: is again an extension to Firebug. It analyzes the Website performance, display the statistics; provide famous tools like JSLint & Smush.it for in-depth analysis, and show suggestions to improve the performance.
- Firecookie: Do you know cookies are the culprit to load any Website in a browser? If your Website is running slow then you must inspect its cookies with Firecookie extension.
Now analyze your Website using PageSpeed & YSlow, and then follow their suggestions to improve the Page Loading Speed.
Screenshot of testing our Website with Firebug and its extensions
This online server analyzes your Website’s Performance and helps you in diagnosing the notified problems in the analysis.
Screenshot of Web Page Analyzer Online Tool
CSS Sprite Generators
CSS Sprites helps to reduce the total number of HTTP requests created for image resources required by your Website. In fact, a CSS Sprite combines several small images into a large one defined through X and Y coordinates. You can assign these coordinates to image positioning elements in CSS. Mostly CSS Sprites are used to create large background through very small-sized images. The small image loads up only once and displayed at different defined places. To use a CSS Sprite Generator, you have to
- collect the images into a zip file,
- upload the zip file to a generator’s Website/Tool, and
- generate the Sprite.
Following are few famous CSS Sprite Generators
With Slides, we don’t make you start from an empty slate. All you have to do is to pick the elements you like best and combine them. Each slide has been carefully crafted to satisfy three key criteria: aesthetic, function and usability. That way you know every element works together seamlessly while enhancing the impact of your content.Create a Website
- CSS Sprites.com – it is an easy to use online tool. You can upload as many as images you want and change the settings as per your requirement.
Screenshot of CSSsprites.com, a free CSS Sprite Generator
- Sprite Gen Website Performance – A nice online tool to generate CSS Sprite with more options.
Screenshot of SpriteGen Website-Performance
You can use following Image Compressors to optimize your images and compress their size.
ImageMagick provides a command line tool to not only compress the file size but also to add more look-&-feel to your images. Using it, one can transform the static 2D JPEG image into a 3D PNG format with simulated depth, rich textures and less file size. ImageBrick GUI Releases are available for Windows, Unix, iOS and Mac.
PNGCrush is a command-line optimizer for PNG images. You can run it either in MS-DOS at Windows or at command line in Unix/Linux. Two GUI tools are also available if you want to take benefit of PNGCrush in GUI mode. These are:
JPEG Club provides two tools jpegtran and Jpegcrop to optimize the JPEG images. jpegtran resizes the JPEG images without any loss, whereas Jpegcrop allows you cropping the images. You can make use of JPEGCrop Windows Utility to take benefit of both options.
Google, Adobe, Microsoft and other giants are working with WebM foundation to create new standards for open Web and making much better than we’ve today. In the same project, WebP image format have been launched. This format have 39.8% smaller file sizes than JPEG formats. You can visit Google Code’s WebP Page and download the converter to convert your JPEG/PNG/BMP files to WebP format.
In its Page Speed project, Google has developed mod_pagespeed Extension for Apache. You can download it in free and integrate with Apache 2.2 or later.
mod_pagespeed for Apache from Google
Google Page Speed Service
Google has started to provide the Page Speed Service to the Websites, but it is limited to only a few Webmasters. This service helps you to speed up the page loading speed of your Websites or Web Apps.
Google Page Speed Service in Trial Version
Google Page Speed Service will:
- fetch content from your servers
- optimize and rescale images automatically
- rewrites fetched content according to the standardized rules of optimizing Page Loading Speed
- serves the optimized and fast loading content to visitors.
One can fill this form and request Google to provide this service. It is noteworthy that Google has not declared till yet whether this service is free or paid. Currently, this service does not support HTTPS, Flash, streamed audio, streamed video, non-www domains, and domains hosted on Blogger, Google Sites or Google App Engine.
Yahoo! has built this command line tool to help you in increasing the performance of your Websites and Web-based applications. You can download YUI Compressor Library and follow the mentioned instructions to use it on Linux/Ubuntu/Fedora or other environments. If you are not a programmer then you can opt Online JS/CSS Compression Tool from Refresh-SF.com. Browse the Website, paste the code of desired JS/CSS file, and it will compress them using YUI Compressor.
Screenshot of Online YUI Compressor Tool at Refresh-SF.com
Content Delivery Networks (CDNs)
A Content Delivery Network is a network of geographically distributed computers containing copies of the data placed at each node. CDN will have several copies of Website content at different nodes scattered around the globe and allow the users to access a copy located quite near to his/her location. This will reduce the bandwidth and redundancy to a single location hosting your Website. Famous CDNs are Akamai, Limelight Networks, BitGravity, MaxCDN, and CacheFly.
Most of the CDNs or Cloud Hosts are quite difficult to setup as they need technical knowledge and expertise on Web Hosting concepts. On the contrary, MaxCDN is simple and easy to configure. You just have to spend 5 minutes to configure it, Moreover its rates are also flexible. If you are using a CMS like WordPress, Joomla, Drupal, Magento, X-Cart, OS-Commerce, or Typo3 then there are ready-to-use plugins or extensions available to configure MaxCDN for your Website. In addition, you do not have to pay an extensive price to use it because their charges are flexible and based on pay-per-use. They provide 30 days money back guarantee, free shared SSL, and 24/7 technical support as well.
Optimizing page loading speed only through Browser and Proxy Cache may be an easy task, but for better performance, we suggest using above tools. We invite our readers to add remaining tools to optimize Page Loading Speed through their valuable comments.