بهینه‌سازی Core Web Vitals در وردپرس؛ رسیدن به نمره سبز PageSpeed

اگر سایت وردپرسی شما در PageSpeed Insights نمرهٔ نارنجی یا قرمز می‌گیرد، تنها نیستید. خیلی از سایت‌ها با یک قالب سنگین، چند افزونهٔ اضافه و تصاویر بهینه‌نشده به همین‌جا می‌رسند. خبر خوب این است که بیشتر مشکلات Core Web Vitals در وردپرس دلیل‌های تکراری و راه‌حل‌های شناخته‌شده دارند و برای رفعشان لازم نیست برنامه‌نویس باشید.

در این راهنما اول می‌بینیم سه شاخص LCP، INP و CLS دقیقاً چه چیزی را می‌سنجند و چطور درست اندازه‌شان بگیریم. بعد برای هر کدام کارهایی را مرور می‌کنیم که در وردپرس بیشترین اثر را دارند. اگر دنبال فهرست افزونه‌های سرعت هستید، افزونه‌های ضروری وردپرس برای افزایش سرعت را هم کنار این مقاله باز کنید؛ این‌جا تمرکز روی اندازه‌گیری و رفع هر سه شاخص است.

آخرین به‌روزرسانی: ۱۱ آبان ۱۴۰۵ — آستانه‌ها و تعریف‌ها از مستندات رسمی web.dev و Google Search Central، قابلیت‌های هستهٔ وردپرس از اطلاعیه‌های رسمی make.wordpress.org و آمار نصب افزونه‌ها از مخزن وردپرس (نسخهٔ فعلی وردپرس: 7.1.4) برداشته شده‌اند.

Core Web Vitals چیست و چرا برای سئو مهم است؟

Core Web Vitals مجموعه‌ای از سه شاخص است که تجربهٔ واقعی کاربران را در سه جنبه می‌سنجد: بارگذاری، واکنش‌گرایی و پایداری ظاهری صفحه. گوگل در مستندات Search Central صریحاً توصیه می‌کند صاحبان سایت به Core Web Vitals خوب برسند و می‌گوید این شاخص‌ها در کنار دیگر جنبه‌های تجربهٔ صفحه با چیزی هم‌راستا هستند که سیستم‌های اصلی رتبه‌بندی‌اش به آن پاداش می‌دهند.

البته باید واقع‌بین بود: سرعت جای محتوای مفید را نمی‌گیرد. صفحه‌ای که جواب بهتری به جست‌وجوی کاربر می‌دهد، معمولاً حتی با نمرهٔ متوسط هم بالاتر می‌آید. اما وقتی چند صفحه از نظر محتوا نزدیک به هم باشند، تجربهٔ کاربری بهتر می‌تواند فرق ایجاد کند و مهم‌تر از آن، کاربری که منتظر بارگذاری نماند، اصلاً به محتوای شما نمی‌رسد.

این آستانه‌ها روی صدک ۷۵ام بازدیدها سنجیده می‌شوند؛ یعنی دست‌کم ۷۵ درصد بازدیدهای واقعی باید در محدودهٔ «خوب» باشند و موبایل و دسکتاپ هم جدا ارزیابی می‌شوند. صفحه فقط وقتی قبول می‌شود که هر سه شاخص خوب باشند. یک نکتهٔ تاریخی هم: از ۱۲ مارس ۲۰۲۴ شاخص INP جای FID را گرفت، پس اگر در آموزش‌های قدیمی اسم FID را دیدید، آن بخش دیگر به‌روز نیست.

اندازه‌گیری درست با PageSpeed Insights و سرچ کنسول

بزرگ‌ترین اشتباه در بهینه‌سازی سرعت این است که فقط به عدد ۰ تا ۱۰۰ بالای PageSpeed Insights نگاه کنیم. این ابزار دو نوع داده نشان می‌دهد که باید فرقشان را بدانید:

• دادهٔ میدانی (Field data): از گزارش تجربهٔ کاربران کروم (CrUX) می‌آید و تجربهٔ واقعی بازدیدکنندگان را در ۲۸ روز گذشته نشان می‌دهد. چیزی که گوگل برای ارزیابی Core Web Vitals به آن نگاه می‌کند همین است.
• دادهٔ آزمایشگاهی (Lab data): نتیجهٔ یک بار اجرای Lighthouse در شرایط شبیه‌سازی‌شده است. نمرهٔ رنگی بالای صفحه از همین داده می‌آید و برای عیب‌یابی عالی است، اما با هر بار تست کمی تغییر می‌کند.

اگر سایت کم‌بازدید است، ممکن است بخش دادهٔ میدانی خالی بماند، چون CrUX برای صفحه یا دامنه دادهٔ کافی ندارد. در این حالت به دادهٔ آزمایشگاهی تکیه کنید و چند بار تست بگیرید. برای دید کلی سایت، گزارش Core Web Vitals در سرچ کنسول گوگل را باز کنید؛ این گزارش صفحه‌های مشابه را گروه‌بندی می‌کند و نشان می‌دهد کدام گروه در کدام شاخص مشکل دارد. بعد از رفع مشکل، دکمهٔ «اعتبارسنجی اصلاح» را بزنید تا گوگل دوباره بررسی کند.

بهبود LCP؛ بزرگ‌ترین محتوا را زودتر نشان دهید

در بیشتر سایت‌های وردپرسی، عنصر LCP تصویر شاخص نوشته، اسلایدر صفحهٔ اصلی یا یک تیتر بزرگ است. در PageSpeed Insights بخش «Largest Contentful Paint element» دقیقاً نشان می‌دهد عنصر LCP کدام است. راهنمای web.dev زمان LCP را به چهار بخش تقسیم می‌کند: زمان پاسخ سرور (TTFB)، تأخیر شروع دانلود منبع، مدت دانلود و تأخیر رندر. هر بخش راه‌حل خودش را دارد:

سرور و کش صفحه

اگر TTFB بالاست، مشکل قبل از رسیدن به مرورگر است. هاست ضعیف یا شلوغ، نسخهٔ قدیمی PHP و نبود کش صفحه رایج‌ترین دلیل‌ها هستند. اول از کش صفحه شروع کنید: اگر سرورتان LiteSpeed است، افزونهٔ LiteSpeed Cache (بیش از ۷ میلیون نصب فعال) بهترین انتخاب است و روی سرورهای دیگر WP Super Cache یا W3 Total Cache کار را راه می‌اندازند. اگر بعد از کش هنوز سرور کند بود، وقت بازبینی هاست است؛ اشتباهات رایج در انتخاب هاست را ببینید. استفاده از CDN هم فاصلهٔ فیزیکی تا کاربر را کم می‌کند.

تصویر LCP را سبک و زودرس کنید

• تصویر شاخص را در ابعاد واقعی نمایش بارگذاری کنید؛ عکس ۴۰۰۰ پیکسلی برای کادری ۸۰۰ پیکسلی فقط حجم اضافه است.
• از فرمت WebP یا AVIF استفاده کنید. افزونه‌هایی مثل EWWW Image Optimizer یا Imagify تبدیل و فشرده‌سازی را خودکار انجام می‌دهند.
• تصویر LCP نباید lazy load شود. وردپرس از نسخهٔ ۶٫۳ به‌طور خودکار ویژگی fetchpriority="high" را به تصویری که احتمالاً LCP است اضافه می‌کند و آن را از lazy load کنار می‌گذارد، اما بعضی قالب‌ها و افزونه‌های بهینه‌سازی این رفتار را خراب می‌کنند. در کد صفحه چک کنید.
• اسلایدر بالای صفحه را با یک تصویر ثابت جایگزین کنید. اسلایدرها معمولاً جاوااسکریپت سنگینی دارند و نمایش تصویر اول را عقب می‌اندازند.

<img src="hero.webp" width="1200" height="675"
     fetchpriority="high" alt="...">

