Keeping Immersive Pages Light

There is a persistent assumption in interactive web design that immersion requires weight. Rich experiences need big images. Atmospheric scenes need complex JavaScript. Engaging motion needs heavy animation libraries. The assumption is wrong, and it produces slow, fragile pages that exclude a significant portion of their potential audience.

The reality is that the lightest pages are often the most immersive, because speed itself is a quality that creates trust and engagement. A page that loads instantly and responds without delay feels confident. A page that takes four seconds to render and stutters during scroll feels broken, regardless of how striking the visuals are once they finally appear.

This essay is about practical techniques for building browser-native experiences that feel rich without being heavy. The principles connect to the Performance section’s treatment of weight and render budgets, and to the production thinking in Making Of.

Where weight actually comes from

On most immersive web pages, the weight distribution follows a predictable pattern. Images account for 60 to 80 percent of total transfer size. JavaScript accounts for 10 to 25 percent. CSS accounts for 2 to 5 percent. Fonts account for 3 to 8 percent. HTML accounts for less than 1 percent.

This distribution means that image discipline has the largest impact on page weight. A single hero image can weigh more than the entire CSS and JavaScript budget combined. Two or three high-resolution images can push the page past any reasonable loading time target on mobile connections.

The second largest opportunity is JavaScript. Every framework, every library, every third-party script adds parse and execution cost that is disproportionate to its byte size. A 100-kilobyte JavaScript bundle does not just take time to download - it takes time to parse, compile, and execute, and during that time, the browser’s main thread is blocked. The page cannot respond to interaction. Layout cannot proceed. The user waits.

The composition approach

The alternative to heavy assets is heavy thinking. A page that has been composed carefully - where every colour, every spacing decision, every typographic choice is intentional - creates atmosphere through coherence rather than through individual expensive assets.

Consider colour. A background tone that shifts subtly between sections creates the feeling of moving through an environment. The CSS cost is effectively zero. No images required. No JavaScript required. The atmosphere comes from the relationship between colours, not from the pixels themselves.

Consider typography. Two well-chosen typefaces at carefully considered sizes, with deliberate line heights and letter spacing, create an editorial quality that no hero image can match. The cost is the font files - perhaps 50 to 80 kilobytes total - and nothing more at runtime.

Consider spacing. Generous, varied whitespace creates rhythm, hierarchy, and the sense of breathing room that makes a page feel expansive. Whitespace is literally free. It weighs nothing. It costs nothing to render. And it does more for the feeling of a page than most visual elements.

One image, well chosen

The strict image policy for this site - one image per page maximum - is not a limitation. It is a creative constraint that produces better results than unlimited image use.

When a page can only have one image, that image must earn its place. It must do something that typography, colour, and spacing cannot do on their own. It must add visual information, atmospheric depth, or compositional structure that the page would meaningfully lack without it.

This constraint eliminates decorative images, stock photography padding, and the visual noise of gallery grids. What remains is a single, well-chosen image that functions as a scene element rather than as filler.

The image should be sized precisely for its display context. If it appears at 1200 pixels wide on desktop, it should be served at 1200 pixels wide - not 2400 pixels for theoretical retina benefit. The visual difference at web resolution is negligible. The file size difference is substantial.

JPG compression at quality 75 to 80 produces results that are visually indistinguishable from quality 95 at web display sizes. The file size savings are typically 40 to 60 percent. This is not a compromise. It is an informed decision about where quality matters and where it does not.

CSS as the primary atmosphere engine

CSS is the most efficient atmosphere tool on the web. Colours, gradients, shadows, borders, border-radii, and transitions are all rendered by the browser’s painting engine at minimal cost. No files to download. No scripts to parse. No GPU textures to upload.

A subtle box shadow creates depth. A border-radius creates softness. A background gradient creates dimensionality. These effects compound: a card with a slight shadow, a warm background, a rounded corner, and a clean border creates a sense of material quality that feels substantial and intentional.

CSS custom properties allow these atmospheric elements to adapt across sections. A single property change can shift the entire colour scheme of a section, creating the environmental variation that makes a page feel like a journey rather than a stack. The runtime cost is negligible because custom property changes are handled by the browser’s style engine, which is heavily optimised for exactly this kind of work.

Keeping JavaScript minimal

The JavaScript on this site serves three purposes: search initialisation, navigation toggle, and search overlay management. Together, the authored code is under 5 kilobytes. Pagefind loads its library on demand when search is activated.

This is not an anti-JavaScript position. It is a recognition that most of what JavaScript does on immersive pages - scroll-triggered animations, parallax effects, dynamic layout changes - can be achieved more efficiently through CSS alone or should not be done at all.

Scroll-triggered class changes through Intersection Observer are the one JavaScript pattern that genuinely helps. A few lines of code that add a class when a section enters the viewport, triggering a CSS transition, is efficient, reliable, and progressive. The CSS transition runs on the compositor. The JavaScript runs once per threshold crossing rather than on every frame. The total performance cost is minimal.

If the project needs something more complex - a WebGL layer, a physics simulation, a real-time data visualisation - that complexity should be loaded conditionally, not bundled into the initial page load. Check device capability. Check connection speed. Load the enhancement only for visitors who will benefit from it. For everyone else, the CSS-based atmosphere is the experience.

The speed test

A useful quality check for any immersive page: throttle the connection to 3G in developer tools and reload. If the page is usable within 3 seconds, the weight budget is healthy. If it takes 6 seconds, the page is too heavy for a significant portion of the audience. If it takes 10 seconds, the page is excluding mobile users.

Speed is not a technical metric. It is a quality. A fast page feels polished. A slow page feels neglected. For a site that argues for craft and intentionality, speed is not negotiable. It is the first proof that the craft is real.

The Performance section provides detailed frameworks for weight and render budgets. Frame budget basics covers the per-frame rendering constraints.