Subscribe to RSS Feed

Page load performance is largely important topic these days and virtually touches every web developer. In this post, I am going to show several page-load cases and describe how to properly read (analyze) data provided by the Net panel in Firebug.

Just to quickly summarize, the purpose of the Net panel is to intercept network communication between a web-page and the server and see what's going on under the hood. All created reports (logs) can be exported by NetExport extension (in HAR format) and there is also an online viewer allowing to preview all exported logs in graphical form.

In order to put together all following examples (HTTP activity logs) I used:
Firefox 3.6 + Firebug 1.5 + NetExport 0.7.

This post is also translated into Japanese.

Example 1: Simple Page Load

Let's start with a simple page load.

There are two requests in this log. Elapsed time to get the page document was 16 milliseconds and the load event (the red line) was fired in 58ms. Consequently a 5ms XHR was executed. The total elapsed time (from beginning of the first request till the end of the second/last request) is 408 ms. DOMContentLoaded event (the blue line) was fired in 46 ms.

See a tooltip with detailed timing info.

Example 2: Connection Limit

Each browser has a limit for number of simultaneous connections to the same server when downloading a page. If the limit is reached, other resources have to wait in an internal browser queue till a connection is released. See the following two page logs that show how the situation looks like if there is 8 different images on the page (each image takes ~2.5 sec to download).

