Blog archives doesnt load along with sidebar

Hi there,

i tested the site across Chrome, FF and Safari and i am not seeing the issue.
Is it in a particular browser your seeing this ? And can you try opening it in an incognito/private browser to eliminate a browser cache issue.

Hello,

I am using chrome, see this video:- https://drive.google.com/file/d/1eXSmyI2A2GV6fyhF2eDZFjo3UE6V7xRV/view

Maybe this is normal for you but you can see blog archive grid loads after the sidebar. This should load parallelly. This is clearly noticeable.

Thank You!

Hi there,

It's because the masonry layout is using Jquery which loads at the end, if you disable the masonry layout the issue should be gone.

You could also update to GPP 2.0 which uses JS instead of Jquery, the loading speed would be a lot faster.

Hope that answers your question :)

Hello,

Right, if I disable the masonry layout the issue is no longer there, but i want to use the masonry layout without delaying the grid.

Also since it is the production site so I don't want to use GPP 2.0 Beta version. Let me know if you have any other solution to fix this?

Thanks!

Unfortunately, there are no other solutions for this.

The official release won't be long, wait for it is also not a bad idea :)

Hello,

If Jquery loads at the end then cant we preload it so that it will come first?

Thanks!

Thats the expected behaviour. Masonry uses Ajax to load the post content. Ajax requests occur after the HTML is loaded.

Hello,

But it looks bad. I even updated to 2.0 but the delay is still there. The viewport content should be loaded parallelly. It gives a bad impression.

Thanks!

Lets take a step back - the Infinite scroll which is Ajax loading your posts.
What it does is remove the default PHP request for post loop and defers this to a Ajax call - so posts will always load after the initial content is displayed.

This is not a bug or an issue with the GP infinite scroll - its common across all site that use Ajax infinite loading.

You can increase the performance of your site by reducing the number of posts you're displaying in: Settings > Reading --> Blog pages show at most - set this to a lower number.

There will still be a delay between the site loading and the content being displayed - but it will help reduce the time.

Hello,

I have updated to 2.0 today and added infinite scroll today after Ying said. So the problem is still there if you do not use infinite scroll. I have turned off the infinite scroll for now. You can check again here, https://www.boatengine.com/blogs/

For me, it looks weird and noticeable in my eyes, the blog grid loads after the sidebar.

Thanks!

Hi there,

This is to prevent things from shifting around once Masonry initiates it.

You can try to prevent it with this CSS:

.masonry-container.are-images-unloaded {
    opacity: 1 !important;
}

Let us know if that works or not :)

Hello Tom,

This CSS fixes the issue and now the archive grid and sidebar is loading parallelly without any delay :)

I was thinking, why this CSS is not present in the core of the GenratePress theme, the issue should be fixed in the core, isn't it?

Thanks!

Having the posts jump around when Masonry initiated could cause CLS issues. We'll run some tests to see which method is better.

Thanks!