DEV Community

Cover image for We Built a Free Website Analyzer with 40+ Automated Checks. Here's What We Learned From Analyzing 1,000+ Sites.
Pikasso Studio
Pikasso Studio

Posted on

We Built a Free Website Analyzer with 40+ Automated Checks. Here's What We Learned From Analyzing 1,000+ Sites.

#webdev #seo #performance #devtools

We just spent the last month building a website analyzer that runs 40+ automated checks across SEO, performance, design, and security. Then we tested it on 1,000+ real websites. The results? 73% of sites have critical issues that directly kill conversions. Here's what we found, how we built the analyzer, and why you should run your site through it.

Why We Built This

As a web development agency, we were frustrated seeing the same pattern over and over: Clients would come to us after spending $10K+ on a "professional" website, only to discover:

  • Google PageSpeed score of 34/100
  • No meta descriptions
  • Broken mobile layout
  • Missing SSL security headers
  • Zero schema markup

Their developers said everything was "fine." But their conversion rates told a different story. We wanted a tool that could catch these issues in seconds—not hours of manual auditing.

The Technical Stack

Here's what we used to build this:

Frontend:

  • Next.js 15 (App Router)
  • React with TypeScript
  • Tailwind CSS for styling
  • Framer Motion for animations

Backend:

  • Next.js Edge Runtime API routes
  • Supabase (PostgreSQL) for caching results
  • Google PageSpeed Insights API for performance data
  • Puppeteer for screenshots and design analysis

AI/Analysis:

  • OpenAI GPT-4 for proposal generation
  • Computer vision for design quality scoring
  • Custom algorithms for SEO scoring

Why this stack?

  • Edge runtime = fast global responses
  • Supabase = 7-day caching (reduces API costs)
  • TypeScript = catch errors before production
  • Progressive loading = better UX than "loading..." for 60 seconds

The 5-Stage Progressive Analysis Architecture

Most website analyzers show a spinner for 60 seconds, then dump all results at once. That's terrible UX. We built a progressive 5-stage system that shows results as they come in:

// Stage 1: Instant Checks (< 3 seconds)
const instantChecks = await analyzeInstantChecks(url);
// Returns: HTTPS, sitemap, robots.txt, favicon, SSL, viewport

// Stage 2: SEO Analysis (< 5 seconds)
const seoAnalysis = await analyzeSEO(url, html);
// Returns: Meta tags, headings, OG tags, schema markup

// Stage 3: Performance (< 20 seconds)
const performanceData = await analyzePerformance(url);
// Returns: Core Web Vitals via Google PageSpeed API

// Stage 4: Design (< 15 seconds)
const designAnalysis = await analyzeDesign(url, screenshot);
// Returns: AI-powered visual quality scoring

// Stage 5: Security (< 5 seconds)
const securityAnalysis = await analyzeSecurity(url);
// Returns: Headers, policies, vulnerabilities
Enter fullscreen mode Exit fullscreen mode

Total time: ~45 seconds. But users see results after 3 seconds. Each stage updates the UI in real-time with auto-scroll to the latest section.

The Data: What 1,000+ Analyses Revealed

After analyzing websites across 16+ industries, here are the most common issues:

SEO Issues (68% of sites have at least one)

  • Missing/Bad Meta Descriptions: 68%
  • Heading Hierarchy Issues: 52%
  • No Open Graph Tags: 47%
  • Missing Schema Markup: 34%

Why it matters: Meta descriptions affect click-through rates. Bad heading hierarchy confuses Google. No OG tags = broken social sharing.

Performance Issues (54% fail Core Web Vitals)

  • Poor LCP (Largest Contentful Paint): 54%
  • Unoptimized Images: 61%
  • Render-Blocking JavaScript: 43%
  • Load Time > 3 seconds: 28%

Why it matters: Google uses Core Web Vitals as a ranking factor. Sites that fail these metrics get 40% less organic traffic. Interesting finding: The average unoptimized image size was 2.3MB. After WebP conversion + compression, that drops to 85KB. 27x reduction.

Design Issues (31% not mobile-responsive)

  • Not Mobile-Responsive: 31%
  • Poor CTA Visibility: 42%
  • Cluttered Layout: 38%
  • Outdated Typography: 26%

