Tool to measure Render time

Question

Is there a tool out there to measure the actual Render time of an element(s) on a page? I don't mean download time of the resources, but the actual time the browser took to render something. I know that this time would vary based on factors on the client machine, but would still be very handy in knowing what the rendering engine takes a while to load. I would imagine this should be a useful utility since web apps are becoming pretty client heavy now. Any thoughts?

Solution 1

I've been using this script to analyze rendering time of some pages:

<script language="JavaScript">
<?

    $output = str_replace('=', 'A', base64_encode(file_get_contents('data.txt')));

    echo "\tCode = \"" . substr($output, 0, 512) . "\"";
    $size = strlen($output);
    for ($i = 512; $i < $size; $i += 512)
        echo "\n\t     + \"" . substr($output, $i, 512) . "\"";
    echo ";\n";

?>
    Data = "";
    Dict = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

    j = Code.length -3;
    for (i = 0; i < j; i += 4) {
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i    )) << 2) | (Dict.indexOf(Code.charAt(i + 1)) >> 4)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 1)) << 4) | (Dict.indexOf(Code.charAt(i + 2)) >> 2)) & 0xff);
        Data += String.fromCharCode(((Dict.indexOf(Code.charAt(i + 2)) << 6) | (Dict.indexOf(Code.charAt(i + 3))     )) & 0xff);
    }

    time_start = (new Date).valueOf()/1000;
    document.write(Data);
    time_elapsed = (new Date).valueOf()/1000 - time_start;

    alert(time_elapsed);

</script>

Part PHP, part JavaScript. data.txt is the file containing the HTML to analyze. Tested on IE and FF.

Solution 2

You can check out YSlow.

Edit: It seems to me that firebug shows the rendering time with a blue and red line in the net panel.

Solution 3

I would suggest YSlow.

It not only measures performance times of the elements in your page but it also analyzes your page design to suggest how you can make performance improvements. It is one of the tools they used in the development of Stack Overflow.

Yahoo! YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page's performance, summarizes the page's components, displays statistics about the page, and provides tools for performance analysis, including Smush.it™ and JSLint.

Solution 4

Firebug for Firefox has it integrated in the "Net"-Tab.

Needs Firefox (I did it with version 12.0) configuration modified, type about:config in address bar and then search for dom.send_after_paint_to_content

Set dom.send_after_paint_to_content to true.

MozAfterPaint is then painted as small green vertical lines in the network loading timeline in addition to the blue (DOMContentLoaded) and red (load) lines.

View more solutions

Comments

[Admin]

I looked at YSlow. It gives you an overall view of performance, load times, and cache stats, but nothing on how long a specific element took to render as far as I saw. Am i missing something?

[Admin]

How can I see the performance times of the elements on the page with YSlow? I tried looking for it, can't find it...

[Havenard]

PS: It won't consider time needed to load linked resources, like external .CSS files or images, unless you're using mod_expire at them. Maybe you want to hook the document.body.onload too, but then the result will also vary by your connection speed and latency.

[nerdess]

i've set dom.send_after_paint_to_content = true in FF 19.0.2 but don't get any green line....?!