GLOSSARY
Search Marketing FAQ
Concise answers to the most common questions relevant to SEO, GEO, CRO, and PPC. Filter by discipline, platform, and topic. Cortex references its corpus of platform-published best practices to draft each answer, with citations linking back to the source documents.
Showing 1417-1440 of 1947 questions
What is critical CSS, and why should I inline it?SEOPage Speed / Core Web Vitals+
Critical CSS is the minimal CSS needed to render above-the-fold content. Inlining critical CSS in the <head> eliminates a render-blocking network request, improving FCP and LCP by 200-1000ms. Non-critical CSS is loaded asynchronously. Trade-off: HTML size increases. Net win for pages where 30%+ of CSS is below-the-fold. Generate with tools like Critical or critters.
in Performance Optimization
How do I extract and generate critical CSS?SEOImage Optimization+
Four tools. Critical (npm package) - works with most static sites. Critters (Webpack/Vite plugin) - integrates into build pipeline. PurgeCSS - removes unused CSS but doesn't isolate critical. Penthouse - older but reliable. Pattern: run during build, output above-fold CSS, inline into HTML head, lazy-load remainder. Most static-site generators have plugins.
in Performance Optimization
What is the difference between preload and prefetch?SEO+
preload: load a resource now (high priority, for current page). prefetch: load a resource for future navigation (low priority, when idle). Use preload for hero images, web fonts, critical CSS files. Use prefetch for next-page assets when you predict navigation. Misusing preload (too many) hurts the page; misusing prefetch wastes bandwidth.
in Performance Optimization
When should I use preload for fonts, CSS, or images?SEOPage Speed / Core Web Vitals+
Three rules. Preload web fonts that block FCP (font files referenced in CSS that the browser discovers late). Preload the LCP image (especially if loaded by background-image or JS). Preload critical CSS when the file is large. Cap total preloads at 3-5 - more crowds the network. preload too many resources and you delay everything.
in Performance Optimization
When should I use preconnect, and what does it improve?SEO+
Use preconnect to establish early connections to third-party origins (fonts.googleapis.com, analytics, CDN). Saves the DNS lookup + TCP handshake + TLS negotiation time on the first request to that origin. Cap at 4 preconnects total. Match crossorigin attribute to actual request mode (no-cors for analytics beacons; CORS for fonts). Over-using preconnect can backfire.
in Performance Optimization
How should I load web fonts without hurting performance?SEO+
Five tactics. Use font-display: swap (avoid invisible text). Self-host fonts (avoid third-party DNS lookup). Subset fonts to needed character ranges. Preload critical font files (woff2 only). Use system font stacks as fallback to prevent FOUT layout shift. Limit to 2-3 weights per family. Variable fonts can reduce file count dramatically.
in Performance Optimization
What is the best way to prevent font render delays?SEOGoogle+
Four practices. font-display: swap in @font-face rules (renders fallback first, swaps when font loads). Preload critical font files in HTML head. Self-host fonts (faster than Google Fonts). Subset fonts to remove unused character ranges. The combination prevents both flash of invisible text (FOIT) and flash of unstyled text (FOUT).
in Performance Optimization
How do I optimize JavaScript bundles for speed?SEOPage Speed / Core Web VitalsImage Optimization+
Six tactics. Code-split by route (each page loads only what it needs). Tree-shake unused exports. Lazy-load below-the-fold components. Minify and gzip/brotli compress. Defer non-critical scripts with defer attribute. Remove unused libraries (audit with bundlephobia, webpack-bundle-analyzer). Target under 200KB compressed JS per route for solid INP.
in Performance Optimization
Should I split JavaScript into smaller chunks?SEO+
Yes for code-splitting (per-route bundles). Splitting reduces initial bundle size and improves TTI (time to interactive). Caveat: too many small chunks introduces request overhead. Optimal chunk size is 50-200KB. Use dynamic imports for components only needed after interaction. Most modern frameworks (Next.js, Remix, SvelteKit) code-split automatically.
in Performance Optimization
What is the impact of defer and async on JavaScript loading?SEO+
defer: download in parallel, execute after HTML parsing, maintain order. async: download in parallel, execute as soon as ready, no order guarantee. Use defer for scripts that depend on DOM or each other. Use async for independent third-party scripts (analytics). Neither blocks HTML parsing - both far better than blocking script tags. Default to defer for application code.
in Performance Optimization
How can I reduce render-blocking resources?SEOPage Speed / Core Web Vitals+
Five tactics. Inline critical CSS in <head> (eliminates render-blocking CSS request). Defer non-critical JavaScript (defer or async attributes). Lazy-load below-the-fold CSS via media queries or rel='preload' + onload swap. Move scripts to bottom of body. Minimize @import in CSS (cascade-blocking). Identify render-blocking resources in Lighthouse 'Eliminate render-blocking resources' audit.
in Performance Optimization
How do I optimize CSS delivery on the critical rendering path?SEO+
Four steps. Inline critical CSS in HTML head (no network request). Async-load non-critical CSS via preload + onload swap or rel='alternate stylesheet'. Minify CSS to reduce parse time. Remove unused CSS with PurgeCSS or coverage analysis. The goal: ship under 14KB of CSS in the initial HTML response (fits in first TCP roundtrip).
in Performance Optimization
What image formats are best for fast loading?SEOImage Optimization+
Four formats. AVIF: smallest size, slowest encode, recent browser support. WebP: 30-50% smaller than JPEG, broad support, default choice in 2026. JPEG: legacy fallback for photos. SVG: vector graphics with sharp lines (logos, icons). PNG: photos with transparency. Use <picture> with AVIF + WebP + JPEG fallback for maximum compatibility. Don't use GIF for photos.
in Image & Asset Optimization
How do I compress and resize images without losing too much quality?SEOPage Speed / Core Web VitalsImage Optimization+
Two-step. Resize to display size first (don't ship 4000px for a 600px slot). Compress with sharp, ImageOptim, or Squoosh at quality 75-85 for photos. Use sharp CLI for batch processing: 'sharp -i input.jpg -o output/ -f webp -q 82 resize 1600'. Typical reduction: 60-90% file size with minimal visible quality loss.
in Image & Asset Optimization
When should I use lazy loading for images and videos?SEOPage Speed / Core Web VitalsImage Optimization+
Always for below-the-fold media. Use loading='lazy' attribute on img and iframe tags - native browser lazy loading. Don't lazy-load above-the-fold or LCP images (delays LCP). For videos, use preload='none' and click-to-play poster images. Self-hosted video uses far more bandwidth than YouTube embeds; lazy-load by default.
in Image & Asset Optimization
How do I choose between SVG, WebP, AVIF, and JPEG/PNG?SEOImage Optimization+
Match format to content. SVG for vector content (logos, icons, simple illustrations) - infinitely scalable, tiny. AVIF for hero photos where every byte matters and slow encode is acceptable. WebP as the modern default for most photos. JPEG as fallback for photos when AVIF/WebP not viable. PNG only for photos with transparency. Don't use PNG for general photos - 3-5x larger than WebP.
in Image & Asset Optimization
What is a CDN, and how does it improve performance?SEO+
Content Delivery Network. Replicates static assets across global edge servers, serving from the location nearest each user. Reduces latency by 50-200ms vs origin server. Examples: Cloudflare, Fastly, AWS CloudFront, Vercel Edge Network. Most modern hosting (Vercel, Netlify) includes CDN by default. For traditional hosting, add Cloudflare in front (free tier sufficient for most sites).
in Delivery, Caching & Monitoring
When should I use a CDN for static assets?SEOPage Speed / Core Web Vitals+
Always for production sites. Static assets (images, CSS, JS, fonts) are the primary CDN use case. Benefits: lower latency, automatic edge caching, DDoS protection, bandwidth offloading from origin. Cost: free (Cloudflare) to modest (Fastly enterprise). The performance gain (TTFB drops 200-500ms for distant users) is too large to skip. Default on for all production deployments.
in Delivery, Caching & Monitoring
How does browser caching improve page speed?SEOPage Speed / Core Web Vitals+
Cached assets load instantly from disk - zero network requests. Repeat visitors get sub-second page loads. Configure via Cache-Control headers: 'public, max-age=31536000, immutable' for versioned assets (with hashed filenames). Short or no-cache for HTML. Cache hit ratio is the metric to optimize. Browsers cache JS, CSS, images, fonts, and HTML according to server headers.
in Delivery, Caching & Monitoring
What cache-control settings should I use for static files?SEO+
Hashed assets: 'public, max-age=31536000, immutable' - cache forever (filename changes invalidate). HTML: 'public, max-age=0, must-revalidate' - always revalidate. API responses: depends on content type. Static images: long max-age (months). Configuration goes in web server config (Nginx, Apache) or hosting platform (Vercel, Netlify) edge settings. Cloudflare can override origin Cache-Control.
in Delivery, Caching & Monitoring
How do I reduce the number of HTTP requests?SEO+
Seven tactics. Bundle CSS and JS (fewer files, fewer requests). Inline critical CSS. Use sprites or icon fonts for small icons. Use SVG inline instead of separate files. Use CSS for simple shapes instead of images. Combine duplicate libraries. Eliminate unused third-party scripts. With HTTP/2 multiplexing, request count matters less than it did, but big-bundle approach still wins.
in Delivery, Caching & Monitoring
Should I bundle or split files for best performance?SEOImage Optimization+
Both, in balance. Bundle related code into route-level chunks (50-200KB per chunk). Split by route to load only what's needed per page. Don't bundle everything into one giant file (slow initial load); don't split into hundreds of tiny files (request overhead). Modern build tools (Vite, Webpack, esbuild) handle this automatically with sensible defaults.
in Delivery, Caching & Monitoring
How does server response time affect page speed?SEOPage Speed / Core Web Vitals+
Server response time (TTFB) is the floor for everything else - no page can load faster than its TTFB. High TTFB delays FCP, LCP, and all downstream metrics by the same amount. Causes: slow database queries, uncached responses, distant server location, blocking middleware. Improvements: CDN, server-side caching (Redis, Memcached), faster hosting, database query optimization.
in Delivery, Caching & Monitoring
What role does compression like Gzip or Brotli play?SEO+
Reduces transferred bytes by 60-80% for text-based assets (HTML, CSS, JS, JSON). Brotli is 15-20% better than Gzip but slightly slower to compress. Use Brotli for static assets (compress once, cache compressed). Use Gzip for dynamic responses if Brotli isn't available. Most CDNs handle compression automatically. Verify with curl --compressed.
in Delivery, Caching & Monitoring