Part 1: Basic to Advance

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

2. Minification and Compression

CSS Minification:

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

JavaScript Minification:

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

Gzip Compression:

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

Brotli Compression:

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

3. Lazy Loading

What it is: Load resources only when needed

Types:

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

Native Lazy Loading:

html

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

Library Lazy Loading (Intersection Observer):

javascript

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

4. Caching Strategies

Browser Caching:

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

Example Headers:

plaintext

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

CDN Caching:

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

Server-Side Caching:

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

5. Code Splitting

Problem: Large JavaScript bundles slow page load

Solution: Split code into smaller chunks

Webpack/Next.js:

javascript

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

Route-based Splitting:

javascript

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

6. Optimize Third-Party Scripts

Common Culprits:

Analytics
Ads
Chat widgets
Social media embeds
Fonts

Solutions:

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

Example:

html

<!-- 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

Current Advantages:

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

Potential Issues to Check:

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

Quick Wins:

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

Expected Metrics:

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

Mobile-First Indexing and Responsive Design

Why Mobile-First Matters

User Behavior:

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

SEO Impact:

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

Business Impact:

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

Mobile-First Indexing Process

Old (Desktop-First):

Google crawls desktop version
Desktop = primary ranking signal
Mobile version is secondary

New (Mobile-First):

Google crawls mobile version first
Mobile = primary ranking signal
Desktop is secondary

Current Status:

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

Mobile Responsiveness Checklist

Viewport Configuration:

html

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

CSS Media Queries:

css

/* 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;
  }
}

Mobile UX Best Practices:

✅ 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

Google Mobile-Friendly Test:

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

Chrome DevTools:

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

Real Device Testing:

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

SSL/HTTPS Security and HSTS Headers

Why HTTPS Matters

Security:

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

SEO Impact:

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

User Impact:

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

Getting HTTPS

Options:

1. Let's Encrypt (Free)

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

2. Paid Certificates

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

3. Hosting Provider (Included)

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

HSTS (HTTP Strict Transport Security)

What it does:

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

How to Enable:

plaintext

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

Vercel Configuration (vercel.json):

json

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

Effect:

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?

Purpose:

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

Format:

xml

<?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

What to Include:

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

What to Exclude:

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

Priority Levels:

Page Type	Priority	Frequency
Homepage	1.0	daily
Main pages	0.8	weekly
Blog posts	0.7	monthly
Archives	0.5	rarely

Creating Sitemaps

Method 1: Next.js (Automatic)

typescript

// 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,
    },
  ]
}

Method 2: Yoast SEO (WordPress)

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

Method 3: Manual XML

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

Submitting Sitemaps

Google Search Console:

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

Robots.txt Reference:

plaintext

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

Benefits:

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

Robots.txt Optimization

What is Robots.txt?

Purpose:

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

Format:

plaintext

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

plaintext

# 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

Common Mistakes:

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

Best Practices:

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

Test robots.txt:

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

Crawlability and Crawl Budget Management

What is Crawl Budget?

Definition:

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

Factors:

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

Example:

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

1. Increase Crawl Capacity

Improve site speed
Fix crawl errors
Remove redirects
Clean site structure

2. Manage Crawl Demand

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

3. Prioritize Important Pages

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

Common Crawl Budget Issues

Problem: Too Many Crawls of Low-Value Pages

Solutions:

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

Problem: Slow Site Speed

Solutions:

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

Problem: Poor Site Structure

Solutions:

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

Fixing Crawl Errors and 404s

Types of Crawl Errors

1. Client Errors (4xx)

404 Not Found:

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

410 Gone:

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

403 Forbidden:

Page exists but blocked
Usually a misconfiguration

2. Server Errors (5xx)

500 Internal Server Error:

Server issue
Temporary or permanent
Check server logs
Fix underlying issue

503 Service Unavailable:

Server overloaded
Maintenance mode
Usually temporary

Monitoring Crawl Errors

Google Search Console:

Go to Coverage report
View errors by status code
Identify affected pages
View error details

Common Issues:

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

Fixing 404 Errors

Option 1: Restore Page

Republish deleted content
Fastest solution if possible

Option 2: Permanent Redirect (301)

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

Example (Next.js):

typescript

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

Option 3: Custom 404 Page

Good UX with suggestions
Sitemap link
Popular content links
Search box

Option 4: Let It Be

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

Handling 404s Properly

Don't:

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

Do:

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

PreviousNext

Metric

Good

Needs Improvement

Poor

LCP

< 2.5s

2.5-4.0s

> 4.0s

FID

< 100ms

100-300ms

> 300ms

INP

< 200ms

200-500ms

> 500ms

CLS

< 0.1

0.1-0.25

> 0.25

/* 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; } }

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

<?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>

Page Type

Priority

Frequency

Homepage

1.0

daily

Main pages

0.8

weekly

Blog posts

0.7

monthly