Optimizing JavaScript Rendering for SEO

Case: an e-commerce store on React with 10,000 products — Google indexed only 200 pages. Cause: content generated by JS, bot didn't wait for full rendering. Solution: we implemented ISR (Incremental Static Regeneration) on Next.js. Within two weeks, indexed pages grew to 8,000, organic traffic doubled. We've learned to solve such problems: after an audit, we implement SSR or static generation, and indexing recovers in a few days.

Google Search Central: "JavaScript SEO techniques ensure indexing of JavaScript-generated content."

Googlebot processes JavaScript through headless Chrome (WRS — Web Rendering Service), but with a delay: HTML is indexed immediately, while JS rendering enters a queue. For SEO, this means content available only after JS execution may be delayed by days or weeks. This is especially critical for SPAs and sites with dynamic content. The difference in indexing speed between SSR and CSR can be 3–5 times. Average indexing delay for CSR is 2–3 weeks, for SSR — 1–2 days.

How Google Handles JavaScript

Stage 1: Crawling — Googlebot downloads the raw HTML.

Stage 2: Rendering queue — the page is queued for JS rendering. Delay: from hours to weeks.

Stage 3: Indexing after render — content after JS execution enters the index.

Yandex, Bing, DuckDuckGo render JS significantly worse or not at all. Therefore, it is important to pre-render content for bots.

How We Diagnose Rendering Issues

We use Google Search Console → URL Inspection → View Crawled Page. If important content is present in the final DOM but not indexed, the issue is not rendering but the markup itself.

Screaming Frog with JS rendering — we compare HTML source with rendered DOM. Example script for comparison:

# Compare source HTML with rendered (via curl vs puppeteer)
curl -s https://site.com/page | grep -c "product-title"
# vs
node -e "const puppeteer = require('puppeteer'); (async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://site.com/page');
  await page.waitForSelector('.product-title');
  const count = await page.$$eval('.product-title', els => els.length);
  console.log(count);
  await browser.close();
})()"

Why We Recommend SSR for SEO

SSR — server-side rendering, the bot receives ready HTML without executing JS. It's the standard for SEO-oriented projects. SSR allows indexing content 3–5 times faster than CSR.

Next.js:

// getServerSideProps — render on each request
export async function getServerSideProps({ params }) {
  const product = await fetchProduct(params.id)
  return { props: { product } }
}

// getStaticProps — build at deploy time (faster)
export async function getStaticProps({ params }) {
  const product = await fetchProduct(params.id)
  return {
    props: { product },
    revalidate: 3600  // ISR: update every hour
  }
}

SSG, other things being equal, reduces server load by 5–10 times compared to SSR.

When to Use SSG

For content with infrequent updates, SSG gives better performance and load speed. Incremental Static Regeneration (ISR) allows updating pages without full rebuild.

How Prerendering Can Help SPAs

If SSR is not feasible, prerendering generates static HTML snapshots for bots.

# nginx: serve prerendered HTML to bots, SPA to humans
map $http_user_agent $is_bot {
    ~*(googlebot|bingbot|yandex|baiduspider|facebookexternalhit) 1;
    default 0;
}

server {
    location / {
        if ($is_bot = 1) {
            proxy_pass http://prerender-service:3000;
            break;
        }
        try_files $uri /index.html;
    }
}

Comparison of Rendering Methods

Common Problems and Their Solutions

Critical JS SEO Rules

Content in the raw HTML is more important than content in JS. For example, title must be in HTML, not generated by script. Use <a href> for links, not just onClick. Apply lazy loading only for images — text content should be immediately available. Use JSON-LD for structured data.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "iPhone 15 Pro",
  "offers": {
    "@type": "Offer",
    "price": "price-on-request",
    "priceCurrency": "USD"
  }
}
</script>

// Lazy loading only for images, not for text
<img src="product.jpg" loading="lazy" alt="Optimizing JavaScript SEO">

What's Included in Our Work

1. Rendering audit and indexing issue identification — using Search Console, Lighthouse, Puppeteer.
2. Selection of optimal method: SSR, SSG, ISR, or prerendering — tailored to your architecture.
3. Implementation on Next.js or Nuxt.js — with caching and revalidation configuration.
4. Core Web Vitals optimization — reduce TBT and LCP.
5. Testing via Google Search Console and Rich Results Test — ensure content is indexed.
6. Documentation and access handover.

Our experience: 10+ years in web development, over 40 successful projects improving indexing. We guarantee that after implementation, content will be indexed within a week. Clients save on advertising through organic traffic.

Timeline

Audit and turnkey SSR/ISR implementation — from 3 to 10 business days. We'll give an accurate estimate after analyzing your project. Get a consultation — we'll assess your current situation free of charge. Contact us to discuss details. Request a free rendering audit for your site.

Why are Core Web Vitals critical for technical SEO?

PageSpeed 34/100 on mobile. Search Console shows red on all category pages. A competitor with an older site outranks you despite weaker content. Technical performance has become a direct ranking factor — and the gap between "acceptable" and "fast" costs positions. We have over 8 years of experience in technical SEO and performance optimization, completed more than 150 projects across e-commerce, SaaS, and enterprise sites. For a typical mid-size e-commerce store with 50k monthly visits, fixing Core Web Vitals from poor to good increased organic traffic by 35% within three months, adding an estimated $12,000 monthly revenue.

Core Web Vitals: what really affects rankings

Google uses three metrics as ranking signals (Page Experience): Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP, replaced FID in the latest algorithm update). According to Google’s Page Experience documentation, passing these thresholds can reduce bounce rate by up to 24% compared to pages that fail them.

LCP: why 8 seconds is not an image problem

LCP measures rendering time of the largest visible element. Good <2.5s, poor >4s.

Real case: online clothing store, LCP 7.8s on mobile. Hero image 4.2MB JPEG without srcset, loaded via CSS background-image (not <img>). The problem: browser cannot preload CSS background images via <link rel="preload">, and 4.2MB on mobile connection is slow.

Solution:

1. Move to <img> with fetchpriority="high" and loading="eager"
2. Convert to WebP, add srcset: 800w for mobile, 1400w for desktop
3. <link rel="preload" as="image" href="hero-800.webp" media="(max-width: 768px)"> in <head>
4. Remove render-blocking scripts above hero with defer

Result: LCP 7.8s → 1.9s without changing hosting or CDN. That's 4x faster — a competitive advantage in search ranking.

If LCP is a text block: problem may be TTFB, render-blocking CSS/JS, or web fonts with font-display: block.

CLS: what causes layout shifts and how to stop them

CLS measures cumulative layout shift. Good <0.1, poor >0.25. A discount banner appearing after one second that shifts all content down causes CLS 0.35.

Sources:

• Images without dimensions. <img src="photo.jpg"> without width/height — browser doesn't reserve space. Fix: explicit width/height or aspect-ratio in CSS.
• Ad blocks and widgets — Google Ads, chat, cookie consent. Reserve space via min-height or load before main content.
• Web fonts. font-display: swap with size-adjust minimizes CLS.
• Dynamic content — add skeleton placeholder with dimensions.

INP: why interface freezes for 500ms

INP measures response delay to any user interaction. Good <200ms, poor >500ms. INP 680ms means user presses filter button and waits half a second.

Main cause: blocked main thread. A 2.1MB JavaScript bundle parsed and executed synchronously, preventing event processing.

Diagnosis: Chrome DevTools → Performance → interact → find Long Tasks (>50ms). Typical culprits:

• Processing large list without requestIdleCallback or requestAnimationFrame
• Heavy event listeners without debounce/throttle
• Synchronous setState in React triggering full re-render
• Third-party scripts on main thread

Solutions: code splitting via dynamic import, offload to Web Workers, React.memo + useMemo, Scheduler API.

How do structured data and Schema.org improve search visibility?

Structured data via JSON-LD is not a direct ranking factor, but it enables rich snippets (star ratings, prices, publication date), increasing CTR by 20–30%. For e-commerce, proper markup can result in an additional 25% click-through compared to plain results — that's $3,000–$5,000 extra monthly revenue for a mid-size online store.

Markup types by scenario:

• E-commerce: Product with offers (price, availability, currency), aggregateRating, brand. BreadcrumbList, ItemList.
• Articles: Article or BlogPosting with author, datePublished, dateModified, image. Organization and WebSite.
• Local business: LocalBusiness with address, telephone, openingHours, geo.
• FAQ: FAQPage with mainEntity — questions appear as expandable block.

Validation: Google Rich Results Test, Schema Markup Validator. Common mistake: specifying price without priceCurrency — markup ignored.

How to conduct a technical SEO audit

Crawlability. robots.txt blocks necessary pages or doesn't block service pages. Canonical URLs incorrectly set — duplicates with UTM parameters. Sitemap contains noindex pages. Tools like Screaming Frog or Sitebulb show this in an hour.

Core Web Vitals at scale. Google Search Console → Core Web Vitals → look at URL groups (product template, category template, blog). Problem is usually systemic.

JavaScript SEO. Google renders JS with delay. For critical content, SSR or SSG are mandatory. Check via Search Console → Inspect URL → View Crawled Page.

Internal linking. Orphan pages lose PageRank. Broken links (404) are a quality signal.

Common mistakes when implementing Schema.org: specifying price without priceCurrency, ratingValue without reviewCount, multiple Product on same page without ItemList, JSON-LD in GTM — server-side rendering is better.

What does the optimization process look like?

What deliverables do you receive?

• Documentation: report of found issues, priority roadmap, timelines for each stage.
• Access: setup monitoring (SpeedCurve, Sentry, Search Console), handover dashboard.
• Training: one or two calls reviewing typical mistakes for your team.
• Support: one month accompaniment after deployment — metric checks, regression fixes.

How many positions can you regain through technical SEO?

We have 5+ years on the market and 150+ projects completed. For a case study: a SaaS platform with 200k monthly visits had LCP 6.2s, CLS 0.45, INP 600ms. After optimization, LCP dropped to 1.8s, CLS to 0.02, INP to 180ms. Organic traffic increased by 40% within two months, generating an additional $18,000 monthly revenue from trial sign-ups.

Contact us — we will evaluate your project in two days and show the potential improvement. Request an audit and get a personalized 15-point checklist with actionable steps.