Technical SEO Fundamentals

Website Speed and Performance Optimization

Why Speed Matters

• 1 second delay = 7% conversion loss
• 40% of users abandon sites taking >3 seconds
• Mobile users expect sub-3 second load times

• Core Web Vitals are ranking factor
• Google favors fast sites
• Crawl budget increases for fast sites
• Better click-through rates

• Faster sites = more conversions
• Reduced bounce rate
• Improved engagement
• Better mobile rankings

How to Measure Speed

1. Google PageSpeed Insights (Free)
2. Desktop and mobile scores
3. Core Web Vitals metrics
4. Lab and field data
5. Recommendations
6. Google Chrome DevTools (Free)
7. Real-time performance metrics
8. Network waterfall
9. JavaScript execution time
10. Memory usage
11. Lighthouse (Free)
12. Complete audit
13. Performance, accessibility, best practices
14. Detailed recommendations
15. Scoring system
16. WebPageTest (Free)
17. Waterfall charts
18. Video of page load
19. Device/location testing
20. Comparison tools
21. GTmetrix (Paid)
22. Performance reports
23. Detailed waterfall
24. Video recordings
25. Monitoring

Core Web Vitals Metrics

• What it measures: Time until largest visible element loads
• Target: < 2.5 seconds
• Impact: First impression of performance

• ❌ Slow server response
• ❌ Large, unoptimized images
• ❌ Render-blocking CSS/JavaScript
• ❌ Client-side rendering delays

• ✅ Optimize server response (TTFB)
• ✅ Compress and lazy-load images
• ✅ Remove render-blocking resources
• ✅ Cache strategy

• What it measures: Time from user action to browser response
• Target: < 100ms (FID) or < 200ms (INP)
• Impact: Perceived responsiveness

• ❌ Heavy JavaScript
• ❌ Long tasks (>50ms)
• ❌ Main thread blocking
• ❌ Poor code performance

• ✅ Code splitting and lazy loading
• ✅ Break long tasks into smaller pieces
• ✅ Move work off main thread (Web Workers)
• ✅ Use efficient JavaScript

• What it measures: How much page content shifts unexpectedly
• Target: < 0.1
• Impact: Visual stability and user experience

• ❌ Ads loading without reserved space
• ❌ Fonts loading and changing layout
• ❌ Images without dimensions
• ❌ Dynamic content insertion

• ✅ Reserve space for dynamic content
• ✅ Use font-display: swap
• ✅ Specify image dimensions (width/height)
• ✅ Avoid inserting content above existing content

Core Web Vitals Score Ranges

Page Speed Optimization Techniques

• Use modern formats: WebP (30-40% smaller)
• Compress aggressively: TinyPNG, ImageOptim
• Responsive images: srcset for different sizes
• Lazy loading: Load images as user scrolls
• CDN delivery: Faster distribution globally

<img 
  srcset="image-small.webp 500w, 
          image-large.webp 1000w"
  src="image-fallback.jpg"
  loading="lazy"
  width="600"
  height="400"
  alt="Description"
/>

• Removes unnecessary characters
• Reduces file size by 15-20%
• Tools: cssnano, PostCSS

• Reduces file size by 30-50%
• Tools: Terser, Webpack, esbuild

• Compresses files on server
• 60-80% reduction
• Should be enabled on all servers
• Check in: nginx, Apache, vercel.json

• Better than gzip
• 15-20% better compression
• Modern browsers support
• Vercel uses this by default

• Image lazy loading (load as scroll)
• Component lazy loading (React.lazy)
• Route lazy loading (code splitting)

<img src="image.jpg" loading="lazy" />

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load image or component
    }
  });
});

• Cache static assets on user's browser
• Set Cache-Control headers
• Reduce repeat page visits by 20-50%

Cache-Control: public, max-age=31536000
// Cache forever (1 year)

Cache-Control: public, max-age=3600
// Cache for 1 hour

Cache-Control: no-cache
// Always validate before using

• Cache on edge servers globally
• Faster delivery to users
• Vercel Edge Network (included)
• Cloudflare, AWS CloudFront, etc.

• Cache database queries
• Cache rendered pages
• Redis, memcached
• Reduces server load

// Dynamic import loads on demand
const HeavyComponent = dynamic(
  () => import('./HeavyComponent'),
  { loading: () => <div>Loading...</div> }
);

// Each route loads its own bundle
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

• Analytics
• Ads
• Chat widgets
• Social media embeds
• Fonts

• Load asynchronously
• Defer loading (async, defer attributes)
• Use Worker/WebWorker
• Remove unused scripts
• Host fonts locally

