Must Have: Top 5 Mozilla FireFox Addons For WebSite Administration

posted by Archie @ 23:36 PM
July 7, 2010

When uploading a personal or a business website via FTP or administering it through server-side software – sitebuilders, scripts, etc. – many people immediately check out the changes on the Web. Those, who are interested not only in the outlook of the web page, but also need some technical details (e.g. page size, page elements source and the time taken for loading), are recommended to tune-up their browsers with a Site Admin Kit from Sitevalley. It is our personal research, ran on the latest version of Mozilla Firefox with useful Firefox add ons, we picked for you.

Why So Slow? Checking Loading Speed With YSlow Firefox Addon

This question is usually asked by the site owners to their webmasters, who in turn ask the same question to their host’s support team. However, it is not always due to a hosting company not taking care of the server load or connectivity, it may also be a local ISP issue or… a resource intensity of the website, which requires more time to get loaded. Such sites usually include blogs and forums with a big number of posts and galleries with pictures. So, if you want to find out which end exactly the slowdown is taking place at, you may want to use the following addon:

YSlow Addon Loading Speed Report

YSlow Addon Loading Speed Report

YSlow addon is a small useful tool, which uses Yahoo!’s Smush.it service and is one of the top rated addons. It is installed on the right in the status bar and once being run, traces all the pages you load, providing the page size and telling the time it took to load.

What Is Stuffed There? Discovering Site Objects With AdBlock Plus Addon

The screen shot above shows, that the tested site is rather resource intensive, so no wonder it takes that much time to load. However, who said it cannot be optimized.

AdBlock Plus Addon Launch

AdBlock Plus Addon Launch

For the administrator to do that, he or she will definitely need to know what exactly requires optimization. But do you to take a closer look?

If you are an active Internet surfer, who hates pop-up windows and different adverts, you might already have AdBlock Plus addon installed – AdBlock Plus download is available at the hyperlink above. If you are wondering, how an advert-blocking tool can help with website administration – have a look at the screen shot below:

AdBlock Plus Addon Pane

AdBlock Plus Addon Pane

As far as you can see, a click on “Open blockable items” brings out a pane, where all web page elements are listed and sorted by type. Such way of displaying makes analysis a lot easier, though in fact it’s the same information, available in the Page Source View. After this analysis you understand, that there are too many pictures, for example, so you either remove some of them or compress them – here’s the simplest optimization way.

Have It Debugged With FireBug! How To Use FireBug Addon For Firefox

Optimization is not only about page size cutting. Sometimes the scripts, applied on the web page create much load and cause slowdown due to their misconfiguration. In order to have this resolved, the above mentioned addons are not going to be sufficient. Here is where some more serious means are needed.

Using a FireBug addon for your Mozilla Firefox browser you are getting enabled to not only analyze the page content, but also to debug and edit it. Firebug addon download may require YSlow to be installed for complete functionality. When you access your site, just click on the icon of a bug on the very right of your browser’s status bar and you will get a pane with several tabs:

FireBug Addon Console Tab

FireBug Addon Console Tab

The “Console” tab is usually blank. However, in case there are any errors in the code, all of them are traced and displayed. Then there goes “HTML” tab, which allows to see the structure of the site:

FireBug Addon HTML Tab

FireBug Addon HTML Tab

There are dropdowns available to see the hierarchy. The right-side split provides the detailed code. Another tab gives a Cascade Style Sheet (CSS) layout:

FireBug Addon CSS Tab

FireBug Addon CSS Tab

“Script” is the next tab. It reveals all the scripts, executed on the website:

FireBug Addon Script Tab

FireBug Addon Script Tab

Another useful tab is for Document Object Model (DOM). As you can see, it gives an outlet of all the objects, used on the website:

FireBug Addon DOM Tab

FireBug Addon DOM Tab

The last but not least tab (not taking into account YSlow, which is also available and which we have already got acquainted with) is “Net”:

FireBug Addon Net Tab

FireBug Addon Net Tab

This one gives a full picture of the page loading process. It decomposes the page into minimal object (CSS, images, etc.) and counts their size and time, taken by any of them to get loaded. It really is very important for optimization analysis, as it allows to spot the most problem objects.

Stay alert!

If you are a Virtual or a Dedicated server user or even just a user of simple shared hosting, whose host has a public-available server status checking system, you may need to have another Firefox addon installed – Nagios Checker. After Nagios Checker download you will need to have it adjusted, this will require the details of the server, where Nagios software is installed.

Nagios Addon Minimized

Nagios Addon Minimized

Nagios addon gathers the information on service alerts from the Nagios server and displays them in the status bar:

In case of alerts it starts blinking with yellow or red (depending on the threat) and when you highlight it with the mouse it gives a full sheet:

Nagios Addon Alert Prompt

Nagios Addon Alert Prompt

A click on the warning will bring you to the full Nagios web interface.

Time to Reload.

Let’s say you have finally optimized your website. You save the changes, reload the page and then see something is missing. You make another change, save it, reload the page again… this may last too long to bear.

Perhaps now, having installed a ReloadEvery addon you will save more time. After ReloadEvery addon download and installation it will be available on a right mouse button click:

Enabling ReloadEvery Addon

Enabling ReloadEvery Addon

This Firefox addon will let you set the needed reload time interval and apply it to the needed tab or all tabs. In order avoid Firefox overload, reload settings are not saved and should be applied any time you launch your browser.

Summing up

The addons above are supposed to help you a lot with administration of your web site. Those tools are easy to install and rather user friendly. Being well developed, they do not overload the browser and their design does not obscure the working area. We picked this Top 5 using our own administrative experience and experience of our customers, whom some of those tools were suggested. In case you know another useful addon, which might be helpful for site administrators, feel free to share your ideas.

Tags: , ,