Design Decisions That Hurt (or Help) Your SEO Performance

Design decisions directly determine SEO success or failure through measurable impacts on Core Web Vitals, crawlability, and user experience signals that Google uses for rankings. Sites with optimized design see 15-40% organic traffic increases within 3-6 months, while poor design choices can tank rankings by 30-60% regardless of content quality, because Google’s algorithms now prioritize technical performance metrics like INP (under 200ms), LCP (under 2.5s), and CLS (under 0.1) as core ranking factors.

Design Elements That Drive Rankings: Mobile-first responsive layouts that adapt seamlessly across devices, semantic HTML structure that helps search engines understand content hierarchy, optimized images with descriptive alt text and modern formats (WebP, AVIF), fast-loading typography using font-display: swap, accessible interactive elements with proper ARIA labels and keyboard navigation, clean descriptive URLs with target keywords, proper heading hierarchy (H1-H6), and visible text content rather than image-based text.

Critical Design Principles for SEO

  • Core Web Vitals are now direct ranking factors. Your LCP (Largest Contentful Paint) must load under 2.5 seconds, INP (Interaction to Next Paint) must respond under 200ms, and CLS (Cumulative Layout Shift) must stay under 0.1 or Google penalizes your rankings regardless of content quality
  • JavaScript frameworks without server-side rendering create crawlability disasters. Client-side React, Vue, or Angular apps that render content via JavaScript force Google’s crawler to execute code before seeing content, dramatically increasing LCP times and often resulting in incomplete indexing
  • Mobile-first indexing is mandatory, not optional. Google crawls and ranks your mobile site version first, meaning desktop-only optimization is worthless when 60% of searches happen on mobile devices and poor mobile experience tanks rankings site-wide
  • Image-based text kills keyword visibility completely. Headers, buttons, and navigation implemented as images rather than HTML text are invisible to search engines, eliminate keyword targeting opportunities, and create accessibility barriers that hurt user signals
  • Page speed under 3 seconds is the performance threshold. Every additional second of load time increases bounce rate by 7-10% and directly reduces rankings through poor Core Web Vitals scores and negative user experience signals

Performance Impact Ranges: Sites loading in under 2 seconds see baseline conversion and ranking performance. Sites taking 3-4 seconds lose 15-30% of organic visibility. Sites requiring 5+ seconds experience 40-60% ranking drops and dramatic traffic loss. These impacts occur within 2-4 weeks of Google detecting performance issues through field data collection.

Immediate Action Steps: Run PageSpeed Insights immediately to identify your current Core Web Vitals scores, implement server-side rendering if using JavaScript frameworks for content delivery, compress all images to under 200KB using WebP or AVIF formats with proper dimensions specified, ensure mobile viewport is properly configured and touch targets meet 48x48px minimum size, replace any image-based text with real HTML text styled via CSS, audit hidden content in accordions or tabs to ensure critical information remains crawlable, remove render-blocking CSS and JavaScript from above-the-fold content, and establish continuous monitoring of Core Web Vitals through Search Console. Design and SEO must integrate from project start, not as post-launch fixes.

When Beautiful Design Kills Rankings

Your designer delivered a stunning website. Smooth animations flowing across hero sections. Elegant custom typography. Eye-catching parallax effects. Every detail crafted for visual impact.

Then organic traffic dropped 42% over three months.

What happened? The design choices that made your site beautiful also made it slow to load, difficult for crawlers to index, and frustrating for mobile users. Google’s algorithms noticed these technical problems and adjusted your rankings accordingly.

This isn’t a rare scenario. It happens constantly because design and SEO teams often work in silos, each optimizing for different goals. Designers focus on aesthetics and brand expression. SEO teams focus on keywords and technical performance. Neither fully understands how their decisions impact the other’s objectives.

The reality is design and SEO are inseparable. Every design decision creates technical consequences that affect crawlability, page speed, mobile usability, and user experience signals. These factors directly influence rankings through Google’s Core Web Vitals and other algorithmic assessments.

A 4-second hero video background might look impressive, but it delays LCP by 2+ seconds. Beautiful custom fonts might enhance brand identity, but loading 6 font weights creates render-blocking resources. Parallax scrolling might feel modern, but the JavaScript overhead tanks INP scores. Infinite scroll might improve engagement metrics, but it makes 80% of your content invisible to crawlers.

The gap between beautiful and discoverable isn’t inevitable. Top-performing sites achieve both through intentional technical implementation. They use modern image formats, implement lazy loading strategically, optimize font loading, structure semantic HTML properly, and test performance continuously.

This guide breaks down specific design decisions that help or hurt SEO, with measurable impact data and practical implementation guidance. The goal isn’t choosing between beauty and performance. It’s understanding how to achieve both.

Design Decisions That HURT SEO

1. Heavy JavaScript Frameworks Without Server-Side Rendering

The Problem:

Single-page applications built with React, Vue, or Angular that render entirely client-side force search engines to execute JavaScript before seeing any content.

