As soon as I add an effect to an image, the page flickers when reloading.
These include:
Lightbox
Shadow
Border
On one page, I have many images with lightboxes. ( D-Wurf | CORNROW ) The page loads really badly. On other pages, I only have a few images with lightboxes, shadows, and borders; even then, the flickering is clearly visible and very annoying. ( Dario | D-Wurf | CORNROW )
Is the order of the effect and image loading incorrect? Or what could be the cause?
This page weighs in at around 9.5MB, which is very large for a single webpage.
I ran it through Google’s PageSpeed Insights tool — you’re scoring 100/100 in every category except Performance, which is being held back mainly by the number and size of images on the page.
To improve this:
Reduce the number of images where possible.
Resize images to better match the dimensions they’re displayed at on the page.
Compress your images using an app like Squash to reduce file size.
Enable Lazy Load on the image component for any images that aren’t visible when the page first loads (i.e. anything “below the fold”).
These changes should significantly improve load times and help with the flickering you’re seeing
ahhh, on that page I can see the Lightbox on screen for a split second. That’s a bug on our end, I’ll add a ticket and see if we can get that one fixed in the next release
