- This topic has 9 replies, 2 voices, and was last updated 2 years, 9 months ago by David.
-
AuthorPosts
-
July 9, 2021 at 2:27 am #1849685Andrew
Hey Guys
Could not find the answer for this in the forum….
How do I resize the featured image on mobile ONLY.
At the moment I have set the featured image size globally to be ‘medium_large’. If I set it any smaller it looks too small on desktop.
Is there a way I can have ‘medium_large’ on desktop and say ‘medium’ on mobile?
— Some background —
My actual issue is if I don’t delay google tag manager (until first user interaction) I fail LCP on mobile. If I remove the featured image on posts I can pass LCP and don’t delay analytics. So I kinda want my cake and eat it, to have a featured image displayed and don’t need to delay analytics, hence this question)
Cheers guys!
July 9, 2021 at 7:29 am #1849944DavidStaffCustomer SupportHi there,
you can try adding this PHP Snippet which will ‘try to force’ the browser to use 300px image on smaller screens:
function db_modify_srcset_sizes($sizes, $size) { return '(max-width: 420px) 300px, (min-width: 421px) 768px, (min-width: 769px) 1024px, 100vw'; } add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
July 16, 2021 at 6:03 am #1857870AndrewHey David, thanks for your reply
That did not work I am afraid.
Is there a way to move the featured image below the fold on mobile only?
July 16, 2021 at 6:51 am #1857919DavidStaffCustomer SupportWhere did you add the code ? And is it still added ?
July 16, 2021 at 8:26 am #1858165AndrewHey David,
I added it as a PHP Snippet on the front end. I have now removed it.
After additional reading, I see in Page Speed Insights that WordPress 5.5 is Lazy Loading the featured image
I am pretty sure it’s affecting my LCP as it’s above the fold.
Is there a hook or snippet I can use to skip-lazy just on the featured image?
Am running GP Premium
Cheers!
July 16, 2021 at 9:08 am #1858223DavidStaffCustomer Supportthe 5.5 update introduced Browser native lazy loading – which supporting browsers will automatically ignore on images that are above the fold.
If you want to add back that code so i can see what its ( not ) doing
July 16, 2021 at 9:36 am #1858254AndrewHey David
The problem is Google Page Speed Insights itself sees the above the fold feature image as lazy-loaded.
That’s the test I am trying to pass as it impacts my LCP so it would be good to be able to disable the lazy load of the featured image that Wp 5.5 is introducing.
(Need my LCP to score 1.9 or less so when I re-enable Google Tag Manager I still get a passing score under 2.5)
I have re-enabled the snippet, it’s running ‘Only run on site front-end’
Is that correct?
Still looks large on mobile
Let me know if you need me to do anything
Thanks for all your help!
July 16, 2021 at 10:15 am #1858309DavidStaffCustomer SupportNative Browser lazy loading ( which is what WP enables ) works differently to a plugin. I don’t think its required. But you can try the following PHP Snippet:
function db_disable_wp_lazy_single_featured( $default, $tag_name, $context) { if ( is_single() && 'img' === $tag_name && 'wp_get_attachment_image' === $context ) { return false; } return $default; } add_filter( 'wp_lazy_loading_enabled', 'db_disable_wp_lazy_single_featured', 10, 3);
With this and the other code set it to Run Everywhere. And clear any plugin caches afterwards.
July 16, 2021 at 10:39 am #1858331AndrewCheers David
That’s closer I think
One issue remains when I check Page Speed Insights
The skip-lazy is also affecting the 2x featured images called by the ‘latest posts’ hook and also the sidebar image
July 16, 2021 at 12:11 pm #1858390DavidStaffCustomer SupportDo you mean the code i provided above ?
If so – not sure there is much that can be done about that as applies to all wp_attachments -
AuthorPosts
- You must be logged in to reply to this topic.