// Client-side only rendering (problematic for SEO)
function ProductsPage() {
  const [products, setProducts] = useState([]);
  
  useEffect(() => {
    fetch('/api/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);
  
  return (
    <div className="products">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

Why It Hurts:

Google’s crawler initially sees empty HTML. The crawler must execute JavaScript, wait for API calls to complete, then render content. This process:

  • Dramatically increases time to first meaningful paint
  • Creates crawl budget waste (Google may timeout before seeing content)
  • Results in incomplete or delayed indexing
  • Destroys Core Web Vitals scores (LCP often exceeds 4-6 seconds)
  • Mobile crawlers are more likely to fail or timeout entirely

The Fix: Server-Side Rendering or Static Site Generation

// Next.js Server-Side Rendering (SEO-friendly)
export async function getServerSideProps() {
  const products = await fetchProducts();
  
  return {
    props: { products }
  };
}

function ProductsPage({ products }) {
  return (
    <div className="products">
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}

HTML arrives with content already rendered. Crawlers see complete content immediately without JavaScript execution.

Measured Impact:

Real-world case study data shows sites moving from client-side to server-side rendering:

  • LCP improvement: 4.2s → 1.8s
  • Indexation rate: +45% more pages indexed
  • Organic traffic: +35% increase over 3-6 months

2. Image-Based Text (Headers, Buttons, Navigation)

The Problem:

Using images for text that should be HTML creates multiple SEO barriers.

<!-- Bad: Text implemented as images -->
<img src="welcome-headline.png" alt="Welcome to our store">
<img src="buy-now-button.png" alt="Buy Now">
<img src="nav-products.png" alt="Products">

Why It Hurts:

  • Search engines cannot read or index text within images
  • Zero keyword targeting value for headlines and navigation
  • Users cannot select, copy, or search within image text
  • Doesn’t scale with browser text size settings
  • Creates accessibility barriers for screen readers
  • Mobile rendering problems with fixed-width images
  • Slow loading compared to text rendering

The Fix: Real HTML Text with CSS Styling

<!-- Good: Actual HTML text with styling -->
<h1 class="headline">Welcome to our store</h1>
<button class="cta-button">Buy Now</button>
<nav>
  <a href="/products">Products</a>
</nav>

.headline {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: 700;
  color: #2c3e50;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
  letter-spacing: -0.5px;
}

.cta-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 15px 40px;
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
}

You can achieve any visual design using CSS. Modern web fonts, text shadows, gradients, and transforms eliminate the need for image-based text.

When Images Contain Important Text:

If you must use images that include text (infographics, screenshots):

<img 
  src="feature-comparison.png" 
  alt="Feature comparison showing Enterprise plan includes API access, SSO, and dedicated support while Basic plan includes core features only"
  width="800"
  height="600"
>

Provide comprehensive alt text describing the text content within the image.

3. Poor Mobile Experience

The Problem:

Desktop-first design that breaks, frustrates, or alienates mobile users.

Common mobile design problems:

  • Tiny tap targets under 48x48px (impossible to tap accurately)
  • Horizontal scrolling required to see content
  • Text under 16px requiring zoom to read
  • Flash of unstyled content on page load
  • Fixed-width layouts that don’t adapt to screen size
  • Hover-dependent navigation (no hover on mobile)
  • Unplayable or auto-playing videos

Why It Hurts:

Google uses mobile-first indexing exclusively. The mobile version of your site determines rankings for both mobile and desktop searches. Poor mobile experience causes:

  • Direct ranking penalties through mobile usability signals
  • High mobile bounce rates hurt overall user experience scores
  • Failed Core Web Vitals on mobile (most critical device type)
  • 60% of searches happen on mobile (you’re failing majority of users)
  • Competitors with better mobile experience outrank you

The Fix: Mobile-First Responsive Design

/* Mobile-first approach (base styles for mobile) */
.container {
  width: 100%;
  padding: 15px;
}

.button {
  width: 100%;
  min-height: 48px;
  padding: 14px 20px;
  font-size: 16px;
}

body {
  font-size: 16px;
  line-height: 1.6;
}

/* Progressive enhancement for larger screens */
@media (min-width: 768px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
  }
  
  .button {
    width: auto;
    min-width: 200px;
  }
}

/* Touch targets minimum 48x48px per WCAG guidelines */
button, a, input[type="submit"] {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

Mobile Testing Essentials:

Test on real devices, not just browser resize:

  • iPhone SE (smallest modern iPhone screen)
  • Mid-range Android device (Samsung Galaxy A series)
  • Tablet (iPad)
  • Use Chrome DevTools mobile emulation for quick checks

Run Google’s Mobile-Friendly Test: https://search.google.com/test/mobile-friendly

4. Infinite Scroll Without Pagination Fallbacks

The Problem:

Content that loads only via JavaScript scroll events creates crawlability disasters.

// Bad: No fallback for non-JavaScript environments
window.addEventListener('scroll', () => {
  if (isBottomOfPage()) {
    loadMoreProducts();
  }
});

Why It Hurts:

  • Crawlers cannot trigger scroll events
  • Content beyond initial page load is completely invisible to search engines
  • Deep linking to specific content items impossible
  • Pagination signals missing (rel=”next” and rel=”prev”)
  • Users cannot bookmark or share specific positions
  • Back button breaks (returns to top, losing position)

The Fix: Pagination with Progressive Enhancement

<!-- Crawlable pagination structure -->
<div class="products" id="products-container">
  <!-- Initial products render here -->
  <div class="product">Product 1</div>
  <div class="product">Product 2</div>
  <!-- ... more products ... -->
</div>

<nav class="pagination" aria-label="Product pagination">
  <a href="?page=1" aria-label="Page 1" aria-current="page">1</a>
  <a href="?page=2" aria-label="Page 2" rel="next">2</a>
  <a href="?page=3" aria-label="Page 3">3</a>
  <a href="?page=2" class="next-page" rel="next">Next Page</a>
</nav>

// Progressive enhancement: hijack pagination for smooth loading
if ('IntersectionObserver' in window) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const nextPage = document.querySelector('.next-page');
        if (nextPage) {
          loadNextPageContent(nextPage.href);
          observer.unobserve(entry.target);
        }
      }
    });
  });
  
  // Observe last product
  const lastProduct = document.querySelector('.product:last-child');
  if (lastProduct) observer.observe(lastProduct);
}

Include Pagination Meta Tags:

<head>
  <link rel="next" href="https://example.com/products?page=2">
  <link rel="prev" href="https://example.com/products?page=1">
</head>

This approach gives you smooth infinite scroll for users while maintaining full crawlability and indexation for search engines.

5. Intrusive Interstitials

The Problem:

Full-screen popups that block content immediately on page load.

