Firefox 새 탭 확장 프로그램을 위한 성능 팁: 100ms 미만 로드 시간

Source: Dev.to

기준: 새 탭이 빠르게 느껴지는 이유는?

새 탭 페이지는 Firefox에 기본으로 내장된 페이지를 대체하는데, 기본 페이지는 사실상 즉시 표시됩니다. 사용자는 여러분의 탭이 200 ms 이상 걸리면 눈치챕니다. 목표는 다음과 같습니다:

• 첫 번째 페인트:

: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 */

스크립트에 defer 사용

<script src="your-script.js" defer></script>

defer를 사용하면 HTML이 JavaScript가 실행되기 전에 렌더링되므로 사용자는 즉시 무언가를 볼 수 있습니다.

DOM보다 먼저 테마 적용

잘못된 테마가 순간적으로 나타나는 현상은 거슬립니다:

<script>
  // 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>

네, 이것은 아주 작은 동기식 스크립트이지만 FOUC(Flash Of Unstyled Content)를 방지합니다.

캐시된 데이터 먼저 로드

API 호출을 기다렸다가 렌더링하지 마세요:

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);
}

스토리지 읽기 최소화

스토리지 읽기를 한 번에 묶으세요:

// 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`);

Firefox 내장 Performance 프로파일러(F12 → Performance 탭)를 사용해 병목 현상을 찾아보세요.

결과

이러한 기법을 적용하면 Weather & Clock Dashboard 가 다음과 같은 성능을 달성합니다:

• 첫 번째 페인트: ~20 ms (동기식으로 적용된 캐시 테마)
• 캐시된 날씨 표시: ~40 ms
• 시계 렌더링: ~45 ms
• 새로운 날씨 표시: ~400 ms (네트워크 상황에 따라)

Weather & Clock Dashboard — 날씨, 세계 시계, 검색 기능을 제공하는 무료 Firefox 새 탭 확장 프로그램. MIT 라이선스.