Contents
Overview
Core Content First ensures critical information loads and renders before secondary features. This approach prioritises essential content, text, headings, and navigation, so users can access meaningful information immediately, even on slow networks or devices.
In low-resource environments, network latency and limited bandwidth can delay the execution of complex frontend components. When critical information depends on large JavaScript bundles or media assets, users may face blank screens. By prioritising core content, pages remain functional even when enhanced features load slowly or fail to load.
Why does this matter for LRO?
Users on slow or unstable networks often experience delays when loading content, especially when pages rely on heavy JavaScript or large assets.
Prioritising core content ensures:
- Immediate access to key information
- Usability, even if JavaScript fails
- Lower data usage for bandwidth-constrained users
- Better perceived performance
Delivering HTML first allows users to read and interact with content while enhancements load progressively.
Core vs Enhanced Content
A useful way to design pages for low-resource environments is to distinguish between core content and enhanced content.
Core content provides the essential information users require to accomplish their goals, i.e. clear headings that orient them, concise summaries that answer their questions, intuitive navigation that guides their journey, and actionable buttons that enable key tasks.
Enhanced content enriches the experience but remains secondary. For example, interactive visualisations, dynamic filters, animations, and rich media add value once foundational information is accessible.
The loading sequence matters; core content must render first, with enhanced features appearing progressively. This approach respects bandwidth constraints while maintaining engagement.
Implementing the content-first strategy
Prioritising HTML Delivery
HTML should be delivered and rendered first so users can see content immediately, even before other resources load.
Best practices:
- Keep the initial HTML lightweight
- Include key text (headings, summaries, navigation)
- Do not rely on JavaScript for primary content
- Avoid script-block rendering
Example:
<main>
<h1>Protein Dataset Overview</h1>
<p>This page summarises the key properties of the dataset.</p>
<nav>
<a href="#summary">Summary</a>
<a href="#features">Features</a>
</nav>
</main>
Users see meaningful content as soon as the HTML loads.
Defer JavaScript
JavaScript can delay page rendering if it blocks HTML parsing. Defer or load non-critical scripts asynchronously to prevent this.
Example:
<script src="app.js" defer></script>Using defer allows the browser to continue parsing HTML while the script loads in the background.
Best practices:
- Lazy-load non-essential scripts
- Split JavaScript into smaller bundles
- Avoid heavy frameworks where possible
- Load interactivity only when needed
Skeleton UI Patterns
Skeleton UI shows placeholders while content loads, improving perceived performance and avoiding layout shifts. Instead of blank screens or spinners, it displays the structure of the content.
Benefits:- Signals that content is loading
- Keeps layout stable
- Reduces perceived wait time
Best used for dynamic content, such as data or visualisations.
Example CSS skeleton pattern:
.skeleton {
background-color: #e0e0e0;
height: 16px;
border-radius: 4px;
animation: shimmer 1.5s infinite;
}Text-First / HTML-First Rendering
Text is the fastest content to load. Prioritising it ensures users can read and navigate page information, even on slow networks.
Prioritise:- Headings and summaries
- Key information
- Navigation
- Basic page structure
- HTML + text
- Basic CSS
- Images/media
- JavaScript
This ensures the page remains useful while enhancements load.
Text is typically the smallest and fastest-loading resource. A text-first strategy ensures users can read content immediately without waiting for images, fonts, or scripts to load.
Text-first rendering prioritises:
- Headings and summaries
- Key dataset information
- Navigation links
- Basic page structure
Visual elements such as charts or large images should load after the initial content.
Example page loading order:
- HTML structure and text
- Basic CSS styling
- Images and media
- Interactive scripts
This staged approach ensures that the page remains useful even during slow loading conditions.
Do / Don't
Do
- Show meaningful text in initial HTML
- Load features progressively
- Use skeletons for dynamic content
- Defer or lazy-load scripts
Don't
- Show blank screens
- Inject core content via JavaScript
- Load large assets before text
- Rely entirely on JS frameworks
Checklist
Developer implementing this strategy should verify the following: