README.md

Benchmark for auto_sizes_update_content_img_tag

Profile a modified version of auto_sizes_update_content_img_tag to see if we can speed it up.

See PR WordPress/performance#1471

Result: This comparison shows that while both functions( Current and new that uses WP_HTML_Tag_Processor) are very fast, the new function (Use with WP_HTML_Tag_Processor) still takes almost twice the time to execute compared to the first function, as reflected in the ~97% increase in time.

Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 9.1886520385742E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.8219947814941E-6 Change: 98.3%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 4.7612190246582E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 9.7560882568359E-7 Change: 104.9%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 5.1116943359375E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.0497570037842E-6 Change: 105.4%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 5.3501129150391E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.014232635498E-6 Change: 89.6%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 6.6995620727539E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.2216567993164E-6 Change: 82.3%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 5.7649612426758E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.1348724365234E-6 Change: 96.9%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 5.4311752319336E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.1184215545654E-6 Change: 105.9%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 6.1535835266113E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.1684894561768E-6 Change: 89.9%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 5.7220458984375E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 1.0898113250732E-6 Change: 90.5%
Average time spent for 1000 x 1 iterations: auto_sizes_update_content_img_tag() - 4.6300888061523E-7 auto_sizes_update_content_img_tag_with_html_tag_processor() - 9.6726417541504E-7 Change: 108.9%

html-api-benchmark.php

<?php

// Bootstrapping.

define('WP_USE_THEMES', true);

/** Loads the WordPress Environment and Template */
require ('wp-load.php');

// Setup.


$images =[
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ],
	[ '<img src="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg" srcset="https://pd.w.org/2024/08/36566abfcb2952e20.99062056-300x225.jpg 300w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1024x768.jpg 1024w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-768x576.jpg 768w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-1536x1152.jpg 1536w, https://pd.w.org/2024/08/36566abfcb2952e20.99062056-2048x1536.jpg 2048w" sizes="(max-width: 650px) 100vw, 650px" loading="lazy">' ]
];

$repetitions = 1000;
$iterations  = 1;

$stringcount = count( $images );

function microtime_float() {
	list( $usec, $sec ) = explode( ' ', microtime() );
	return ( (float) $usec + (float) $sec );
}


function auto_sizes_update_content_img_tag( $html ): string {
	if ( ! is_string( $html ) ) {
		$html = '';
	}

	// Bail early if the image is not lazy-loaded.
	if ( false === strpos( $html, 'loading="lazy"' ) ) {
		return $html;
	}

	// Bail early if the image is not responsive.
	if ( 1 !== preg_match( '/sizes="([^"]+)"/', $html, $match ) ) {
		return $html;
	}

	// Don't add 'auto' to the sizes attribute if it already exists.
	if ( auto_sizes_attribute_includes_valid_auto( $match[1] ) ) {
		return $html;
	}

	$html = str_replace( 'sizes="', 'sizes="auto, ', $html );

	return $html;
}

function auto_sizes_update_content_img_tag_with_html_tag_processor( $html ): string {
	if ( ! is_string( $html ) ) {
		$html = '';
	}

	$processor = new WP_HTML_Tag_Processor( $html );

	// Bail if there is no IMG tag.
	if ( ! $processor->next_tag( array( 'tag_name' => 'IMG' ) ) ) {
		return $html;
	}

	// Bail early if the image is not lazy-loaded.
	if ( 'lazy' !== $processor->get_attribute( 'loading' ) ) {
		return $html;
	}

	$sizes = $processor->get_attribute( 'sizes' );

	// Bail early if the image is not responsive.
	if ( ! is_string( $sizes ) ) {
		return $html;
	}

	// Don't add 'auto' to the sizes attribute if it already exists.
	if ( auto_sizes_attribute_includes_valid_auto( $sizes ) ) {
		return $html;
	}

	$processor->set_attribute( 'sizes', "AUTO, $sizes" ); // Upper-case AUTO just to make it clear when this version is running.

	return $processor->get_updated_html();
}

function auto_sizes_attribute_includes_valid_auto( string $sizes_attr ): bool {
	$token = strtok( strtolower( $sizes_attr ), ',' );
	return false !== $token && 'auto' === trim( $token, " \t\f\r\n" );
}

// Profiling.

for ( $repetition = 0; $repetition <= $repetitions; $repetition ++ ) {

	if( $repetition == 0 ) {
		continue;
	}

	$time_start = microtime_float();

	for ( $index = 0; $index < $iterations; $index ++ ) {
		$image  = $images[ $index % $stringcount ];
		$result = auto_sizes_update_content_img_tag( $image );
	}

	$time_end                    = microtime_float();
	$auto_sizes_time[ $repetition ] = $time_end - $time_start;

	$time_start = microtime_float();

	for ( $index = 0; $index < $iterations; $index ++ ) {
		$image  = $images[ $index % $stringcount ];
		$result = auto_sizes_update_content_img_tag_with_html_tag_processor( $image );
	}

	$time_end                        = microtime_float();
	$new_auto_sizes_time[ $repetition ] = $time_end - $time_start;
}

$auto_sizes_time_avg     = array_sum( $auto_sizes_time ) / $repetitions;
$new_auto_sizes_time_avg = array_sum( $new_auto_sizes_time ) / $repetitions;
$percentage           = round( $new_auto_sizes_time_avg / $auto_sizes_time_avg * 100, 1 ) - 100;

printf( "Average time spent for ${repetitions} x ${iterations} iterations:\n    auto_sizes_update_content_img_tag() - ${auto_sizes_time_avg}\nauto_sizes_update_content_img_tag_with_html_tag_processor() - ${new_auto_sizes_time_avg}\n\nChange: ${percentage}%%\n" );

Instead of microtime_float() you can just use microtime( true ) which returns the float value instead.