// Bad: Immediate popup blocking content
window.addEventListener('load', () => {
  showNewsletterPopup(); // Blocks main content instantly
});

Why It Hurts:

  • Google has explicit penalties for intrusive interstitials (especially mobile)
  • Creates terrible user experience and high bounce rates
  • Accessibility problems (keyboard users may get trapped)
  • Blocks access to content users clicked to see
  • Damages trust and brand perception

The Fix: Delayed and Non-Intrusive Approaches

// Wait 30-45 seconds before showing
setTimeout(() => {
  showNewsletterPopup();
}, 30000);

// OR use exit intent (desktop only)
document.addEventListener('mouseleave', (e) => {
  if (e.clientY < 0 && !popupShownThisSession) {
    showExitIntentPopup();
    popupShownThisSession = true;
  }
});

// OR scroll-based trigger
let scrollPercentage = 0;
window.addEventListener('scroll', () => {
  scrollPercentage = (window.scrollY / document.body.scrollHeight) * 100;
  if (scrollPercentage > 50 && !popupShownThisSession) {
    showNewsletterPopup();
    popupShownThisSession = true;
  }
});

Non-Intrusive Visual Design:

/* Corner popup instead of full-screen takeover */
.newsletter-popup {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 20px;
  background: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 1000;
}

.popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 5px;
  line-height: 1;
}

Interstitials That Are NOT Penalized:

  • Age verification (legal requirements)
  • Cookie consent notices (GDPR compliance)
  • Login walls for genuinely private content
  • App install banners (following best practices)

6. Render-Blocking CSS and JavaScript

The Problem:

Large CSS and JavaScript files in <head> that block page rendering.

<!-- Bad: Blocks rendering until files download -->
<head>
  <link rel="stylesheet" href="massive-styles.css">
  <link rel="stylesheet" href="font-awesome.css">
  <script src="jquery-3.6.0.js"></script>
  <script src="app-bundle.js"></script>
</head>

Why It Hurts:

  • Delays First Contentful Paint (FCP)
  • Destroys Largest Contentful Paint (LCP) scores
  • Poor Core Web Vitals = ranking penalties
  • Users see blank white screen while waiting
  • Mobile networks amplify the delay

The Fix: Critical CSS + Deferred Loading

<head>
  <!-- Inline critical CSS (above-fold styles only) -->
  <style>
    /* Only styles needed for initial viewport */
    .header { 
      display: flex; 
      justify-content: space-between;
      padding: 20px;
    }
    .hero { 
      min-height: 600px; 
      background: #f8f9fa;
    }
    .hero h1 {
      font-size: 48px;
      font-weight: 700;
    }
  </style>
  
  <!-- Preconnect to external resources -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com">
  
  <!-- Async load remaining CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

<body>
  <!-- Content -->
  
  <!-- JavaScript at end with defer -->
  <script src="app.js" defer></script>
</body>

Critical CSS Extraction:

Use tools to identify above-the-fold CSS:

  • Critical (npm package)
  • Penthouse
  • Chrome DevTools Coverage tab

Only inline what’s absolutely necessary for initial render (typically 10-20KB).

7. Hidden Content in Collapsed Sections

The Problem:

Important content hidden by default using display: none or similar techniques.

<!-- Potentially problematic: Hidden by default -->
<div class="tab-content" style="display: none;">
  <h2>Important Product Specifications</h2>
  <p>Detailed technical information that should be indexed...</p>
</div>

Why It Can Hurt:

  • Google may devalue content not immediately visible
  • Mobile-first indexing especially affected
  • Content perceived as less important than visible content
  • Accordion/tab implementations can confuse crawlers

The Fix: Proper Semantic HTML Structure

<!-- Good: HTML5 details/summary element -->
<details>
  <summary>Product Specifications</summary>
  <div class="specs-content">
    <h3>Technical Details</h3>
    <p>All specifications visible to crawlers in DOM...</p>
  </div>
</details>

OR Use Height-Based Collapse:

/* Content remains in DOM, just visually collapsed */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion.open .accordion-content {
  max-height: 1000px; /* Adjust based on content */
}

Content stays in the DOM and remains crawlable, but is visually collapsed for users.

Best Practice:

Make important content visible by default, especially on mobile. Use collapsible sections only for supplementary information.

Design Decisions That HELP SEO

1. Semantic HTML Structure

The Good Practice:

Using correct HTML elements for their intended semantic purpose.

<!-- Good: Proper semantic structure -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Name | Company Name</title>
</head>
<body>
  <header>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/products">Products</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h1>Main Page Heading</h1>
      <p>Introduction paragraph...</p>
      
      <section>
        <h2>First Section</h2>
        <p>Section content...</p>
        
        <h3>Subsection</h3>
        <p>Subsection content...</p>
      </section>
      
      <section>
        <h2>Second Section</h2>
        <p>Section content...</p>
      </section>
    </article>
    
    <aside>
      <h2>Related Information</h2>
      <p>Sidebar content...</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 Company Name. All rights reserved.</p>
  </footer>
</body>
</html>

Why It Helps:

  • Search engines understand page structure and content hierarchy
  • Screen readers navigate more effectively (better user signals)
  • Increased likelihood of featured snippets
  • Better accessibility creates better user experience
  • Cleaner code is easier to maintain
  • Future-proof as search algorithms evolve

Bad Example (Non-Semantic):

<!-- Bad: Generic divs provide no semantic meaning -->
<div class="header">
  <div class="nav">
    <div class="link"><a href="/">Home</a></div>
    <div class="link"><a href="/products">Products</a></div>
  </div>
</div>

<div class="content">
  <div class="title">Main Heading</div>
  <div class="text">Content...</div>
</div>

2. Proper Heading Hierarchy

The Good Practice:

Logical heading structure from H1 through H6 without skipping levels.

