SG Optimizer interfering with Essential Addons for Elementor

Hey there @jokubas2000k,

Could you provide a site URL, so we can check it out?

Kind regards,
Stoyan

Hi @stoyangeorgiev,

Sure https://www.mydreamtattoo.com

Quick update: by disabling all of SG Optimizer’s settings 1 by 1, I found out that the issue is caused by the Lazy Load Media option. None of the other settings seem to affect anything.

Lazy loading images greatly improves the speed of the website. I would like to be able to use this option. Is there something that can be done to fix this?

Thanks

Hey there @jokubas2000k,

We had a look at the issue you had.

The elements inside the image gallery have a specific height, then it is changed when some of the content is loaded, but since the element was rendered the height cannot be changed after that.

You can solve the issue with your image gallery by going to Media Optimization -> Exclude from lazy load and add the following class ‘gallery-item-thumbnail’. This will skip the lazy loading of your gallery items, while other images will continue being lazy-loaded.

Kind regards,
Stoyan

Hi @stoyangeorgiev,

I added the class. Kind of helped, but not quite.

Here’s how it looks now: https://ibb.co/vQ0Pwnw
Here’s how it’s supposed to look like (Lazy Load Media disabled): https://ibb.co/Fgk7KCx

Any idea why?

Also, I have a few other questions while we’re at it.

I have a plugin installed, called Imagify. It’s an image optimization plugin. I was wondering – if I’m using another plugin to optimize my images, should these settings on SG Optimizer be disabled – https://ibb.co/K7HfyFc ?

On my SiteGround account I have activated a Cloudflare CDN. Should this setting on SG Optimizer be turned on for it to properly work or is this something different – https://ibb.co/JdPN1Xs ?

I have caching enabled on my SiteGround account for this website. Is that a separate thing from the caching that SG Optimizer offers? Or do the settings on SiteGround directly correlate with the settings on SG Optimizer? Is there such thing as over-caching (caching the website too many times with too many different cashing tools)?

I apologise for my beginner type question. This stuff is all very confusing for me. I would greatly appreciate if you could answer these questions for me.

Thanks

Hey there @jokubas2000k,

You can try by excluding the parent class(the class of the image gallery). If that does not work, could you please enable the SG Optimizer and ping me so we can check it again.

As for the Imagify plugin, it is up to you to decide which plugin to use. The SG Optimizer has the ability to optimize your images as well as convert them to webP format. IF you use our plugin, everything will be done from one place and I personally think it is more convenient that way. We do not recommend using multiple plugins for the same optimization, so again, is up to you to decide which one to use, but make sure you use only one for specific optimization.

As for the Caching options. The SG Optimizer is designed to link WordPress with the SiteGround Performance services, so using those options will provide the best result in terms of performance.

You can use Cloudflare without enabling it in the Cloudflare tab, but again, make sure that optimization settings are not duplicating, since this may lead to unexpected behavior. Cloudflare has policies about caching, image optimization, and more, so you have to decide which works best for you. If you enable the Cloudflare full page caching through the plugin, an SG worker will be added to your account. Since Cloudflare is caching only static resources by default the option will give you the possibility to do full-page caching. This will reduce the load on your server and increase the loading speeds of your website.

When it comes to caching, it is recommended to use only one caching plugin since using multiple caching plugins may lead to unexpected behavior. Our SiteGround Optimizer provides optimizations, tailored to work best with our server’s configuration, meaning the best results out there.

If you have any further questions feel free to reach back to us. Аgain, ping me after you excluded the image gallery class from lazy-loading and if the issue still exists, so we can check it again and provide a solution for you.

Kind regards,
Stoyan

Hi @stoyangeorgiev,

I tried excluding the class of the filterable gallery but it did not help. It might be because I’m doing it wrong.

I added the ‘filterable-gallery’ CSS Class to the Filterable Gallery widget on Elementor and then excluded ‘filterable-gallery’ on SG Optimizer.

I have activated the SG Optimizer plugin as well as the Lazy Load Media option so you can check it out.

However, I’m leaning towards disabling the Lazy Load Media option completely because it has been causing some issues with other images as well. Yesterday I tried visiting my page in incognito mode and noticed that none of the images, including the logo, load up. Refreshing the page did not help. So I got scared and deactivated SG Optimizer. What could have caused it?

Also, thank you for your detailed response.

Hi @stoyangeorgiev,

I’m experiencing the same issues that I mentioned in my previous reply.

I visited my website in incognito mode. Some images did not load up. Refreshing the page fixed the issue. So I was not able to check if it’s the Lazy Load Media option that’s causing this issue.

Here are some screenshots comparing how it’s supposed to be with the not loaded up version of the website:

