how to optimize jekyll site performance and seo after migrating from wordpress

Why Jekyll is already a performance upgrade from WordPress

By migrating to Jekyll, you've eliminated database calls, dynamic rendering delays, and plugin overhead. Jekyll's static site architecture means pages load faster, often under 1 second, which improves both user experience and SEO rankings out of the box.

However, this doesn’t mean your Jekyll site is perfect by default. Without conscious optimization, you could miss out on significant performance and SEO wins. Let’s fix that.

Step 1: Audit your site's current performance

Before optimizing, it’s critical to establish a baseline using free tools like:

Take note of:

Largest Contentful Paint (LCP)
Time to First Byte (TTFB)
Total page size
SEO and accessibility warnings

Step 2: Minify CSS, JS, and HTML

Jekyll doesn’t minify assets by default. Use the following plugins or filters:

Minify HTML: add jekyll-minifier or use htmlcompressor in a CI/CD pipeline
Minify CSS/JS: pre-process your assets using esbuild, webpack, or gulp

Example for minifying HTML in _config.yml:

gems:
  - jekyll-minifier

Or use GitHub Actions to compress your output post-build before deploying.

Step 3: Enable lazy loading for images

Replace traditional image tags with native lazy loading:

<img src="/images/photo.jpg" loading="lazy" alt="Photo description">

This reduces initial page load time significantly for image-heavy pages.

Step 4: Use responsive images

Serve appropriately sized images using the srcset attribute:

<img src="/img/cover.jpg" 
     srcset="/img/cover-480.jpg 480w, 
             /img/cover-800.jpg 800w" 
     sizes="(max-width: 600px) 480px, 800px"
     loading="lazy"
     alt="Blog cover">

Combine this with WebP or AVIF image formats to save bandwidth.

Step 5: Compress images automatically

Before uploading assets, optimize them using tools like:

Squoosh
ImageOptim
Command-line tools like jpegoptim, pngquant

Better yet, use a GitHub Action to compress images on push.

Step 6: Improve metadata and on-page SEO

Use proper metadata in every post:

Unique <title> and <meta name="description">
Open Graph and Twitter card tags for social sharing
Use canonical URLs to avoid duplicate content

Example using Liquid in your layout:

<title>{{ page.title }} | {{ site.title }}</title>
<meta name="description" content="{{ page.description | default: site.description }}">
<link rel="canonical" href="{{ page.url | absolute_url }}">

Step 7: Use clean, semantic HTML structure

Avoid deeply nested divs and prioritize semantic tags:

<main>, <article>, <section>, <nav>, <aside>
Proper heading hierarchy: <h2> for sections, <h3> for subsections
Alt attributes for all images

This improves accessibility and helps search engines understand your content.

Step 8: Add a sitemap and robots.txt

Jekyll supports jekyll-sitemap for automatic generation:

plugins:
  - jekyll-sitemap

Also add a robots.txt file at the root:

User-agent: *
Allow: /

Sitemap: {{ site.url }}/sitemap.xml

Step 9: Set proper caching headers via GitHub Pages

GitHub Pages doesn’t let you set cache headers directly, but you can:

Use hashed filenames for static assets (e.g. main.9c2f3.css)
Use a CDN like Cloudflare in front of GitHub Pages for advanced caching

This ensures returning visitors don’t reload unchanged assets.

Step 10: Use schema markup for rich snippets

Enhance search results with structured data:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "{{ page.title }}",
  "datePublished": "{{ page.date | date_to_xmlschema }}",
  "author": {
    "@type": "Person",
    "name": "Admin"
  },
  "description": "{{ page.description }}",
  "mainEntityOfPage": "{{ page.url | absolute_url }}"
}
</script>

This improves visibility in search with star ratings, FAQs, and more.

Step 11: Optimize font loading

Don’t block rendering with external fonts. Use preload and fallbacks:

<link rel="preload" href="/fonts/yourfont.woff2" as="font" type="font/woff2" crossorigin>

Also define font stacks with system fallbacks to improve speed.

Step 12: Analyze crawl and index health with Search Console

Submit your sitemap to Google Search Console:

https://yourdomain.com/sitemap.xml

Monitor:

Crawling errors
Indexed URLs vs. actual pages
Mobile usability issues

These insights help you tweak your site structure and content for long-term visibility.

Conclusion

Jekyll gives you performance and control advantages over WordPress, but to fully realize its potential, you must actively optimize. From image handling and lazy loading to metadata and search integration, every layer contributes to both speed and SEO success.

In the next installment of this case study series, we’ll focus on enhancing your content workflow using collections, data files, and reusable components to scale your site the smart way.

Risa Morishita🕒📗