Preload on Page by Page Basis

Resolved optionshme
(@optionshme)

4 years, 6 months ago
Hello, some pages and ad landing pages on our site have “hero images.” We are currently preloading one image (the home page hero image), which is used on a few other landing pages also. However, we have some other hero images that are now being used. Preloading has shown a significant improvement in LCP on PageSpeed Insights, so I would like to preload the other hero images also, but not on every page of course.

I read the info on this topic: https://wordpress.org/support/topic/preload-just-on-one-a-specific-page/ which suggests using the following filter.
```
add_filter( 'autoptimize_filter_extra_tobepreloaded', 'frontpage_specific_preload' );
function frontpage_specific_preload( $preload_array ) {
	if ( is_front_page() ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/tobepreloaded.file';
	}
	return $preload_array;
}
```
I assume I would need to create multiple filters, one for each page I would like to preload an image on. My question is what will ‘frontpage_specific_preload’ and is_front_page become since I will be referencing different pages? Also, where exactly should this code be placed?

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 6 months ago
it would probably have to become something like;
```
add_filter( 'autoptimize_filter_extra_tobepreloaded', 'preload_images' );
function preload_images( $preload_array ) {
	if ( is_front_page() ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/tobepreloaded.file';
	} else if ( strpos($_SERVER['REQUEST_URI'],'/page_123' ) !== false {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/othertobepreloaded.file';
        } else if ( strpos($_SERVER['REQUEST_URI'],'/page_abc' ) !== false ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/yetanothertobepreloaded.file';
        }

	return $preload_array;
}
```
Thread Starter optionshme
(@optionshme)

4 years, 6 months ago
Thanks! So, I will replace the file url’s of course, and then the only other thing that needs replacing is the ‘/page_123’ which would be ‘/stair-lift-ad/’ if the url is https://optionshme.com/stair-lift-ad/ correct?

Where should this be placed in the header.php file?
- This reply was modified 4 years, 6 months ago by optionshme.
Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 6 months ago

So, I will replace the file url’s of course, and then the only other thing that needs replacing is the ‘/page_123’ which would be ‘/stair-lift-ad/’ if the url is https://optionshme.com/stair-lift-ad/ correct?

that is … correct! 🙂

Where should this be placed in the header.php file?

The easiest & safest solution is using the code snippets plugin.
Thread Starter optionshme
(@optionshme)

4 years, 6 months ago
That did the trick, works great. Thank you for your responsiveness!

Just one little note, there was a parentheses missing after the first “false.” I have added it to the code for anyone who wishes to reference the post at a later date. Thanks again!
```
add_filter( 'autoptimize_filter_extra_tobepreloaded', 'preload_images' );
function preload_images( $preload_array ) {
	if ( is_front_page() ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/tobepreloaded.file';
	} else if ( strpos($_SERVER['REQUEST_URI'],'/page_123' ) !== false ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/othertobepreloaded.file';
        } else if ( strpos($_SERVER['REQUEST_URI'],'/page_abc' ) !== false ) {
		$preload_array[] = 'https://yoursite.com/wp-content/themes/yourtheme/yetanothertobepreloaded.file';
        }

	return $preload_array;
}
```
- This reply was modified 4 years, 6 months ago by optionshme.
Plugin Author Optimizing Matters
(@optimizingmatters)

4 years, 6 months ago

Super optionshme 🙂

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Preload on Page by Page Basis’ is closed to new replies.