<main>
  <h1>Complete Guide to Coffee Brewing</h1>
  
  <h2>Brewing Methods</h2>
  <p>Overview of different brewing techniques...</p>
  
  <h3>Pour Over Method</h3>
  <p>Details about pour over...</p>
  
  <h4>Equipment Needed</h4>
  <p>List of equipment...</p>
  
  <h4>Step-by-Step Instructions</h4>
  <p>Brewing steps...</p>
  
  <h3>French Press Method</h3>
  <p>Details about French press...</p>
  
  <h2>Coffee Bean Selection</h2>
  <p>How to choose beans...</p>
</main>

Why It Helps:

  • Creates clear document outline for search engines
  • Improves chances of featured snippets
  • Better accessibility for screen reader users
  • Helps Google understand topical relationships
  • Enables structured data opportunities
  • Natural keyword placement in context

Heading Hierarchy Rules:

  • One H1 per page (typically the page title/main topic)
  • Don’t skip levels (H2 → H4 is wrong; should be H2 → H3)
  • Use headings for structure, not styling (use CSS for visual changes)
  • Include target keywords naturally in headings where relevant
  • Make headings descriptive of the content that follows

Bad Example:

<!-- Bad: Skipped levels and multiple H1s -->
<h1>Main Title</h1>
<h1>Another Main Title</h1>
<h4>Random Subheading</h4>
<h2>Section Title</h2>

3. Optimized Images with Descriptive Alt Text

The Good Practice:

Properly formatted, compressed, and described images.

<picture>
  <!-- Modern format (best compression) -->
  <source 
    type="image/avif"
    srcset="
      product-400.avif 400w,
      product-800.avif 800w,
      product-1200.avif 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  
  <!-- Fallback format -->
  <source 
    type="image/webp"
    srcset="
      product-400.webp 400w,
      product-800.webp 800w,
      product-1200.webp 1200w
    "
    sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  >
  
  <!-- Final fallback -->
  <img 
    src="product-800.jpg"
    alt="Red leather running shoes with white rubber soles and black laces, photographed from side angle"
    width="800"
    height="600"
    loading="lazy"
  >
</picture>

Why It Helps:

  • Images appear in Google Image Search (major traffic source)
  • Descriptive alt text improves accessibility
  • Proper dimensions prevent Cumulative Layout Shift (CLS)
  • Modern formats (WebP, AVIF) dramatically improve page speed
  • Responsive images serve appropriate sizes per device
  • Lazy loading defers below-fold images

Alt Text Best Practices:

<!-- Bad: Generic or missing alt text -->
<img src="img001.jpg" alt="image">
<img src="product.jpg" alt="">
<img src="chart.jpg" alt="chart">

<!-- Good: Specific, descriptive alt text -->
<img src="nike-pegasus-40.jpg" 
     alt="Nike Zoom Pegasus 40 running shoes in electric blue with pink accents">

<img src="revenue-chart-q2.jpg" 
     alt="Bar chart showing 25% revenue increase from Q1 to Q2 2025, rising from $2.4M to $3.0M">

<img src="dashboard-screenshot.jpg" 
     alt="Analytics dashboard showing website traffic metrics: 45K visitors, 3.2% conversion rate, 2:15 average session duration">

Alt Text Guidelines:

  • Describe what’s actually in the image
  • Include relevant keywords naturally
  • Keep under 125 characters
  • Don’t start with “image of” or “picture of”
  • For decorative images, use alt="" (empty, not missing)
  • For complex images (charts, diagrams), provide detailed descriptions

4. Fast-Loading Web Fonts

The Good Practice:

Optimized font loading that doesn’t block rendering or cause layout shift.

<head>
  <!-- Preconnect to font providers (DNS + handshake early) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  
  <!-- Preload critical font files -->
  <link 
    rel="preload" 
    href="/fonts/inter-var.woff2" 
    as="font" 
    type="font/woff2" 
    crossorigin
  >
  
  <!-- Load Google Fonts with display=swap -->
  <link 
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" 
    rel="stylesheet"
  >
</head>

/* Self-hosted font with font-display */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap; /* Show fallback immediately, swap when loaded */
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
               system-ui, sans-serif;
}

Why It Helps:

  • font-display: swap prevents invisible text (FOIT)
  • Improves First Contentful Paint (FCP)
  • Reduces Largest Contentful Paint (LCP)
  • Eliminates layout shift when fonts load
  • Preconnect reduces DNS and connection time
  • Self-hosting gives more control and better performance

Font Loading Strategy:

  1. Limit font families: Use 2-3 maximum
  2. Load only weights you use: Don’t load 100-900 if you only use 400, 600
  3. Self-host when possible: Eliminates third-party requests
  4. Use variable fonts: Single file for all weights
  5. System font fallback: Match x-height and metrics

Font-Display Values:

  • swap: Show fallback immediately, swap when custom font loads (best for performance)
  • optional: Use custom font only if cached (most aggressive performance)
  • fallback: Brief block period, then swap (middle ground)
  • block: Wait for custom font (worst for performance)

5. Accessible Interactive Elements

The Good Practice:

Buttons, forms, and interactions that work for everyone including keyboard and screen reader users.

<!-- Accessible button with proper semantics -->
<button 
  type="button"
  aria-label="Add Nike Pegasus 40 to shopping cart"
  onclick="addToCart('product-123')"
>
  <svg aria-hidden="true" width="20" height="20">
    <use href="#cart-icon"></use>
  </svg>
  Add to Cart
</button>

<!-- Accessible form with proper labels and error handling -->
<form onsubmit="handleSubmit(event)">
  <div class="form-group">
    <label for="email-address">Email Address</label>
    <input 
      type="email" 
      id="email-address" 
      name="email"
      required
      aria-required="true"
      aria-describedby="email-error email-hint"
      autocomplete="email"
    >
    <p id="email-hint" class="hint-text">
      We'll never share your email address
    </p>
    <span id="email-error" class="error-message" role="alert"></span>
  </div>
  
  <button type="submit">Subscribe to Newsletter</button>
