chrisblakley / Nebula

Nebula is a WordPress theme framework that focuses on enhancing development. The core features of Nebula make it a powerful tool for designing, developing, and analyzing WordPress websites consistently, yet its deliberately uncomplicated code syntax also serves as a learning resource for programmers themselves.
https://nebula.gearside.com
GNU General Public License v3.0
144 stars 36 forks source link

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

Closed chrisblakley closed 9 months ago

chrisblakley commented 9 months ago

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 commented 9 months ago

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.