perf.ts — astro Source File

Source Code

import type { AuditRuleWithSelector } from './index.js';

// A regular expression to match external URLs
const EXTERNAL_URL_REGEX = /^(?:[a-z+]+:)?\/\//i;

export const perf: AuditRuleWithSelector[] = [
	{
		code: 'perf-use-image-component',
		title: 'Use the Image component',
		message: 'This image could be replaced with the Image component to improve performance.',
		selector: 'img:not([data-image-component])',
		async match(element) {
			// Skip images inside framework components (React, Vue, Svelte, etc.)
			// These are wrapped in astro-island and can't directly use Astro's Image component
			if (element.closest('astro-island')) return false;

			const src = element.getAttribute('src');
			if (!src) return false;

			// Don't match data URIs, they're typically used for specific use-cases that the image component doesn't help with
			if (src.startsWith('data:')) return false;

			// Ignore images that are smaller than 20KB, most of the time the image component won't really help with these, or they're used for specific use-cases (pixel tracking, etc.)
			// Ignore this test for remote images for now, fetching them can be very slow and possibly dangerous
			if (!EXTERNAL_URL_REGEX.test(src)) {
				const imageData = await fetch(src).then((response) => response.blob());
				if (imageData.size < 20480) return false;
			}

			return true;
		},
	},
	{
		code: 'perf-use-loading-lazy',
		title: 'Unoptimized loading attribute',
		message: (element) =>
			`This ${element.nodeName} tag is below the fold and could be lazy-loaded to improve performance.`,
		selector:
			'img:not([loading]), img[loading="eager"], iframe:not([loading]), iframe[loading="eager"]',
		match(element) {
			const htmlElement = element as HTMLImageElement | HTMLIFrameElement;

			// Ignore elements that are above the fold, they should be loaded eagerly
			let currentElement = element as HTMLElement;
			let elementYPosition = 0;
			while (currentElement) {
				elementYPosition += currentElement.offsetTop;
				currentElement = currentElement.offsetParent as HTMLElement;
			}
			if (elementYPosition < window.innerHeight) return false;

			// Ignore elements using `data:` URI, the `loading` attribute doesn't do anything for these
			if (htmlElement.src.startsWith('data:')) return false;

			return true;
		},
	},
	{
		code: 'perf-use-loading-eager',
		title: 'Unoptimized loading attribute',
// ... (89 more lines)