</form>

<!-- Skip navigation link (accessibility) -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

/* Visible focus states for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #4A90E2;
  outline-offset: 2px;
}

/* Skip link (visible only on focus) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 12px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

/* Error states */
.error-message:not(:empty) {
  color: #c41e3a;
  font-size: 14px;
  margin-top: 4px;
  display: block;
}

input:invalid:not(:focus) {
  border-color: #c41e3a;
}

Why It Helps:

  • Better accessibility creates better user experience signals
  • Keyboard navigation improves usability for power users
  • Screen reader compatibility reaches more users
  • Legal compliance (ADA, WCAG 2.1 Level AA)
  • Proper semantics help search engines understand interaction points
  • Focus states improve navigation clarity

Accessibility Checklist:

  • ✓ All interactive elements keyboard accessible
  • ✓ Visible focus indicators (never outline: none without replacement)
  • ✓ Proper ARIA labels where needed
  • ✓ Form inputs associated with labels
  • ✓ Error messages announced to screen readers
  • ✓ Color contrast meets WCAG standards (4.5:1 minimum)
  • ✓ Skip navigation links present
  • ✓ Semantic HTML (real buttons, not divs)

6. Clean, Descriptive URLs

The Good Practice:

URLs that clearly describe page content using keywords.

✓ https://example.com/products/running-shoes/nike-pegasus-40
✓ https://example.com/blog/how-to-improve-page-speed
✓ https://example.com/services/seo-consulting
✓ https://example.com/about/team

✗ https://example.com/products?id=12345&cat=shoes
✗ https://example.com/page.php?p=237
✗ https://example.com/p/aH8kL3mP9nQ
✗ https://example.com/index.php?route=product/product&product_id=50

Why It Helps:

  • Keywords in URL are a documented ranking factor
  • Improves click-through rates in search results
  • Easier to remember and share
  • Enables automatic breadcrumb generation
  • Creates logical site hierarchy
  • Better user trust (readable vs. cryptic URLs)

URL Best Practices:

Structure: domain.com/category/subcategory/page-name

Examples:
domain.com/blog/seo-tips-2025
domain.com/products/mens-shoes/running
domain.com/services/local-seo/chicago

URL Guidelines:

  • Use hyphens (-), not underscores (_)
  • Keep under 60 characters when possible
  • Include primary keyword
  • Use lowercase letters only
  • Avoid parameters when possible (?id=123)
  • Remove stop words when natural (the, a, and, or, but)
  • Match URL structure to site hierarchy

URL Configuration:

// Next.js clean URLs
// pages/products/[category]/[product].js
export async function getStaticPaths() {
  return {
    paths: [
      { params: { category: 'running-shoes', product: 'nike-pegasus-40' } }
    ]
  };
}

7. Breadcrumb Navigation

The Good Practice:

Clear navigation path from homepage to current page with proper schema markup.

<nav aria-label="Breadcrumb">
  <ol 
    itemscope 
    itemtype="https://schema.org/BreadcrumbList"
    class="breadcrumb"
  >
    <li 
      itemprop="itemListElement" 
      itemscope 
      itemtype="https://schema.org/ListItem"
    >
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    
    <li 
      itemprop="itemListElement" 
      itemscope 
      itemtype="https://schema.org/ListItem"
    >
      <a itemprop="item" href="/products">
        <span itemprop="name">Products</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    
    <li 
      itemprop="itemListElement" 
      itemscope 
      itemtype="https://schema.org/ListItem"
    >
      <a itemprop="item" href="/products/running-shoes">
        <span itemprop="name">Running Shoes</span>
      </a>
      <meta itemprop="position" content="3" />
    </li>
    
    <li 
      itemprop="itemListElement" 
      itemscope 
      itemtype="https://schema.org/ListItem"
      aria-current="page"
    >
      <span itemprop="name">Nike Pegasus 40</span>
      <meta itemprop="position" content="4" />
    </li>
  </ol>
</nav>

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
  list-style: none;
  margin: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "›";
  margin-left: 8px;
  color: #6c757d;
}

.breadcrumb a {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: #6c757d;
}

Why It Helps:

  • Appears as rich snippet in search results
  • Helps search engines understand site structure
  • Improves user navigation and reduces bounce rate
  • Creates internal linking benefits
  • Schema markup increases SERP visibility
  • Shows content hierarchy clearly

Breadcrumb Best Practices:

  • Show full path from homepage to current page
  • Make each level clickable (except current page)
  • Use proper schema.org markup
  • Keep breadcrumb text concise
  • Match breadcrumbs to URL structure
  • Display on all pages except homepage

8. Responsive Images That Load Fast

The Good Practice:

Serving appropriately sized images for each device and viewport.

<img 
  srcset="
    hero-400.webp 400w,
    hero-800.webp 800w,
    hero-1200.webp 1200w,
    hero-1600.webp 1600w
  "
  sizes="
    (max-width: 600px) 400px,
    (max-width: 1000px) 800px,
    (max-width: 1400px) 1200px,
    1600px
  "
  src="hero-800.webp"
  alt="Modern office workspace with laptop showing analytics dashboard"
  width="1600"
  height="900"
  loading="lazy"
>

Why It Helps:

  • Mobile users don’t download unnecessary desktop-sized images
  • Dramatically improves LCP (Largest Contentful Paint)
  • Reduces bandwidth usage and page weight
  • Better Core Web Vitals scores
  • Faster perceived performance
  • Explicit dimensions prevent layout shift (CLS)

Image Optimization Checklist:

  • ✓ Use modern formats (WebP, AVIF with JPG fallback)
  • ✓ Compress appropriately (80-85% quality for JPG)
  • ✓ Set explicit width and height attributes
  • ✓ Lazy load below-the-fold images
  • ✓ Use responsive srcset for different viewports
  • ✓ Include descriptive alt text
  • ✓ Preload LCP image (hero image)

