How can I get which element has maximun weight in the document or takes more timeto load? In this instance it is the image..
<html>
<body>
<p>This is light text</p>
<p>This is the heavy text </p>
<img src="http://www.lorempixel.com/400/400" alt="100" width="100" height='100' />
</body>
</html>
いいえ、DOM要素には「重み」がないためです。バイトサイズのようにサイズについて話しているのではないかと思いますが、HTTPの仕組みではないため、まだ違います。HTMLドキュメント全体が1つのファイルとしてダウンロードされるため、<p>他の<p>要素よりも「大きい」要素はありません。それらは同じHTTPリクエストの一部として同時にダウンロードされ、どちらも「ロードに時間がかかる」ことはありません。
ページを構成する実際の個別のリソースを確認したい場合は、ブラウザにこれをプロファイリングする方法があります。Chromeの開発者ツールには、非常に便利な[ネットワーク]タブがあります。