coach-core/lib/har/performance/imageSize.js

Core package for the Coach.

import * as util from '../util.js';

export default {
  id: 'imageSize',
  title: "Total image size shouldn't be too big",
  description:
    'Avoid having too many large images on the page. The images will not affect the first paint of the page, but it will eat bandwidth for the user.',
  weight: 5,
  severity: 'warn',
  tags: ['performance', 'image'],

  processPage: function (page) {
    let images = page.assets.filter(
      (asset) => asset.type === 'image' || asset.type === 'svg'
    );
    let contentSize = 0;
    let contentLimit = 700_000;
    let score = 100;

    for (const image of images) {
      contentSize += image.contentSize;
    }

    if (contentSize > contentLimit) {
      // TODO reduce the score per 100 kB.
      score -= 50;
    }

    return {
      score: score,
      offending: [],
      advice:
        score < 100
          ? 'The page total image size is ' +
            util.formatBytes(contentSize) +
            ". It's really big. Is the page using the right format for the images? Can they be lazy loaded? Are they compressed as good as they can be? Make them smaller by using https://imageoptim.com/."
          : ''
    };
  }
};