LCP Image Optimization:

<head>
  <!-- Preload hero image for fastest LCP -->
  <link 
    rel="preload" 
    as="image" 
    href="hero-1200.webp"
    imagesrcset="
      hero-400.webp 400w,
      hero-800.webp 800w,
      hero-1200.webp 1200w
    "
    imagesizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  >
</head>

<body>
  <!-- Hero image (do NOT lazy load) -->
  <img 
    src="hero-1200.webp"
    srcset="..."
    sizes="..."
    alt="..."
    width="1200"
    height="675"
    fetchpriority="high"
  >
</body>

Image Format Comparison:

  • AVIF: Best compression (30-50% smaller than JPG), limited browser support
  • WebP: Excellent compression (25-35% smaller than JPG), wide browser support
  • JPG: Universal support, larger file sizes, use as fallback
  • PNG: Lossless, large files, use only for graphics requiring transparency

Core Web Vitals and Performance

Understanding Core Web Vitals (2025)

Google’s Core Web Vitals are direct ranking factors measured from real user data.

1. LCP (Largest Contentful Paint)

What it measures: Time until the largest content element (image, text block, video) loads in the viewport.

Target: Under 2.5 seconds

Common LCP elements:

  • Hero images
  • Header images
  • Large text blocks
  • Video thumbnails

How to improve LCP:

  • Optimize images (compress, use modern formats, set dimensions)
  • Remove render-blocking resources
  • Implement server-side rendering for JavaScript frameworks
  • Use CDN for faster asset delivery
  • Preload critical resources
  • Reduce server response time (TTFB)

2. INP (Interaction to Next Paint)

What it measures: Time from user interaction (click, tap, key press) to when the page visually responds.

Target: Under 200ms

Note: INP replaced FID (First Input Delay) in March 2024 as an official Core Web Vital.

Common INP problems:

  • Heavy JavaScript execution blocking main thread
  • Large DOM size (over 1,500 nodes)
  • Unoptimized event handlers
  • Long-running tasks
  • Layout thrashing

How to improve INP:

  • Break up long JavaScript tasks
  • Defer non-critical JavaScript
  • Optimize event handler code
  • Use web workers for heavy computation
  • Minimize DOM size
  • Debounce/throttle event handlers

3. CLS (Cumulative Layout Shift)

What it measures: Visual stability. How much elements shift during page load.

Target: Under 0.1

Common CLS causes:

  • Images without dimensions
  • Fonts causing text reflow
  • Dynamically injected content
  • Ads without reserved space
  • Animations triggered on load

How to improve CLS:

  • Always set width and height on images and videos
  • Reserve space for ads and embeds
  • Use font-display: swap with fallback fonts
  • Avoid inserting content above existing content
  • Use transform for animations, not top/left

Measuring Core Web Vitals

Field Data (Real Users):

Google Search Console → Experience → Core Web Vitals

Shows actual performance from real users visiting your site. This data directly affects rankings.

Lab Data (Simulated):

Useful for development and identifying issues, but field data determines rankings.

Page Speed Optimization

Critical Optimization Tactics:

<head>
  <!-- 1. Preconnect to required origins -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://cdn.example.com">
  
  <!-- 2. Preload critical resources -->
  <link rel="preload" as="image" href="hero.webp">
  <link rel="preload" as="font" href="font.woff2" crossorigin>
  
  <!-- 3. Inline critical CSS -->
  <style>
    /* Only above-fold styles */
  </style>
  
  <!-- 4. Async/defer non-critical CSS -->
  <link rel="preload" as="style" href="styles.css" 
        onload="this.onload=null;this.rel='stylesheet'">
</head>

<body>
  <!-- Content -->
  
  <!-- 5. Defer JavaScript -->
  <script src="app.js" defer></script>
</body>

Performance Budget Example:

Total page size: < 1.5MB
JavaScript: < 300KB
Images: < 800KB (total)
CSS: < 100KB
Fonts: < 100KB
LCP: < 2.5s
INP: < 200ms
CLS: < 0.1

Measuring Design Impact on SEO

SEO Impact Tracking

Baseline Metrics (Before Design Changes):

Track in Google Analytics 4:

  • Organic sessions
  • Organic bounce rate
  • Pages per session
  • Average session duration
  • Conversion rate (organic traffic)
  • Top landing pages performance

Post-Implementation Tracking:

Wait 4-6 weeks after launch for meaningful data (Google needs time to recrawl and re-rank).

Compare:

  • Organic traffic change (% increase/decrease)
  • Rankings for target keywords
  • Core Web Vitals scores
  • Bounce rate and engagement
  • Conversion rate changes

Expected Improvements from Optimized Design:

Based on industry case studies:

  • Organic traffic: +15-40%
  • Bounce rate: -10-25%
  • Pages per session: +20-50%
  • Conversions: +10-30%
  • Mobile rankings: +5-15 positions average

Tools for Measurement

Performance Testing:

PageSpeed Insights

  • URL: https://pagespeed.web.dev/
  • Tests: Core Web Vitals, performance opportunities
  • Use: Test individual pages for specific issues

WebPageTest

  • URL: https://webpagetest.org/
  • Tests: Detailed waterfall, filmstrip view, comparison tests
  • Use: Deep dive into loading performance

Lighthouse (Chrome DevTools)

  • Access: F12 → Lighthouse tab
  • Tests: Performance, Accessibility, SEO, Best Practices
  • Use: Development testing and continuous monitoring

Search Console:

Core Web Vitals Report

  • Navigate to: Experience → Core Web Vitals
  • Shows: Real user data grouped by status (Good, Needs Improvement, Poor)
  • Action: Fix Poor URLs first, then Needs Improvement

Mobile Usability Report

  • Navigate to: Experience → Mobile Usability
  • Shows: Mobile-specific issues (tap targets, viewport, readable fonts)
  • Action: Fix all mobile usability issues

