FlatWP Development

Category: Performance

  • Image Optimization in Headless WordPress: Beyond next/image

    WordPress is notorious for bloated images. Editors upload 5MB photos from their phone, and suddenly your site loads like it’s 2010.

    In headless WordPress, you have a unique opportunity to fix this at the framework level.

    The WordPress Media Problem

    Traditional WordPress generates multiple image sizes on upload. But these sizes are often wrong for modern responsive design. You end up with dozens of unused files cluttering your media library.

    Plus, WordPress doesn’t handle modern formats (WebP, AVIF) or responsive srcsets particularly well.

    The Next.js Solution

    Next.js Image component handles optimization automatically:

    • Serves modern formats (WebP/AVIF) to supporting browsers
    • Generates responsive srcsets on-demand
    • Lazy loads by default
    • Prevents layout shift with automatic sizing

    But you need to configure it correctly for WordPress.

    FlatWP’s Approach

    We create a custom image loader that:

    1. Pulls the original image from WordPress
    2. Proxies it through Next.js optimization
    3. Caches the optimized versions globally
    4. Serves from Vercel’s edge network

    The result? A 5MB WordPress upload becomes a 50KB WebP delivered in milliseconds.

    Configuration

    In your next.config.js:

    images: {
  domains: ['cms.flatwp.com/'],
  formats: ['image/avif', 'image/webp'],
  deviceSizes: [640, 750, 828, 1080, 1200, 1920],
}

    Then use it in components:

    <Image
  src={post.featuredImage.url}
  alt={post.featuredImage.alt}
  width={1200}
  height={630}
  priority={isAboveFold}
/>

    WordPress-Side Optimization

    Even better: prevent bloated uploads in the first place. Our WordPress plugin includes:

    • Upload size limits
    • Automatic compression before upload
    • Warnings when images exceed recommended dimensions
    • Bulk optimization tools for existing media

    Performance Impact

    We measured a typical blog post with 5 images:

    • Traditional WordPress: 2.3MB transferred, 4.2s load
    • FlatWP optimized: 180KB transferred, 0.8s load

    That’s a 92% reduction in bandwidth and 5x faster load times. For free.

  • SEO in Headless WordPress: Better Than Traditional?

    One concern we hear about headless WordPress: “What about SEO?”

    The truth is, headless WordPress can be better for SEO than traditional WordPress. Here’s why.

    Performance is an SEO Factor

    Google’s Core Web Vitals directly impact rankings. FlatWP’s static/ISR approach delivers:

    • LCP < 1s: Pages load in under a second (vs 3-5s for traditional WP)
    • CLS near 0: No layout shift from lazy-loaded elements
    • FID < 50ms: Instant interactivity

    These metrics give you a ranking advantage over slower traditional sites.

    Server-Side Rendering

    Unlike single-page apps that struggle with SEO, Next.js renders full HTML on the server. Crawlers see complete, rendered pages – no JavaScript execution required.

    This means:

    • Content is immediately available to bots
    • Social media crawlers see proper Open Graph data
    • No SEO penalties for client-side rendering

    Meta Data from WordPress

    FlatWP pulls SEO metadata directly from Yoast or Rank Math:

    export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug);
  
  return {
    title: post.seo.title,
    description: post.seo.metaDesc,
    openGraph: {
      images: [post.seo.opengraphImage],
    },
  };
}

    Editors manage SEO in WordPress. Next.js renders it perfectly.

    Automatic Sitemaps

    FlatWP generates XML sitemaps dynamically from WordPress content:

    export default async function sitemap() {
  const posts = await fetchAllPosts();
  
  return posts.map(post => ({
    url: `https://flatwp.com/blog/${post.slug}`,
    lastModified: post.modifiedDate,
  }));
}

    When content updates, the sitemap updates. Search engines stay in sync.

    Schema Markup

    We include proper JSON-LD schema for articles:

    {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "datePublished": post.date,
  "author": {
    "@type": "Person",
    "name": post.author.name
  }
}

    This helps Google understand your content structure.

    No Bloat

    Traditional WordPress sites load unnecessary plugins, tracking scripts, and theme bloat. This slows everything down.

    With FlatWP, you control exactly what JavaScript loads. Most pages need zero client-side JS for content display.

    The Bottom Line

    Headless WordPress with Next.js is better for SEO than traditional WordPress because:

    1. Faster page loads = better rankings
    2. Perfect SSR = happy crawlers
    3. Clean HTML = no bloat penalty
    4. Modern image formats = faster LCP

    You get WordPress’s content management with Next.js’s performance. That’s an SEO win-win.