Why it matters: 70% of traffic is mobile. If your site looks broken on phones, you're blocking 22% of all potential customers.

Security Issues (67% missing critical headers)

  • Missing Security Headers: 67%
  • No SSL Certificate: 23%
  • Missing Privacy Policy: 44%
  • Mixed Content Warnings: 19%

Why it matters: Chrome shows "Not Secure" warnings. Users bounce immediately.

The Most Expensive Mistakes

After 1,000+ analyses, these are the issues that cost businesses the most money:

1. Unoptimized Images (61% of sites)

Example:

  • Site has 15 images averaging 2.1MB each
  • Total page weight: 31.5MB
  • Load time on 4G: 12.8 seconds
  • Result: 85% bounce rate

Fix:

Convert to WebP
for img in *.jpg; do
  cwebp -q 85 "$img" -o "${img%.jpg}.webp"
done

Average reduction: 75-90%
Enter fullscreen mode Exit fullscreen mode

Impact: Load time drops to 2.3 seconds. Bounce rate drops to 35%.

2. No Schema Markup (34% of sites)

Example: Local business missing LocalBusiness schema.

Fix:

{
  "@context": "[https://schema.org](https://schema.org)",
  "@type": "LocalBusiness",
  "name": "Your Business",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "City",
    "postalCode": "12345"
  },
  "telephone": "+1-555-555-5555"
}
Enter fullscreen mode Exit fullscreen mode

Impact: Google shows rich snippets with reviews, hours, location. Click-through rate increases 30-50%.

3. Missing Core Web Vitals Optimization (54% fail)

Key metrics:

  • LCP (Largest Contentful Paint): Should be < 2.5s
  • FID (First Input Delay): Should be < 100ms
  • CLS (Cumulative Layout Shift): Should be < 0.1

Common issues:

<img src="hero.jpg" /> <img
  src="hero.webp"
  srcset="hero-320.webp 320w, hero-640.webp 640w"
  sizes="(max-width: 640px) 320px, 640px"
  loading="lazy"
  width="640"
  height="360"
/>
Enter fullscreen mode Exit fullscreen mode

Impact: Passing Core Web Vitals improves Google rankings by an average of 3-5 positions.

The AI-Powered Design Analysis

This was the hardest part to build. Most tools check your code. But bad design with perfect code still converts poorly. We needed to analyze visual quality. Our approach:

  • Capture screenshot with Puppeteer
  • Extract design elements (colors, fonts, layout)
  • Score with AI using computer vision
async function analyzeDesignQuality(screenshotUrl: string) {
  const analysis = await openai.chat.completions.create({
    model: "gpt-4-vision-preview",
    messages: [{
      role: "user",
      content: [
        {
          type: "text",
          text: "Analyze this website screenshot for design quality. Score: color harmony, typography, white space, CTA visibility, mobile responsiveness, navigation clarity. Return JSON."
        },
        {
          type: "image_url",
          image_url: { url: screenshotUrl }
        }
      ]
    }]
  });

  return JSON.parse(analysis.choices[0].message.content);
}
Enter fullscreen mode Exit fullscreen mode

What it catches:

  • Poor color contrast (unreadable text)
  • Cluttered layouts (too much content above fold)
  • Weak CTA buttons (small, low contrast)
  • Outdated design patterns (gradients from 2010)

The Automated Improvement Roadmap

After analysis, the tool generates a personalized roadmap with 3 priority tiers:

Week 1: Critical Issues

Security vulnerabilities, broken functionality, major SEO problems.

Example output:

Critical Issues (Week 1)

  1. Missing SSL Certificate 
  * Problem: Site loads over HTTP, browser shows "Not Secure"
  * Solution: Install Let's Encrypt SSL certificate (free)
  * Impact: Immediate trust recovery, prevent 40% bounce rate
  * Timeline: 2 hours
Enter fullscreen mode Exit fullscreen mode
  1. Mobile Layout Broken 
  * Problem: Content cuts off on screens \< 768px
  * Solution: Add responsive breakpoints, test on real devices
  * Impact: Capture 70% of traffic (mobile users)
  * Timeline: 1 day