Coverage Report

  • Navigate to: Indexing → Pages
  • Shows: Which pages are indexed vs. excluded and why
  • Action: Fix crawl errors and validation issues

Design + SEO Checklist

Mobile Experience

  • [ ] Responsive design works across all screen sizes (320px to 2560px)
  • [ ] Touch targets minimum 48x48px (buttons, links, form controls)
  • [ ] Text readable without zooming (16px minimum base font size)
  • [ ] No horizontal scrolling required
  • [ ] Viewport meta tag properly configured
  • [ ] Mobile page speed LCP under 2.5 seconds
  • [ ] Forms optimized for mobile input (proper input types, labels)
  • [ ] Navigation works without hover (mobile has no hover)

Performance

  • [ ] LCP (Largest Contentful Paint) under 2.5 seconds
  • [ ] INP (Interaction to Next Paint) under 200ms
  • [ ] CLS (Cumulative Layout Shift) under 0.1
  • [ ] Images optimized: compressed, modern formats (WebP/AVIF), lazy loaded
  • [ ] Critical CSS inlined, remaining CSS deferred
  • [ ] JavaScript deferred or async (non-blocking)
  • [ ] Fonts optimized (font-display: swap, limited weights)
  • [ ] CDN implemented for static assets

Structure

  • [ ] Semantic HTML elements used (<header>, <nav>, <main>, <article>, <aside>, <footer>)
  • [ ] Proper heading hierarchy (single H1, logical H2-H6 structure)
  • [ ] Clean, descriptive URLs with keywords
  • [ ] Breadcrumb navigation with schema markup
  • [ ] Internal linking strategy implemented
  • [ ] Sitemap.xml generated and submitted
  • [ ] Robots.txt configured properly

Accessibility

  • [ ] All images have descriptive alt text
  • [ ] Forms properly labeled (label elements or aria-label)
  • [ ] Keyboard navigation works (tab through all interactive elements)
  • [ ] Focus states visible (never outline: none without replacement)
  • [ ] Color contrast sufficient (4.5:1 for text, 3:1 for UI components)
  • [ ] Skip navigation link present
  • [ ] Semantic buttons (real <button>, not <div> with onclick)
  • [ ] ARIA labels where needed for complex widgets
  • [ ] Respects prefers-reduced-motion

Content

  • [ ] Important text in HTML, not images
  • [ ] No hidden text or keyword stuffing
  • [ ] Content visible without JavaScript
  • [ ] No intrusive interstitials (immediate popups)
  • [ ] Structured data (schema.org) implemented where applicable
  • [ ] Meta descriptions unique and compelling
  • [ ] Title tags descriptive with primary keywords

JavaScript Frameworks (if applicable)

  • [ ] Server-side rendering or static site generation implemented
  • [ ] Content visible in initial HTML (not only after JS execution)
  • [ ] Fallbacks for JavaScript-dependent features
  • [ ] Critical rendering path optimized

Testing

  • [ ] Test on real mobile devices (not just browser resize)
  • [ ] Cross-browser testing (Chrome, Safari, Firefox, Edge)
  • [ ] PageSpeed Insights score reviewed
  • [ ] Search Console checks (no critical errors)
  • [ ] Accessibility audit completed (WAVE, axe, Lighthouse)

Frequently Asked Questions

Can a beautiful design still rank well in search engines?

Absolutely. Beautiful and high-performing are not mutually exclusive. The best websites achieve both through intentional technical implementation. You can have stunning visuals, smooth animations, elegant typography, and excellent SEO performance simultaneously. The key is making technically sound decisions during the design phase rather than treating performance as an afterthought. Use modern image formats, implement lazy loading, optimize font delivery, structure semantic HTML properly, and test continuously. Many award-winning design sites also rank extremely well because they understand that speed, accessibility, and crawlability enhance rather than detract from user experience.

Should I prioritize design or SEO when building a website?

This is a false dichotomy. Design and SEO are not competing priorities but complementary disciplines that should inform each other from project inception. Good design includes SEO considerations inherently. Clean visual hierarchy helps both users and search engines understand content importance. Fast-loading designs benefit both conversion rates and rankings. Mobile-first responsive layouts serve both user preferences and Google’s indexing approach. The most successful websites integrate both perspectives from the planning phase, with designers and SEO specialists collaborating rather than working in silos. When conflicts arise, user experience should guide decisions because Google increasingly aligns ranking factors with genuine user benefit.

How long does it take for design changes to affect search rankings?

Core Web Vitals improvements can impact rankings within days to weeks as Google collects new field data from real users. However, broader organic traffic changes typically take 4-8 weeks to fully materialize. Google needs time to recrawl your site, process the updated content and technical signals, and adjust rankings accordingly. For major redesigns, expect 2-3 months before seeing complete results. Monitor Search Console’s Core Web Vitals report for immediate technical feedback, but give organic traffic metrics at least 6-8 weeks before making final assessments. Gradual improvements are normal as Google builds confidence in your site’s enhanced performance and user experience.

Do animations and transitions hurt SEO performance?

Animations hurt SEO only when they slow page load, block content, or create poor INP (Interaction to Next Paint) scores. Lightweight CSS animations on transform and opacity properties have minimal performance impact. Avoid heavy JavaScript animation libraries that block the main thread. Never use animations that delay content visibility or prevent immediate user interaction. Respect prefers-reduced-motion media query for users with vestibular disorders. Well-implemented micro-interactions and transitions can actually improve user engagement metrics (time on site, pages per session) which indirectly benefit SEO. The rule is: if animations make your LCP exceed 2.5 seconds or INP exceed 200ms, they’re hurting SEO and should be optimized or removed.

What about parallax scrolling effects?

