Archived topic
Jumping content in three column layout
8 replies · Started by Edwin on March 5, 2021
Hi support,
When using the three column layout with blog content in the middle, on loading the page, the content jumps from left to center. This is especially noticable when content column has some content slowing down the loading. Reason must be the left sidebar loading after the content. Is there a solution for this ? Loading the sidebar before the content or maybe reserving the space for the sidebar in some way (with a small fixed placeholder for instance).
Thanks
Hi there,
Any chance you can link us to the site in question?
You can use the private information field.
Let me know :)
Hi Leo,
Thanks.
See private field.
Meanwhile I did some testing, making my own manual sidebar, inserting it with a generate_inside_container hook, and making original left sidebar invisible. Not that elegant, but could be a workaround. Still open to better options of course.
Hi there,
This is happening because your content area is loading before the sidebars (as it should). However, your content area is massive and taking far too long to load.
It shouldn't be an issue if you load a normal number of posts on the page (10, for example). Are you seeing the issue there as well?
Hi Tom, thanks for the reply.
As said in my private comment, the huge amount of posts is only to reproduce the effect, and make more visible by making it much slower. Of course it's not meant for live showing. But this also happens when a slow advertisement is loading in the postloop (that's how I found out). And also visible with a much lower amount of posts.
I'm just looking for ways to have the content column start at the right position.
PS. Changed it to 20 items now and the jump is also visible when reloading the page.
The issue itself is that the content area is taking too long to load. This is going to cause a layout shift regardless of the sidebars/layout.
If you can solve the content area taking too long to load (lazy loading the ads, or at least making sure the ad area has a defined width/height), it will solve the jumping content/layout shift.
Right now with a normal number of posts, I'm not seeing any jumping even with my network throttled to slow 3g.
It seems a bit browser sensitive. In firefox it's a non issue, in chrome (mac) I can see it almost every pageload.
With async javascript it's indeed brought back to a minimum. I was just searching for ways to completely prevent it. But okay, I will use it as is, or find some other way.
Thanks for the replies.
No problem!
The only way to completely prevent it would be to change the theme so it loads the sidebars first (as they load faster). However, this would introduce other problems (like your content loading last) and would involve some pretty heavy edits to how the theme works.
