Advanced Caching for Jekyll Sites on GitHub Pages

Why Caching Matters for Static Sites

Caching is a critical technique to reduce page load times and server bandwidth by storing assets and pages locally on the user's device or intermediary servers. For Jekyll sites on GitHub Pages, which are static, caching can greatly enhance perceived speed and reduce repeated downloads.

Types of Caching

• Browser Cache: Stores assets like CSS, JS, and images on the user's browser.
• Service Worker Cache: Allows offline access and faster loads by intercepting network requests.
• CDN Cache: Content Delivery Networks cache your site assets geographically closer to users.

Limitations on GitHub Pages

GitHub Pages offers no control over HTTP cache headers, meaning you cannot customize caching behavior on the server side. However, you can adopt strategies to work within these constraints.

Fingerprinting Assets for Cache Busting

One of the most effective methods is fingerprinting (or hashing) asset filenames. When a file changes, its filename changes, forcing browsers to fetch the new version.

• Use plugins like jekyll-assets or custom build scripts
• Include hashes in filenames for CSS, JS, and images
• Update your templates to reference these hashed filenames dynamically

Leveraging Service Workers

Service Workers provide advanced caching capabilities and offline functionality. While not natively supported by Jekyll, you can add Service Worker scripts manually.

Basic Service Worker Setup

// sw.js
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('jekyll-cache-v1').then(cache => {
      return cache.addAll([
        '/',
        '/assets/css/main.css',
        '/assets/js/main.js',
        '/index.html'
      ]);
    })
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

Register the Service Worker in your site's main JS:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

Local Storage and IndexedDB

For dynamic content or user preferences, you can store data in the browser using Local Storage or IndexedDB, enabling a personalized and faster experience.

Example: Remembering Dark Mode Preference

const toggle = document.getElementById('dark-mode-toggle');
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
  document.documentElement.setAttribute('data-theme', currentTheme);
}

toggle.addEventListener('click', () => {
  let theme = document.documentElement.getAttribute('data-theme');
  if (theme === 'dark') {
    document.documentElement.setAttribute('data-theme', 'light');
    localStorage.setItem('theme', 'light');
  } else {
    document.documentElement.setAttribute('data-theme', 'dark');
    localStorage.setItem('theme', 'dark');
  }
});

Using External CDNs

Offload assets to Content Delivery Networks (CDNs) like Cloudflare, jsDelivr, or unpkg to benefit from caching and reduced latency.

• Host large libraries and frameworks on CDNs
• Ensure proper fallback mechanisms if CDN fails
• Monitor CDN performance and uptime

Case Study: Enhancing Cache Efficiency on a Portfolio Site

A portfolio site experienced slow loads on repeat visits due to no cache busting. Implementing fingerprinted CSS and JS files combined with a simple Service Worker cache improved speed by 60%, especially on mobile devices.

Summary

Although GitHub Pages limits server-side cache control, you can implement client-side caching with fingerprinting and Service Workers to boost performance. Combined with CDN usage and browser storage techniques, these strategies offer a robust approach to optimizing static Jekyll sites.

Next Article

The next tutorial will guide you through creating dynamic navigation menus using Jekyll data files and includes for flexible site structures.