Forum Discussion
Code blocks load slower than the rest of the page
Strong diagnosis — and your own numbers prove it. If each SVG is only a few hundred bytes, the asset isn't the problem. The delay is the iframe being created, the sandbox handshake, and the document loading inside it. Shrinking the SVGs further won't move the needle; the per-block iframe overhead will.
Two small additions to your platform-side list:
1. Your preconnect idea is the big one. A preconnect (or even dns-prefetch) to the sandbox origin in the lesson head would let every code block on the page skip most of the connection setup.
2. The white flash and the jump are two separate problems. Reserving the height (your --block-html-height idea) fixes the jump, but learners still see a white hole where a colored transition should be. A background on the iframe matching the surrounding section would make the wait nearly invisible even before the content arrives.
One author-side workaround worth testing today: if a transition is purely decorative, try moving the SVG into an image block instead of a code block. Image blocks load through Rise's normal image pipeline — no sandbox iframe to spin up — so you skip the iframe overhead entirely. Trade-off: you lose the inline-style control, so if the shape needs per-section color theming it won't survive the move. Test it in a draft lesson first.
This is exactly the kind of report that helps — measured, with a repro anyone can run.
Related Content
- 11 months ago
- 11 months ago
- 9 months ago