وقتی صحبت از «سرعت سایت» و «پایداری تجربه» میشود، ما در رومت آن را صرفاً یک معیار فنی نمی‌بینیم. Core Web Vitals مستقیماً روی سئو، نرخ ماندگاری کاربر و حتی «تصویر برند» شما اثر دارد. کاربر ایرانی اگر در چند ثانیه اول محتوای اصلی را نبیند یا صفحه بلرزد، ناخودآگاه فرض می‌کند شرکت هم کند و بی‌نظم است. نتیجه میشود افت جایگاه در نتایج جستجو، افزایش نرخ خروج و از دست دادن تماس‌های باارزش. این مقاله یک پل میان زبان فنی و زبان تجاری است: تیم توسعه می‌فهمد دقیقاً چه باید بکند، و مدیرعامل می‌بیند چرا باید بودجه را در زیرساخت، تصاویر، کد و موبایل سرمایه‌گذاری کند. اگر طراحی سایت حرفه‌ای قرار است اعتبار بسازد، باید «سریع»، «پایدار» و «تعامل‌پذیر» باشد؛ درست همان چیزی که Core Web Vitals اندازه‌گیری می‌کند.
Core Web Vitals به زبان ساده: LCP، CLS و INP
سه شاخص کلیدی تجربه واقعی کاربر (RUM) در Core Web Vitals عبارت‌اند از:
- LCP: بزرگ‌ترین عنصر قابل‌مشاهده. یعنی چقدر طول می‌کشد تا چیز اصلی صفحه (مثلاً تصویر قهرمان یا عنوان بزرگ) به‌طور کامل دیده شود.
- CLS: میزان «پریدن» چیدمان. اگر حین خواندن، دکمه‌ها جابه‌جا شوند یا متن بالا و پایین بپرد، امتیاز CLS بالا می‌رود و تجربه کاربر تخریب میشود.
- INP: سرعت پاسخ به تعامل. این‌که سایت چقدر سریع به کلیک و لمس شما واکنش نشان می‌دهد. INP از ۲۰۲۴ جایگزین FID شده و پایدارتر کیفیت تعامل را می‌سنجد.
این سه شاخص در کنار هم می‌گویند «چقدر زود می‌بینم»، «چقدر ثابت می‌ماند» و «چقدر سریع پاسخ می‌گیرم». گوگل وضعیت سایت را بر اساس تجربه واقعی کاربران در ۷۵امین صدک (به‌ویژه موبایل) ارزیابی می‌کند. پس تمرکز روی بهینه‌سازی واقعی و نه فقط نمره تست اهمیت دارد.
استانداردهای Core Web Vitals در ۱۴۰۵: «خوب» یعنی چه؟
برای یک وب‌سایت شرکتی و فروشگاهی حرفه‌ای در ایران، اهداف عددی زیر را به‌صورت شفاف دنبال کنید:
- LCP ≤ 2.5s (خوب)؛ بین 2.5 تا 4 ثانیه قابل‌بهبود؛ بالاتر از 4 ثانیه ضعیف. اهمیت: هرچه کاربر زودتر «قلب محتوا» را ببیند، احتمال ماندگاری و تعامل بیشتر میشود.
- CLS ≤ 0.1 (خوب)؛ بین 0.1 تا 0.25 قابل‌بهبود؛ بالاتر از 0.25 ضعیف. اهمیت: نپریدن صفحه یعنی اعتماد و تمرکز کاربر.
- INP ≤ 200ms (خوب)؛ 200 تا 500ms قابل‌بهبود؛ بالاتر از 500ms ضعیف. اهمیت: لمس و کلیک باید «بی‌درنگ» حس شود.
چند بودجه مکمل:
- TTFB ترجیحاً ≤ 800ms در موبایل داخل ایران.
- حجم صفحه آغازین ≤ 1–1.5MB و تعداد درخواست‌ها تا حد امکان کم.
- تصویر شاخص با فرمت نسل جدید (WebP/AVIF) و فشرده‌سازی استاندارد.
این اعداد فقط برای «نمره» نیستند؛ برای «ادراک کیفیت» هستند. کاربر اگر در ۳ ثانیه اول به محتوای اصلی نرسد، احتمال ترک به‌طور قابل‌توجهی افزایش می‌یابد.
چک‌لیست تصاویر و رندر اولیه: سریع ببین، درست ببین
قواعد طلایی تصاویر
- فرمت‌ها: WebP/AVIF برای اکثر تصاویر؛ PNG فقط برای شفافیت خاص؛ JPEG Progressive برای سازگاری گسترده.
- ابعاد واکنش‌گرا:
srcsetوsizesبرای تحویل اندازه دقیق به هر دستگاه. - Lazy Load هوشمند:
loading="lazy"برای تصاویر بیرون از ویوپورت؛ تصویر قهرمان را Lazy نکنید. - اولویت‌دهی: برای LCP از
fetchpriority="high"و در صورت نیازrel="preload"استفاده کنید. - ثبات چیدمان:
width/heightیاaspect-ratioرا تعیین کنید تا CLS کنترل شود.
ویدئو و پس‌زمینه‌ها
- پوستر ویدئو را بهینه کنید؛ ویدئوهای اتوپلی را سبک و بی‌صدا نگه دارید یا از تصویر جایگزین استفاده کنید.
- پس‌زمینه‌های تمام‌عرض حجیم را به CSS Gradients یا تصاویر به‌شدت فشرده تبدیل کنید.
هدف: کوچک‌سازی، تحویل هوشمند و پرهیز از جابه‌جایی. نتیجه مستقیم آن، LCP بهتر، CLS پایین‌تر و حس «سبکی» در اولین نگاه است.
چک‌لیست جاوااسکریپت، CSS و تعامل: بهینه برای INP
- حذف کدهای بلااستفاده: Tree-shaking، حذف Polyfillهای غیرضروری و Split کردن باندل‌ها.
- بارگذاری مشروط:
defer/asyncبرای اسکریپت‌ها؛ Initialize کردن ویژگی‌های فرعی پس از تعامل. - Long Taskها را خرد کنید: کارهای بالای ۵۰ms را با Scheduling و Web Worker تفکیک کنید.
- Critical CSS را Inline و باقی را دیرتر بارگذاری کنید؛ از Block شدن رندر جلوگیری کنید.
- Third-partyها را مینیمم کنید: تگ‌منیجر، چت و آنالیتیکس را سبک، با
preconnectو بارگذاری تأخیری. - ایونت‌ها:
passiveبرای اسکرول و لمس؛ انیمیشن‌ها را تا حد ممکن CSS-محور و ترکیبی (transform/opacity) نگه دارید.
INP زمانی عالی میشود که «کد» کوتاه، غیرمسدودکننده و واکنش‌گرا باشد. این یعنی تعاملات، بدون لگ، بی‌واسطه حس شوند؛ مخصوصاً روی موبایل‌های میان‌رده رایج در ایران.
کش، CDN و سرور: زیرساختی که حس اعتماد می‌دهد
- Cache-Control اصولی: برای دارایی‌های استاتیک طول عمر بلند با
immutable؛ برای HTML ازstale-while-revalidate. - CDN لبه: تحویل از نزدیک‌ترین نقطه؛ فعال‌سازی HTTP/2 و HTTP/3 (QUIC) و فشرده‌سازی Brotli.
- TTFB پایین با SSR و کش صفحه/فرگمنت؛ دیتابیس و ORM را پروفایل و Queryهای سنگین را بهینه کنید.
- مکان سرور و پهنای‌باند: مسیرهای داخلی و بین‌المللی را بسنجید؛ سرور ضعیف در ساعت‌های اوج یعنی از دست رفتن اعتماد در لحظه تصمیم.
- مانیتورینگ واقعی: RUM، APM و لاگینگ برای دیدن کندی‌های لحظه‌ای و منطقه‌ای.
بودجه روی سرور و CDN به‌ظاهر هزینه است، اما در عمل «حفظ کاربر در ثانیه‌های طلایی» و افزایش احتمال تماس/خرید است.
فونت‌ها، آیکن‌ها و ثبات طرح: کنترل CLS در فارسی
- فرمت و ساب‌ست: WOFF2 و ساب‌ست فارسی/اعداد؛ وزن‌های غیرضروری را حذف کنید.
font-display: swapبه همراه FOUT کنترل‌شده؛ اندازه و ارتفاع خط را ثابت تعریف کنید تا پریدن متن رخ ندهد.- Variable Fonts را با احتیاط به‌کار ببرید؛ اگر فقط دو وزن لازم است، ساده نگه دارید.
- آیکن‌ها را از فونت به SVG Sprite مهاجرت دهید؛ دسترس‌پذیر، سبک و پایدار.
- اسلات تبلیغات و ویجت‌ها را با ارتفاع/عرض رزرو کنید؛ Skeleton UI برای محتواهای دیررس تعریف کنید.
در صفحات فارسی، مدیریت خط و حروف اهمیت ویژه دارد. ثبات تایپوگرافی مستقیماً CLS را کاهش می‌دهد و حس حرفه‌ای بودن را تقویت می‌کند.
چرا ۴ ثانیه یعنی «هیچ»
درد رایج کارفرمای ایرانی: «سایت من قشنگه ولی تو موبایل داغونه و دیر بالا میاد.» واقعیت این است که کاربر موبایلی امروز حوصله ندارد. اگر صفحه در حدود ۴ ثانیه باز نشود، در ذهن او «انگار وجود ندارید». هدررفت این نقطه، یعنی از دست رفتن فرصت تماس و فروش. روی شبکه‌های ناپایدار یا دستگاه‌های میان‌رده، بودجه عملکرد باید سخت‌گیرانه‌تر باشد.
| شاخص | سایت کند | سایت بهینه | نکات کلیدی / راه‌حل |
|---|---|---|---|
| نرخ پرش (Bounce Rate) | بالا، کاربران سریع خارج می‌شوند. | پایین، کاربران بیشتر در سایت می‌مانند. | بهبود LCP موبایل (بارگذاری سریع بخش اصلی صفحه) |
| حس کاربر (User Perception) | بی‌اعتمادی، بی‌نظمی، سردرگمی | حرفه‌ای، معتبر، قابل‌اتکا | طراحی تمیز و روان + ثبات چیدمان (CLS پایین) |
| شانس تماس / خرید (Conversion) | افت محسوس در مراحل حیاتی | افزایش تماس، ثبت‌نام یا خرید | کاهش جاوااسکریپت اضافی و بهینه‌سازی عملکرد فرم‌ها |
| تعامل اولیه (First Input Delay) | کند، پاسخ دیر به کلیک یا لمس | سریع، واکنش فوری به اقدام کاربر | کاهش اسکریپت‌های بلاک‌کننده و استفاده از lazy load |
| نمایش بصری صفحه (Visual Stability) | جابه‌جایی ناگهانی عناصر هنگام بارگذاری | چیدمان پایدار و مطمئن | استفاده از ابعاد ثابت تصاویر و فونت‌های بهینه |
| عملکرد تصاویر | سنگین، بدون فشرده‌سازی و واکنش‌گرایی | سبک، فشرده و واکنش‌گرا | استفاده از فرمت‌های WebP/AVIF و تصاویر responsive |
راه‌حل: تمرکز بر LCP موبایل، کمینه‌کردن جاوااسکریپت، تصاویر واکنش‌گرا و CDN نزدیک کاربر.
جمع‌بندی
اگر Core Web Vitals شما پایین است، فقط رتبه از دست نمی‌دهید؛ کاربری را از دست می‌دهید که آماده بود روی «تماس» بزند. برای ۱۴۰۵، روی سه محور تمرکز کنید:
۱) LCP زیر ۲.۵ ثانیه با تصویر قهرمان سبک و تحویل هوشمند،
۲) CLS زیر ۰.۱ با رزرو فضا و فونت درست،
۳) INP زیر ۲۰۰ میلی‌ثانیه با کد سبک و تعاملات بی‌درنگ.
زیرساخت را با CDN، کش اصولی و سرور پایدار پشتیبانی کنید. در رومت ما این مسیر را از استراتژی تا پیاده‌سازی با ابزارهای واقعی کاربر (RUM) دنبال می‌کنیم تا هر تغییر، اثرش در کسب‌وکار دیده شود: کاهش خروج، افزایش تماس و تقویت تصویر حرفه‌ای برند.
پرسش‌های متداول
1.فرق Lighthouse با داده‌های واقعی Core Web Vitals چیست؟
Lighthouse یک تست آزمایشگاهی است و شرایط ثابتی را شبیه‌سازی می‌کند. اما Core Web Vitals بر اساس داده‌های واقعی کاربران (CrUX/RUM) در دستگاه‌ها و شبکه‌های مختلف محاسبه میشود و معیار تصمیم‌گیری گوگل است. هر دو لازم‌اند: Lighthouse برای عیب‌یابی و بودجه‌گذاری، RUM برای ارزیابی اثر واقعی تغییرات و سنجش ۷۵امین صدک کاربران موبایل.
2.آیا استفاده از CDN همیشه لازم است؟
برای وب‌سایت‌های شرکتی و فروشگاهی که به کاربران سراسر کشور سرویس می‌دهند، CDN تقریباً همیشه سودمند است: کاهش TTFB، تحویل نزدیک، فشرده‌سازی بهتر و ثبات بیشتر در ساعات اوج. اگر محتوای شما پویاست، از کش‌کردن لبه با قوانین مناسب و استراتژی stale-while-revalidate استفاده کنید تا هم سرعت حفظ شود و هم داده‌ها تازه بمانند.
3.چطور بفهمم کدام اسکریپت‌ها «بلااستفاده» هستند؟
از Coverage در DevTools برای شناسایی کدهای استفاده‌نشده، گزارش باندل و Split کردن مسیرها استفاده کنید. Third-partyها را فهرست کنید، بارگذاری مشروط یا تأخیری را اعمال کنید و فقط در صفحات نیازمند، اسکریپت را لود کنید. هر کیلوبایت جاوااسکریپت کمتر، بهبود INP و LCP را در موبایل‌های میان‌رده به همراه دارد.
4.برای کنترل CLS چه اقدام سریعی پیشنهاد میشود؟
برای همه تصاویر و ویدئوها عرض/ارتفاع یا نسبت تصویر تعیین کنید، اسلات تبلیغات را رزرو کنید، font-display: swap را فعال و ارتفاع خط را ثابت تعریف کنید، و از SVG Sprite به‌جای فونت آیکن استفاده کنید. همچنین کامپوننت‌های پویا را با Skeleton و Placeholder نمایش دهید تا جابه‌جایی ناگهانی ایجاد نشود.
5.بودجه‌بندی سرور به سئو چه ربطی دارد؟
TTFB بالا LCP را عقب می‌اندازد و بر رتبه و رفتار کاربر اثر می‌گذارد. سرور و پایگاه‌داده کند در لحظه تصمیم، حس بی‌ثباتی می‌دهد. با ارتقای سرور، بهینه‌سازی Queryها، کش هوشمند و CDN، «قدرت پاسخ‌دهی» را بالا می‌برید؛ نتیجه آن، تجربه کاربری بهتر، سئوی پایدارتر و در نهایت تماس‌ها و فروش بیشتر است.
منابع: مستندات رسمی Core Web Vitals و راهنماهای بهینه‌سازی عملکرد مرورگرها (Chrome DevTools، Web Fundamentals).
