- This topic has 8 replies, 4 voices, and was last updated 3 years, 2 months ago by David.
-
AuthorPosts
-
August 23, 2020 at 6:43 pm #1415391Bevan
Hi,
I’m trying to improve my Largest Contentful Paint and looking at the performance of my site I can see that the page hero element is the LCP.
When I am on a mobile device the image that is being used is the desktop version at 2560×1200. Is there a way to have the optimised version of this file?
Thanks,
BevanAugust 24, 2020 at 3:00 am #1415700LonginosIf you use the image in the html (NOT as a background image) and the image is in the media gallery, you can try this:
1.- Open a new post
2.- Insert a image block
3.- Select the image you use in the page hero
4.- Preview the post
5.- View the html from the preview
6.- Copy the image element. This element has a srcset with imaes for diferent sizes.
7.- Paste it in the html of the page hero.August 24, 2020 at 3:37 am #1415758DavidStaffCustomer SupportHi there,
i would suggest optimizing the original image. It is 800kb+ – with a desktop optimization app you should be able to get it down to around 100kb without noticeable quality loss.
August 24, 2020 at 9:40 pm #1416936BevanHi David,
Thanks for the response.
I’ve played around with the Lightroom export settings and also compressing the image with JPEGmini but I have not been able to compress the image to around 100kb without compromising the image quality. Is there a tool that you can recommend?
I have also tried to cropping the image to 1500 pixels wide as we do not have many users who are on screens wider than this.
Regards,
BevanAugust 25, 2020 at 4:15 am #1417242DavidStaffCustomer SupportI use ImageOptim but its Mac only.
Cropping the image should help. And ideally any savings in file size without harming quality is a benifit….However,
Try adding this PHP Snippet to your site:
add_filter( 'generate_page_hero_background_image_url', function( $image_url, $options ) { if ( wp_is_mobile() ) { $image_url = get_the_post_thumbnail_url( get_the_ID(), 'large' ); } return $image_url; }, 10, 2 );
This will swap out the background image IF a mobile device is detected for the
large
attachment size.You can if you want register a new size using this function:
January 27, 2021 at 12:17 am #1635158MarkusHi David,
thanks for your useful PHP-Snippet. It works great on my end. My problem is, that my blog is about photography and I often need full size (1440px) images to let the visitor compare for example details and sharpness of different lenses.
My thought was now to let it on desktop in full size. On mobile I would like to serve the former “full-size” image just in size “large”.
Do you have another PHP Snippet to switch the images on mobile to size “large”? Just like the hero background, but for all other images in the blog post content?
Or do have another solution for my issue?
With kind regards,
MarkusEdit: Just noticed WordPress is doing this by default since version 4.4. I think my comment is not valid anymore.
January 27, 2021 at 7:36 am #1635776DavidStaffCustomer SupportHi there,
you can use this Snippet to set the heros default background image size to Full:
add_filter( 'generate_hero_thumbnail_id_size', function() { return 'full'; } );
Then use the above snippet – to replace the image for mobile.
January 28, 2021 at 12:11 pm #1637426MarkusHi David,
thanks for your reply. I added the Code for the page hero image.
Google Pagespeed Insights is now saying: Unable to locate resource (of the photo in L size (1024px). https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fjournal.markusthoma.com%2Fsony-85mm-1-4-gm-test-review%2F
What can I do? Chrome’s network Tab doesn’t complain.
And another question: Is it possible to tell the browser to load the background image at first? Sometimes it is really far behind in the waterfall diagram. Do you have a snippet for “preloading” the background image of every post’s header? I am using native wordpress lazy loading.
With kind regards,
MarkusEdit: I think I found a solution with the following Code Snippet:
add_action( 'wp_head', function(){ if( is_single() ) { if ( wp_is_mobile() ) { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'large'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; } else { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; } } else { echo ''; } });
Is this right? Or do you know a better solution? It should only work in Posts.
January 29, 2021 at 2:00 am #1637861DavidStaffCustomer SupportThat looks good to me – and the results look correct on the front end of the site.
-
AuthorPosts
- You must be logged in to reply to this topic.