1

My website has a few .PNG images animated at the very start of my Contact page. Those images are a bit heavy (because they have transparent background), so the animation starts with some of them loading during the animation, looking pretty bad.

So, to fix it, I must add this line <link rel="preload" as="image" href="url-of-the-image.png"/> to the <head>.

To achieve it, I'm using Snippets plugin. If I'm not mistaken, the snippet should like this:

add_action( 'wp_head', function () { ?>

function my_custom_js() {
    echo '<link rel="preload" as="image" href=href="url-of-the-image.png"/>';
}

<?php } );

The thing is that the very same page (my Contact page) is different for mobile devices: it doesn't use those .PNG images because it would be too much loading time for a phone.

This leads to my question: Is there a way to exclude mobile devices from the preloading tag I must add to the head?

Improve this question

2 Answers 2

Reset to default
1

You can use wp_is_mobile() to check whether it is a mobile device or desktop user.

<?php if ( wp_is_mobile() ) : ?>
    /* Display and echo mobile specific stuff here */
<?php else : ?>
    /* Display and echo desktop stuff here */
<?php endif; ?>
Improve this answer
1
  • How would the final code be considering I have to add it through Snippets Plugin in Wordpress? (Thanks! Seems like what I need, but my coding skills are bad so I don't know where to insert that piece of code)
    – Ernest
    Commented Oct 3, 2021 at 19:17
1

Ok, so I ended up using "prerender" instead of "preload" because it suited my circumstances (prerender starts rendering target page before the user visits it, in my case it was a better fit because the page I wanted to preload was not the front-page).

For anyone who's interested in knowing about the responsiveness of preloading or prefetching, the property "media" is what you're looking for. It should look like this:

<link rel="preload" as="image" href="imageURLhere.png" media="(min-width: 768px)"/>

...or if you want to target a whole page to pre-render:

<link rel="prerender" href="targetPageURL/" media="(min-width: 768px)">

This way it should only preload or prerender if the viewport is within the media conditions range.

Hope it helps! Cheers

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.