Firebug add-on for Firefox is known to slow Gmail

Firebug is a free, open source add-on for Firefox that provides essential tools for web developers. If you have Firebug installed and have logged into Gmail recently, however, you’ll be greeted with an intimidating message that states:

“Firebug is known to make Gmail slow unless it is configured correctly.”

This message also contains a link to “Fix This”, but you will notice that Google only provides a few vague sentences explaining that you need to disable Firebug for Gmail, and if that doesn’t work you should disable Firebug altogether. That isn’t very helpful, so in this article I’ll explain the procedure with more detail.

First off, I don’t know exactly why Firebug and Gmail aren’t getting along. I’ve been running Firebug for years and have never noticed excessive slowness with Gmail, but apparently others have not been so fortunate.

The easiest way to disable Firebug for a specific site is to browse to the site causing problems and press Shift + F12. This hotkey automatically disables Firebug for the current website you are browsing.

Alternatively, you can open the Firebug development panel by clicking the small bug icon in the Firefox status bar (if your status bar is hidden, you can also press the F12 key to open Firebug). In the top left corner of the Firebug panel, click the orange bug icon and select “Deactivate Firebug for This Site”.

Firebug will continue to operate on other websites, but when you browse to sites you explicitly disabled, the Firebug logo will turn grey to indicate it is no longer working.

If you continue having problems after deactivating Firebug for Gmail, you may be required to disable the add-on entirely. To do this, open Firefox add-ons by pressing CTRL + SHIFT + A, locate Firebug, click Disable, and restart your browser.

Disabling the Firebug add-on in Firefox

 

Google Wants to Help Make Your Website Faster with Page Speed

google_logoFirefox only:  Google has just released Page Speed, a website performance tool for Firefox/Firebug that is similar to the previously covered Yahoo YSlow add-on.  Google has made it clear that speed is one of their highest priorities for modern-day internet, and Page Speed is their attempt at getting web developers personally involved in the process.

Page Speed is an open source tool that that allows web developers to evaluate the performance of their web pages and receive suggestions on how to improve them.  Page Speed runs several tests on a website’s server configuration and front-end code, providing web developers with a score for each page and suggestions for improving performance.

Google’s hopes are that if individual web developers improve their site’s performance, users will be more engaged, bandwidth will be reduced, and the internet as a whole will be improved.  Google has outlined a list of web performance best practices, which details techniques such as caching, minimizing page size, and optimizing browser rendering.

Installing Page Speed

  1. Install Firebug (required to run Page Speed).
  2. Install Page Speed.
  3. Restart Firefox.

Testing A Page’s Performance

  1. Go to Tools > Firebug > Open Firebug.
    pagespeed_openfirebug
  2. In the Firebug Window, click the Page Speed Tab.
    pagespeed_button
  3. Navigate to the website you want to test.  Wait until the page has fully loaded before proceeding.
  4. Click Analyze Performance.
    pagespeed_analyzebutton

After a page has been analyzed, you will be given a detailed list of performance best practices and the page’s individual score for each category (sorted by importance).  Clicking any of these rules will provide you with suggestions for improving that specific area.

pagespeed_summary

While Page Speed is not as robust as YSlow in this initial release, it makes up for that with performance standards designed by the company that makes some of the web’s most efficient sites.

For more information about Page Speed and web performance best practices, check out Google’s guide.  Page Speed is a free add-on for Firefox.  [Google Page Speed]

How To: Analyze and Improve Your Website’s Performance with YSlow

yslow_thumbFirefox only:  When creating a website, it’s a good idea to be aware of the site’s performance and to find ways to improve load times.  YSlow is an add-on for Firefox that can thoroughly analyze any website’s performance and can even provide suggestions on how to improve the site’s speed.

Getting Started

To get started, follow these steps:

  1. Install the Firebug add-on (required for YSlow).
  2. Install the YSlow add-on.
  3. Restart Firefox.

Once Firefox restarts, you can view the performance statistics of any website by clicking the newly added YSlow icon in the status bar.  This icon also displays the current web page’s load time in seconds.

yslow_icon

Clicking the YSlow icon will bring up a new window that will give you the option to ‘Run Test’ and lets you choose whether a test should be performed each time you load a web page.

yslow_initial

Viewing Results

Once the test has been completed, you will be given an overall letter grade for the site’s performance and a detailed evaluation.  You can view the site’s individual ratings in the categories tabs on the side, and clicking each tab will display detailed information about your site’s performance and ways to improve it.

yslow_analyzed

YSlow also provides information about the individual components of a website under the Components tab.  After clicking this tab, you will be presented with an expandable list detailing the types of files on the web page and their file size.

yslow_components

To view graphical site statistics, click the Statistics tab at the top of the YSlow window.  This will display weighted graphs for the sizes of components on the website.

yslow_graphs

The Tools tab allows you to run a variety of tests (such as Javascript tests) on your website.  Clicking ‘Printable View’ will provide you with a detailed list information about all areas of your website.

yslow_tests

One thing to keep in mind is that YSlow calculates its results on data it receives from your browser and internet connection.  This means that if you are on a slow network (or the website’s host is slow), it may skew your results.

YSlow (and Firebug) are free add-ons for Mozilla Firefox and are a great asset to any web developer, whether casual or professional.  For more information and instructions, check out the YSlow User Guide.  [Yslow | Yahoo Developer Network]