Parallax scrolling creates SEO problems when implemented poorly but works fine when done efficiently. Heavy JavaScript-based parallax that calculates positions on every scroll event destroys INP scores by blocking the main thread. The solution is CSS-based parallax using transform: translateZ() and perspective, which leverages GPU acceleration and doesn’t block JavaScript. Even better: use subtle parallax effects that enhance rather than define the experience. Many users (especially on mobile) find aggressive parallax disorienting. Test parallax implementations thoroughly with Lighthouse and real devices. If your parallax implementation adds more than 200ms to INP or causes jank, remove it. No visual effect is worth ranking penalties.

Should I use a design system for better SEO?

Design systems significantly help SEO through component reuse, consistency enforcement, and performance optimization. When you build reusable components (buttons, cards, forms, navigation), you optimize them once and the improvements propagate across your entire site. Design systems naturally encourage semantic HTML patterns, accessibility best practices, and performance budgets. They prevent ad-hoc code that accumulates technical debt and performance regressions. Major companies (Shopify, Airbnb, IBM) use design systems partly for this reason. However, design systems require initial investment and governance. For small sites, simple style guides and component libraries provide similar benefits without full design system overhead. The key is systematic approach over chaotic one-off implementations.

Can I hide content for mobile users without SEO penalties?

Google uses mobile-first indexing, meaning the mobile version of your site determines rankings for both mobile and desktop searches. Content hidden on mobile may not be indexed at all. If content matters for SEO, it must be visible on mobile. The exception is properly implemented accordions or tabs using <details>/<summary> elements or CSS height-based collapsing (not display: none), where content remains in the DOM but is visually collapsed. Mobile-specific feature differences are acceptable (desktop has hover states, mobile has touch gestures), but core content must be accessible on both. Never hide important product descriptions, key benefits, or conversion-critical information on mobile thinking it “cleans up” the design.

How important are design trends for SEO success?

Design trends matter far less than fundamental performance, accessibility, and usability principles. Trends like glassmorphism, neumorphism, or brutalism are stylistic choices that don’t inherently help or hurt SEO. However, trend-chasing can introduce performance problems: heavy blur filters for glassmorphism tank rendering performance, complex shadows for neumorphism increase paint times, and brutalist designs sometimes sacrifice usability for aesthetic. Focus on timeless principles (fast loading, clear hierarchy, accessible interactions, mobile-first responsive design) rather than trending visual styles. The best approach is developing distinctive brand aesthetics within performance constraints rather than following trends that may compromise technical fundamentals. Sites ranking in 2025 aren’t necessarily “trendy” but they’re definitely fast and user-friendly.

What’s the relationship between accessibility and SEO?

Accessibility and SEO overlap significantly because both aim to make content widely accessible and understandable. Many accessibility improvements directly benefit SEO: semantic HTML helps screen readers and search engines understand structure, descriptive alt text aids both blind users and image search indexing, proper heading hierarchy helps navigation and search engine content parsing, keyboard accessibility ensures users and bots can access all content, and sufficient color contrast makes content readable for everyone. Search engines increasingly use accessibility as a quality signal. Sites meeting WCAG 2.1 Level AA guidelines typically rank better than inaccessible competitors because accessibility correlates with better overall user experience. Treat accessibility as foundational to both user experience and SEO, not an optional add-on.

Should I completely avoid JavaScript frameworks for SEO?

No, but you must implement them correctly. Modern JavaScript frameworks (React, Vue, Next.js, Nuxt) are fine for SEO when you use server-side rendering (SSR) or static site generation (SSG). These approaches render HTML on the server before sending to users and crawlers, eliminating client-side rendering problems. Next.js (React), Nuxt (Vue), and SvelteKit handle this automatically. The problem is client-side only rendering where JavaScript executes in the browser to generate content. Google can execute JavaScript but it’s slow, resource-intensive, and unreliable. If you’re using frameworks, verify that content appears in the initial HTML source (View Page Source, not Inspect Element which shows post-JavaScript DOM). For content-heavy sites (blogs, e-commerce, corporate sites), SSR/SSG is essential regardless of framework choice.

How do I balance page speed with visual richness?

Balance comes from intelligent technical implementation rather than choosing between speed and richness. Use modern image formats (WebP/AVIF) that look identical to JPG but are 30-50% smaller. Implement lazy loading so below-fold images load only when needed. Use CSS for visual effects rather than images (gradients, shadows, borders). Leverage browser caching aggressively. Compress assets during build process. Prioritize above-the-fold content loading while deferring below-fold resources. The goal is perceived speed: users should see something meaningful in under 1 second even if the full page takes 2-3 seconds to complete. Preload critical resources (hero images, fonts) while lazy loading everything else. Test continuously with Lighthouse and real devices to catch regressions early.

What role does design play in earning featured snippets?

Design directly affects featured snippet eligibility through content structure and formatting. Google pulls featured snippets from well-structured content using proper heading hierarchy, lists, tables, and clear definitions. Design decisions that help: logical H2/H3 headings that answer questions directly, HTML lists for step-by-step processes or rankings, HTML tables for comparisons or data, clear paragraph structure with topic sentences, and semantic HTML that clarifies content relationships. Design decisions that hurt: image-based text (Google can’t extract it), vague heading text (“Overview” instead of “How to Install WordPress”), content buried in JavaScript-rendered sections, and poor visual hierarchy where main points aren’t emphasized. Format content so that answers are extractable: use questions as headings, provide concise answers immediately, and structure with lists or tables where appropriate.

Further Resources

Google Official Resources:

Performance and Design:

Accessibility:

Image Optimization:

Testing Tools:

  • Chrome DevTools Lighthouse
  • Firefox Developer Tools
  • Mobile Simulator (Chrome DevTools)
  • Real device testing labs

This guide reflects systematic understanding of how design decisions impact SEO through Core Web Vitals, crawlability, user experience signals, and technical performance. Every recommendation comes from documented ranking factors, performance research, and real-world optimization results.