اگر سایت شما از نظر طراحی زیباست اما روی موبایل دیر باز میشود، هنگام لمس دکمهها مکث دارد یا عناصر صفحه در زمان بارگذاری جابهجا میشوند، مشکل فقط یک ایراد فنی ساده نیست؛ تجربه کاربر تحت تأثیر قرار گرفته است. Core Web Vitals مجموعهای از معیارهای استاندارد برای اندازهگیری بخشهای مهمی از همین تجربه واقعی هستند.
برای یک سایت فارسی، موضوع حتی میتواند حساستر باشد. فونتهای فارسی، تصاویر شاخص، منوهای راستچین، اسکریپتهای شخص ثالث، انیمیشنها و کامپوننتهای تعاملی همگی میتوانند روی سرعت و پاسخگویی صفحه اثر بگذارند. بنابراین بهینهسازی Core Web Vitals نباید صرفاً به گرفتن یک امتیاز بالا در Lighthouse محدود شود.
Core Web Vitals دقیقاً چیست؟
Core Web Vitals سه معیار اصلی هستند که جنبههایی از تجربه واقعی کاربر در وب را اندازهگیری میکنند: Largest Contentful Paint یا LCP برای عملکرد بارگذاری، Interaction to Next Paint یا INP برای پاسخگویی به تعاملات و Cumulative Layout Shift یا CLS برای پایداری بصری. گوگل برای هر سه معیار آستانههایی تعیین کرده تا بتوان تشخیص داد تجربه یک صفحه در محدوده خوب، نیازمند بهبود یا ضعیف قرار دارد.
در ارزیابی Core Web Vitals، صدک ۷۵ دادههای کاربران اهمیت زیادی دارد. به زبان ساده، اگر حداقل ۷۵ درصد بازدیدهای یک صفحه در محدوده خوب قرار بگیرند، آن معیار در وضعیت خوبی قرار میگیرد. بنابراین ممکن است سایت شما در یک تست شخصی بسیار سریع باشد اما بخشی از کاربران واقعی، مخصوصاً روی موبایل یا اینترنت ضعیفتر، تجربه متفاوتی داشته باشند.
معیارهای Core Web Vitals در یک نگاه
- LCP: سرعت نمایش بزرگترین محتوای قابل مشاهده صفحه را بررسی میکند.
- INP: سرعت پاسخگویی صفحه به تعاملات کاربر مانند کلیک، لمس و ورود اطلاعات را اندازهگیری میکند.
- CLS: میزان جابهجایی ناخواسته عناصر قابل مشاهده صفحه هنگام بارگذاری را اندازهگیری میکند.
هدف این سه معیار یک چیز مشترک است: اندازهگیری بخشهایی از تجربه کاربر که با یک عدد قابل بررسی هستند. اما هیچکدام بهتنهایی تصویر کاملی از کیفیت یک سایت ارائه نمیکنند.
معیارهای خوب Core Web Vitals چه هستند؟
- LCP: حداکثر ۲.۵ ثانیه برای وضعیت خوب
- INP: حداکثر ۲۰۰ میلیثانیه برای وضعیت خوب
- CLS: حداکثر ۰.۱ برای وضعیت خوب
نکته مهم این است که این اعداد را نباید بهعنوان یک مسابقه برای رسیدن به صفر یا پایینترین مقدار ممکن در نظر گرفت. هدف، ایجاد تجربهای پایدار، سریع و پاسخگو برای کاربران واقعی است. در بسیاری از پروژهها، بهبود یک مشکل واقعی مانند تصویر سنگین یا اجرای بیش از حد JavaScript ارزش بیشتری از کاهش چند میلیثانیهای یک معیار دارد.
LCP چیست و چرا اهمیت دارد؟
LCP یا Largest Contentful Paint زمان نمایش بزرگترین عنصر محتوایی قابل مشاهده در بخش ابتدایی صفحه را اندازهگیری میکند. این عنصر میتواند یک تصویر بزرگ، تصویر شاخص، بلوک متنی یا عنوان اصلی باشد. اگر LCP دیر اتفاق بیفتد، کاربر ممکن است احساس کند صفحه هنوز آماده استفاده نیست.
چه چیزهایی معمولاً LCP را خراب میکنند؟
- تصویر بزرگ و فشردهنشده در بخش Hero
- لود شدن تصویر LCP با تأخیر
- CSS و JavaScript سنگین در مسیر اولیه رندر
- فونتهای وب که دیر دانلود میشوند
- زمان پاسخگویی بالای سرور
- استفاده نادرست از preload یا priority
- درخواستهای متعدد برای منابع شخص ثالث
چطور LCP را در Next.js بهبود دهیم؟
در پروژههای Next.js، اولین قدم شناسایی عنصر واقعی LCP است. نباید صرفاً هر تصویر بالای صفحه را با priority بارگذاری کرد؛ ابتدا باید مشخص شود کدام عنصر در داده واقعی کاربران یا ابزارهای اندازهگیری بهعنوان LCP شناسایی شده است.
- تصویر اصلی را با فرمت مناسب و ابعاد واقعی آماده کنید.
- برای تصویر مهم بالای صفحه از next/image و تنظیمات مناسب بارگذاری استفاده کنید.
- منابع حیاتی را زودتر در اختیار مرورگر قرار دهید، اما preload را فقط برای منابع واقعاً ضروری استفاده کنید.
- JavaScript غیرضروری را از مسیر اولیه رندر خارج کنید.
- فونتهای فارسی را بهینه کنید و وزنهای غیرضروری فونت را حذف کنید.
- زمان پاسخگویی سرور و کش را بررسی کنید.
- درخواستهای شخص ثالث مانند ابزارهای آمارگیری، چت و تبلیغات را تا حد امکان مدیریت کنید.
CLS چیست و چرا صفحه نباید هنگام بارگذاری جابهجا شود؟
CLS یا Cumulative Layout Shift میزان تغییر ناخواسته موقعیت عناصر قابل مشاهده صفحه را اندازهگیری میکند. تصور کنید کاربر در حال کلیک روی یک دکمه است و ناگهان تصویری که هنوز بارگذاری نشده، فضای جدیدی ایجاد میکند و دکمه به پایین منتقل میشود. این دقیقاً همان تجربهای است که بهینهسازی CLS تلاش میکند از آن جلوگیری کند.
دلایل رایج CLS بالا
- تصاویر بدون ابعاد مشخص
- تبلیغات یا iframeهایی که فضای اولیه رزرو نکردهاند
- فونتهایی که باعث تغییر ناگهانی اندازه متن میشوند
- تزریق محتوای جدید در بالای محتوای موجود
- انیمیشنهایی که با تغییر layout اجرا میشوند
- کامپوننتهایی که بعد از بارگذاری اولیه فضای جدید ایجاد میکنند
چکلیست سریع کاهش CLS
- برای تصاویر فضای مشخص در layout در نظر بگیرید.
- برای iframe و محتوای Embed فضای موردنیاز را از قبل مشخص کنید.
- محتوای جدید را بدون دلیل بالای محتوای موجود تزریق نکنید.
- برای فونتهای فارسی استراتژی مناسبی برای font-display انتخاب کنید.
- برای حرکت عناصر از transform و opacity به جای تغییر ناگهانی layout استفاده کنید.
INP چیست و چرا جای FID را گرفت؟
INP یا Interaction to Next Paint میزان پاسخگویی صفحه به تعاملات کاربر را بررسی میکند. این معیار به جای تمرکز صرف بر اولین تعامل، تجربه تعاملات صفحه را در طول حضور کاربر بهتر منعکس میکند. INP از مارس ۲۰۲۴ جایگزین FID بهعنوان یکی از Core Web Vitals شد.
چه چیزهایی باعث INP ضعیف میشوند؟
- JavaScript زیاد و غیرضروری
- Taskهای طولانی روی Main Thread
- محاسبات سنگین هنگام کلیک یا تایپ
- رندر کردن تعداد زیادی کامپوننت پس از تعامل
- کتابخانههای شخص ثالث سنگین
- مدیریت نامناسب state در کامپوننتهای Client
- اجرای همزمان چند عملیات سنگین در مرورگر
چطور INP را در Next.js بهتر کنیم؟
یکی از مزیتهای معماری App Router در Next.js این است که میتوانید بخش زیادی از UI را بهصورت Server Component نگه دارید و فقط قسمتهایی را که واقعاً به تعامل مرورگر نیاز دارند Client Component کنید. این کار بهخودیخود تضمینکننده INP خوب نیست، اما میتواند مقدار JavaScript موردنیاز سمت مرورگر را کاهش دهد.
- کامپوننتهای Client را فقط جایی استفاده کنید که تعامل واقعی وجود دارد.
- کتابخانههای JavaScript غیرضروری را حذف یا جایگزین کنید.
- Taskهای طولانی را شناسایی و به عملیات کوچکتر تقسیم کنید.
- کارهای سنگین را در لحظه کلیک یا تایپ اجرا نکنید.
- اسکریپتهای شخص ثالث را بررسی و در صورت امکان به تعویق بیندازید.
- رندر و بهروزرسانی state را در کامپوننتهای تعاملی ساده نگه دارید.
Core Web Vitals در سایت فارسی چه تفاوتی دارد؟
فارسی و راستچین بودن سایت به خودی خود یک مشکل برای Core Web Vitals نیست؛ اما پروژههای فارسی معمولاً با چند چالش عملی روبهرو هستند. فونتهای فارسی میتوانند حجم قابل توجهی داشته باشند، تصاویر Hero ممکن است برای طراحیهای RTL بزرگ انتخاب شوند و بعضی رابطهای کاربری برای نمایش صحیح در موبایل به JavaScript بیشتری نیاز داشته باشند.
فونت فارسی و عملکرد سایت
یکی از اشتباهات رایج، بارگذاری تعداد زیادی وزن و استایل از یک فونت فارسی است؛ در حالی که صفحه ممکن است فقط به دو وزن نیاز داشته باشد. بهتر است فونتها را با وزنهای موردنیاز محدود کنید، فرمت مناسب را انتخاب کنید و رفتار بارگذاری آنها را با توجه به تجربه واقعی کاربران بررسی کنید.
تفاوت داده آزمایشگاهی و داده واقعی کاربران
یکی از مهمترین نکات در تحلیل Core Web Vitals این است که هر عددی که در یک ابزار میبینید الزاماً تجربه تمام کاربران شما را نشان نمیدهد. ابزارهای آزمایشگاهی مانند Lighthouse صفحه را در یک محیط کنترلشده آزمایش میکنند، در حالی که دادههای میدانی تجربه کاربران واقعی را در دستگاهها، شبکهها و شرایط متفاوت ثبت میکنند.
به همین دلیل ممکن است Lighthouse یک صفحه را بسیار سریع نشان دهد اما گزارش Core Web Vitals در Search Console وضعیت متفاوتی داشته باشد. برای تصمیمگیری نهایی، باید هر دو نوع داده را در کنار هم بررسی کنید.
Core Web Vitals را با چه ابزارهایی بررسی کنیم؟
- Google Search Console برای مشاهده دادههای Core Web Vitals کاربران واقعی
- PageSpeed Insights برای بررسی دادههای میدانی و آزمایشگاهی
- Chrome DevTools برای پیدا کردن مشکلات عملکردی در زمان توسعه
- Lighthouse برای ارزیابی آزمایشگاهی و شناسایی فرصتهای بهینهسازی
- Chrome UX Report برای تحلیل دادههای تجربه واقعی کاربران در مقیاس گسترده
یک روش عملی برای عیبیابی Core Web Vitals
به جای اینکه هر بار یک امتیاز Lighthouse را ببینید و شروع به تغییر تصادفی کد کنید، بهتر است یک فرآیند مشخص داشته باشید. ابتدا مشخص کنید کدام معیار مشکل دارد، سپس عنصر یا عملیات مسئول را پیدا کنید و در نهایت بعد از تغییر، دوباره اندازهگیری کنید.
- مشخص کنید مشکل اصلی LCP، INP یا CLS است.
- بررسی کنید مشکل در موبایل شدیدتر است یا دسکتاپ.
- دادههای واقعی کاربران را در Search Console و PageSpeed Insights بررسی کنید.
- عنصر یا اسکریپت مسئول مشکل را در DevTools پیدا کنید.
- یک تغییر مشخص انجام دهید، نه چند تغییر همزمان.
- دوباره اندازهگیری کنید و اثر تغییر را مقایسه کنید.
- بعد از انتشار، دادههای واقعی کاربران را دوباره بررسی کنید.
چکلیست Core Web Vitals برای انتشار یک صفحه
- ☐ عنصر LCP شناسایی شده است.
- ☐ تصویر یا محتوای اصلی صفحه بیش از حد سنگین نیست.
- ☐ منابع حیاتی با تأخیر غیرضروری بارگذاری نمیشوند.
- ☐ تصاویر فضای مشخصی در layout دارند.
- ☐ محتوای پویا باعث جابهجایی ناگهانی صفحه نمیشود.
- ☐ فونتهای فارسی غیرضروری حذف شدهاند.
- ☐ JavaScript غیرضروری از مسیر اولیه حذف شده است.
- ☐ Client Component فقط در بخشهای ضروری استفاده شده است.
- ☐ اسکریپتهای شخص ثالث بررسی شدهاند.
- ☐ صفحه در موبایل آزمایش شده است.
- ☐ Lighthouse و PageSpeed Insights بررسی شدهاند.
- ☐ دادههای واقعی Search Console بعد از انتشار بررسی خواهند شد.
آیا Core Web Vitals بهتنهایی باعث رتبه بهتر میشود؟
خیر. این یکی از مهمترین سوءبرداشتها درباره Core Web Vitals است. گوگل از Core Web Vitals در سیستمهای رتبهبندی مرتبط با تجربه صفحه استفاده میکند، اما داشتن امتیاز خوب بهتنهایی تضمین نمیکند که یک صفحه رتبه بالاتری از رقیب خود بگیرد.
اگر دو صفحه از نظر عملکرد وضعیت مناسبی داشته باشند اما یکی از آنها پاسخ کاملتر، مرتبطتر و مفیدتری برای جستوجوی کاربر ارائه کند، صرفاً داشتن LCP بهتر نمیتواند جای کیفیت محتوا را بگیرد. بنابراین Core Web Vitals را باید بخشی از یک استراتژی جامع SEO دانست، نه جایگزین تولید محتوای باکیفیت.
رابطه Core Web Vitals با سئوی فنی
Core Web Vitals یکی از بخشهای مهم سئوی فنی است، اما سئوی فنی به عملکرد محدود نمیشود. خزش و ایندکس، وضعیت HTTP، Canonical، ساختار URL، دادههای ساختاریافته، sitemap، robots.txt، رندر شدن محتوا و قابلیت استفاده در موبایل نیز باید در کنار عملکرد بررسی شوند.
اگر میخواهید عملکرد را در کنار سایر موارد فنی بررسی کنید، پیشنهاد میکنیم از چکلیست سئوی فنی سایت استفاده کنید تا بررسی سایت فقط به یک عدد در Lighthouse محدود نشود.
جمعبندی؛ به جای امتیاز، تجربه واقعی کاربر را بهینه کنید
Core Web Vitals به شما کمک میکند سه بخش مهم از تجربه وب را بهصورت قابلاندازهگیری بررسی کنید: سرعت نمایش محتوای اصلی با LCP، پاسخگویی به تعاملات با INP و پایداری بصری با CLS. اما هدف نهایی نباید رسیدن به یک عدد سبز در یک ابزار باشد؛ هدف ساخت صفحهای است که برای کاربر واقعی سریع، پایدار و پاسخگو باشد.
برای سایتهای فارسی و پروژههای Next.js نیز همین اصل برقرار است. تصاویر و فونتهای بهینه، JavaScript کنترلشده، استفاده درست از Server Component و Client Component، جلوگیری از تغییرات ناگهانی layout و اندازهگیری با دادههای واقعی میتوانند عملکرد صفحه را به شکل محسوسی بهتر کنند.
در نهایت، Core Web Vitals را در کنار کیفیت محتوا، ارتباط با قصد جستوجوی کاربر، ساختار مناسب صفحه و سایر اصول سئوی فنی ببینید. یک سایت سریع بدون محتوای مفید موفق نمیشود و یک محتوای عالی هم اگر تجربه استفاده بسیار ضعیفی داشته باشد، بخشی از ظرفیت خود را از دست میدهد.
منابع رسمی برای مطالعه بیشتر
- Google Search Central – Core Web Vitals و نتایج جستوجوی گوگل
- Google Search Central – Page Experience
- web.dev – Web Vitals
- web.dev – راهنمای INP
