April 20269 min read

How to Add Analytics to a Portfolio or SaaS Website Without Hurting Performance

Compare Vercel Analytics, Google Analytics, Plausible, and Clarity. Track conversions, respect privacy, and keep Core Web Vitals healthy with async loading patterns.

AnalyticsPerformanceNext.jsPortfolio

Why analytics matter for portfolios and SaaS sites

You cannot improve what you do not measure. For a developer portfolio, analytics reveal which projects attract attention, which articles drive traffic, and whether your contact CTA converts. For SaaS products, analytics track activation, feature usage, and churn signals.

The challenge is adding analytics without degrading page performance or violating user privacy.

Tool comparison

**Vercel Analytics** — zero-config for Next.js on Vercel. Tracks Web Vitals, page views, and custom events. No cookie banner needed (privacy-friendly). Best starting point for Next.js portfolios.

**Google Analytics 4** — comprehensive but heavy (~45KB). Requires cookie consent in the EU. Best for SaaS products that need funnel analysis and conversion tracking.

**Plausible** — lightweight (~1KB), privacy-focused, no cookies. Simple dashboard. Good for blogs and portfolios where you want basic traffic data without GDPR complexity.

**Microsoft Clarity** — free heatmaps and session recordings. Heavier than Plausible but invaluable for understanding how users interact with your portfolio. Load it asynchronously.

Setting up Vercel Analytics

npm install @vercel/analytics @vercel/speed-insights

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Analytics />
        <SpeedInsights />
      </body>
    </html>
  );
}

Tracking custom events

Track button clicks, project views, and contact form submissions without a heavy analytics library.

// lib/analytics.ts
import { track } from '@vercel/analytics';

export const analytics = {
  contactClick: (source: string) => track('contact_click', { source }),
  projectView: (projectName: string) => track('project_view', { project: projectName }),
  articleRead: (slug: string) => track('article_read', { slug }),
  calendlyOpen: () => track('calendly_open'),
};

// components/HireMeCTA.tsx
import { analytics } from '@/lib/analytics';

export function HireMeCTA() {
  return (
    <a
      href="/contact"
      onClick={() => analytics.contactClick('hero_cta')}
    >
      Hire Me
    </a>
  );
}

What metrics to track

**Portfolio sites:** page views per project, article read rates, CTA click-through rate, contact form submissions, referral sources, bounce rate on landing page.

**SaaS products:** sign-ups, activation (first meaningful action), feature usage, retention (return visits), conversion funnel drop-off points.

Privacy considerations

Use privacy-friendly tools that do not require cookie banners (Vercel Analytics, Plausible). If using GA4, implement a cookie consent banner for EU visitors. Never track wallet addresses or transaction data in analytics — this is sensitive financial information.

// components/CookieConsent.tsx
'use client';

import { useState, useEffect } from 'react';

export function CookieConsent() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (!localStorage.getItem('cookie-consent')) setShow(true);
  }, []);

  if (!show) return null;

  return (
    <div className="fixed bottom-4 left-4 right-4 rounded-xl bg-gray-900 p-4 shadow-xl md:left-auto md:right-4 md:max-w-sm">
      <p className="text-sm text-gray-300">We use analytics to improve this site.</p>
      <div className="mt-3 flex gap-2">
        <button onClick={() => { localStorage.setItem('cookie-consent', 'accepted'); setShow(false); }}>
          Accept
        </button>
        <button onClick={() => { localStorage.setItem('cookie-consent', 'declined'); setShow(false); }}>
          Decline
        </button>
      </div>
    </div>
  );
}

Performance considerations

Load analytics scripts after page interactive. Use next/script with strategy="afterInteractive" for third-party scripts. Vercel Analytics and Speed Insights are optimized for zero performance impact. Avoid loading GA4 + Clarity + Hotjar simultaneously — pick one primary and one supplementary tool.

import Script from 'next/script';

<Script src="https://www.googletagmanager.com/gtag/js?id=G-XXXX" strategy="afterInteractive" />

FAQ

**Which analytics tool should I start with?** Vercel Analytics if you deploy on Vercel. Plausible if you want privacy-first analytics on any host.

**Should I track wallet connections?** Track the event (connection attempted, succeeded) but never the wallet address itself.

**How do I measure portfolio effectiveness?** Track CTA clicks, contact form submissions, and Calendly bookings. Compare against total visitors to calculate conversion rate.

**Do analytics hurt Core Web Vitals?** Vercel Analytics and Plausible have negligible impact. Heavy scripts like GA4 can affect INP — load them asynchronously.

Want to work together? I build Web3 dashboards and DeFi interfaces.