#1 Cuzillion (max connections == 6)

  • The limit is 6 in Firefox 3.6 by default, so the first six images start downloading immediately after the page document is available (i.e. DOMContentLoaded event fired in Firefox).
  • The other two images have to wait till there is a free connection (yes, that's the light-brown phase).
  • Existing connections are reused, see there is no green (connection) phase for the last two requests.

#2 Cuzillion (max connections == 2)

  • The other log shows what happens if the limit is set to 2 (network.http.max-persistent-connections-per-server == 2). Notice that every image in this test takes ~2.3 sec to load.

This example comes from Cuzillion (made by Steve Souders).

Example 3: Pipelining

This example uses the same page as the previous example (#2) and compares what happens if pipelining is on.

You can see that using pipelining (network.http.pipelining == true) doesn't help in this case - the page actually takes more time to fire the load event. The first six images are again loaded using six different connection, but 7th and 8th image is downloaded using shared connection. It's not clear which connection is actually shared (there are no APIs that would allow Firebug to know), but it's clear that both last two images were downloaded using the same connection, which increased the total time.

Example 4: Persistent Connections

This test case shows impact of HTTP Connection header. This header is used to tell the server whether an existing connection should be closed or kept alive and wait for further requests (which is usually good optimization). See following log that depicts how it looks if the header is set to Keep-Alive (default in HTTP/1.1) or Close.

There are four requests to load the entire test-page. One for the initial page document and three executed by the page. The Connection header is manipulated for the three requests (file1.php, file2.php, file3.php).

#1 Test page (Connection: Keep-Alive)

  • The first page log shows that only one connection was created to download entire page. All three requests executed by the page reused the initial connection. You can see that there is only one green phase (+ a little bit for DNS lookup).

#2 Test page (Connection: close)

  • In the second log, there is a connection created to get the initial page document and this one is reused by the file1.php request. But as it was mentioned, these three requests use Connection: close request header and so, after file1.php, file2.php and file3.php the connection is closed and new one is must be created if there is a further request.

Example 5: Inline Scripts Block

It's not a secret that inline scripts block download of a page. Let's see following log that depicts how this looks from the network activity perspective.

#1 Cuzillion

  • Note the gap between 3td and 4th request. This is caused by a 5 sec inline script execution.

#2 Cuzillion

  • The second page log is showing what happens if the inline script is moved to the bottom of the page. Note that we have got a shorter loading time.

This example comes from Cuzillion.

Example 6: Redirects

This example shows how redirects looks like when reported by the Net panel.

#1 Final Page (one redirect)

  • The redirect is done by the server that has to figure out what is the target file. If the last / was added, the additional redirect wouldn't be necessary since the server knows that the URL points to a directory.

#2 Final Page (infinite redirection)

  • This scenario shows what happens if the redirect links to itself. In Firefox, the maximum number of redirection is limited to 20 (see network.http.redirection-limit preference)

Rss Commenti

35 Comments

  1. [...] Software is hard | Page load analysis using Firebug http://www.softwareishard.com/blog/firebug/page-load-analysis-using-firebug – view page – cached More musings on software development [...]

    #1 Twitter Trackbacks for Software is hard | Page load analysis using Firebug [softwareishard.com] on Topsy.com
  2. [...] C’est ici : Page load analysis using Firebug. [...]

    #2 Note : L’excellent blog Software is hard (que vous devez  […] | Les intégristes
  3. Social comments and analytics for this post...

    This post was mentioned on Twitter by planetmozilla: Jan Odvarko: Page load analysis using Firebug: Page load performance is largely important topic these days and vir... http://bit.ly/6iHl9N...

    #3 uberVU - social comments
  4. [...] the rest here: Software is hard | Page load analysis using Firebug Tags: creativity, data-provided, design, design-trends, every-web, largely-important, [...]

    #4 Software is hard | Page load analysis using Firebug Image
  5. [...] Software is hard | Page load analysis using Firebug Рубрика: Разные рубрики | Метки: firebug, hard, load-analysis, [...]

    #5 Software is hard | Page load analysis using Firebug
  6. [...] Software is hard | Page load analysis using Firebug [...]

    #6 Are You Using Alliances To Build Your Therapy And Health Business? | Business Beauty Wisdom
  7. [...] Software is hard | Page load analysis using Firebug [...]

    #7 Bicep Machine Curls For Women-Are They Effective? – Weight Loss Tips | Women's Health Wisdom
  8. Very nice explanation. Thank you for the post :)

    --
    Maku

    #8 makuchaku
  9. Very useful!I'm from china.

    #9 lisng
  10. [...] is the original post: Software is hard | Page load analysis using Firebug Get 100$ easily on FaceBOOK!!!!!! View admin's Profile      Subscribe via [...]

    #10 Software is hard | Page load analysis using Firebug | Information Technology
  11. [...] Software is hard | Page load analysis using Firebug [...]

    #11 Embarcadero Webinar: Fast-Tracking Data Warehousing & BI Projects … | Business Intelligence Wisdom
  12. [...] Software is hard | Page load analysis using Firebug [...]

    #12 Short-Term Trading: David Rosenberg: Equity Markets Are Lagging … | Investment Finance Wisdom
  13. [...] Software is hard | Page load analysis using Firebug Share and [...]

    #13 Software is hard | Page load analysis using Firebug | Drakz Free Online Service
  14. [...] Read this article: Software is hard | Page load analysis using Firebug [...]

    #14 Software is hard | Page load analysis using Firebug « Drakz Software News Station
  15. @Honza this is really helpfull to test and report improvements. Can you tell me if you forsee a hosted version of the Har viewer? I'm having a few files that are more than 800Kb.

    The embedded version is really neat :)

    #15 Marin
  16. @Marin: the log file is not uploaded to the server, so if you want to preview a HAR file, just open the HAR Viewer (full version) in your browser and drop the file onto the browser window - the preview is generated on the client side. You need Firefox 3.6 that supports file drag'n drop.

    #16 Honza
  17. I meant: would you share, at some point, the code for the embedded iframe you use in this page to load the .hars (/viewer/loader.php) which is not in the repository of your Google Code Harviewer Project :)

    #17 Marin
  18. It's already there, see: har.service.loader.php

    #18 Honza
  19. thx a zillion!

    #19 Marin
  20. [...] Software is hard | Page load analysis using Firebug [...]

    #20 Marketing and Selling: Retail marketting | Key Concepts Marketing Wisdom
  21. [...] Article génial sur le blog de Software is Hard tenu par les auteurs de Firebug expliquant comment u... [...]

    #21 Utiliser correctement Firebug pour analyser les requêtes HTTP
  22. Great article for noobs like me :) it was worth reading, thank you.

    Could you add an example with images hosted on another domain (or sub domain). As far as I know, they would be fetched using 6 more connections per different domain?

    Let's say you have 13 images, 7 on your domain and 6 on another domain. What is the expected behavior? I would guess that 12 images would be loaded in parallel. The 13th image would be loaded as soon as 1 connection is free or as soon as 1 connection for the current domain is free ?

    #22 spirit
  23. [...] Software is hard | Page load analysis using Firebug [...]

    #23 A Brazilian Waxing Accident To Remember – Better Health | Waxing Beauty Wisdom
  24. [...] Page load analysis: 6 examples analyzing data provided by the Net panel. [...]

    #24 Firebug 1.5: a closer look ✩ hacks.mozilla.org
  25. Absolutely amazing work - thank you for the detailed explanations and for the add-on itself!

    #25 Steve
  26. @spirit: the connection limit is per domain so, yes 12 images should be downloaded in parallel and the last one as soon as there is a free connection.

    #26 Honza
  27. Looks nice! I noticed a failure, at least in FF/Win 3.5.7: every time I click a 'Load HAR' button, a page is entered in my history.

    #27 Marcel Korpel
  28. Marcel: Ah, I see it, thanks for noticing! I'll fix it, any tips?

    #28 Honza
  29. [...] the rest here: Software is hard | Page load analysis using Firebug Share and [...]

    #29 Software is hard | Page load analysis using Firebug | www.kotihost.com
  30. [...] Software is hard | Page load analysis using Firebug [...]

    #30 JSP Tutorial – HTML Output from Scriptlets and Declarations … | JSP WebDev Insider
  31. [...] Software is hard | Page load analysis using Firebug [...]

    #31 ゆっくりと… » ウェッブサイトの表示速度を測定するフリーツール集
  32. Hello Honza,
    what does mean question mark in size column in net panel of firebug? For example

    GET xyz.jpg 200OK http://www.xyz.com 10KB
    GET xyw.jpg 200OK http://www.xyz.com 10KB(?)

    I am so curious

    #32 Kamil
  33. @Kamil: The question mark is used in the case when Firebug wasn't successful to find out size of a HTTP response. This is considered rather as a bug and I it should be fixed in Firebug 1.5 + Firefox 3.6 combo. If you still see the problem, please report a new bug (http://code.google.com/p/fbug/issues/entry) and I'll check it out.

    #33 Honza
  34. [...] Blocking (not on the screenshot): Elapsed time spent in a browser queue waiting for a network connection. Displayed only in the case where this situation happens (see also this post). [...]

    #34 justaddwater.dk | Explanation of Firebug Net Panel Findings
  35. Great stuff and thx for publishing those tests!

    #35 Webstandard-Blog

Sorry, the comment form is closed at this time.