Andre
I have created an almost blank design:
Attachment 133595
It has a Main and a Variant.
It used different page colours and a letter (A, B).
I included two types of Full Width shapes.
If I run this and refresh (F5) at various width, I get the most pronounced flicker at the transition between the Main and Variant, which I would expect.
In the above file, I added CSS identical to my prior (#19) but this time the transition delay is set to 16mS, around the lower frame rate of most computer browsers, 62.5Hz. This goes into the Website > Code > Head so the page is not visible immediately for the first 10mS, whereon it fades in over the next 5mS.
With my test file, I have no flicker in Preview, local Export or server-side.
For production purposes, I would double the time repeatedly until I was in a position where I knew all my assets were fully loaded.
I would use the browser Developer Tools > Network > [Ctrl+F5] to determine my load time for Main and Variant.
You have not advised if you are now using a Conventional Website approach.
All what you have experienced has been well-documented back to Xara when it was first featured.
When using Variants with lots of pages and content, I employ a number of methods:
- The CSS above is a quick win.
- Using lazy loading is another.
- Avoiding transition websites with variants, a third.
- Reducing images, promoting meaningful content.
- Reducing page complexity.
- Spreading items over more pages.
- Re-using image assets by using image filenames.
- Adopting WebP for images.
- Using SVG where possible.
- Losing gimmicks.
Acorn
Bookmarks