I’m having an issue where my Pro gallery initially takes up the whole screen when loading up for the first time. I have changed the settings/dimensions multiple times and still have the same issue. It’s a slideshow for a clients sponsors, each logo is 150x150 but while they load it’s the whole screen and messes up the CLS. Any ideas?
Hi! Did you ever find a solution for this? I’m running into the same issue. Thanks!
It sounds like the issue you’re facing with the Pro Gallery is causing a lot of layout shifts during the loading process. Here’s a breakdown of the issue and some actionable steps you can try to resolve it:
1. Ensure Proper Aspect Ratio and Image Sizing
-
It seems the logos are initially loading too large, causing the CLS issue. Even though you’ve set the logo dimensions to 150x150, the gallery might not be displaying them at the right size on initial load.
-
Solution: Make sure the images are being uploaded at the correct resolution. While 150x150px might be the display size, ensure the images are not larger than this to avoid any resizing on load.
2. Set Fixed Dimensions for Gallery Container
-
Sometimes, if the container (gallery area) doesn’t have a defined height, the content (logos) might load in unexpected sizes and cause layout shifts.
-
Solution: Define fixed width and height for the gallery container. For example:
.wix-gallery {
width: 100%;
height: 200px; /* Set a fixed height based on your design */
Object-fit: cover;
}
This will ensure that the gallery’s container has enough space for the logos to load properly without affecting other elements.
3. Lazy Load the Gallery
- Another possible reason could be that the gallery’s images are loading all at once, causing a delay in layout rendering.
How it works:
loading=“lazy” tells the browser to delay loading the image until it’s about to enter the viewport, improving initial load performance and reducing layout shifts (CLS).
The width and height attributes ensure that the space for the image is reserved as it loads.
This should help fix the issue with the gallery loading too large and causing CLS problems.
- Solution: Enable lazy loading for the gallery images. This will ensure images load only when they are visible on the screen, which can help reduce layout shifts and improve page load times.
4. Check for External Resources
-
If you’re using external resources like scripts or additional widgets within the gallery, they might be affecting the load performance.
-
Solution: Try disabling any unnecessary external scripts that might be influencing the gallery behavior.
To ensure your site remains fast and smooth, especially with multiple images, I recommend considering Website Speedy https://www.wix.com/app-market/web-solution/websitespeedy that optimizes your site’s performance. It automatically compresses and optimizes images, manages lazy loading, and handles various performance optimizations to reduce load times and help with CLS. Plus, it integrates seamlessly and makes it super easy to improve your website’s speed and user experience.