- This topic has 20 replies, 3 voices, and was last updated 3 years, 8 months ago by David.
-
AuthorPosts
-
July 17, 2020 at 4:09 pm #1367253Margaret
Hello, I am also having an issue with image sizes.
Google Search Console is giving me the following error: “LCP issue: longer than 4s (mobile).” Google PageSpeed Insights says that the “Largest Contentful Paint element” is the featured image at the top of the page.
When I inspect that image, I can see that width=”2048″ and height=”869″, and srcset includes the same image URL at 2048w, 300w, 1200w, 768w, and 1536w. In my custom css, I have the featured image width set to 100vw.
Is there a way that the browser can load only the size of the image needed, rather than loading every size? My overall goal is to solve the LCP issue and achieve faster page speed.
Thank you!
July 18, 2020 at 3:13 am #1367511DavidStaffCustomer SupportHi there,
Browsers will (should) only load the src-set image that best fits the visible size required.
Unless you use CSS to re-size them – then the browser selects the largest available.
So its best to avoid using CSS to avoid resizing images if you can.As the image is above the fold i would also exclude it from lazy loading. This may cause a slight increase in FCP but should reduce your LCP.
July 18, 2020 at 11:09 am #1367977MargaretThanks, I removed the following css:
.featured-image {
max-width: 100vw !important;
}Is there a way to set the featured image to full width without using css? I’ve tried expanding the container width, which works, but it also expands the container for the entire site. I’d like to have a full width featured image with a container of 1100 px beneath it.
July 18, 2020 at 12:39 pm #1368039MargaretI am using WP Rocket to Lazy Load images. I looked up how to disable lazy load for specific images, and found the following resource:
It says to add class=”skip-lazy” to . How do I access the html tag for the featured image?
Thanks!
July 18, 2020 at 3:04 pm #1368118DavidStaffCustomer SupportTry adding this PHP Snippet to add the class:
function db-add-featured-image-class($attr) { remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class'); $attr['class'] .= ' skip-lazy'; return $attr; } add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
July 18, 2020 at 10:13 pm #1368330MargaretThanks! Should I add that to functions.php or a different PHP file?
Regarding the featured image width, is there a way to set the featured image to full width without using css? I’ve tried expanding the container width, which works, but it also expands the container for the entire site. I’d like to have a full width featured image with a container of 1100 px beneath it.
July 19, 2020 at 3:14 am #1368444DavidStaffCustomer SupportIf you want to maintain the responsive src-set sizing the best you can do is:
.featured-image { max-width: 100% !important; }
But it will only be as wide as the original image size.
All other methods that force resize the image will break the src-set.
July 20, 2020 at 1:02 pm #1370076MargaretThanks very much! Regarding the PHP snippet for the “skip-lazy” class, which PHP file should that be placed in?
July 20, 2020 at 3:26 pm #1370171TomLead DeveloperLead DeveloperHi there,
That code can be added using one of these methods: https://docs.generatepress.com/article/adding-php/
July 21, 2020 at 11:43 am #1371208MargaretThanks! I installed the Code Snippet plugin, and duplicated the “Example JavaScript snippet.” I cleared out everything in the box and pasted in the PHP snippet:
function db-add-featured-image-class($attr) { remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class'); $attr['class'] .= ' skip-lazy'; return $attr; } add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
It is giving me the following error:
“The snippet has been deactivated due to an error on line 0:
Parse error: syntax error, unexpected end of snippet”How should I change the PHP to fix this error?
In addition, for this snippet to work, do I need to manually add the skip-lazy class to the HTML tag for the featured images? If so, how do I access the HTML tag for the featured images?
July 21, 2020 at 3:20 pm #1371432TomLead DeveloperLead DeveloperTry this instead:
add_filter( 'wp_get_attachment_image_attributes', function( $attr ) { $attr['class'] .= ' skip-lazy'; return $attr; } );
This function should add the class automatically for you.
July 22, 2020 at 1:45 pm #1372667MargaretThank you! That snippet seems to have worked.
Results:
LCP mobile: 3.2 s
LCP desktop: 1.1 s(Before adding the Code Snippet plugin and PHP snippet, LCP mobile was over 4 seconds, and LCP desktop was over 2.5 seconds.)
July 23, 2020 at 9:41 am #1373758TomLead DeveloperLead DeveloperGlad we could help! 🙂
July 23, 2020 at 1:19 pm #1373974MargaretHi again,
Sorry to open this back up — I noticed that the PHP snippet actually added the ‘skip-lazy’ class to all images on the website. I only want to add the ‘skip-lazy’ class to featured images, because they are above the fold. How could I edit the PHP snippet to add the ‘skip-lazy’ class to featured images only, while leaving lazy load enabled for all other images?
July 24, 2020 at 1:29 am #1374441DavidStaffCustomer SupportThat code should only affect the Featured images.
Can you re-add the code and let us take a look ? -
AuthorPosts
- You must be logged in to reply to this topic.