چگونه Core Web Vitals را بهبود دهیم؟
چگونه امتیاز Core Web Vitals سایت را در ۲۰۲۶ بهبود دهیم؟ بررسی عملی سه شاخص LCP، INP و CLS با راهکارهای فنی، ترتیب اجرا و اشتباهات پرهزینه در بستر وردپرس.
چند سال پیش سایتی را تحویل دادم که در گزارش PageSpeed امتیاز سبز داشت اما در گزارش جستجوی گوگل قرمز بود. علت ریشه‌ای، تفاوت میان داده آزمایشگاهی و داده میدانی بود؛ من به عدد ابزار اعتماد کرده بودم اما گوگل به تجربه کاربران واقعی نگاه می‌کرد. از آن روز، رویکرد من به بهبود Core Web Vitals (شاخص‌های اصلی وب) تغییر کرد. در این نوشته، مسیر عملی بهبود سه شاخص LCP، INP و CLS را در چهار لایه باز می‌کنم و ترتیب اجرا را روشن می‌سازم.
Core Web Vitals دقیقاً چه چیزی را می‌سنجد؟
Core Web Vitals سه شاخص اصلی دارند که هرکدام بخشی از تجربه کاربر را می‌سنجند:
- LCP یا Largest Contentful Paint: زمان ظاهرشدن بزرگ‌ترین عنصر دیدی صفحه.
- INP یا Interaction to Next Paint: زمان پاسخگویی سایت به تعامل کاربر.
- CLS یا Cumulative Layout Shift: میزان جابه‌جایی ناخواسته عناصر صفحه.
اگر می‌خواهید تصویر کامل این سه شاخص را با آستانه‌های عددی ببینید، نوشته Core Web Vitals چیست و چرا گوگل بر آن تاکید دارد نقطه شروع درستی است. شاخص چهارم، FID یا First Input Delay که قبلاً بخشی از این گروه بود، با INP جایگزین شده. تاریخچه این جابه‌جایی در FID و تاریخچه آن در Core Web Vitals باز شده است.
در Core Web Vitals، سه شاخص جداگانه اهمیت دارند؛ تلاش برای بهینه‌سازی همه با یک اقدام واحد، معمولاً به بهبودی هیچ‌کدام منجر نمی‌شود.
اول اندازه‌گیری، بعد اصلاح
پیش از هر اقدامی، وضعیت فعلی سایت باید اندازه‌گیری شود. ابزارهای اندازه‌گیری در دو دسته قرار می‌گیرند: داده آزمایشگاهی (Lab Data) مثل Lighthouse که سریع و تکرارپذیر است، و داده میدانی (Field Data) مثل CrUX که تجربه واقعی کاربران را نشان می‌دهد. تفاوت این دو، کلید درک گزارش‌های گوگل است. ابزارهای دقیق این لایه در ابزارهای سنجش Core Web Vitals کدامند معرفی شده‌اند و مسیر عملی در بهترین ابزارهای تست سرعت سایت آمده است.
تجربه من این است که در اکثر سایت‌ها، گلوگاه اصلی در یکی از سه شاخص تمرکز دارد. اگر TTFB (Time to First Byte) بالا باشد، LCP نیز قربانی می‌شود؛ اگر جاوااسکریپت سنگین باشد، INP افت می‌کند؛ اگر تصاویر بی‌ابعاد باشند، CLS خراب می‌شود. همین تفکیک، مسیر بهبود را روشن می‌کند. برای درک نقش TTFB، نوشته TTFB چیست و چگونه آن را کاهش دهیم و تأثیر TTFB بر سرعت بارگذاری صفحه راهنمای دقیقی ارائه می‌دهند.
بهبود LCP: سه اقدام کلیدی
LCP پرتأثیرترین شاخص در بهبود کلی امتیاز است، چون بیشترین سهم را در تجربه کاربر دارد. سه اقدام اصلی که در تجربه‌ام بیشترین اثر را داشته‌اند:
- بهینه‌سازی تصویر شاخص: تصویر LCP را با فرمت WebP ارائه دهید، ابعاد درست را تنظیم کنید و
loading="eager"را برای آن فعال کنید. - پیش‌بارگذاری منابع بحرانی: فونت‌ها، تصویر LCP و CSS بحرانی با
preloadپیش از بارگذاری کامل صفحه در دسترس قرار بگیرند. - کاهش زمان پاسخ سرور: با کش صفحه و ارتقای لایه سرور، TTFB را پایین بیاورید؛ چون LCP از همان اولین بایت شروع می‌شود.
جزئیات این سه لایه در نوشته LCP چیست و چگونه آن را بهینه کنیم و بهبود LCP در سایت‌های وردپرسی آمده است. در تجربه من، ترکیب سه اقدام بالا، در اکثر سایت‌ها LCP را بین بیست تا پنجاه درصد بهبود می‌دهد.
بهبود INP: سه اقدام کلیدی
INP یا Interaction to Next Paint سخت‌ترین شاخص برای بهبود است چون مستقیماً به جاوااسکریپت (JavaScript) و رفتار تعاملی وابسته است. سه اقدام اصلی در این لایه:
- کاهش جاوااسکریپت مسدودکننده: افزونه‌های اضافی و کتابخانه‌های سنگین را حذف کنید؛ هر فایل جاوااسکریپت اضافه، به زمان پردازش main thread اضافه می‌کند.
- تقسیم وظایف سنگین: رویدادهای طولانی را به بخش‌های کوچک‌تر تقسیم کنید تا صفحه در طول پردازش، به تعامل پاسخ بدهد.
- استفاده از
deferوasync: بارگذاری جاوااسکریپت به شکل غیرمسدودکننده، زمان آماده‌شدن صفحه برای تعامل را کاهش می‌دهد.
این لایه، بیشترین تعارض را با افزونه‌های نمایشی دارد. اگر می‌خواهید تصویر کامل این بخش را ببینید، نوشته بهینه‌سازی INP برای موبایل و INP چیست و چه تاثیری بر تجربه کاربر دارد راهنمای دقیقی ارائه می‌دهند. برای درک تأثیر افزونه‌ها، نوشته افزونه‌های وردپرس چگونه روی سرعت سایت اثر می‌گذارند نقطه شروع خوبی است.
بهبود CLS: سه اقدام کلیدی
CLS یا Cumulative Layout Shift، ملموس‌ترین شاخص برای کاربر است چون جابه‌جایی ناخواسته عناصر، تجربه‌ای آزاردهنده ایجاد می‌کند. سه اقدام اصلی در این لایه:
- تنظیم ابعاد روی همه تصاویر: هر
<img>بایدwidthوheightداشته باشد تا مرورگر فضای لازم را قبل از بارگذاری رزرو کند. - رزرو ارتفاع برای بلوک‌های پویا: تبلیغات، بنرها و بلوک‌های محتوایی که دیر تزریق می‌شوند، باید ارتفاع حداقلی داشته باشند.
- فونت با
font-display: swap: نمایش فوری با فونت سیستم و جایگزینی تدریجی با فونت سفارشی، از جهش متن هنگام بارگذاری جلوگیری می‌کند.
جزئیات فنی این لایه در نوشته CLS چیست و چگونه کاهش می‌یابد و کاهش CLS با تکنیک‌های ساده آمده است. نکته مهم این است که CLS ارزان‌ترین شاخص برای بهبود است؛ در اکثر سایت‌ها، تنظیم ابعاد و font-display به‌سرعت مشکل را حل می‌کند.
در بهینه‌سازی Core Web Vitals، تشخیص گلوگاه اصلی مهم‌تر از اجرای همه راهکارهاست؛ گلوگاه‌شناس، نیم راه را رفته است.
ترتیب اجرا در سایت‌های وردپرس
ترتیب اجرای بهینه‌سازی در بستر وردپرس، از ارزان به گران است. جدول زیر ترتیب پیشنهادی من را خلاصه می‌کند:
| ترتیب | اقدام | زمان تقریبی |
|---|---|---|
| ۱ | تنظیم ابعاد تصاویر و font-display | ۲ ساعت |
| ۲ | تبدیل تصاویر به WebP و بهینه‌سازی LCP | ۴ ساعت |
| ۳ | فعال‌سازی کش صفحه و لایه تحویل | ۳ ساعت |
| ۴ | حذف افزونه‌های اضافی و کاهش JS | ۱ روز |
| ۵ | ارتقای لایه سرور و پایگاه داده | ۱ هفته |
در تجربه من، چهل درصد بهبود امتیاز از سه گام اول می‌آید و بقیه از دو گام آخر. اگر بودجه محدود است، از سه گام اول شروع کنید و پس از مشاهده اثر، به سراغ گام‌های سنگین‌تر بروید. برای مسیر عملی لایه کش، نوشته بهترین افزونه‌های کش وردپرس برای افزایش سرعت و برای مسیر کلی سرعت، چگونه سرعت سایت وردپرسی را افزایش دهیم راهنمای دقیقی ارائه می‌دهند.
تفاوت Core Web Vitals در موبایل و دسکتاپ
در اکثر سایت‌ها، امتیاز موبایل محسوس پایین‌تر از دسکتاپ است. دلایل اصلی: سخت‌افزار موبایل ضعیف‌تر، شبکه کندتر و شرایط محیطی متغیر (مثل نور آفتاب، حرکت). همین تفاوت باعث می‌شود که گوگل، امتیاز موبایل را به‌عنوان معیار اصلی در نظر بگیرد. همین لایه در نوشته Core Web Vitals در موبایل چه تفاوتی دارد و چگونه Core Web Vitals را در موبایل بهبود دهیم به تفصیل باز شده است.
در تجربه من، تست در دستگاه موبایل واقعی و شبکه اپراتور، معیار درست‌تری نسبت به emulator دسکتاپ است. اگر روی پروژه‌ای کار می‌کنید که مخاطب اصلی‌اش موبایل است، این لایه را از ابتدا جدی بگیرید.
اشتباهات رایج در بهبود شاخص‌ها
چهار اشتباه که در پروژه‌های مختلف دیده‌ام:
- تکیه بر داده آزمایشگاهی: نمره Lighthouse با تجربه کاربران واقعی تفاوت دارد. اگر گزارش جستجوی گوگل قرمز است، به داده میدانی اعتماد کنید نه نمره ابزار. اگر می‌خواهید تصویر کامل این لایه را ببینید، اشتباهات رایج در بهینه‌سازی Core Web Vitals راهنمای دقیقی است.
- بهینه‌سازی همه شاخص‌ها همزمان: تلاش برای بهبود همزمان LCP، INP و CLS معمولاً به بهبودی هیچ‌کدام منجر نمی‌شود. اول گلوگاه اصلی را مشخص کنید.
- اعتماد به افزونه‌های بهینه‌ساز بدون بررسی: بعضی افزونه‌های بهینه‌سازی، شاخص را بازی می‌دهند نه تجربه را. پیش از اعتماد، در محیط تست، تغییرات واقعی را اندازه بگیرید. اگر می‌خواهید تصویر کامل این لایه را ببینید، بهینه‌سازی سرعت سایت چیست راهنمای دقیقی ارائه می‌دهد.
- نادیده‌گرفتن تغییرات در طول زمان: Core Web Vitals وضعیت پایدار نیست؛ بعد از هر آپدیت قالب، افزونه یا محتوا، امتیاز می‌تواند افت کند. اگر می‌خواهید این لایه را در چارچوب پایش ببینید، نوشته ترندهای Core Web Vitals در 2026 راهنمای عملی ارائه می‌دهد.
لایه‌های تخصصی بهبود شاخص‌ها
برای مخاطب فنی، بهبود Core Web Vitals سه لایه تخصصی دارد. لایه اول، مدل مسیر بحرانی رندر: هر شاخص، بخشی از مسیر بحرانی رندر (Critical Rendering Path) را می‌سنجد. LCP در انتهای مسیر ظاهرمی‌شود؛ INP در طول تعامل کاربر روی main thread؛ CLS در طول بازچینش چیدمان. این مدل توضیح می‌دهد چرا اقدام‌های بهینه‌سازی روی لایه‌های مختلف مسیر، بر شاخص‌های مختلف اثر می‌گذارند. اگر می‌خواهید تصویر کامل این لایه را ببینید، نوشته بهینه سازی CSS و بهینه سازی کدهای PHP نقطه شروع درستی هستند.
لایه دوم، مدل بستر تحویل: امتیاز شاخص‌ها، نه‌فقط به کد، بلکه به بستر تحویل وابسته است. هاست ضعیف، TTFB بالا و در نتیجه LCP بد را ایجاد می‌کند. همین لایه، پیوند مستقیمی با نوشته‌های تاثیر هاست بر سرعت سایت چقدر است و هاست چیست و چگونه انتخاب درستی داشته باشیم دارد. لایه سوم، مدل اندازه‌گیری مستمر: امتیاز شاخص‌ها را باید به‌طور دوره‌ای پایش کرد. همین لایه، در پروژه‌های سازمانی به یک داشبورد پایش تبدیل می‌شود که تغییرات را در طول زمان دنبال می‌کند. اگر می‌خواهید این لایه را در چارچوب پایش ببینید، نوشته بهینه‌سازی سرعت سایت چیست و چگونه مشکل سرعت سایت را عیب‌یابی کنیم راهنمای عملی ارائه می‌دهند.
یک لایه ظریف دیگر هم وجود دارد که در پروژه‌های پیچیده به آن رسیده‌ام: مدل تجربه کاربر. Core Web Vitals مجموعه‌ای از سیگنال‌های ماشینی هستند که بخشی از تجربه کاربر را می‌سنجند؛ اما تجربه کاربر ابعاد دیگری مثل خوانایی، سلسله‌مراتب بصری و کارکرد مسیر تبدیل را نیز شامل می‌شود. اگر می‌خواهید تصویر کامل این لایه را ببینید، نوشته رابطه Core Web Vitals و نرخ تبدیل چیست، نقش سرعت سایت در نرخ تبدیل چیست و بهینه‌سازی نرخ تبدیل CRO چیست را توصیه می‌کنم. در بستر وردپرس، لایه قالب نقش مهمی در Core Web Vitals دارد؛ اگر قالب فعلی ناکارآمد است، نوشته چرا بعضی قالب‌های وردپرس باعث کندی سایت می‌شوند و قالب وردپرس سبک چیست و چگونه سرعت سایت را افزایش می‌دهد مسیر انتخاب قالب جدید را روشن می‌کنند. لایه سرعت تصویر را نیز در بهینه‌سازی تصاویر برای سئو چیست و بهترین افزونه‌های بهینه‌سازی تصاویر وردپرس جداگانه باز کرده‌ام.
خط بسته‌بندی بهبود Core Web Vitals
پاسخ کوتاه به چگونگی بهبود Core Web Vitals این است: ابتدا داده میدانی سایت خود را در گزارش جستجوی گوگل بررسی کنید، گلوگاه اصلی را در یکی از سه شاخص LCP، INP یا CLS شناسایی کنید، سپس بر پایه ترتیب اجرا از ارزان به گران پیش بروید. اگر امروز فقط یک کار می‌کنید، از تنظیم ابعاد تصاویر و فعال‌سازی font-display: swap شروع کنید؛ همان دو اقدام ساده، در اکثر سایت‌ها CLS را حل می‌کند و امتیاز کلی را بهبود می‌دهد. اگر تجربه‌ای از بهبود یک شاخص Core Web Vitals در پروژه‌ای واقعی دارید — مخصوصاً اگر عدد قبل و بعد را اندازه گرفته‌اید — در دیدگاه‌ها بنویسید؛ همین داده‌های واقعی، تصویر دقیق‌تری از بهینه‌سازی شاخص‌ها در بافت ایرانی می‌سازند. ⚡
نویسنده در وردپرس کار.