During Audit Mode, check file sizes of assets and report large files

[chrisblakley]

When Audit Mode is enabled, add a loop that checks each image and video asset (maybe more? audio, CSS, JS?) and reports when they are over a predefined threshold.

Also consider flagging any usage of .png images at all?

    $('img').each(function() {
        var src = $(this).attr('src');
        var img = new Image();

        img.onload = function() {
            console.log('File size of ' + src + ' is ' +img.fileSize); //<-- Check here if the file is over a set threshold
            //Use img.type for the file type
        };        
    });

Videos can be checked this way:

//Loop through the videos
//...
var video = document.createElement('video');

video.onloadedmetadata = function() {
    console.log('File size of ' + src + ' is ' + formatBytes(video.fileSize) + ' (' + video.type + ' file)');
};

To check JS and CSS file sizes it appears they would need to be re-loaded a second time via XHR to be measured. So that will not be part of the scope of this.

[chrisblakley]

Audit mode was already doing this for both images and videos, but I added a 2nd way of checking via fetch. The above ChatGPT provided methods did not work, but fetching into a blob works perfectly.

I also added a check for the loading attribute and am just calling out any image that isn't being lazy loaded. It will be up to the developer to decide which is appropriate for applying it to.