Core Web Vitals چیست و چرا سرعت سایت فقط یک مسئله فنی نیست؟
وقتی درباره سرعت سایت صحبت می‌کنیم، معمولاً اولین چیزی که به ذهن می‌رسد این است که:
«صفحه چقدر سریع باز می‌شود؟»
اما تجربه واقعی کاربر بسیار پیچیده‌تر از زمان باز شدن اولیه یک صفحه است.
ممکن است یک صفحه در مدت کوتاهی نمایش داده شود، اما متن‌ها هنگام بارگذاری جابه‌جا شوند، دکمه‌ها دیر قابل استفاده باشند یا محتوای اصلی برای چند ثانیه آماده نشود.
به همین دلیل، گوگل برای ارزیابی بخش‌هایی از تجربه واقعی کاربران، مجموعه‌ای از معیارها را تحت عنوان Core Web Vitals معرفی کرده است.
اما Core Web Vitals دقیقاً چیست؟
چه معیارهایی را بررسی می‌کند؟
و مهم‌تر از همه، چرا سرعت و عملکرد سایت فقط یک مسئله فنی برای برنامه‌نویس نیست؟
Core Web Vitals چیست؟
Core Web Vitals مجموعه‌ای از معیارهای قابل اندازه‌گیری برای بررسی جنبه‌هایی از تجربه کاربر هنگام استفاده از یک صفحه وب است.
این معیارها روی سه مفهوم اصلی تمرکز دارند:
سرعت نمایش محتوای اصلی
پاسخ‌گویی صفحه به تعامل کاربر
پایداری بصری صفحه
به زبان ساده، می‌توان گفت:
کاربر چقدر سریع محتوای اصلی را می‌بیند؟
صفحه چقدر سریع به تعامل او پاسخ می‌دهد؟
آیا عناصر صفحه هنگام بارگذاری جابه‌جا می‌شوند؟
این سه سؤال پایه اصلی Core Web Vitals را تشکیل می‌دهند.
سه معیار اصلی Core Web Vitals
Core Web Vitals امروزی بر سه معیار اصلی استوار است:
۱. LCP — Largest Contentful Paint
اندازه‌گیری زمان نمایش بزرگ‌ترین عنصر محتوایی قابل مشاهده در بخش اولیه صفحه.
۲. INP — Interaction to Next Paint
اندازه‌گیری میزان پاسخ‌گویی صفحه به تعاملات کاربر.
۳. CLS — Cumulative Layout Shift
اندازه‌گیری میزان جابه‌جایی ناخواسته عناصر صفحه هنگام بارگذاری.
هرکدام از این معیارها بخش متفاوتی از تجربه کاربر را بررسی می‌کنند.
۱. LCP چیست؟
LCP یا Largest Contentful Paint به زمان نمایش بزرگ‌ترین عنصر محتوایی قابل مشاهده در محدوده اولیه صفحه مربوط می‌شود.
برای مثال، در یک صفحه ممکن است بزرگ‌ترین عنصر بخش بالایی شامل:
تصویر Hero
عنوان اصلی
بنر
ویدئو
یا یک بلوک متنی بزرگ
باشد.
اگر این محتوای اصلی خیلی دیر نمایش داده شود، کاربر ممکن است تصور کند صفحه هنوز در حال بارگذاری است.
یک مثال ساده
فرض کنید کاربر وارد صفحه خدمات شما می‌شود.
صفحه تقریباً بلافاصله باز می‌شود، اما تصویر اصلی و عنوان مهم صفحه چند ثانیه بعد ظاهر می‌شوند.
از دید فنی ممکن است مرورگر شروع به نمایش صفحه کرده باشد، اما از دید کاربر، محتوای اصلی هنوز آماده نیست.
اینجاست که LCP اهمیت پیدا می‌کند.
چه عواملی می‌توانند LCP را ضعیف کنند؟
موارد مختلفی می‌توانند باعث تأخیر در نمایش محتوای اصلی شوند، از جمله:
تصاویر حجیم
سرور کند
زمان پاسخ‌گویی بالای سرور
فایل‌های CSS بزرگ
JavaScript سنگین
فونت‌های نامناسب
درخواست‌های شبکه زیاد
منابعی که بارگذاری محتوای اصلی را به تأخیر می‌اندازند
به همین دلیل بهبود LCP فقط با کاهش حجم یک تصویر انجام نمی‌شود؛ گاهی باید زنجیره بارگذاری صفحه را بررسی کرد.
۲. INP چیست؟
INP یا Interaction to Next Paint معیاری برای بررسی پاسخ‌گویی صفحه به تعاملات کاربر است.
فرض کنید کاربر روی یک دکمه کلیک می‌کند.
یا:
منوی موبایل را باز می‌کند؛
فیلتر را تغییر می‌دهد؛
چیزی را در فرم وارد می‌کند؛
یک تب را انتخاب می‌کند؛
پنجره‌ای را باز می‌کند.
اگر صفحه برای مدت قابل توجهی بعد از تعامل کاربر متوقف یا کند شود، تجربه کاربری نامناسب خواهد بود.
INP تلاش می‌کند این بخش از تجربه را اندازه‌گیری کند.
چرا JavaScript می‌تواند روی INP تأثیر بگذارد؟
یکی از عوامل مهم در پاسخ‌گویی ضعیف صفحات، اجرای طولانی JavaScript در مرورگر است.
فرض کنید یک صفحه مقدار زیادی JavaScript را روی Main Thread اجرا می‌کند.
در این شرایط ممکن است کاربر روی یک دکمه کلیک کند، اما مرورگر درگیر اجرای کار دیگری باشد.
نتیجه؟
کلیک انجام شده، اما واکنش صفحه با تأخیر دیده می‌شود.
برای همین، بهینه‌سازی JavaScript، کاهش کارهای غیرضروری و مدیریت مناسب تعاملات می‌تواند در بهبود پاسخ‌گویی صفحه مؤثر باشد.
۳. CLS چیست؟
CLS یا Cumulative Layout Shift به جابه‌جایی ناخواسته عناصر صفحه در هنگام بارگذاری مربوط می‌شود.
احتمالاً این تجربه را داشته‌اید:
می‌خواهید روی یک دکمه کلیک کنید، اما درست در همان لحظه یک تصویر یا تبلیغ بالای آن ظاهر می‌شود و دکمه جابه‌جا می‌شود.
در نتیجه به جای دکمه، روی چیز دیگری کلیک می‌کنید.
این یک نمونه ساده از Layout Shift است.
چه چیزهایی باعث CLS می‌شوند؟
برخی عوامل رایج عبارت‌اند از:
تصاویر بدون ابعاد مشخص
تبلیغات بدون فضای رزرو شده
فونت‌هایی که دیر بارگذاری می‌شوند
محتوایی که به‌صورت ناگهانی به صفحه اضافه می‌شود
المان‌های پویا
تغییر اندازه عناصر بعد از بارگذاری
برای کاهش CLS باید تا حد امکان فضای موردنیاز عناصر مهم صفحه از قبل مشخص باشد.
Core Web Vitals در یک نگاه
معیارچه چیزی را بررسی می‌کند؟مسئله اصلیLCPنمایش محتوای اصلیسرعت درک‌شدن محتوای صفحهINPپاسخ صفحه به تعاملسرعت واکنش به کاربرCLSپایداری چیدمانجلوگیری از جابه‌جایی عناصر
می‌توان این سه معیار را به شکل ساده این‌طور به خاطر سپرد:
LCP = نمایش
INP = تعامل
CLS = ثبات
چرا سرعت سایت فقط یک مسئله فنی نیست؟
اینجا بخش مهم موضوع مشخص می‌شود.
ممکن است بهینه‌سازی Core Web Vitals از نظر فنی با کد، سرور، تصاویر و JavaScript ارتباط داشته باشد؛ اما نتیجه آن مستقیماً روی تجربه کاربر تأثیر می‌گذارد.
فرض کنید دو سایت خدماتی دارید.
در سایت اول:
کاربر وارد صفحه می‌شود، محتوای اصلی سریع ظاهر می‌شود، دکمه‌ها پاسخ‌گو هستند و صفحه هنگام بارگذاری جابه‌جا نمی‌شود.
در سایت دوم:
محتوا دیر نمایش داده می‌شود، کلیک‌ها با تأخیر پاسخ می‌گیرند و عناصر صفحه مدام جابه‌جا می‌شوند.
حتی اگر محتوای هر دو سایت مشابه باشد، تجربه کاربر یکسان نیست.
بنابراین عملکرد سایت فقط یک موضوع مربوط به توسعه‌دهنده نیست.
Performance بخشی از تجربه کاربری است.
سرعت سایت چه ارتباطی با SEO دارد؟
سرعت و تجربه کاربری یکی از بخش‌های مهم سئوی فنی است.
اما یک نکته مهم وجود دارد:
بهبود Core Web Vitals به‌تنهایی تضمین نمی‌کند که یک صفحه رتبه بالایی در نتایج جست‌وجو بگیرد.
سئو مجموعه‌ای از عوامل مختلف است.
محتوا، ارتباط با هدف جست‌وجو، ساختار سایت، لینک‌های داخلی، اعتبار و بسیاری عوامل دیگر نیز اهمیت دارند.
بنابراین نباید Core Web Vitals را یک «دکمه افزایش رتبه» در نظر گرفت.
بهتر است آن را بخشی از یک سایت سالم، سریع و کاربرمحور بدانیم.
آیا فقط امتیاز سبز کافی است؟
خیر.
ممکن است ابزارهای مختلف به شما یک امتیاز یا وضعیت رنگی نمایش دهند، اما نباید تمام تصمیم‌های سئو و توسعه سایت را به یک عدد محدود کرد.
مهم‌تر این است که بفهمیم:
مشکل واقعی تجربه کاربر کجاست؟
برای مثال، اگر LCP ضعیف است باید مشخص شود:
سرور کند است؟
تصویر اصلی بیش از حد سنگین است؟
CSS مانع رندر شده؟
منابع زیادی قبل از محتوای اصلی بارگذاری می‌شوند؟
ساختار صفحه مناسب نیست؟
یعنی ابزار باید به پیدا کردن مشکل کمک کند، نه اینکه خودش تبدیل به هدف اصلی شود.
داده‌های واقعی کاربران اهمیت زیادی دارند
یکی از نکات مهم در بررسی Core Web Vitals این است که عملکرد سایت ممکن است برای همه کاربران یکسان نباشد.
کاربری با:
اینترنت سریع
دستگاه قدرتمند
مرورگر جدید
ممکن است تجربه متفاوتی نسبت به کاربری با:
موبایل ضعیف‌تر
اینترنت کندتر
شرایط شبکه متفاوت
داشته باشد.
به همین دلیل بررسی داده‌های واقعی کاربران (Real User Data) می‌تواند تصویر دقیق‌تری از عملکرد سایت ارائه دهد.
چگونه Core Web Vitals سایت را بررسی کنیم؟
برای بررسی عملکرد صفحات می‌توان از ابزارهای مختلف استفاده کرد.
از جمله:
Google Search Console
PageSpeed Insights
Chrome DevTools
Lighthouse
ابزارهای مانیتورینگ عملکرد
هر ابزار کاربرد متفاوتی دارد.
برای مثال، ابزارهای آزمایشگاهی می‌توانند شرایط مشخصی را برای بررسی صفحه شبیه‌سازی کنند، درحالی‌که داده‌های واقعی کاربران می‌توانند تجربه کاربران واقعی را نشان دهند.
به همین دلیل بهتر است هنگام تحلیل عملکرد، تفاوت میان Lab Data و Field Data را در نظر بگیریم.
چگونه LCP را بهبود دهیم؟
برای بهبود LCP ابتدا باید عامل اصلی تأخیر را پیدا کرد.
اما به‌صورت کلی می‌توان موارد زیر را بررسی کرد:
بهینه‌سازی تصویر اصلی
اگر تصویر Hero بزرگ و فشرده‌نشده باشد، می‌تواند بارگذاری محتوای اصلی را کند کند.
استفاده از فرمت مناسب، اندازه مناسب و فشرده‌سازی صحیح اهمیت دارد.
بهبود پاسخ سرور
اگر سرور زمان زیادی برای پاسخ اولیه صرف کند، شروع نمایش صفحه نیز می‌تواند به تأخیر بیفتد.
کاهش منابع غیرضروری
فایل‌های CSS و JavaScript غیرضروری می‌توانند روی فرآیند رندر تأثیر بگذارند.
استفاده درست از Cache
کش مناسب می‌تواند زمان دریافت منابع را کاهش دهد.
چگونه INP را بهبود دهیم؟
برای بهبود INP باید به نحوه اجرای JavaScript و تعاملات صفحه توجه کرد.
مواردی مانند:
کاهش JavaScript غیرضروری
شکستن Long Taskها
بهینه‌سازی Event Handlerها
کاهش کارهای سنگین روی Main Thread
بارگذاری تدریجی قابلیت‌های غیرضروری
استفاده درست از Code Splitting
می‌توانند در بهبود پاسخ‌گویی صفحه مؤثر باشند.
چگونه CLS را کاهش دهیم؟
برای کاهش جابه‌جایی‌های ناخواسته می‌توان:
ابعاد تصاویر را مشخص کرد؛
برای محتوای پویا فضای مناسب در نظر گرفت؛
تبلیغات را با فضای رزرو شده نمایش داد؛
از تغییر ناگهانی اندازه عناصر جلوگیری کرد؛
نحوه بارگذاری فونت‌ها را بررسی کرد.
هدف این است که وقتی صفحه در حال بارگذاری است، ساختار اصلی آن تا حد امکان پایدار باقی بماند.
در سایت‌های Next.js به چه چیزهایی توجه کنیم؟
در سایت‌هایی که با فریم‌ورک‌هایی مانند Next.js ساخته شده‌اند، عملکرد فقط به سرور یا مرورگر محدود نیست.
نحوه طراحی معماری و رندرینگ نیز اهمیت دارد.
مواردی مانند:
Server Components
Client Components
حجم JavaScript سمت کاربر
بهینه‌سازی تصاویر
Dynamic Import
Code Splitting
Streaming
مدیریت فونت‌ها
تعداد درخواست‌ها
می‌توانند روی عملکرد کلی صفحات تأثیر داشته باشند.
برای مثال، اگر یک صفحه کاملاً محتوایی را با مقدار زیادی JavaScript سمت کاربر پیاده‌سازی کنیم، ممکن است حجم کاری مرورگر بیشتر از چیزی شود که واقعاً لازم است.
بنابراین انتخاب معماری مناسب نیز بخشی از Performance Engineering است.
یک اشتباه رایج؛ بهینه‌سازی فقط برای ابزارها
گاهی توسعه‌دهنده یا مدیر سایت تلاش می‌کند امتیاز ابزارهای تست را بالا ببرد، اما تجربه واقعی کاربر را فراموش می‌کند.
ممکن است یک تغییر کوچک امتیاز یک ابزار را بهتر کند، اما در عمل تجربه کاربر تفاوت قابل توجهی نداشته باشد.
به همین دلیل بهتر است به جای دنبال کردن صرفاً یک عدد، این سؤال را مطرح کنیم:
آیا کاربر واقعاً سریع‌تر و راحت‌تر می‌تواند از سایت استفاده کند؟
این نگاه باعث می‌شود Performance به یک هدف واقعی تبدیل شود، نه فقط یک امتیاز.
چک‌لیست بهینه‌سازی Core Web Vitals
برای شروع می‌توانید این موارد را بررسی کنید:
LCP
تصویر Hero بهینه شده است.
پاسخ سرور مناسب است.
منابع غیرضروری کاهش یافته‌اند.
CSS حیاتی به شکل مناسبی مدیریت شده است.
فونت‌ها بهینه بارگذاری می‌شوند.
INP
JavaScript غیرضروری حذف شده است.
Long Taskها بررسی شده‌اند.
Event Handlerهای سنگین بهینه شده‌اند.
Main Thread بیش از حد درگیر نیست.
تعاملات اصلی صفحه سریع پاسخ می‌گیرند.
CLS
ابعاد تصاویر مشخص شده‌اند.
برای محتوای پویا فضای مناسب وجود دارد.
تبلیغات باعث جابه‌جایی محتوا نمی‌شوند.
فونت‌ها باعث تغییر ناگهانی Layout نمی‌شوند.
عناصر اصلی صفحه هنگام بارگذاری جابه‌جا نمی‌شوند.
آیا باید همیشه به دنبال سریع‌ترین سایت باشیم؟
نه لزوماً.
هدف Performance این نیست که سایت را به یک پروژه آزمایشگاهی تبدیل کنیم که فقط چند میلی‌ثانیه سریع‌تر باشد.
هدف این است که کاربر بتواند سریع، روان و بدون اصطکاک از سایت استفاده کند.
گاهی حذف یک انیمیشن سنگین، بهینه‌سازی تصویر اصلی یا کاهش JavaScript اضافی می‌تواند ارزش بیشتری نسبت به ده‌ها بهینه‌سازی کوچک داشته باشد.
بنابراین اولویت باید با مشکلاتی باشد که تأثیر واقعی‌تری روی تجربه کاربر دارند.
سرعت سایت بخشی از تجربه برند است
کاربر معمولاً نمی‌گوید:
«LCP این سایت ۲.۳ ثانیه است.»
او فقط یک تجربه دارد.
اگر سایت سریع و روان باشد، ممکن است آن را حرفه‌ای‌تر احساس کند.
اگر صفحات کند باشند، تعاملات تأخیر داشته باشند یا عناصر صفحه جابه‌جا شوند، ممکن است تجربه کاربر منفی شود.
بنابراین Performance فقط مسئله کد نیست؛ می‌تواند بخشی از برداشت کاربر از کیفیت محصول دیجیتال شما باشد.
جمع‌بندی
Core Web Vitals مجموعه‌ای از معیارهای مهم برای بررسی بخش‌هایی از تجربه کاربر در صفحات وب است.
سه معیار اصلی آن عبارت‌اند از:
LCP: نمایش محتوای اصلی
INP: پاسخ‌گویی به تعامل کاربر
CLS: پایداری بصری صفحه
اما نباید Core Web Vitals را صرفاً مجموعه‌ای از اعداد برای افزایش رتبه در گوگل بدانیم.
سرعت و عملکرد سایت روی نحوه استفاده کاربران از محصول دیجیتال تأثیر می‌گذارد و به همین دلیل، بخشی از تجربه کاربری، توسعه فنی و استراتژی سئو محسوب می‌شود.
در نهایت، هدف واقعی این نیست که فقط یک ابزار به ما بگوید:
«سایت شما سریع است.»
هدف این است که کاربر هنگام ورود به سایت احساس کند:
محتوا سریع در دسترس است، صفحه روان کار می‌کند و چیزی جلوی استفاده راحت او را نمی‌گیرد.
این همان نقطه‌ای است که Performance، UX و SEO به یکدیگر می‌رسند.