FRONTEND OPTIMIZATION

Web Performance & SEO

Definition: Core Web Vitals are a set of specific factors that Google considers critical in a webpage's overall user experience.

শুধু সুন্দর ডিজাইন আর ফাংশনাল কোড লিখলেই কাজ শেষ হয় না। আপনার সাইট গুগলে র‍্যাংক করবে কি না এবং ইউজার কত দ্রুত সাইটটি দেখতে পাবে, তা অপ্টিমাইজ করা একজন প্রো-ডেভেলপারের অন্যতম প্রধান দায়িত্ব।

1. Core Web Vitals (Google Standards)

The 3-Second Rule

ধরি, আপনার একটি ই-কমার্স সাইট আছে। ইউজার লিংকে ক্লিক করার পর যদি পেজ লোড হতে ৩ সেকেন্ডের বেশি সময় নেয়, তবে ৫৩% ভিজিটর সাইট কেটে বের হয়ে যায় (High Bounce Rate)।

গুগল এই ইউজার এক্সপেরিয়েন্স মাপার জন্য ৩টি কোর ম্যাট্রিক (Core Metrics) ব্যবহার করে। যদি এই ৩টি টেস্টে আপনার সাইট ফেইল করে, তবে গুগল কখনোই আপনার সাইটকে সার্চ রেজাল্টের প্রথম পেজে জায়গা দেবে না!

Loading Speed

LCP (Largest Contentful Paint)

পেজের সবচেয়ে বড় ছবি বা টেক্সট ব্লকটি স্ক্রিনে পুরোপুরি রেন্ডার হতে কত সময় লাগে।
Target: < 2.5 seconds.

Interactivity

INP (Interaction to Next Paint)

বাটনে ক্লিক বা টাইপ করার পর সাইট কত দ্রুত রেসপন্স করে তার হিসাব। (আগে একে FID বলা হতো)।
Target: < 200 ms.

Visual Stability

CLS (Cumulative Layout Shift)

পেজ লোড হওয়ার সময় হঠাৎ করে লেআউট বা বাটন কতটুকু সরে যায় (স্লো ইমেজের কারণে)।
Target: < 0.1 score.

2. Programmatic SEO via Next.js Metadata

HTML ফাইলে হার্ডকোড করে মেটা ট্যাগ (Meta Tags) লেখার দিন শেষ! Next.js এর Metadata API দিয়ে আমরা ডাইনামিকালি SEO জেনারেট করতে পারি। সাথে আমরা ব্যবহার করি JSON-LD (Structured Data), যাতে গুগলের রোবট সহজেই বুঝতে পারে এটি কোনো মানুষের প্রোফাইল, প্রোডাক্ট নাকি কোনো আর্টিকেল।

app/layout.js
// Dynamic Metadata API in Next.js
export const metadata = {
    title: 'Md. Shakawat Hossain Faravi | Full-Stack Engineer',
    description: 'Portfolio and Tech Lab showcasing advanced web architecture.',
    openGraph: {
        images: ['https://al-faravi.com/og-image.jpg'],
    },
};

export default function RootLayout({ children }) {
    // Injecting Structured Data for Google Knowledge Graph
    const jsonLd = {
        "@context": "https://schema.org",
        "@type": "Person",
        "name": "Md. Shakawat Hossain Faravi",
        "jobTitle": "Information Technology Executive & Full-Stack Developer"
    };

    return (
        <html lang="en">
            <head>
                <script type="application/ld+json" 
                    dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} 
                />
            </head>
            <body>{children}</body>
        </html>
    );
}

3. Live SEO Meta & Schema Generator

নিচের ফর্মটি পরিবর্তন করে দেখুন কীভাবে স্বয়ংক্রিয়ভাবে গুগলের ক্রলারের (Crawler) জন্য JSON-LD স্কিমা তৈরি হয়। গুগল এই ডেটা পড়েই সার্চ রেজাল্টে সুন্দর "Knowledge Panel" বা "Rich Snippets" দেখায়।