Building Dynamic Menus and High-Performance Hero Sections

Optimizing the First Impression (The Static Hero)

The first thing a user sees when they land on your site is the Hero Section. While it needs to look beautiful, it also needs to be technically optimized. If your Hero image takes too long to load, your Google PageSpeed score will drop.

The Implementation: High-Performance Hero

We use the next/image component combined with ImageKit.io to ensure our images are small, fast, and high-quality.

Path: src/components/Hero/StaticHero.jsx

After Menubar hero image show

JavaScript

import Image from 'next/image';

export default function StaticHero() {
  // Using ImageKit transformations for speed: 
  // w-800: Resizes to 800px width
  // q-75: Optimizes quality to 75%
  // f-webp: Converts to modern WebP format
  const heroImageUrl = "https://ik.imagekit.io/demo/hero.png?tr=w-800,q-75,f-webp"; 

  return (
    <section className="relative w-full h-[35vh] md:h-[60vh] overflow-hidden bg-[#0a192f]">
      <Image
        src={heroImageUrl}
        alt="Wisemix Media Banner"
        fill
        priority          // Vital for SEO and LCP
        fetchPriority="high"
        decoding="sync"
        className="object-cover opacity-70"
        sizes="100vw"
      />
      
      {/* Overlay for better text readability */}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 md:bg-gradient-to-r md:from-white/90 z-[1]" />

      <div className="relative z-10 container mx-auto h-full px-4 flex items-center">
        <div className="max-w-xl text-center md:text-left">
           <h1 className="text-3xl md:text-6xl font-black text-white md:text-slate-900">
            Insightful Content. <br />
            <span className="text-blue-600">Curated for Growth.</span>
          </h1>
          <button className="mt-6 bg-blue-600 text-white px-8 py-3 rounded-full font-bold">
            Read Articles
          </button>
        </div>
      </div>
    </section>
  );
}

Why These Tech Features Matter?

1. Solving the LCP Problem

LCP stands for Largest Contentful Paint. It measures how fast the main content of your site loads.

• priority: This tells Next.js that this image is the most important. It preloads the image so it appears instantly.

• fetchPriority="high": This is a hint to the browser to prioritize this network request over others.

2. Real-time Optimization with ImageKit

Instead of manually resizing images in Photoshop, we use URL parameters.

• Compression: By setting q-75, we reduce the file size by nearly 70% without losing visible quality.

• Format Conversion: Using f-webp ensures that modern browsers receive the lightest file format possible.

3. Layout Stability (CLS)

By using the fill property inside a container with a defined height (h-[60vh]), we ensure the page doesn't "jump" when the image finally loads. This keeps our Cumulative Layout Shift (CLS) score at 0.

Summary for Students

In modern web development, beauty is nothing without speed. By using Next.js Images and ImageKit, we ensure that our hero section is:

1. Responsive: Looks great on mobile and desktop.

2. Fast: Loads in milliseconds.

3. SEO Friendly: Passes all Google Core Web Vitals.