0.3a — JavaScript Language Fundamentals
To audit modern single-page applications, you must be able to read the code. Key concepts include:
- Variables & Scope: Understanding closures and block scoping (
let/constvs hoisting withvar). - Data Structures: Object and array manipulation, destructuring, and spread/rest operators common in React/Next.js architectures.
- Functions & Modules: Arrow functions, lexical
this, and the shift from CommonJS to ES modules (import/export). - Modern Syntax: Recognizing optional chaining (
?.) and nullish coalescing (??) when tracing logic.
0.3b — The Browser, DOM, and Rendering
The DOM is a live, in-memory tree, distinct from the raw HTML. Search engines index the rendered DOM, not just the source code.
- Event Loop & Main Thread: Browsers execute JS on a single main thread. Long-running synchronous tasks block the main thread, freezing the UI and destroying INP (Interaction to Next Paint) scores.
- Reflow vs Repaint: JS that manipulates layout properties (like width or position) triggers a "reflow" across the entire layout tree—an expensive operation that slows down the page.
- Script Loading: The
<script>tag blocks the HTML parser. Usingasyncordeferallows the parser to continue while the script downloads.
0.3c — Asynchronous JS & Data Fetching
Modern sites fetch data after the initial HTML loads. This creates SEO challenges if content is delayed.
- Promises & Async/Await: The modern standard for handling asynchronous operations like API calls.
- Fetch API: Requesting JSON endpoints client-side. If a crawler times out before the fetch completes, the content won't be indexed.
- Intersection Observer: The performant way to implement lazy loading or infinite scrolling without attaching expensive event listeners to the scroll event.
0.3d — How Search Engines Execute JS
Googlebot uses the Web Rendering Service (WRS)—an evergreen Chromium browser—to execute JS. The pipeline is Crawl → Render → Index.
Due to the massive compute cost, rendering is deferred to a queue. Googlebot crawls the raw HTML first (first wave), then queues the page for rendering (second wave). This causes an indexing delay for JS-reliant content. Furthermore, Googlebot does not click buttons, scroll endlessly, or accept cookies, meaning content gated behind interaction is invisible.
0.3e — Rendering Strategies
The rendering strategy sets the absolute ceiling for a site's SEO potential.
- CSR (Client-Side Rendering): Worst for SEO. The server sends an empty `div` and JS builds the page. Fragile and relies entirely on the WRS.
- SSR (Server-Side Rendering): Server executes the JS per-request, delivering fully formed HTML. Excellent for dynamic content.
- SSG (Static Site Generation): HTML is pre-built at deploy time. Fastest performance, but requires rebuilds for content updates.
- ISR & Hydration: Incremental generation combines SSG speed with SSR freshness. Hydration is the process of attaching event listeners to server-rendered HTML.
0.3f — JS SEO Failure Modes Checklist
When auditing, look for these fatal technical flaws:
- Links injected as
<span onclick="...">instead of standard<a href>. - Content relying on user interaction (infinite scroll, "Load More" without pagination fallback) will never be seen by Google.
- SPA routing that uses fragments (e.g.,
example.com/#/about) which engines treat as the same page. - Canonicals or robots meta tags manipulated asynchronously too late in the rendering cycle.
- Soft 404s caused by JS routers failing to issue a true HTTP 404 status code to the server.