- This topic has 25 replies, 2 voices, and was last updated 3 years, 7 months ago by David.
-
AuthorPosts
-
February 5, 2020 at 9:10 am #1155656Shrawan
Hello team,
On my site, the homepage thumbnails for the posts as well as the thumbnails when I generate a gallery are all full size images that are just resized and displayed. None of the images appear to be cropped versions and the loading times are hugely affected by this.
I had opened a similar ticket before and the issue was temporarily resolved when I used the Code Snippets plugin and added this code –
add_filter( ‘generate_page_header_default_size’, function( $size ) {
if ( ! is_single() ) {
return ‘medium’;
}return $size;
} );—
But now even with the code activated all homepage featured images are just full res images and you can also see the same issue with the 1280 px images which are just shrunk and displayed in gallery. 2 example URLS attached.
February 5, 2020 at 11:03 am #1155782DavidStaffCustomer SupportHi there,
Looking at your sites home page first.
I can see all the src-set images in the HTML and on a GT Metrix test it is requesting the 768px image.To make it request a smaller image you can change the width of the Archive Featured image in Customizer > Layout > Blog –> Featured images. Setting it to 300px should work.
The single post looks fine – no issues reported aside from the Related Post thumbnails in the sidebar which are 50px and are using the 150px thumbnails size.
February 6, 2020 at 6:40 pm #1157241ShrawanHi David,
The thumbnails in the single post (viewing on a Mac) appear to be just reduced versions of the full size images and not the generated 150 px resolution images (As you see on the sidebar). Is it possible that when we display thumbnails inside the post, we can request 150 px images which when clicked leads to the full size image?
February 7, 2020 at 2:54 am #1157575DavidStaffCustomer SupportHmmm – maybe a plugin such as the lazyloader is interfering with the thumbnail creation as this is a WP thing not GP.
OK – so in Customizer > Layout > Blog –> Featured Images > Post you could set the width to 150px.
Add this PHP snippet to the site to create a link to the Large URL:add_filter( 'generate_single_featured_image_html', 'custom_add_post_thumbnail_link',25,1 ); function custom_add_post_thumbnail_link($image_html) { if( $image_html == '' ) { $image_html = $image_html; } else { $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); $linked_html = '<a href="' . $large_image_url[0] . '">' . $image_html . '</a>'; } return $linked_html; }
A lightbox plugin could be used to open the image whilst remaining in the single post..
July 18, 2020 at 6:07 am #1367601ShrawanHello team,
I checked my website on the W3 validator and I see a bunch of errors mainly on ‘sizes’ ‘align’ and ‘type’ attribute. I’ve pasted the link to W3 validator in my first reply (in the box where the URL is hidden). Could you please take a look and let me know your feedback on this?
July 18, 2020 at 7:01 am #1367648DavidStaffCustomer SupportHi there,
the type attribute warnings are a requirement of WP coding standards. They can be ignored.
You’re lazy loader is inserting placeholders for your images, which is why those errors are being displayed. That site does not fire the JS required to swap the images as it would do on load. This also can be ignored.
July 19, 2020 at 9:02 am #1368809ShrawanHi David,
Just another quick question on this – On my Google Pagespeed report, I came across one ‘ Largest Contentful Paint element – 1 element found ‘.
I’ve added the Pagespeed URL in my first reply (in the box where the URL is hidden), would you please take a look and tell me what is causing this?
Thanks
July 20, 2020 at 1:56 am #1369340DavidStaffCustomer SupportLCP elements get reported when a site loads in stages.
They are the largest elements in pixels.
That information is to help users ascertain and issues with your LCP times.In the case of that website you have a long LCP time because that image is being lazy loaded. Exclude above the fold images from lazy loading to reduce LCP time.
July 20, 2020 at 3:04 am #1369399ShrawanHey David, I am using Sitegound’s default Optimizer Plugin for lazy load and there is no specific option for enabling or disabling above the frame lazy load. However I do have a small box into which I can add a CSS class – https://imgur.com/a/kl5nArA
How can i disable above the fold images with this plugin?
July 20, 2020 at 3:56 am #1369436DavidStaffCustomer SupportTry adding the PHP snippet i provide here:
Then you can use the
no-lazy
class to exclude it.July 20, 2020 at 4:12 am #1369441ShrawanHi David, added your code using the Code Snippets plugin (and activated it to Run on the front-end), but there is no change in the google pagespeed report.
Could you please check my screenshot above? Should I replace ‘no-lazy’ in your code with ‘skip-lazy’ for this to work on my site?
July 20, 2020 at 4:16 am #1369442DavidStaffCustomer SupportIs the code still added to your site ?
If so can you disable SG Optimizer so i can take a look.July 20, 2020 at 4:19 am #1369448ShrawanHi David, added your code using the Code Snippets plugin (and activated it to Run on the front-end), but there is no change in the google pagespeed report.
Could you please check my screenshot above?
Should I replace ‘no-lazy’ in your code with ‘skip-lazy’ for this to work on my site?
Or should I just add your code and include the term ‘no-lazy’ to the field under ‘Exclude from Lazy Load ‘ in the SG Optimizer plugin setting?
July 20, 2020 at 4:51 am #1369473DavidStaffCustomer SupportCan you set the code to Run Everywhere.
Should I replace ‘no-lazy’ in your code with ‘skip-lazy’ for this to work on my site?
You can use whatever class as long as its included in ‘Exclude from Lazy Load ‘ field.
July 20, 2020 at 5:32 am #1369512ShrawanTried both, but to no effect, it still shows the same thing.
-
AuthorPosts
- You must be logged in to reply to this topic.