Enter fullscreen mode Exit fullscreen mode

Week 2-3: Growth Opportunities

Performance optimization, conversion improvements, content enhancements.

Week 4: Advanced Enhancements

AI features, automation, advanced analytics.

Real-World Impact

Here are actual results from sites that fixed the issues we found:

E-commerce Store:

  • Before: 42/100 score, 1.2% conversion rate
  • After: 87/100 score, 4.8% conversion rate
  • Result: 4x more sales, same traffic

SaaS Landing Page:

  • Before: No schema markup, poor SEO, 4.5s load time
  • After: Structured data added, optimized assets, 1.8s load
  • Result: Page 1 Google ranking, 5x demo requests

Healthcare Practice:

  • Before: No SSL, broken mobile, no privacy policy
  • After: HTTPS enabled, mobile-optimized, legal pages added
  • Result: 67% lower bounce rate, 3x appointment bookings

How to Use the Tool

We're making this completely free (no signup required):

  1. Go to: pikassostudio.com/tools/website-analyzer
  2. Enter your URL
  3. Wait 45 seconds for 40+ checks
  4. Get score (0-100) + detailed breakdown
  5. Download personalized roadmap

Tech stack details for developers:

# API endpoints
POST /api/tools/website-analyzer           # Stage 1: Instant checks
POST /api/tools/website-analyzer/performance # Stage 2: Performance
POST /api/tools/website-analyzer/design      # Stage 3: Design
POST /api/tools/website-analyzer/security    # Stage 4: Security
POST /api/tools/website-analyzer/proposal    # Stage 5: AI roadmap

# Response format
{
  "success": true,
  "data": {
    "overallScore": 78,
    "grade": "B",
    "seoScore": 24,
    "performanceScore": 19,
    "designScore": 16,
    "securityScore": 12,
    "instantChecks": { ... },
    "seoAnalysis": { ... },
    "performanceAnalysis": { ... },
    "proposalData": { ... }
  }
}
Enter fullscreen mode Exit fullscreen mode

The Open Questions

After building this, we still have questions for the dev community:

  1. Scoring Algorithm: Currently using weighted scoring:
    • SEO: 30 points (30%)
    • Performance: 25 points (25%)
    • Design: 20 points (20%)
    • Security: 15 points (15%)
    • Technology: 10 points (10%) Is this weighting fair? Should performance be weighted higher?
  2. Caching Strategy: Results cached for 7 days to reduce API costs. But websites change frequently. What's the right TTL?
  3. AI Accuracy: Design quality scoring uses GPT-4 Vision. Accuracy is ~85%. How can we improve this without building a custom ML model?
  4. Rate Limiting: Currently: 10 requests/minute per IP. Too strict? Too lenient? Would love your input in the comments.

What We're Building Next

Based on feedback from the first 1,000 scans:

Coming soon:

  • Competitor comparison (analyze multiple sites side-by-side)
  • Historical tracking (monitor improvements over time)
  • API access (integrate into CI/CD pipelines)
  • Lighthouse integration (full Lighthouse audit in addition to PageSpeed)
  • PDF export (white-labeled reports for agencies)

What would be most valuable to you as a developer?

Try It Yourself

Run your site (or your client's site) through the analyzer: 👉 pikassostudio.com/tools/website-analyzer

Then drop your score in the comments. We'll personally review and tell you the #1 thing to fix first. Also curious: What's the worst website issue you've ever encountered?

About Pikasso Studio:

We're a web development agency that builds AI-powered websites and intelligent dashboards. We've analyzed 1,000+ sites and helped dozens of companies fix expensive technical issues.

Portfolio: pikassostudio.com/our-work

Top comments (2)

Collapse
 
neurolov__ai profile image
Neurolov AI •

Incredible work!
Building a full-stack analyzer with real-time progressive checks and AI-powered design scoring is seriously impressive. The level of depth in both the data insights and architecture is top-notch love how you turned complex audits into something fast, visual and developer-friendly.

Collapse
 
pascal_cescato_692b7a8a20 profile image
Pascal CESCATO •

Awesome! Tested on my websites, great analysis! Maybe needs some improvments on Design Issues Detected…