Tool To Measure Render Time

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

Solution 1:

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 2:

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 3:

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 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.