▼
Streaming live at 10am (PST)

Unexpected Image layout shift

Design help General
#1

I’ve designed a very minimal site to showcase journalism photography.
I"m dealing with the following:

  • Unexpected layout shift on pages with masonry grid
  • Image flash followed by full image load
  • Entire layout jump when clicking on single image to open Lightbox view

Not sure if my interactions (which I disabled at the moment) are the issue or the overall image sizes [no image in image grid larger than 200kb]

The goal is to have a smooth and seamless page load experience from page to page without the lag or image jump.

Pages with noticeable issues
…/personal [<- on a slow internet connection]
…/personal-stories/everyday-atlanta-ongoing
…/travel-stories/havannah

*NOTE: don’t be alarmed by empty white space on front-page. There’s a slider there – I’m using F’in Sweet Slider to make a dynamic slider with CMS (only shows on live page).

Here is my site Read-Only: **Link

#2

Hmmm, I’m looking at the live staging site (ritaharperphotography.webflow.io) and I’m not seeing any of the issues you’re describing other than a slight shift when opening up the lightbox—however this is caused by the lightbox not showing a scrollbar, so the page content is able to adjust to a slightly wider view.

Are you checking the issues in a live browser or just within the Designer? If it’s the latter, I’d always recommend testing in a live browser as it will give you the same environment that other users will view the site in—the Designer is mainly used as a rough idea of functionality pre-publish.

Feel free to give me some more information on the issues you’re noticing (or possibly even record a video of the issue) and I’d be happy to take another peek :+1:

1 Like
#3

Thank you for following up.

The issue appears on the live site using Safari Browser. Particularly on this page.
I’ll have the client record their screen from their end to showcase where the page lag and content shift exist.

Thanks for clarity on the lightbox shift. Is that normal? Other pages with lightboxes do not have that slight shift when closing.

What I think has helped the issue –

  • I’ve re-optimized the photos on the pages where I’m using a grid
  • removed all interactions across the site where the masonry grid is used.

I’ll upload the video once I receive it.

#4

Thanks for clarity on the lightbox shift. Is that normal? Other pages with lightboxes do not have that slight shift when closing.

As far as I’ve seen this is how lightbox has always worked, and you’ll notice the effect on any page that’s displaying a scrollbar before the lightbox is shown. I’m on a Windows machine so I’m pretty used to it, however MacOS users may not notice this as I believe the default behavior is to hide the scrollbar unless the user is scrolling.

I’ll keep an eye out for the video to get a better idea of the shifting issue, but you may want to consider implementing page transitions (as opposed to individual element animations on page load) to better hide any of the initial shifting. It’s fairly easy to do with interactions and a small code snippet that delays the page load to allow for the transition-out animation to play:

Obviously the tutorial above shows a more involved transition animation, but a simple fade in/out from the background color (potentially with logo or loading gif) would definitely spruce up the presentation :+1:

1 Like
#5

Just uploaded a video to show the problem:

–https://www.loom.com/share/42c574416ba2482e839a2d3dbbdf8d35

#7

Ah okay, this looks like the “On Page Load” animation is triggering before some of the images are actually loaded so when you start to see them fade up into view there are a few that load and push others out of the way. This is probably more noticeable as you’re using columns to create the masonry grid as it’s essentially just one large list that wraps around twice.

To mitigate this, you could try putting a slight delay after the page load interaction is triggered (before the images fade in) to account for any images that appear after the fact. You can also try changing the lazy loading preset on the images as it’s possible the images are not loading initially on page load due to them assuming they’d be off screen:

image

1 Like
#8

Thanks for all the help and support. I think the problem has been quelled.
Link to site

Steps to the fix:

  • I adjusted my images to “Eager” loading, therefore ensuring all list of images appear as columns are being executed (I am still re-optimizing all images on site – google page insights claims I can save 100 or so kb per photo)
  • I added page transitions with a delay to ensure I account for images that may take a few milliseconds longer to load
  • I removed interactions on individual photos (too much processing required as some pages – have 6mbs worth of total photos)
  • I added a css code to address flash of unstyled text (FOUT) appearing as post content is loading and pictures (really prominent on collection page templates with rich text). Info on FOUT here
    Unsolved problems:
  • It still looks like the page loads twice as I navigate from page to page. There is a flash of a blank screen or some content and then it disappears and the page loads fully. (You can also see in the URL bar and the Inspector tools. The page loads, then reloads in a matter of milliseconds – I know this is not normal behavior)

Thanks again. If you have any suggestions on the load twice problem set I’m all ears. Or should I make a new post (I couldn’t find much on the topic).