[jhabdas]

I’ve noticed the static slider and header images cause content to jump when page first appear. Is that on the roadmap to be fixed, or should I start looking for my own fix?

[jhabdas]

Despite the content jumping, one benefit of the delayed rendering of the hero images is the featured icon blocks animations are visible as the user opens the page—reducing perceived latency so long as the iconography is pre-loaded as the initial render occurs.

Website: chicagoganghistory.com

[Zed]

I’m not sure what you mean by “jumping”. Site rendering behaviour depends on how the browser handles it and how fast the page and content element (images, styling) load.
When the speed is slow or content blocking scripts are present the site may not arrange/align properly until all element finish loading.

---

If you like our creations, help us share by rating them on WordPress.org.
Please check the available documentation and search the forums before starting a topic.

[jhabdas]

My bad. I thought jumping content was pretty well defined once it landed on CSS Tricks. Here’s a link to a related article in case you’re not familiar: https://css-tricks.com/content-jumping-avoid/.

In the context of Septera, the jumping content plays out like this (on slower, but not ridiculously slow, internet connections):

1. Load the static landing homepage.
2. First paint occurs, hero media not yet visible.
3. Viewport lays out featured icon blocks (slide in from right), font icons not yet loaded.
4. Hero image begins to load, dimensions are determined and featured blocks pushed off screen.
5. Hero image loads based on browser speed, presenting background or color.

To reproduce this behavior just throttle your connection speed to Cable on the above website or the one provided here using dev tools or your favorite client-side proxy.

I found a pretty good article on https://perf.rocks explaining how to combat this type of behavior. It wouldn’t be such a big thing if it weren’t for the font icons not loading yet. But the animation looks cool and will probably reduce perceived latency from the user standpoint.

Either way loving the theme. Best on the market, and you know it!

Website: dev-bali-bebas.pantheonsite.io

• This reply was modified 6 years ago by jhabdas.

[Author]

Posts