CODEWITHSUNDEEP
javascripthtmlperformancemetadataresource-timing-api
anjanb
anjanb

Reputation: 13867

How to get the Size of a webpage resource like javascript, css, image, etc

The w3c resource Timing API gives a mechanism to find the timing details of loading a resource like .js, .css, .gif, font, etc. However, current implementations haven't yet implemented returning the size of the resource (http://www.w3.org/TR/resource-timing/#performanceresourcetiming transferSize).

Till the time browser vendors implement the attribute "transferSize", how are application developers or tool vendors to determine the size of a given resource?

Upvotes: 2

Views: 1457

Answers (2)

passThru
passThru

Reputation: 1

Fast-forward many years later...

var Url=''; // paste a resource url in here    

fetch(Url).then(response=>{


 // add code here to process the result or send to a container like in this simple example:

 Z.innerHTML=Number(response.headers.get('Content-Length'));


}).catch(error=>{Z.innerHTML='error';});

Container waiting for the async result to arrive...

<span id="Z"></span>

Upvotes: -1

user5466402
user5466402

Reputation:

As far as I know you cannot use JavaScript to access resources length. The only ways that I found using scripts are with PHP, for example this old StackOverflow question that basically describes this method as the best to retrieve the length of remote files, such as css, js, etc. without downloading them. As you said it hasn't been implemented yet a property to access the size of the files. I also link you this other StackOverflow question because it mentions a tool developed by Google called speedtracer that allows you to analyze your page loading time and other things.

I hope this helped you :)

Upvotes: 1

Related Questions