ng. Inline your critical CSS:
<!DOCTYPE html>
<html>
<head>
<!-- Critical CSS inlined — no blocking request -->
<style>
:root { --bg: #fff; --text: #1a1a1a; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui; }
.container { max-width: 800px; margin: 0 auto; padding: 2rem; }
/* Only above-the-fold styles here */
</style>
</head>
<body>
<!-- Content -->
<script src="app.js" defer></script>
</body>
</html>
2. Script Execution Strategy
<!-- GOOD: script parses after HTML, doesn't block -->
<script src="app.js" defer></script>
<!-- BAD: blocks HTML parsing -->
<script src="app.js"></script>
With defer, the HTML renders before JavaScript runs, so the user sees something immediately.
3. Theme Synchronization & FOUC Prevention
Flash of wrong theme is jarring:
<head>
<!-- Run SYNCHRONOUSLY to avoid theme flash -->
<script>
// This runs immediately, before any rendering
(function() {
const theme = localStorage.getItem('theme') || 'auto';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const effective = theme === 'auto' ? (prefersDark ? 'dark' : 'light') : theme;
document.documentElement.setAttribute('data-theme', effective);
})();
</script>
<style>/* ... */</style>
</head>
Yes, this is a synchronous script — but it's tiny and necessary to prevent FOUC.
4. Cache-First Data Architecture
Don't wait for an API call before rendering:
async function init() {
// 1. Apply settings from sync storage (fast, local)
const prefs = await browser.storage.sync.get(DEFAULTS);
applyPreferences(prefs);
// 2. Show cached weather immediately (no network needed)
const { weatherCache } = await browser.storage.local.get('weatherCache');
if (weatherCache) {
displayWeather(weatherCache.data);
} else {
showWeatherSkeleton();
}
// 3. Fetch fresh data in background
fetchWeatherAndUpdate(prefs.location);
// 4. Render clocks (pure JS, no async needed)
initClocks(prefs.worldClocks);
}
With this pattern, the page is visually complete from cached data in < 50ms.
5. DOM & Layout Optimization
Batching DOM reads and writes prevents forced reflows:
// BAD: read/write/read/write causes 4 reflows
const w1 = el1.offsetWidth; // read
el1.style.width = (w1 + 10) + 'px'; // write
const w2 = el2.offsetWidth; // read (forces reflow)
el2.style.width = (w2 + 10) + 'px'; // write
// GOOD: batch reads, then writes
const w1 = el1.offsetWidth; // read
const w2 = el2.offsetWidth; // read (no reflow, still in same layout)
el1.style.width = (w1 + 10) + 'px'; // write
el2.style.width = (w2 + 10) + 'px'; // write
Creating Intl.DateTimeFormat objects is expensive. For clocks updating every second:
// Create formatters once, reuse forever
const clockFormatters = new Map();
function getFormatter(timezone) {
if (!clockFormatters.has(timezone)) {
clockFormatters.set(timezone, new Intl.DateTimeFormat('en-US', {
timeZone: timezone,
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false
}));
}
return clockFormatters.get(timezone);
}
Use requestAnimationFrame + timestamp diff instead of setInterval to avoid timer drift:
let lastUpdate = 0;
function updateClocks(timestamp) {
// Only update every ~1 second
if (timestamp - lastUpdate >= 950) {
lastUpdate = timestamp;
renderClocks();
}
requestAnimationFrame(updateClocks);
}
requestAnimationFrame(updateClocks);
7. Storage I/O Batching
Batch storage reads into one call:
// BAD: multiple awaits, multiple IPC calls
const { theme } = await browser.storage.sync.get('theme');
const { location } = await browser.storage.sync.get('location');
const { clocks } = await browser.storage.sync.get('clocks');
// GOOD: one IPC call
const { theme, location, clocks } = await browser.storage.sync.get(['theme', 'location', 'clocks']);
// Measure your init time
const t0 = performance.now();
await init();
const t1 = performance.now();
console.log(`Init took ${t1 - t0}ms`);
Use Firefox's built-in Performance profiler (F12 → Performance tab) to identify bottlenecks.
Pitfall Guide
- Blocking Render with External Stylesheets: External CSS files halt HTML parsing until fetched and parsed. Always inline critical above-the-fold CSS and defer non-critical styles.
- Synchronous Script Execution: Omitting
defer or async forces the parser to pause, delaying DOM construction. Use defer for main app logic to ensure HTML renders first.
- Theme Flash (FOUC): Asynchronous theme detection causes visual flicker. Run theme resolution synchronously in a
<head> script before any rendering occurs.
- Network-First Rendering: Waiting for API responses before painting creates blank screens. Implement a cache-first pattern to display stale data instantly while fetching fresh data in the background.
- Layout Thrashing: Alternating DOM reads (
offsetWidth) and writes (style.width) forces synchronous reflows. Batch all reads first, then apply all writes to minimize layout calculations.
- Recreating Intl Formatters:
Intl.DateTimeFormat instantiation is CPU-intensive. Cache formatter instances per timezone using a Map to avoid repeated allocation overhead.
- Timer Drift with setInterval:
setInterval does not sync with display refresh rates and drifts over time. Use requestAnimationFrame with timestamp delta checks for smooth, accurate updates.
- Multiple Storage IPC Calls: Each
browser.storage.sync.get() crosses an IPC boundary. Batch all required keys into a single call to reduce latency and context-switching overhead.
Deliverables
- New Tab Performance Blueprint: A step-by-step architectural guide covering critical rendering path optimization, cache-first data strategies, and IPC batching patterns tailored for Firefox extension contexts.
- Implementation Checklist:
- Configuration Templates: Pre-configured
manifest.json permissions, browser.storage schema definitions, and optimized HTML/CSS/JS boilerplate ready for Firefox WebExtension integration.
