[Resolved] Masonry

[Garth Dryland]

Yes, the issue only occurs when one or the other plugin is used however as both plugins have literally the same things going on and my host stated in words to the effect that both of these lazy loaders work in much the same way, therefore I see it as being highly likely that two different plugins from two different developers would display literally identical issues without there being another element in play. Those being GeneratePress, GP Premium and WordPress itself, plus my host along with cloudflare.

Unless there’s another theme I could install which you see working much the same as GP re masonry so I could see what happens there, I would have to say the chance of it being the lazy load plugins is pretty slim I would suggest.

But hey I’m not a skilled coder, I’m pretty much going off a process of elimination and I cant eliminate GeneratePress to see what happens, so at this point I’m kind of stuck unless you have a better suggestion.

[David]

I just wanted to be clear up that the issue wasn’t present when lazy loading was disabled.
Lets get into the details

The Browser loads the HTML DOM tree, and its Layout API calculates the necessary sizing and spacing for all elements to be displayed on the screen. This includes calculating the aspect ratio of any <img> elements so it can calculate its height and reserve the necessary space for that image before it is loaded.

The masonry script takes these measurements to calculate the height of the grid container, and do all the fancy stuff of calculating their relative positions.

And this works absolutely fine, until we add lazy loading images.

So what happens there:

On load, the lazyloader script scrubs all image srcs and replaces it with its own placeholder. Now if the placeholder images aspect ratio was the same as the original image source then the spacing the browser would reserve for it would be identical.

However that is not necessarily the case.

First image you can see the outputted lazyloaded <img> on the left, with its output dimensions.

https://www.screencast.com/t/Hjkvlll6

Note the sizes are 308 x 69. The height here is whats important.
But on the right we can see the placeholder <img> that the Lazyloader outputs a 1×1 pixel ( natural source image ) which is sized to 308 x 308.

Second image i am inspecting the same <img> before it gets scrolled into view:

https://www.screencast.com/t/hdyld9POm

And you cans see the size the browser has reserved for it is 308×308.

This means the browser has reserved more space for the image than is required on initial load.
And in turn the Masonry script uses that in its calculations.

So in my opinion the issue is more to do with the lazyloader not preserving aspect ratios in its placeholder images.

And to cover that, i scratched my head as to why it wasn’t an issue on Page 3 onwards, and thats because theirs no lazyloaded images, but there is lazy loaded Video iframes, which DO preserve the correct sizes on load.

Maybe a different lazy loader would be the best solution. Or as you have so little featured images, to disable lazy image loading on the archives.

[Garth Dryland]

Hummm interesting. Seems to me this issue should be something my host could take care of. I know without even looking that the video ratio is not 1 to 1 so if the videos are fine then the lazy loader must be calculating those on a pixel by pixel basis and not 1 x 1 or they would also be doing the same thing, so surely my host could recode the plugin to make a pixel by pixel calculation replicating the correct ratio as opposed to using 1 x 1.

[David]

The video lazy loader will be a completely different script to the image lazyloader. But they got that one right. Might be worth asking them about the above issue.

As a note:
Other lazy loaders, like the one used in Autoptimize, generates a dynamic SVG for its placeholders which do preserve the aspect ratio.
I thought it best to check, so i ran a test on a local install and the masonry works as expected.

[Garth Dryland]

Just updating communication to and from my host.

Garth Dryland: The entire forum post below decribes an issue I found after switching to the SG Optimizer plugin and outlines what the problem is. https://generatepress.com/forums/topic/masonry-3/#post-1886914 Reading from here should provide all the details you must know to understand what needs to be addresssed to resolve this issue. https://generatepress.com/forums/topic/masonry-3/page/2/#post-1893108

Georgi K.: Hello Garth, hope I find you well

Garth Dryland: yup im all good

Georgi K.: I am just looking into that for you

Garth Dryland: ok.. take your time

Georgi K.: I appreciate the patience !

Georgi K.: I went through that, as well as the previous chat you had with my colleague, and I appreciate following up with the plugin developers after the chat

Georgi K.: What I would like to do for you, is send the case over to our senior technical experts, who would be able to look into their input, and report any issues to our developers

Garth Dryland: Sounds good.. Should I leave my site showing these issues on the front end or can I fix that now by running less options alonmg with the addtional function GP provided while I wait for a better solution?

Georgi K.: I have forwarded the case just now, and will show in the Help Section > Support History

Georgi K.: Yep, I would recommend leaving it with the issues present, so they can be examined

Georgi K.: Of course, if you were to have anything more to add to the ticket, just post a reply under it

Garth Dryland: Ok.. Bye for now

Georgi K.: Bye bye !

System: Garth Dryland has ended the chat

[David]

Thanks for keeping us updated. Fingers crossed they have a solution 🙂

[Garth Dryland]

SiteGround techs are currently working through the problem after refering to this thread. No idea on an ETA although I suspect they will work to find a solution some time this week. If I dont hear back by the weekend I will message them and get an update and report back.

[Garth Dryland]

Below you can find all tech support communication to date.

They’re saying to add the CSS class to the exclusions list within the plugins lazy load feature as seen below.

“Exclude from Lazy Load”
“In order to exclude images from lazy loading, please add their CSS classes to the exclusion list. Add each CSS class on a separate line.”

Are there any classes in the masonry feature I should also exclude or will “post-image” cover it all?
Also, do you have any other suggestions why this is happening which I could ask SiteGround to look at?

Technical Issues
Ticket 4069720
Aug 14, 2021 03:39 PM
ANSWERED
On behalf of a client
Hello, I am experiencing issues with the SG Optimizer lazy load and the Masonry plugin
The entire forum post below describes an issue I found after switching to the SG Optimizer plugin and outlines what the problem is. https://generatepress.com/forums/topic/masonry-3/#post-1886914 Reading from here should provide all the details you must know to understand what needs to be addressed to resolve this issue. https://generatepress.com/forums/topic/masonry-3/page/2/#post-1893108

Kostadin Nanev

Aug 14, 2021 03:48 PM

Hello Garth,

Thank you for reaching out to us!

In order to review this further, could you please confirm on which page the issue can be replicated and if we may activate the lazyload feature temporarily in order to reproduce it?

Please provide us with all steps and login details that may be required for the reproduction of the issue!

Best Regards,

Kostadin Nanev
Technical Support Team

Garth Dryland

Aug 14, 2021 04:38 PM

The affected pages and every detail to date are within the links I provided for your reference. SG Optimizers is activated so you can see everything you need from the front end.

Kostadin Nanev

Aug 14, 2021 04:46 PM

Thank you for your confirmation, Garth!

I have brought the case to the attention of our developers and we will notify you in this ticket as soon as an update is available. Your patience is highly appreciated!

Best Regards,

Kostadin Nanev
Technical Support Team

Vladislava Karataneva

Aug 16, 2021 09:50 PM

Hello Garth,

Thank you for your patience!

According to our Dev Team’s investigation, the JetPack Image Accelerator feature on your site is also optimizing image sizes and the images are loaded from JetPack URLs. This is interfering with SG Optimizer’s Lazy Load feature. Thus, it is recommended to disable the JetPack Image Accelerator.

After disabling it – please make sure to flush all cache from SG Optimizer as well as Purge CloudFlare’s cache. Here is more information on how CloudFlare’s cache can be purged from your SiteTools:

https://www.siteground.com/tutorials/cloudflare/settings/

Please let us know if the issue still persists after taking the above actions.

Best Regards,

Vladislava Karataneva
Technical Support Team

Garth Dryland

Aug 17, 2021 10:15 PM

It’s disabled and flushed however I’ve tested with literally everything disabled before. I’m pretty sure I mentioned this in the notes provided. The problem appears to be with the SG plugin

Vladislava Karataneva

Aug 17, 2021 11:03 PM

Thank you for the update, Garth!

I have provided the information to our Dev Team and they will further investigate the issue.

As soon as we have more information on it – we will update this ticket.

Meanwhile, your patience is greatly appreciated.

Best Regards,

Vladislava Karataneva
Technical Support Team

Vladislava Karataneva

Aug 20, 2021 12:33 AM

Thank you for your patience, Garth!

We do understand the inconvenience you may be experiencing and thank you for your cooperation so far. Indeed as it seems there is some sort of incompatibility between our plugin and the Masonry plugin, which caused the spacing issues you are referring to.

What our developers suggest is to exclude the Masonry from the Lazy load option. As mentioned in the thread you provided, the issues you are referring to are present with the lazy load option in general, regardless of the plugin you are using for Lazy load. This means that the theme is simply incompatible with such an option, thus causing the issues described by you.

An option is to contact the Masonry developers for any other solution with their product regarding using Lazy load.

Please feel free to reach our Help Desk any time, if you are experiencing issues with your hosting.

Best Regards,

Vladislava Karataneva
Technical Support Team

Garth Dryland

Aug 20, 2021 08:15 PM

The reason for this issue as has been suggested is in relation to the way the SG plugin calculates the space allocated for the images. Given the theme works and does not create the wrong aspect without the sg plugin activated surely it must be the sg plugin that alters the aspect ratio, not the theme.

Vladislava Karataneva

Aug 20, 2021 09:12 PM

Thank you for the update, Garth!

I am forwarding this case to our Supervisors for further review. Please allow them some time to check the case. They will get back to you on this ticket as soon as possible.

Meanwhile, your patience is greatly appreciated.

Best Regards,

Vladislava Karataneva
Technical Support Team

Simeon Boev

Aug 21, 2021 02:49 AM

Hello Garth,

My name is Simeon Boev and I am a member of the technical support supervisor team here at SiteGround.

