Core Web Vitals سه معیار اصلی تجربهٔ کاربری است که گوگل آن را در رتبهبندی سئو لحاظ میکند: LCP برای سرعت بارگذاری محتوای اصلی، CLS برای پایداری چیدمان و INP برای پاسخگویی به تعامل کاربر. در طراحی وبسایت حرفهای، رسیدن این سه به محدودهٔ سبز هم بازدیدکننده را راضی نگه میدارد و هم جایگاه سایت را در نتایج جستوجو بالا میبرد.
برای بهبود LCP، بزرگترین عنصر صفحه — معمولاً تصویر شاخص — باید سریع برسد. ما با کامپوننت NuxtImg تصاویر را به فرمت WebP یا AVIF تبدیل و در ابعاد متناسب سرو میکنیم، تصویر بالای صفحه را با priority بارگذاری میکنیم و فونتها را با preload و font-display: swap مدیریت میکنیم تا متن بدون انتظار نمایش داده شود.
جابهجایی ناگهانی چیدمان یا CLS، آزاردهندهترین مشکل برای کاربر است. ریشهٔ آن معمولاً تصاویر و تبلیغات بدون ابعاد مشخص یا فونتهایی است که دیر میرسند. راهحل، تعیین صریح width و height برای هر رسانه و رزرو فضای ثابت برای محتوای تأخیری است تا با آمدن آن، بقیهٔ صفحه تکان نخورد.
INP که جایگزین FID شده، کیفیت پاسخ به کلیک و تایپ کاربر را میسنجد. کارهای سنگین جاوااسکریپت رشتهٔ اصلی را قفل میکنند و رابط را کند نشان میدهند. ما باندل را با code splitting بر اساس مسیر کوچک میکنیم، کامپوننتهای غیرضروری را با lazy hydration به تعویق میاندازیم و محاسبات سنگین را به Web Worker میسپاریم تا تعامل همیشه آنی بماند.