Performance & SEO

This content is for Frontend. Switch to the latest version for up-to-date documentation.

Web performance and Search Engine Optimization (SEO) are closely related. Fast websites rank higher, convert better, and provide a better user experience.

Web Performance

Why Performance Matters

User Experience: 53% of mobile users abandon sites that take longer than 3 seconds to load.
SEO Ranking: Google uses page speed as a ranking factor.
Conversion: Every 100ms of latency costs Amazon approximately 1% in sales.

Core Web Vitals

Core Web Vitals are Google’s standardized metrics for measuring real-world user experience. They are a direct ranking signal.

Metric	What it Measures	Good Threshold
LCP (Largest Contentful Paint)	How fast the main content loads.	≤ 2.5 seconds
INP (Interaction to Next Paint)	How quickly the page responds to user input.	≤ 200 milliseconds
CLS (Cumulative Layout Shift)	How much the page layout shifts unexpectedly.	≤ 0.1

Measuring Performance

Tool	Type	Description
Lighthouse	Built into Chrome DevTools	Audits performance, accessibility, SEO, and best practices. Generates a score out of 100.
PageSpeed Insights	Google Web Tool	Combines lab data (Lighthouse) with real-world field data from Chrome users.
WebPageTest	Web Tool	Advanced performance testing with waterfall charts and filmstrip views.
Chrome DevTools Network tab	Built-in	See every request, its size, and timing. Simulate slow connections.
Chrome DevTools Performance tab	Built-in	Record and analyze runtime performance, identify layout thrashing and long tasks.

Optimization Techniques

1. Image Optimization

Images are typically the largest assets on a page.

Modern Formats: Use WebP or AVIF instead of PNG/JPEG for significantly smaller file sizes.
Responsive Images: Serve different sizes for different screen widths using srcset.
Lazy Loading: Defer off-screen images with loading="lazy".
The <picture> Element: Provide multiple sources and let the browser pick the best one.

<!-- Responsive image with modern formats -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="Hero banner"
    width="1200"
    height="600"
    loading="lazy"
  />
</picture>

<!-- Responsive sizes -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Responsive photo"
/>

2. Code Optimization

Minification: Remove whitespace, comments, and shorten variable names. Build tools do this automatically.
Tree-Shaking: Bundlers (Vite, Webpack) remove unused code from your final bundle.
Code Splitting: Load only the JavaScript needed for the current page, not the entire app.
Lazy Loading Components: Import components dynamically when they are needed.

// Dynamic import (code splitting)
const AdminPanel = React.lazy(() => import('./AdminPanel'));

3. Loading Strategy

defer / async on scripts: Prevent render-blocking JavaScript.
Preload critical assets: <link rel="preload" href="font.woff2" as="font" />.
Preconnect to origins: <link rel="preconnect" href="https://api.example.com" />.
Font Display: Use font-display: swap to prevent invisible text during font loading.

4. Caching

Browser Cache: Set proper Cache-Control headers so returning visitors don’t re-download assets.
Service Workers: Cache assets for offline use (see PWAs in Modern Web).
CDN: Serve static assets from edge servers close to the user (Cloudflare, AWS CloudFront).

Search Engine Optimization (SEO)

SEO is the practice of making your website understandable to search engines so it ranks well for relevant queries.

How Search Engines Work

Crawling: Search engine bots (like Googlebot) follow links to discover pages.
Indexing: The content of each page is analyzed and stored in the search engine’s database.
Ranking: When a user searches, the engine returns the most relevant indexed pages.

Technical SEO Essentials

Meta Tags

<head>
  <title>Best Coffee Shops in Paramaribo | CoffeeGuide</title>
  <meta
    name="description"
    content="Discover the top-rated coffee shops in Paramaribo with reviews, photos, and directions."
  />
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://example.com/coffee-shops" />
</head>

<title>: The most important on-page SEO element. Should be unique per page, under 60 characters.
meta description: The snippet shown in search results. Under 160 characters.
canonical: Tells search engines which URL is the “official” version (prevents duplicate content issues).

Open Graph meta tags control how your page appears when shared on social media (Facebook, LinkedIn, WhatsApp, etc.).

<meta property="og:title" content="Best Coffee Shops in Paramaribo" />
<meta
  property="og:description"
  content="Discover the top-rated coffee shops..."
/>
<meta property="og:image" content="https://example.com/images/coffee-og.jpg" />
<meta property="og:url" content="https://example.com/coffee-shops" />
<meta property="og:type" content="website" />

<!-- Twitter/X specific -->
<meta name="twitter:card" content="summary_large_image" />

Structured Data (JSON-LD)

Structured data helps search engines understand the meaning of your content, enabling rich results (star ratings, FAQs, recipes, etc.).

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Café Paramaribo",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Paramaribo",
      "addressCountry": "SR"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.5",
      "reviewCount": "120"
    }
  }
</script>

Other SEO Files

robots.txt: Tells crawlers which pages they can or cannot visit.
sitemap.xml: A map of all your pages, helping search engines discover content efficiently.

User-agent: *
Allow: /
Sitemap: https://example.com/sitemap.xml

Content & Semantic SEO

Use one <h1> per page with the primary keyword.
Use semantic HTML (<article>, <nav>, <main>) for clear page structure.
Write descriptive anchor text (not “click here”).
Ensure images have meaningful alt text.
Use internal linking between related pages.

References

Built with passion by Ngineer Lab