<!-- Blocking -->
<script src="script.js"></script>

<!-- Non-blocking (async) -->
<script src="script.js" async></script>

<!-- Deferred -->
<script src="script.js" defer></script>

Speed Optimization for harsh-softwaredev.vercel.app

• ✅ Vercel hosting (fast edge network)
• ✅ Next.js (optimized framework)
• ✅ Automatic image optimization
• ✅ Built-in caching

• Large portfolio images
• External embeds (CodePen, YouTube)
• Google fonts
• Third-party analytics

1. Compress portfolio images (WebP format)
2. Enable lazy loading on portfolio items
3. Optimize Google Fonts (use font-display: swap)
4. Use Next.js Image component
5. Enable Vercel Analytics

• LCP: < 2.0s ✅
• FID: < 80ms ✅
• CLS: < 0.05 ✅

Mobile-First Indexing and Responsive Design

Why Mobile-First Matters

• 65% of searches on mobile
• 50% of traffic is mobile
• Users expect mobile-optimized sites
• Mobile ranking = primary ranking

• Google primarily crawls mobile version
• Mobile experience is ranking factor
• Mobile speed is critical
• Responsive design is expected

• Better conversions on mobile
• Lower bounce rate
• Higher engagement
• Larger addressable audience

Mobile-First Indexing Process

1. Google crawls desktop version
2. Desktop = primary ranking signal
3. Mobile version is secondary

1. Google crawls mobile version first
2. Mobile = primary ranking signal
3. Desktop is secondary

• Majority of sites are mobile-first indexed
• Check Search Console for your site's status
• Tools → Settings → Crawled as

Mobile Responsiveness Checklist

<meta name="viewport" 
      content="width=device-width, initial-scale=1.0">

/* Mobile first */
body {
  font-size: 14px;
  padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
  body {
    font-size: 16px;
    padding: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body {
    font-size: 18px;
    padding: 40px;
  }
}

• ✅ Tap targets at least 48x48px
• ✅ No horizontal scrolling
• ✅ Readable text without zooming
• ✅ Touch-friendly navigation
• ✅ Avoid pop-ups on mobile
• ✅ Fast mobile load time

Testing Responsiveness

• Free tool in Search Console
• Tests if site is mobile-friendly
• Provides specific issues
• Pass/Fail result

• Built into Chrome
• Toggle device toolbar
• Test all screen sizes
• Simulate network conditions

• Test on actual phones
• iOS and Android
• Different screen sizes
• Different network speeds

SSL/HTTPS Security and HSTS Headers

Why HTTPS Matters

• Encrypts data in transit
• Prevents man-in-the-middle attacks
• Protects user information
• Builds user trust

• Ranking factor (though minor)
• Green lock icon builds trust
• Required for some features (geolocation, camera)
• Necessary for HTTP/2

• "Not Secure" warning without HTTPS
• Increased bounce rate
• Lower trust

Getting HTTPS

• Free SSL certificates
• Auto-renewal
• Widely supported
• Used by: Vercel, Netlify, WordPress.com

• Extended Validation (EV) certs
• Wildcard certificates
• Multi-domain certificates
• Enhanced warranty

• Vercel: Automatic HTTPS
• Netlify: Automatic HTTPS
• WordPress.com: Automatic HTTPS
• Most modern hosts include HTTPS

HSTS (HTTP Strict Transport Security)

• Forces browser to use HTTPS
• Prevents protocol downgrade
• Protects against SSL stripping attacks
• Preload list for common sites

Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Strict-Transport-Security",
          "value": "max-age=31536000; includeSubDomains; preload"
        }
      ]
    }
  ]
}

• First visit: HTTP redirects to HTTPS
• Subsequent visits: Browser uses HTTPS directly
• Faster connection
• More secure

XML Sitemaps Creation and Submission

What is an XML Sitemap?

• Lists all important pages on your site
• Helps Google discover content
• Indicates priority and freshness
• Especially useful for new sites

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://harsh-softwaredev.vercel.app/</loc>
    <lastmod>2024-01-15</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://harsh-softwaredev.vercel.app/blog/seo-tips</loc>
    <lastmod>2024-01-10</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Sitemap Best Practices

• ✅ Important pages
• ✅ Recent blog posts
• ✅ Service/product pages
• ✅ Main categories

• ❌ Duplicate pages
• ❌ Canonical URLs (only original)
• ❌ Pages with noindex
• ❌ Admin pages
• ❌ Login pages

Creating Sitemaps

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: 'https://harsh-softwaredev.vercel.app',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
    },
    {
      url: 'https://harsh-softwaredev.vercel.app/blog',
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 0.8,
    },
  ]
}

