Performance First: Optimizing for Lightning-Fast Load Times

Speed isn't just a feature—it's the foundation of a good user experience. When building albertbf.com, I obsessed over every millisecond, implementing numerous optimizations to achieve sub-200ms load times globally.

The Performance Budget

Before writing any code, I established strict performance budgets:

• First Contentful Paint: < 200ms
• Time to Interactive: < 300ms
• Total Page Weight: < 50KB (excluding images)
• JavaScript Bundle: < 10KB
• CSS: < 15KB

These constraints forced creative solutions that ultimately led to a better architecture.

Critical CSS Inlining: Zero Render Blocking

The biggest performance win comes from inlining all CSS directly in the HTML:

function generateArticleHTML(article, templates, styles) {
  return renderTemplate(templates.layout, {
    title: article.title,
    content: articleContent,
    styles: styles // Entire stylesheet inlined
  });
}

This eliminates:

• Additional HTTP requests for stylesheets
• Render-blocking external resources
• Flash of unstyled content (FOUC)

The tradeoff? Slightly larger HTML files. But with gzip compression, the difference is negligible:

# External CSS approach
index.html: 3.2KB → 1.1KB gzipped
styles.css: 15KB → 3.8KB gzipped
Total: 2 requests, 4.9KB

# Inlined CSS approach
index.html: 18KB → 4.3KB gzipped
Total: 1 request, 4.3KB

Optimized Syntax Highlighting

Syntax highlighting is essential for a technical blog, but highlight.js can be heavy. My approach:

1. Load only used languages dynamically:

let currentArticleLanguages = new Set();

renderer.code = function(code, language) {
  if (language && SUPPORTED_LANGUAGES.includes(language)) {
    currentArticleLanguages.add(language);
    // Only highlight if language is supported
    const result = hljs.highlight(code, { language });
    return generateHighlightedHTML(result);
  }
  return generatePlainCodeHTML(code);
};

2. Pre-process at build time - No client-side highlighting:

// Build time - heavy lifting done once
const htmlContent = marked.parse(article.content);

// Runtime - just serve pre-highlighted HTML
// Zero JavaScript required for syntax highlighting

Resource Loading Optimization

Lazy Loading Images

Images are the heaviest assets. I implement native lazy loading:

renderer.image = function(href, title, text) {
  return `<img 
    src="${href}" 
    alt="${text}"
    loading="lazy"
    decoding="async"
  >`;
};

Font Strategy

System fonts eliminate web font downloads:

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               'Noto Sans JP', system-ui, sans-serif;
}

This saves 50-200KB per font file while maintaining beautiful typography across platforms.

JavaScript: Only What's Needed

The entire JavaScript bundle is under 5KB and handles:

• Theme switching (dark/light mode)
• Client-side search
• Code copy functionality
• Smooth scroll behavior

Search Without the Bloat

Instead of a heavy search library, I built a lightweight solution:

// Build time - generate search index
function generateSearchIndex(articles) {
  return articles.map(article => ({
    title: article.title,
    url: article.url,
    content: article.content
      .substring(0, 300) // Limit content size
      .toLowerCase() // Pre-lowercase for faster search
  }));
}

// Runtime - simple includes() search
function performSearch(query) {
  const lowerQuery = query.toLowerCase();
  return searchIndex.filter(article => 
    article.title.includes(lowerQuery) ||
    article.content.includes(lowerQuery)
  );
}

Progressive Enhancement

The site works perfectly without JavaScript:

• Articles are readable
• Navigation functions
• Code is highlighted
• Dark mode persists (via CSS prefers-color-scheme)

JavaScript enhances the experience with:

• Instant search
• Code copying
• Smooth scrolling
• Theme persistence

Measuring Real-World Performance

Full load time (from zero to full page load)

Performance by Region:
- North America: 65ms
- Europe: 60ms
- Asia: 190ms
- Australia: 200ms

The Cost of Complexity

Many "modern" blogs suffer from:

• 500KB+ JavaScript bundles
• Multiple API calls
• Client-side rendering delays
• Third-party script chaos

By rejecting complexity, albertbf.com achieves:

• 50x smaller bundle sizes
• 10x faster load times
• 100% reliability
• Zero performance degradation over time

Conclusion

Performance isn't achieved through one big optimization—it's the accumulation of many small decisions:

• Inline critical resources
• Embrace static generation
• Minimize JavaScript
• Leverage edge caching
• Choose simplicity over features

The result? A blog that loads faster than most landing pages, provides a better reading experience, and costs nothing to maintain. Performance first isn't just a philosophy—it's a competitive advantage.