Circumstances:

Web site Construction

My WordPress web site is used as presentation and portfolio for my graphic design companies. Visible influence is essential for me, so most of my pages comprise massive background hero picture as first impresions and/or entrance animations.

Languages

Is related to share that the entire pages have two variations: one for english and one for spanish. It issues as a result of I am making an attempt to preload particular photos for each variations of a web page (instance: Contact web page in english and Contact web page in spanish each comprise the identical photos)

Related Plugin for the subject

Code Snippets is the plugin I will be utilizing so as to add the preload tag to the headers.

WebP Converter for Media is the plugin I exploit for compression, changing recordsdata in normal JPEG, and PNG codecs with WebP format.

The issue:

Regardless that I serve static Cached variations of the web site and use a compression plugin to minify the photographs weight, the very first photos of every web page load on the go (for instance: in the course of the doorway animation) and ruins an enormous a part of the expertise.

Right here you’ll be able to see one in every of my web site’s pages to know what I imply.

The answer I am aiming for:

I must preload these "first impression" photos by including a <hyperlink> tag utilizing rel="preload", specifying the URLs for every of these photos. The tag ought to solely be added to the web page that makes use of these photos.

The code:

I do know nothing of PHP, so the next code might need a number of rookie errors as a result of it is a copy-paste of various articles I’ve discovered.

(the code is supposed to be inside a CodeSnippets snippet, aiming for the Contact web page in spanish and english, with IDs equal to 5135 and 2061 respectivly)

add_action( 'wp_head', 'preload_page_contact' );
    perform preload_page_contact(){
        if(is_single( array( 5135, 2061 )) {  ?>
            <hyperlink rel="preload" as="image" href="image1URLhere.webp" media="(min-width: 768px)"/>
            <hyperlink rel="preload" as="image" href="image2URLhere.webp" media="(min-width: 768px)"/>
            <hyperlink rel="preload" as="image" href="image3URLhere.webp" media="(min-width: 768px)"/>
        <?php  }
    };
<?php } );

So far as I do know the next code targets a particular web page with ID=5135

if(is_single( '5135' )) {  ?>

However I would like to focus on each english and spanish model. So I learn that the next array returns true if it matches one or the opposite:

if(is_single( array( 5135, 2061 )) {  ?>

It does not work. It states that "e" is undefined. So I am most likely lacking one thing.

---

An additional query I’ve obtained regarding this very matter is the next:

Ought to I exploit the URL of the unique picture (PNG/JPG) or the URL of the compressed (WEBP)?