Good: https://ibb.co/yVhD43j
Bad: https://ibb.co/Jc5t9Xy

Good: https://ibb.co/fY7W9CL
Bad: https://ibb.co/0Zbfgxv

Good: https://ibb.co/2tQcnpt
Bad: https://ibb.co/4WRD7VT

Bad: https://ibb.co/8c8L7nG

I also have a form page on my website. It’s nearly a blank page with just the form on it. The form does not load up in incognito mode. Refreshing the page does not help. It’s probably a caching issue.

Screenshots of the form page:
Good: https://ibb.co/09hHwZG
Bad: https://ibb.co/KjsZj0r

URL of the form page: https://www.mydreamtattoo.com/tattoo-design-form/

What could be causing these issues and how to fix them? Could you please try visiting my website in incognito mode and checking if you encounter them as well?

Thanks

Hey there @jokubas2000k,

I had another look at your website, but I could not encounter the issues you have mentioned. It may have been a temporary issue.

As for the issue with the filterable gallery, the elements in it are absolute, meaning that when the elements are loaded they have a specific height that is changed after that but since the element is rendered there is no way of stretching it. In your case, the solution will be to find the specific class of the gallery and exclude it. I would also recommend using internal embedding for the Elemenetor scripts.

I have also noticed that when preloading your fonts you have set the URL without www, which is leading to some assets being blocked by CORS policies. You can fix that by opening your browser console, locating the scripts, and adding www to the font that you have added without www.

Kind regards,
Stoyan

Hi @stoyangeorgiev,

The form was not loading up because of the Minify the HTML Output option. I found that out by enabling every setting 1 by 1. To overcome this issue I excluded the URL of the form page from HTML Minification.

I have also currently disabled the Lazy Load Media option because I can not find the class of the Filterable Gallery to exclude it. Could you please tell me where can I find it and what to look for?

As for the fonts, if I’m looking in the right place, none of the fonts are set with www.
Screenshot: https://ibb.co/6vkXcwy
The URL’s are https://fonts.gstatic.com/.... Should I change all of them to https://www.fonts.gstatic.com/...?

I also have some additional questions about caching.

I read online that e-commerce pages like checkout, cart, my account etc. should not be cached. Is that correct? Does SG Optimizer automatically exclude all of these WooCommerce pages or should I exclude them manually? Should form pages not be cached as well then? Are there any other pages that should not be cached?

Kind regards,
Jokūbas

Hey there @jokubas2000k,

If the class of the gallery is not working for you, you can try to exclude the image class inside the gallery. This should solve the issue with overlapping of the gallery elements.

I meant in the Frontend Optimization tab in our plugin when you scroll down to Web Fonts Optimization -> Fonts Preloading. You have preloaded the fonts from your website without the www which is leading to conflicts with the CORS policies and leading to errors, visible in the browser console.

As for the caching of specific pages, the ones containing personal information( cart, checkout pages, account pages, etc are) and WooCommerce pages that should not be cached, as well as admin pages, are automatically excluded from caching.

Kind regards,
Stoyan

Hi @stoyangeorgiev again,

I have added www to all of the font URLS: https://ibb.co/8gwySWW

As for the Filterable Gallery issue:

I contacted Essential Addons’ plugin support and got the correct parent CSS Class of the Filterable Gallery (eael-gallery-grid-item). However, excluding the parent CSS Class from lazy loading did not help or affect anything. But excluding the image class gallery-item-thumbnail helps a bit but doesn’t solve the issue entirely.

To find the cause of the issue I decided to build the Filterable Gallery from scratch. By doing so I noticed that there are 2 causes of the issue.

The first cause is the gallery images themselves. Without any modifications, the lazy loading option makes the gallery go crazy, all of the gallery items start overlapping each other and the gallery itself starts overlapping with other page sections. This gets fixed by excluding gallery-item-thumbnail from lazy loading.

The second cause is the SVG star icons I add in the description of each gallery item. Without these, the gallery looks great. With the icons, the layout of the gallery gets messed up. Is there something that can be done to fix this? Is it possible to exclude individual images (in this case, the SVG icons) from lazy loading?

I also found another issue with the Lazy Load Media option… It messes up the page jumps. The menu items do not jump to the correct part of the page until all of/most of the images on the page have loaded up. What causes this and is there a solution to fix this?

It seems like this is going to be a never-ending thread of me fixing issues and finding new ones…

Looking forward to your response.

Kind regards,
Jokūbas

The SG Optimizer plugin and the exclude functionality is working as intended. Please, contact the developers of that plugin if the results are not satisfying or disable the optimization interfering with it. Alternatively, I would recommend that you contact a web dev to get professional assistance with your site and the html output it includes so you can have the proper classes to use in the exclude functionality.