I took the time to review the situation in detail and check the feedback our WordPress developers provided.

I fully understand the inconvenience of the whole situation, however, there are cases in which incompatibility between WordPress plugins and especially features they provide is not common, still as in this particular case it may occur. At least for now, as far as I know, adjustments to the LazyLoad feature are not planned.

This being said to ensure that you could use the features of our plugin in addition to other plugins as well, use the exclude features in order to ensure that all of your website content loads as intended.

Do not hesitate to contact us again if you have additional questions or need assistance.

Best Regards,

Simeon Boev
Technical Support Supervisor

Garth Dryland

Aug 21, 2021 09:06 AM

Can you explain to me why video lazy loading works within the masonry layout and therefore calculates the correct aspect ratio versus why said images don’t?
Seems to me that if the SG plugin can calculate the videos to work correctly then it should also work for images if it was coded to provide the same behaviour.

Georgi Bayganov

Aug 21, 2021 10:00 AM

Thank you for your response.

While images and videos are different types of media files, our developer team has already reviewed the case and they have confirmed that our SG Optimizer plugin is not compatible with masonry and for the time being. They also confirmed that there are currently no planned updates to make it so.

You can always exclude LazyLoading for specific elements or use alternative LazyLoading plugins to achieve the best compatibility with your website’s content.

Don’t hesitate to contact us again if there is anything else that we may assist you with.

Best Regards,
George B.
Technical Support Agent

[David]

The post-image class is the one you want.
If you do that, then you can remove the snippet provided in this reply:

https://generatepress.com/forums/topic/masonry-3/#post-1888950

[Garth Dryland]

Before I close this thread marking it resolved I just wanted to come back and add that you were right and I was wrong with respect to featured images.

When I initially created this site it was well before Gutenberg went into WordPress core. Since then I have updated my personal site moving from a basic HTML site I built back in 2008 to WordPress (using GeneratePress naturally) however this time I used one of the built-in themes as a foundation which is somewhat a new GP thing.

The theme I used was set up using featured images so around then I must have changed the images in the accounting site to featured images as opposed to using HTML in the custom HTML blocks. I discovered this after I noticed that the image on page two of the blog had a different CSS class when I inspected the code. First I tried altering the CSS class in the HTML from “post” to “post-image” but the site still had the spacing calculation issue occurring.

It was at this point I realised that I had updated 2 of the 3 blog images to use the featured images so I updated the remaining image and the problem was solved. I almost have the same page speed now as I did with the issue occurring and all lazy loading featured activated though it will be improved if and when SiteGround get around to rewriting the lazy loading code to remedy the two issues explained within in this thread.

Before I started I was getting google page speed scores of around 30 something on mobile and desktop around 80. Now I get about 60ish for mobile and mid 90’s for desktop. If these issues were fixed I would be getting around 70 plus for mobile and 98-99 via desktop which is a vast improvement simply by swapping out the a3 lazy-load plus the autoptimize plugin for the SG Optimizer.

[David]

Might be worth asking SG if the LazyLoader can be disabled on specific template tags ie. the Blog / Archives for the time being. At least you can then benefit from it in the single post content.

[Garth Dryland]

I asked them by quoting your suggestion and their reply is below.

Hello Garth,

You can easily exclude elements from the Lazy Load via its exclude functionality:

Dashboard > SG Optimizer > Media Optimization > Lazy Load Media > Exclude from Lazy Load

Alternatively, if the exclude functionality is not compatible you could test using an alternative plugin that provides Lazy Load with exclude functionality.

If you need additional assistance on our end, please feel free to contact us again.

Best regards,

Aleksandar Dimitrov
Senior Technical Support

[Tom]

That sounds like you’re able to exclude certain elements from their functionality, not full pages (/blog etc..). Might be worth just confirming that it isn’t possible at this time. As a guess, you should be able to use a filter or be able to dequeue the javascript using conditions.

[Garth Dryland]

Thanks, I hope you and the family are safe and well. Here’s their reply.

Aleksandar Dimitrov

Aug 26, 2021 11:15 AM

Thank you for the update, Garth.

Using custom filters could be set by your website developer but will require custom work on the website’s code directly. Indeed only certain scripts can be excluded and not entire pages from the lazy load functionality. You could check online for a stand-alone Lazy load plugin that provides more global excludes if you want to use this functionality for your website.

If you have any other questions, please feel free to contact us.

Best regards,

Aleksandar Dimitrov
Senior Technical Support

[Tom]

Thanks! Hope all is well with you and your family too.

Tricky one, I’m not really sure what the solution is here.

Do they have any specific tips when it comes to using their lazy loading with Masonry? For example, we can tell the Masonry script to re-calculate, but we need know when to do it.. For example, if there’s a trigger that happens once their scripts fires, we could potentially hook into that trigger and recalculate masonry each time.

[Author]

Posts