CSS و فونت را از سر راه بردارید

فایل‌های CSS و جاوااسکریپتی که در head صفحه بارگذاری می‌شوند، رندر را متوقف می‌کنند. افزونه‌هایی مثل Autoptimize یا WP-Optimize می‌توانند CSS را فشرده و جاوااسکریپت را با defer بارگذاری کنند. برای فونت‌های فارسی مثل وزیرمتن، فایل فونت را روی هاست خودتان بگذارید، فقط وزن‌های لازم را بارگذاری کنید و از font-display: swap استفاده کنید تا متن قبل از دانلود کامل فونت دیده شود.

بهبود INP؛ صفحه را به کلیک‌ها پاسخ‌گو کنید

INP می‌سنجد از لحظه‌ای که کاربر کلیک می‌کند، صفحه را لمس می‌کند یا کلیدی را می‌زند تا وقتی که تغییر روی صفحه دیده شود، چقدر طول می‌کشد. این شاخص در طول کل بازدید جمع‌آوری می‌شود و تقریباً کندترین تعامل را گزارش می‌کند. مقصر اصلی تقریباً همیشه جاوااسکریپت زیاد است که رشتهٔ اصلی مرورگر را مشغول نگه می‌دارد.

• افزونه‌ها را حسابرسی کنید. افزونهٔ Query Monitor یا تب Coverage در DevTools کروم نشان می‌دهد چه اسکریپت‌هایی در هر صفحه بارگذاری می‌شوند. افزونه‌ای که فقط در یک صفحه لازم است، نباید در همهٔ صفحه‌ها اسکریپت بارگذاری کند.
• اسکریپت‌های شخص ثالث را عقب بیندازید. چت آنلاین، پیکسل‌های تبلیغاتی و ویجت‌های شبکه‌های اجتماعی را با ابزاری مثل Flying Scripts تا اولین تعامل کاربر به تأخیر بیندازید.
• صفحه‌سازهای سنگین را مهار کنید. المنتور و صفحه‌سازهای مشابه تعداد عناصر DOM را بالا می‌برند. ویجت‌ها و افزونه‌های جانبی بلااستفاده را غیرفعال کنید و تودرتویی بخش‌ها را کم کنید.
• منوی موبایل و فیلترهای ووکامرس را تست کنید. این‌ها پرتکرارترین تعامل‌ها هستند و اگر کند باشند، INP کل صفحه را بد می‌کنند.

یک افزونهٔ رسمی هم از تیم عملکرد وردپرس هست به نام Performance Lab که قابلیت‌های آزمایشی بهینه‌سازی را پیش از ورود به هستهٔ وردپرس در اختیارتان می‌گذارد. همچنین وردپرس از نسخهٔ ۶٫۸ «بارگذاری پیش‌دستانه» (Speculative Loading) را به‌طور پیش‌فرض فعال کرده است تا صفحهٔ بعدی وقتی کاربر شروع به کلیک روی لینک می‌کند، از قبل بارگذاری شود. این قابلیت برای کاربران واردشده و سایت‌های بدون پیوند یکتای خوانا غیرفعال است. اگر از افزونه‌های هوش مصنوعی و چت‌بات استفاده می‌کنید، اسکریپتشان را هم بسنجید؛ فهرست افزونه‌های هوش مصنوعی وردپرس را با همین نگاه انتخاب کنید.

بهبود CLS؛ جلوی پرش صفحه را بگیرید

حتماً برایتان پیش آمده که می‌خواهید روی لینکی بزنید و درست همان لحظه یک بنر بالای صفحه ظاهر می‌شود و دکمهٔ اشتباه را می‌زنید. CLS همین تجربهٔ آزاردهنده را می‌سنجد. دلیل‌های رایجش در وردپرس این‌هاست:

برای پیدا کردن عنصر مقصر، در گزارش PageSpeed Insights بخش «Avoid large layout shifts» را باز کنید. ابزار Performance در DevTools کروم هم جابه‌جایی‌ها را با رنگ روی صفحه نشان می‌دهد.

