بهبود Core Web Vitals برای سایتهای فارسی؛ راهنمای کامل LCP، INP و CLS
سایت فارسی صرفاً به دلیل RTL یا فارسی بودن، Core Web Vitals ضعیفتری ندارد؛ اما مواردی مانند فونت فارسی، حجم فونت، تصاویر Hero، RTL، Web Fontها، اسکریپتهای شخص ثالث، تبلیغات، هدرهای پویا و هاستینگ کاربران ایرانی میتوانند در عمل روی LCP، INP و CLS اثر بگذارند.
سرعت سایت فقط به این معنا نیست که صفحه در چند ثانیه باز شود. گوگل برای ارزیابی تجربه واقعی کاربران، مجموعهای از معیارها را تحت عنوان Core Web Vitals در نظر میگیرد که سه معیار اصلی آن LCP، INP و CLS هستند.
در سایتهای فارسی، علاوه بر مشکلات عمومی عملکرد، مواردی مانند فونتهای فارسی، تصاویر سنگین، RTL، اسکریپتهای شخص ثالث و نحوه بارگذاری محتوای اصلی میتوانند روی عملکرد سایت تأثیر بگذارند. در این راهنما روشهای عملی بهبود Core Web Vitals را بررسی میکنیم.
Core Web Vitals چیست؟
Core Web Vitals مجموعهای از معیارهای عملکردی است که تجربه واقعی کاربران از یک صفحه وب را از جنبههای مختلف اندازهگیری میکند. این معیارها روی سه موضوع اصلی تمرکز دارند:
- سرعت نمایش محتوای اصلی
- سرعت پاسخگویی صفحه به تعامل کاربر
- ثبات بصری صفحه هنگام بارگذاری
سه معیار اصلی Core Web Vitals عبارتاند از Largest Contentful Paint یا LCP، Interaction to Next Paint یا INP و Cumulative Layout Shift یا CLS.
برای تجربه کاربری مناسب، گوگل توصیه میکند LCP حداکثر ۲.۵ ثانیه، INP کمتر از ۲۰۰ میلیثانیه و CLS حداکثر ۰.۱ باشد. این ارزیابی در دادههای واقعی کاربران و در صدک ۷۵ بازدیدها انجام میشود.
معیارهای Core Web Vitals در یک نگاه
| معیار | چه چیزی را اندازه میگیرد؟ | وضعیت خوب |
|---|---|---|
| LCP | سرعت نمایش بزرگترین محتوای قابل مشاهده | حداکثر ۲.۵ ثانیه |
| INP | سرعت پاسخ صفحه به تعامل کاربر | کمتر از ۲۰۰ میلیثانیه |
| CLS | ثبات عناصر صفحه هنگام بارگذاری | حداکثر ۰.۱ |
نکته مهم این است که رسیدن به یک امتیاز بالا در یک تست آزمایشگاهی بهتنهایی به معنی خوب بودن تجربه تمام کاربران نیست. دادههای واقعی کاربران نیز باید بررسی شوند.
LCP چیست؟
LCP یا Largest Contentful Paint مدت زمانی را اندازهگیری میکند که طول میکشد بزرگترین عنصر محتوایی قابل مشاهده در محدوده ابتدایی صفحه نمایش داده شود.
این عنصر میتواند یک تصویر بزرگ، تصویر Hero، تیتر اصلی یا یک بلوک متنی بزرگ باشد. بنابراین در یک سایت فارسی ممکن است LCP مربوط به تصویر اصلی صفحه، عنوان مقاله یا بخش Hero باشد.
LCP مناسب باید حداکثر حدود ۲.۵ ثانیه باشد. گوگل توصیه میکند این مقدار برای حداقل ۷۵ درصد بازدیدها در محدوده مناسب قرار داشته باشد.
چگونه LCP سایت فارسی را بهبود دهیم؟
۱. عنصر LCP را پیدا کنید
اولین قدم این است که مشخص کنید دقیقاً کدام عنصر باعث LCP میشود. در بسیاری از صفحات، این عنصر یک تصویر Hero یا تصویر اصلی مقاله است؛ اما همیشه اینطور نیست.
تا زمانی که عنصر LCP را شناسایی نکردهاید، بهینهسازی تصادفی تصاویر یا افزونهها ممکن است نتیجه قابل توجهی نداشته باشد.
۲. تصویر LCP را Lazy Load نکنید
یکی از اشتباهات رایج این است که تمام تصاویر سایت با loading="lazy" بارگذاری شوند. تصویر اصلی که در بخش ابتدایی صفحه قرار دارد معمولاً نباید مانند تصاویر پایین صفحه به تأخیر انداخته شود.
تصاویر خارج از محدوده ابتدایی صفحه میتوانند Lazy Load شوند، اما منابع حیاتی صفحه باید در سریعترین زمان ممکن در اختیار مرورگر قرار بگیرند.
۳. تصویر اصلی را بهینه کنید
تصاویر بزرگ میتوانند زمان دانلود را افزایش دهند. اندازه تصویر باید متناسب با ابعاد واقعی نمایش آن باشد و از فرمتهای مدرن مانند WebP یا در موارد مناسب AVIF استفاده شود.
تبدیل تصویر به WebP بهتنهایی کافی نیست. اگر یک تصویر 4000 پیکسلی را به WebP تبدیل کنیم اما در صفحه با عرض 800 پیکسل نمایش دهیم، همچنان ممکن است حجم غیرضروری منتقل شود.
۴. LCP را از HTML قابل کشف کنید
مرورگر باید بتواند منبع LCP را هرچه زودتر پیدا کند. اگر تصویر اصلی فقط بعد از اجرای JavaScript یا از طریق CSS کشف شود، ممکن است بارگذاری آن با تأخیر آغاز شود.
در موارد مناسب میتوان برای منبع حیاتی از Preload و اولویت مناسب استفاده کرد، اما Preload نباید برای تعداد زیادی از منابع استفاده شود؛ زیرا میتواند رقابت بین منابع مهم را افزایش دهد.
۵. TTFB را کاهش دهید
قبل از اینکه مرورگر بتواند محتوای صفحه را دریافت کند، باید پاسخ HTML از سرور دریافت شود. این زمان با عنوان Time to First Byte یا TTFB شناخته میشود.
TTFB بالا میتواند بهصورت زنجیرهای روی معیارهای بعدی نیز اثر بگذارد. گوگل بهعنوان یک راهنمای عمومی، TTFB حدود ۰.۸ ثانیه یا کمتر را هدف مناسبی میداند، هرچند این عدد یک آستانه Core Web Vital نیست.
برای کاهش TTFB باید مواردی مانند کیفیت هاست، کش سمت سرور، CDN، زمان اجرای PHP، کوئریهای دیتابیس و تعداد Redirectها بررسی شوند.
INP چیست؟
INP یا Interaction to Next Paint میزان پاسخگویی صفحه به تعاملات کاربر را اندازهگیری میکند.
برای مثال وقتی کاربر روی یک منو، دکمه، فیلتر، فرم یا عنصر تعاملی کلیک میکند، مرورگر باید بتواند در زمان مناسبی نتیجه این تعامل را نمایش دهد.
INP کمتر از ۲۰۰ میلیثانیه در محدوده خوب قرار میگیرد.
چگونه INP را بهبود دهیم؟
JavaScript اضافی را حذف کنید
یکی از مهمترین دلایل INP ضعیف، اجرای بیش از حد JavaScript در Thread اصلی مرورگر است.
بسیاری از سایتها اسکریپتهایی را بارگذاری میکنند که فقط در یک صفحه یا برای یک قابلیت خاص موردنیاز هستند. حذف یا محدود کردن این اسکریپتها میتواند عملکرد تعاملات را بهتر کند.
اسکریپتهای شخص ثالث را بررسی کنید
ابزارهای Analytics، چت آنلاین، تبلیغات، نقشهها، شبکههای اجتماعی و سرویسهای مختلف میتوانند JavaScript زیادی به صفحه اضافه کنند.
هر سرویس خارجی باید از نظر ارزش واقعی آن برای کسبوکار در برابر هزینه عملکردی که ایجاد میکند بررسی شود.
Long Taskها را کاهش دهید
اجرای یک عملیات سنگین JavaScript میتواند Thread اصلی مرورگر را برای مدت طولانی مشغول کند. در چنین شرایطی حتی اگر صفحه از نظر ظاهری سریع نمایش داده شود، تعامل کاربر ممکن است با تأخیر پاسخ دهد.
تقسیم عملیات سنگین به کارهای کوچکتر، کاهش JavaScript غیرضروری و اجرای بخشی از کارها در زمان مناسب میتواند به بهبود INP کمک کند.
CLS چیست؟
CLS یا Cumulative Layout Shift میزان جابهجایی غیرمنتظره عناصر صفحه هنگام بارگذاری را اندازهگیری میکند.
فرض کنید کاربر در حال خواندن یک متن است و ناگهان تصویر بالای آن بارگذاری میشود و کل محتوا به سمت پایین حرکت میکند. این نمونهای از Layout Shift است.
CLS باید حداکثر ۰.۱ باشد.
چگونه CLS سایت فارسی را کاهش دهیم؟
برای تصاویر width و height تعیین کنید
مرورگر باید قبل از دانلود تصویر بداند چه فضایی برای آن لازم است. تعیین ابعاد تصویر یا استفاده از نسبت تصویر مناسب میتواند از جابهجایی ناگهانی محتوا جلوگیری کند.
ساختار استاندارد تصویر میتواند به شکل زیر باشد:
<img
src="/images/article.webp"
width="1200"
height="675"
alt="توضیح طبیعی تصویر"
>فضای تبلیغات و iframeها را مشخص کنید
تبلیغات، ویدئوها، نقشهها و iframeهایی که بدون فضای از پیش تعیینشده وارد صفحه میشوند، میتوانند باعث جابهجایی محتوا شوند.
برای این عناصر از ابتدا فضای موردنیاز را مشخص کنید.
فونت فارسی را مدیریت کنید
Web Fontها نیز میتوانند در شرایط خاص باعث تغییر ظاهر یا ابعاد متن شوند. انتخاب فونت مناسب، محدود کردن وزنهای غیرضروری و استفاده صحیح از font-display میتواند تجربه بارگذاری متن را بهتر کند.
بهینهسازی فونت فارسی برای Core Web Vitals
فونت یکی از مواردی است که در بسیاری از سایتهای فارسی نادیده گرفته میشود. استفاده همزمان از چند خانواده فونت و تعداد زیادی وزن مختلف میتواند حجم منابع اولیه را افزایش دهد.
برای مثال اگر سایت فقط به Regular و Bold نیاز دارد، بارگذاری وزنهای Light، Medium، SemiBold، ExtraBold و Black ممکن است کاملاً غیرضروری باشد.
- فقط وزنهای موردنیاز را بارگذاری کنید.
- از چند فونت فارسی همزمان بدون نیاز واقعی استفاده نکنید.
- فونتهای استفادهنشده را حذف کنید.
- فرمتهای مناسب فونت مانند WOFF2 را در اولویت قرار دهید.
- font-display را متناسب با استراتژی نمایش متن تنظیم کنید.
- برای فونتهای حیاتی، در صورت نیاز و پس از اندازهگیری از Preload استفاده کنید.
هدف نباید صرفاً «زیباتر شدن فونت» باشد؛ باید تعادل مناسبی میان هویت بصری، خوانایی و عملکرد ایجاد شود.
آیا WebP برای Core Web Vitals کافی است؟
WebP میتواند حجم تصاویر را کاهش دهد، اما Core Web Vitals فقط به فرمت تصویر وابسته نیست.
اندازه واقعی تصویر، Compression، Responsive Images، نحوه کشف تصویر توسط مرورگر، Lazy Loading و سرعت سرور نیز اهمیت دارند.
بنابراین تبدیل تمام تصاویر سایت به WebP اقدام خوبی است، اما نباید آن را یک راهحل کامل برای LCP در نظر گرفت.
برای هر تصویر بهتر است نسخه مناسب برای اندازه نمایش آن ارائه شود. استفاده از srcset و sizes در تصاویر Responsive میتواند از دانلود فایل بزرگتر از نیاز جلوگیری کند.
بهینهسازی CSS برای Core Web Vitals
CSSهای بزرگ و غیرضروری میتوانند فرآیند Render صفحه را پیچیدهتر کنند.
- CSSهای استفادهنشده را حذف کنید.
- CSS صفحات مختلف را تا حد امکان از یکدیگر جدا کنید.
- استفاده از CSSهای سنگین و غیرضروری را کاهش دهید.
- Critical CSS را در صورت نیاز بررسی کنید.
- از بارگذاری فایلهای CSS غیرضروری در صفحات جلوگیری کنید.
هدف، کم کردن حجم فایل به هر قیمت نیست؛ هدف این است که مرورگر بتواند سریعتر محتوای مهم صفحه را پردازش و نمایش دهد.
بهینهسازی Core Web Vitals در وردپرس
در وردپرس، عملکرد سایت به هسته وردپرس، قالب، افزونهها، کدهای سفارشی، تصاویر، هاست و سرویسهای شخص ثالث وابسته است.
بنابراین نصب تعداد زیادی افزونه بهینهسازی لزوماً باعث سریعتر شدن سایت نمیشود. گاهی چند افزونه مختلف بخشی از یک کار را انجام میدهند و حتی میتوانند پیچیدگی بیشتری ایجاد کنند.
برای یک سایت وردپرسی بهتر است ابتدا مشکلات واقعی با ابزارهای اندازهگیری شناسایی شوند و سپس دقیقاً همان بخشها اصلاح شوند.
- قالب سبک و بهینه انتخاب کنید.
- افزونههای غیرضروری را حذف کنید.
- تصاویر را قبل از آپلود بهینه کنید.
- کش مناسب تنظیم کنید.
- نسخه PHP و زیرساخت را بهروز نگه دارید.
- اسکریپتهای غیرضروری را در صفحات مربوط به خود محدود کنید.
- فونتهای فارسی را بهینه کنید.
- TTFB و عملکرد دیتابیس را بررسی کنید.
اگر سایت شما وردپرسی است، طراحی سایت وردپرس نیز باید از ابتدا با توجه به سرعت، ساختار HTML، سئو و تجربه کاربری انجام شود.
نقش هاست و سرور در Core Web Vitals
یکی از اشتباهات رایج این است که تمام مشکلات سرعت را به HTML، CSS یا JavaScript نسبت دهیم.
سرور ضعیف یا زمان پاسخگویی بالا میتواند قبل از اجرای بسیاری از بهینهسازیهای سمت مرورگر، عملکرد سایت را محدود کند.
برای بررسی عملکرد سرور، TTFB، زمان اجرای Backend، کش، دیتابیس و موقعیت جغرافیایی کاربران را بررسی کنید.
اگر بخش بزرگی از کاربران شما در ایران هستند، محل سرور و مسیر شبکه تا کاربران نیز باید در تصمیمگیری زیرساختی مورد توجه قرار گیرد.
CDN چه کمکی به Core Web Vitals میکند؟
CDN میتواند برای توزیع فایلهای استاتیک مانند تصاویر، CSS، JavaScript و فونتها مفید باشد و در برخی معماریها زمان انتقال منابع را کاهش دهد.
اما CDN جایگزین یک سرور Backend مناسب نیست. اگر زمان تولید HTML بسیار زیاد باشد، صرفاً استفاده از CDN تمام مشکل را حل نمیکند.
ابزارهای اندازهگیری Core Web Vitals
برای بهینهسازی Core Web Vitals ابتدا باید مشکل را اندازهگیری کنید.
- Google Search Console
- PageSpeed Insights
- Chrome DevTools
- Chrome UX Report
- web-vitals
Search Console برای مشاهده وضعیت صفحات در دادههای واقعی کاربران بسیار مهم است، در حالی که PageSpeed Insights میتواند دادههای آزمایشگاهی و در صورت وجود داده کافی، دادههای واقعی را در اختیار شما قرار دهد.
تفاوت داده آزمایشگاهی و داده واقعی
یکی از مهمترین نکات در تحلیل Core Web Vitals این است که نتیجه یک تست آزمایشگاهی را با تجربه تمام کاربران یکسان ندانیم.
تست آزمایشگاهی در شرایط کنترلشده انجام میشود؛ اما کاربران واقعی با موبایلهای مختلف، اینترنتهای مختلف، موقعیتهای جغرافیایی متفاوت و شرایط سختافزاری متفاوت وارد سایت میشوند.
به همین دلیل ممکن است سایت شما در یک اجرای PageSpeed امتیاز بسیار خوبی بگیرد اما دادههای واقعی کاربران هنوز مشکل داشته باشند.
اشتباهات رایج در بهبود Core Web Vitals
تمرکز صرف روی امتیاز PageSpeed
هدف اصلی، تجربه بهتر کاربران است؛ نه صرفاً رسیدن به عدد ۱۰۰ در یک تست آزمایشگاهی.
Lazy Load کردن تمام تصاویر
تصاویر پایین صفحه معمولاً گزینه مناسبی برای Lazy Loading هستند، اما اعمال کورکورانه آن روی تصویر LCP میتواند نتیجه معکوس داشته باشد.
نصب تعداد زیادی افزونه بهینهسازی
افزونه بیشتر به معنی سرعت بیشتر نیست. ابتدا مشکل را پیدا کنید و سپس یک راهحل مشخص برای آن اجرا کنید.
Preload کردن همه چیز
Preload برای منابع مهم است، اما استفاده بیش از حد از آن باعث رقابت منابع با یکدیگر میشود.
نادیده گرفتن موبایل
بسیاری از مشکلات عملکردی در موبایل بیشتر خودشان را نشان میدهند. سایت را با شرایط واقعی کاربران موبایل نیز بررسی کنید.
چکلیست عملی بهبود Core Web Vitals
- صفحات دارای مشکل را در Search Console شناسایی کنید.
- URLهای نمونه را با PageSpeed Insights بررسی کنید.
- عنصر LCP را پیدا کنید.
- TTFB را بررسی کنید.
- تصویر یا محتوای LCP را بهینه کنید.
- فونتهای فارسی را بررسی و وزنهای اضافی را حذف کنید.
- JavaScriptهای غیرضروری را حذف یا محدود کنید.
- Long Taskهای اصلی را شناسایی کنید.
- ابعاد تصاویر، ویدئوها و iframeها را مشخص کنید.
- منابع شخص ثالث را بررسی کنید.
- CSSهای غیرضروری را کاهش دهید.
- کش و CDN را متناسب با معماری سایت تنظیم کنید.
- تغییرات را دوباره اندازهگیری کنید.
- دادههای واقعی کاربران را در طول زمان بررسی کنید.
آیا Core Web Vitals روی سئو تأثیر دارد؟
Core Web Vitals بخشی از سیستمهای مرتبط با تجربه صفحه در جستجوی گوگل است و گوگل توصیه میکند سایتها تجربه کاربری مناسبی ارائه دهند.
با این حال، نباید تصور کرد که صرفاً با گرفتن نمره عالی در Core Web Vitals میتوان رتبه یک گوگل را تضمین کرد. کیفیت و ارتباط محتوا، اعتبار سایت، نیاز کاربر، ساختار فنی و عوامل متعدد دیگری نیز در جستجو اهمیت دارند.
بنابراین Core Web Vitals را بهتر است بخشی از یک استراتژی جامع SEO و Performance بدانیم، نه جایگزین آن.
چه زمانی بهینهسازی Core Web Vitals را به متخصص بسپاریم؟
اگر بعد از بهینهسازی تصاویر و فعال کردن کش هنوز LCP، INP یا CLS وضعیت مناسبی ندارند، احتمالاً مشکل در لایه عمیقتری قرار دارد.
در چنین شرایطی باید Waterfall، JavaScript، Backend، دیتابیس، فونتها، CSS، Third-party Scripts و زیرساخت سرور بهصورت یکپارچه بررسی شوند.
در پروژههایی که از ابتدا برای سرعت و سئو طراحی میشوند، بهتر است Performance در مرحله معماری و توسعه در نظر گرفته شود، نه اینکه بعد از انتشار سایت بهعنوان یک مشکل جداگانه به آن پرداخته شود.
سوالات متداول
Core Web Vitals چیست؟
Core Web Vitals مجموعهای از معیارهای گوگل برای سنجش تجربه واقعی کاربران از نظر سرعت بارگذاری، پاسخگویی و ثبات بصری صفحه است.
مقدار مناسب LCP چقدر است؟
مقدار LCP حداکثر ۲.۵ ثانیه در محدوده خوب قرار میگیرد و بهتر است این وضعیت برای حداقل ۷۵ درصد بازدیدها برقرار باشد.
چگونه LCP را کاهش دهیم؟
ابتدا عنصر LCP را شناسایی کنید، سپس TTFB، زمان کشف منبع، حجم و اولویت منبع LCP و زمان Render آن را بررسی کنید. بهینهسازی تصویر Hero و کاهش تأخیر سرور از اقدامات رایج هستند.
آیا WebP باعث بهبود Core Web Vitals میشود؟
WebP میتواند حجم تصاویر را کاهش دهد، اما بهتنهایی تضمینکننده Core Web Vitals خوب نیست. ابعاد تصویر، Lazy Loading، اولویت بارگذاری، TTFB و سایر منابع صفحه نیز اهمیت دارند.
آیا فونت فارسی روی سرعت سایت تأثیر دارد؟
بله. فایلهای فونت و تعداد وزنهای بارگذاریشده میتوانند روی زمان بارگذاری و تجربه نمایش متن اثر بگذارند. استفاده از وزنهای غیرضروری و فایلهای حجیم باید کاهش پیدا کند.
آیا وردپرس میتواند Core Web Vitals خوبی داشته باشد؟
بله. عملکرد سایت وردپرسی به قالب، افزونهها، تصاویر، JavaScript، هاست، کش و نحوه توسعه بستگی دارد. وردپرس ذاتاً مانع رسیدن به عملکرد مناسب نیست.
آیا نمره ۱۰۰ در PageSpeed ضروری است؟
خیر. هدف اصلی بهبود تجربه واقعی کاربران است. Core Web Vitals بر دادههای واقعی نیز تکیه دارد و یک امتیاز آزمایشگاهی بالا بهتنهایی تضمینکننده تجربه مناسب همه کاربران نیست.
جمعبندی
بهبود Core Web Vitals یک کار تکمرحلهای یا صرفاً نصب یک افزونه کش نیست. برای رسیدن به عملکرد مناسب باید کل زنجیره از سرور و TTFB گرفته تا HTML، CSS، JavaScript، تصاویر، فونتهای فارسی و اسکریپتهای شخص ثالث بررسی شود.
در سایتهای فارسی، بهینهسازی فونت، تصاویر Hero، RTL، منابع موبایل و سرویسهای خارجی اهمیت ویژهای دارد. با این حال، بهترین نقطه شروع همیشه اندازهگیری و شناسایی مشکل واقعی است.
اگر سایت از ابتدا با معماری مناسب، HTML تمیز، تصاویر بهینه، فونتهای کنترلشده و JavaScript ضروری توسعه داده شود، رسیدن به Core Web Vitals مناسب بسیار سادهتر از اصلاح یک سایت سنگین و قدیمی پس از انتشار خواهد بود.
سارا کریمی
متخصص سئوی فنی و محتوا.