• Plugin automatically generates sitemap
• Update frequency configurable
• Accessible at: /sitemap.xml

• Create XML file manually
• Upload to root directory
• Submit to Search Console

Submitting Sitemaps

1. Go to Sitemaps section
2. Click "Add new sitemap"
3. Enter URL: https://harsh-softwaredev.vercel.app/sitemap.xml
4. Submit
5. Monitor status

User-agent: *
Sitemap: https://harsh-softwaredev.vercel.app/sitemap.xml

• ✅ Faster indexing
• ✅ Improved crawl efficiency
• ✅ Better tracking of content
• ✅ Shows Google what's important

Robots.txt Optimization

What is Robots.txt?

• Tells search engines which pages to crawl/not crawl
• Manages crawl budget
• Blocks sensitive pages
• Located at: /robots.txt

User-agent: [bot name]
Disallow: [path to block]
Allow: [path to allow]
Crawl-delay: [seconds]
Sitemap: [sitemap URL]

Example robots.txt for harsh-softwaredev.vercel.app

# Allow all bots
User-agent: *
Allow: /

# Block admin pages
Disallow: /admin/
Disallow: /api/
Disallow: /private/

# Block specific files
Disallow: /*.pdf$
Disallow: /temp/

# Slow down aggressive crawlers
Crawl-delay: 5
User-agent: Googlebot
Crawl-delay: 0

# Specify sitemap
Sitemap: https://harsh-softwaredev.vercel.app/sitemap.xml

Robots.txt Best Practices

• ❌ Blocking important pages
• ❌ Over-aggressive restrictions
• ❌ Blocking CSS/JS (hurts rendering)
• ❌ Not testing changes

• ✅ Only block truly sensitive pages
• ✅ Allow CSS, JS, images
• ✅ Don't overuse Disallow
• ✅ Test in Search Console
• ✅ Monitor crawl stats

• Google Search Console → URL Inspection → Coverage
• Shows what's crawlable
• Indicates blocked resources

Crawlability and Crawl Budget Management

What is Crawl Budget?

• Number of pages Google crawls per day
• Limited especially for new/small sites
• Crawl budget = Crawl Capacity × Crawl Demand

• Site speed (faster = more crawls)
• Site size (larger = higher crawl budget)
• Domain authority (higher = more crawls)
• Update frequency (more updates = more crawls)

• New site (DA 5): 50-100 pages/day
• Established site (DA 30): 1,000+ pages/day
• Large site (DA 60+): 10,000+ pages/day

Optimizing Crawl Budget

• Improve site speed
• Fix crawl errors
• Remove redirects
• Clean site structure

• Remove low-value pages
• Consolidate duplicate content
• Block pagination pages
• Eliminate infinite spaces

• Internal linking to key pages
• Sitemap priority
• Frequent updates to main pages
• Higher quality content

Common Crawl Budget Issues

• Block pagination: Disallow: /*?page=
• Block faceted navigation
• Use parameter handling in GSC
• Noindex thin pages

• Optimize images
• Reduce server response time
• Minify CSS/JS
• Use CDN

• Deep pages hard to reach
• Create clear navigation
• Improve internal linking
• Reduce click depth

Fixing Crawl Errors and 404s

Types of Crawl Errors

• Page doesn't exist
• Common causes: Deleted pages, broken links, typos
• Monitor in: Google Search Console → Crawl Stats

• Page permanently removed
• Google removes from index faster than 404
• Good for deleted content

• Page exists but blocked
• Usually a misconfiguration

• Server issue
• Temporary or permanent
• Check server logs
• Fix underlying issue

• Server overloaded
• Maintenance mode
• Usually temporary

Monitoring Crawl Errors

1. Go to Coverage report
2. View errors by status code
3. Identify affected pages
4. View error details

• Redirect chains (A→B→C)
• Redirect loops (A→B→A)
• Timeout errors
• DNS errors

Fixing 404 Errors

• Republish deleted content
• Fastest solution if possible

• Old URL → New URL
• Preserves link equity
• Tells Google page moved

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true, // 301 redirect
      },
    ]
  },
}

• Good UX with suggestions
• Sitemap link
• Popular content links
• Search box

• Low-traffic pages
• Old pages not important
• Monitor but don't worry

Handling 404s Properly

• ❌ Redirect everything to homepage
• ❌ Ignore 404 errors
• ❌ Use 302 (temporary) for permanent changes

• ✅ Use 301 (permanent) for moved content
• ✅ Create helpful 404 page
• ✅ Monitor in Search Console
• ✅ Fix high-traffic 404s immediately