چک‌لیست نهایی و ترتیب پیشنهادی کار

اگر نمی‌دانید از کجا شروع کنید، این ترتیب برای بیشتر سایت‌های وردپرسی بیشترین نتیجه را با کمترین ریسک می‌دهد:

1. قبل از هر تغییر از سایت نسخهٔ پشتیبان بگیرید و افزونه‌ها و قالب را به‌روز کنید؛ نکته‌های امنیت و به‌روزرسانی وردپرس را هم رعایت کنید.
2. از صفحهٔ اصلی، یک نوشته و یک صفحهٔ محصول نسخهٔ موبایل PageSpeed بگیرید و عددها را یادداشت کنید.
3. کش صفحه را فعال کنید و نسخهٔ PHP را به جدیدترین نسخهٔ پشتیبانی‌شدهٔ هاست ببرید.
4. تصاویر را فشرده و به WebP تبدیل کنید و مطمئن شوید تصویر LCP تنبل‌بار (lazy) نیست.
5. افزونه‌های بلااستفاده را حذف کنید و اسکریپت‌های شخص ثالث را عقب بیندازید.
6. جای تبلیغ‌ها و بنرها را رزرو کنید و ابعاد تصاویر را بررسی کنید.
7. بعد از هر تغییر دوباره تست بگیرید تا اگر چیزی خراب شد، بدانید کدام تغییر مقصر بوده است.
8. در سرچ کنسول دکمهٔ اعتبارسنجی را بزنید و ۲۸ روز بعد دادهٔ میدانی را دوباره بررسی کنید.

Core Web Vitals فقط یک بخش از سئوی فنی است. برای تصویر کامل‌تر، راهنمای سئوی فنی را بخوانید. اگر فروشگاه ووکامرسی دارید، این کارها را روی صفحه‌های محصول و سبد خرید هم انجام دهید؛ آموزش نصب و راه‌اندازی ووکامرس نقطهٔ شروع خوبی است. و اگر ترجیح می‌دهید این کارها را به متخصص بسپارید، تیم رادینو در طراحی و توسعهٔ وب‌سایت و خدمات سئو کنار شماست.

سؤالات متداول

Core Web Vitals چقدر روی رتبهٔ گوگل اثر دارد؟

گوگل آن را بخشی از تجربهٔ صفحه می‌داند که سیستم‌های رتبه‌بندی به آن پاداش می‌دهند، اما محتوای مرتبط و مفید همچنان مهم‌تر است. سرعت را برای کاربر بهتر کنید، نه فقط برای نمره.

چرا نمرهٔ PageSpeed موبایل از دسکتاپ کمتر است؟

تست موبایل با دستگاه کندتر و اینترنت محدودتر شبیه‌سازی می‌شود، پس همان صفحه زمان بیشتری برای بارگذاری و اجرای جاوااسکریپت لازم دارد.

INP چه فرقی با FID دارد؟

FID فقط تأخیر اولین تعامل را می‌سنجید، اما INP تقریباً کندترین تعامل در کل بازدید را گزارش می‌کند و تا به‌روز شدن صفحه را هم حساب می‌کند. از مارس ۲۰۲۴ INP جایگزین FID شده است.

بهترین افزونهٔ کش برای Core Web Vitals کدام است؟

به سرورتان بستگی دارد. روی سرور LiteSpeed افزونهٔ LiteSpeed Cache، و روی سرورهای دیگر WP Super Cache یا W3 Total Cache انتخاب‌های رایج و رایگان هستند. فقط یک افزونهٔ کش فعال داشته باشید.

دادهٔ میدانی و آزمایشگاهی چه فرقی دارند؟

دادهٔ میدانی تجربهٔ کاربران واقعی کروم در ۲۸ روز گذشته است و مبنای ارزیابی گوگل است؛ دادهٔ آزمایشگاهی یک تست شبیه‌سازی‌شده است که برای عیب‌یابی به کار می‌آید.

منابع و مراجع