مقالات

آموزش جامع بهینه‌سازی سرعت سایت وردپرسی؛ تسلط بر Core Web Vitals (راهنمای ۲۰۲۵)

آموزش جامع بهینه‌سازی سرعت سایت وردپرسی؛ تسلط بر Core Web Vitals (راهنمای ۲۰۲۵)

سلام! من سارا بحرانی هستم از تیم «وزیر سئو». تا حالا شده وارد مغازه‌ای بشی، ولی فروشنده ۱۰ دقیقه طول بده تا فقط جواب سلامت رو بده؟ احتمالاً همون لحظه برمی‌گردی و میری سراغ مغازه بعدی. تو دنیای وب، سایت کُند دقیقاً همون فروشنده بی‌حوصله‌ست!

امروز قراره با هم یاد بگیریم چطور سایت وردپرسی‌ت رو از یک لاک‌پشت خسته به یک یوزپلنگ چابک تبدیل کنیم. خیلی‌ها فکر می‌کنن سرعت سایت فقط یعنی نصب یک افزونه کش؛ اما داستان خیلی عمیق‌تره. بهینه‌سازی سرعت، یکی از مهم‌ترین ستون‌های سئو تکنیکال داخلی در وردپرس (Technical On-Page) محسوب میشه که اگر درست اجراش کنی، هم گوگل عاشقت میشه و هم کاربر. توی این مقاله، می‌خوایم از کلیشه‌ها رد بشیم و بریم سراغ تکنیک‌های واقعی و تست شده برای سبز کردن چراغ‌های Core Web Vitals. آماده‌ای؟

جدول کاربردی

فاکتور حیاتی (نام فنی) چه بلایی سر کاربر میاره؟ (مشکل) راه حل طلایی ما در این مقاله
لود شدن (LCP) صفحه سفید و خالی؛ کاربر فکر می‌کنه سایت خرابه. بهینه‌سازی تصاویر و انتخاب هاست ابری.
ثبات بصری (CLS) پریدن متن و دکمه‌ها؛ کاربر اشتباهی کلیک می‌کنه. تعیین ابعاد دقیق عکس‌ها و فونت‌ها.
پاسخگویی (INP) دکمه‌ها کار نمی‌کنن؛ سایت هنگ کرده به نظر میاد. حذف کدهای JS اضافه و بهینه‌سازی PHP.
کشینگ (Caching) مصرف بالای اینترنت و کندی در بازدیدهای بعدی. تنظیم اصولی افزونه‌های WP Rocket یا LiteSpeed.

چرا سرعت سایت در سال جدید حیاتی است؟ (فراتر از رتبه گوگل)

بذار همین اول کار یه حقیقت تلخ رو بهت بگم: کاربرهای امروزی بی‌رحم‌ترین آدم‌های تاریخ اینترنت هستن! اگر سایتت تو ۳ ثانیه اول لود نشه، اونا منتظر نمی‌مونن؛ خیلی راحت دکمه «برگشت» رو می‌زنن و میرن سراغ رقیبت.

خیلی از ما فکر می‌کنیم سرعت سایت رو فقط باید برای «راضی نگه داشتن گوگل» بهینه کنیم، اما داستان خیلی فراتر از این حرف‌هاست. در سال جدید، سرعت سایت مساوی با اعتبار برند توست. وقتی سایتی کند باز میشه، پیامی که ناخودآگاه به مغز کاربر مخابره می‌کنه اینه: این کسب‌وکار، حرفه‌ای نیست، امن نیست و برای وقت من ارزش قائل نیست.”

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

  • اولین برخورد، آخرین برخورد: سرعت لود، اولین تعامل کاربر با برند توست. یه تجربه کند، تصویر ذهنی بدی می‌سازه که حتی بهترین محتوا هم نمی‌تونه جبرانش کنه.
  • صرفه‌جویی در بودجه تبلیغات: اگر داری برای Google Ads یا تبلیغات کلیکی هزینه می‌کنی و لندینگ پیجت کنده، عملاً داری پولت رو آتیش می‌زنی. نرخ پرش (Bounce Rate) بالا یعنی هدر رفتن بودجه.
  • احترام به موبایل‌بازها: الان دیگه اکثر ترافیک از موبایله. اینترنت موبایل ممکنه نوسان داشته باشه؛ پس سایت تو باید اونقدر سبک و سریع باشه که حتی با اینترنت ضعیف هم کاربر رو ناامید نکنه.

تأثیر مستقیم Core Web Vitals بر تجربه کاربری (UX) و نرخ تبدیل

احتمالاً اسم هسته‌های حیاتی وب یا همون Core Web Vitals رو زیاد شنیدی. اما بیا از نگاه فنی فاصله بگیریم و ببینیم این‌ها واقعاً چه بلایی سر احساسات کاربر و جیب تو میارن! گوگل این فاکتورها رو معرفی کرد چون فهمید ربات‌ها نمی‌تونن «حس» کنن، اما این معیارها دقیقاً کیفیت تجربه واقعی انسان رو اندازه می‌گیرن.

وقتی این فاکتورها بهینه نباشن، کاربر احساس «کلافگی» و «عدم تسلط» می‌کنه. و یادت باشه: کاربر کلافه، خرید نمی‌کنه.

برای اینکه بهتر درک کنی هر کدوم چه اثری روی نرخ تبدیل (Conversion Rate) دارن، جدول زیر رو برات آماده کردم:

فاکتور (Metric) این فاکتور چی‌کار می‌کنه؟ حس کاربر وقتی سایت ضعیفه تأثیر مستقیم روی فروش
LCP (لود شدن محتوای اصلی) سرعت نمایش بزرگترین المان صفحه (مثل عکس اصلی یا تیتر). “چرا صفحه سفیده؟ نکنه سایت خرابه؟” خروج سریع قبل از دیدن محصول یا پیشنهاد.
CLS (ثبات بصری) جلوگیری از پریدن دکمه‌ها و متن‌ها حین لود شدن. “وای! اشتباهی روی تبلیغ کلیک کردم! چقدر رو مخه.” ایجاد بی‌اعتمادی شدید و کاهش تعامل.
INP (پاسخگویی تعاملی) سرعت واکنش سایت بعد از کلیک یا تپ کردن کاربر. “دکمه افزودن به سبد خرید رو زدم ولی هیچ اتفاقی نیفتاد!” رها کردن سبد خرید و حس سنگینی سایت.

نکته طلایی سئو: بهینه‌سازی این موارد یعنی هموار کردن جاده برای کاربر تا راحت‌تر و سریع‌تر به دکمه «خرید» یا «ثبت‌نام» برسه.

بررسی فاکتورهای جدید گوگل: گذار از FID به INP

این یکی از اون تغییرات بزرگیه که اگر حواست بهش نباشه، ممکنه نمرات سرچ کنسولت یهو قرمز بشه. گوگل رسماً فاکتور FID (First Input Delay) رو بازنشسته کرد و INP (Interaction to Next Paint) رو جایگزینش کرد. اما چرا؟ و این چه فرقی به حال تو داره؟

بذار ساده بگم:

  • FID (مدل قدیمی): مثل این بود که فقط بسنجیم وقتی به کسی سلام می‌کنی، چقدر سریع جواب سلامت رو میده. فقط اولین برخورد مهم بود.
  • INP (مدل جدید): مثل اینه که بسنجیم در طول کل مکالمه، اون فرد چقدر سریع و هوشیار به حرف‌هات واکنش نشون میده.

چرا INP سخت‌گیرانه‌تر و بهتره؟

فاکتور FID فقط تاخیر «اولین» کلیک رو اندازه می‌گرفت. اما خیلی وقت‌ها سایت‌ها اولش سریعن، ولی وقتی کاربر اسکرول می‌کنه، منو رو باز می‌کنه یا میخواد گالری عکس رو ببینه، سایت شروع می‌کنه به گیر کردن (Lag).

معیار INP تمام تعاملات کاربر در طول بازدیدش از صفحه رو زیر نظر می‌گیره و کندترین واکنش رو به عنوان نمره نهایی ثبت می‌کنه.

برای بهینه کردن INP باید روی چی تمرکز کنی؟

تو باید حواست به کدهای جاوا اسکریپت (JS) سنگین باشه. وقتی مرورگر درگیر اجرای کدهای پیچیده است، نمی‌تونه به کلیک کاربر واکنش نشون بده و صفحه اصطلاحاً «فریز» میشه.

  • کدهای طولانی رو به تکه‌های کوچیک‌تر تقسیم کن.
  • از ترد اصلی (Main Thread) مرورگر کار نکش!
  • مطمئن شو وقتی کاربر روی دکمه‌ای کلیک می‌کنه، یه بازخورد بصری (مثل لودینگ یا تغییر رنگ دکمه) سریع ببینه تا بفهمه سایت زنده‌ست.

آنالیز وضعیت فعلی: تست سرعت سایت وردپرسی

بذار یه راز رو بهت بگم: وردپرس مثل خمیر بازیه؛ هم می‌تونی باهاش یه شاهکار هنری بسازی، هم یه سازه سنگین و بی‌شکل که به زور حرکت می‌کنه. اکثر ما وقتی سایتمون کند میشه، سریع می‌ریم سراغ نصب افزونه‌های کش (Cache) یا فشرده‌سازی تصویر. این بزرگترین اشتباهه!

چرا؟ چون هنوز نمی‌دونیم گلوگاه اصلی کجاست. آیا هاست ضعیفه؟ قالب سنگینه؟ یا یه افزونه داره منابع سرور رو می‌بلعه؟

آنالیز وضعیت فعلی یعنی تهیه یک «گزارش سلامت» کامل. توی سال جدید، ما دیگه به نمره ۱۰۰ از ۱۰۰ نگاه نمی‌کنیم (چون ممکنه فیک باشه)؛ ما دنبال پیدا کردن وقفه‌هایی هستیم که کاربر واقعی رو آزار میده.

برای تست سرعت یک سایت وردپرسی، باید دو حالت رو در نظر بگیری:

  1. کاربرِ تازه وارد (New Visitor): کسی که سایت براش کش نشده.
  2. کاربرِ وفادار (Returning Visitor): کسی که قبلاً اومده و بخشی از فایل‌ها براش ذخیره شده.

ابزارهایی که در ادامه معرفی می‌کنم، بهت کمک می‌کنن این سناریوها رو دقیق بررسی کنی.

معرفی ابزارهای دقیق (PageSpeed Insights، GTmetrix و Lighthouse)

شاید بپرسی «سارا، کدوم یکی از این ابزارها بهتره؟» جواب من اینه: هر کدوم برای یه کاری ساخته شدن. استفاده از ابزار غلط، مثل اینه که بخوای با خط‌کش، وزن چیزی رو اندازه بگیری!

من اینجا برات یه مقایسه تخصصی آماده کردم تا بدونی کِی باید سراغ کدوم بری:

ابزار (Tool) تخصص اصلی (کاربرد) چرا برای تو حیاتیه؟
Google PageSpeed Insights (PSI) قاضی نهایی گوگل. این ابزار دقیقاً همون متر و معیاری رو داره که گوگل برای رتبه‌بندی سایتت استفاده می‌کنه. چون مستقیماً داده‌های Core Web Vitals رو نشون میده و وضعیت موبایل و دسکتاپ رو جداگانه آنالیز می‌کنه.
GTmetrix مکانیک سایت. بهترین ابزار برای دیدن «آبشار درخواست‌ها» (Waterfall). بهت نشون میده کدوم فایل CSS یا کدوم عکس دقیقاً چند ثانیه طول کشیده تا لود بشه. وقتی می‌خوای بفهمی چرا سایت کنده (مثلاً سرور دیر جواب میده یا عکس‌ها سنگینن)، جی‌تی‌متریکس بهترین گراف‌ها رو داره.
Lighthouse (در کروم) آزمایشگاه شخصی. این ابزار توی مرورگر خودت اجرا میشه و برای تست محیط لوکال (Localhost) یا صفحاتی که نیاز به لاگین دارن عالیه. برای تست‌های سریع حین طراحی یا توسعه، بدون اینکه بخوای هر دفعه منتظر سرورهای خارجی بمونی.

نکته حرفه‌ای: همیشه اولویتت با PageSpeed Insights باشه چون مستقیماً به دیتابیس تجربه کاربری گوگل وصله، اما برای رفع عیب‌های فنی (Debug)، گراف‌های GTmetrix خواناتر و قابل‌فهم‌تر هستن.

چگونه داده‌های “Field Data” را در سرچ کنسول تحلیل کنیم؟

این بخش جاییه که فرق یک سئوکار معمولی با یک متخصص حرفه‌ای مشخص میشه.

توی ابزارهای تست سرعت، ما با دو نوع داده روبرو هستیم:

  1. Lab Data (داده‌های آزمایشگاهی): تستی که الان و با اینترنت ربات گوگل انجام میشه.
  2. Field Data (داده‌های میدانی): تجربه‌ای که کاربران واقعی تو در طول ۲۸ روز گذشته داشتن.

گوگل برای رتبه‌بندی، به Field Data اهمیت میده، نه تستی که تو همین الان گرفتی! ممکنه الان با اینترنت پرسرعت تست بگیری و همه چی سبز باشه، اما کاربر واقعی تو با اینترنت ضعیف موبایل توی مترو، سایتت رو خیلی کند ببینه.

مراحل تحلیل Field Data در سرچ کنسول:

  • قدم اول: وارد گوگل سرچ کنسول شو و از منوی سمت چپ، بخش Experience و بعد Core Web Vitals رو انتخاب کن.
  • قدم دوم: اینجا دو تا نمودار می‌بینی: Mobile و روی Open Report کلیک کن.
  • قدم سوم (تحلیل):
    • Poor (قرمز): فاجعه! یعنی اکثر کاربرهای واقعی تو دارن اذیت میشن. این صفحات نیاز به اقدام فوری دارن.
    • Needs Improvement (زرد): مرز خطر. شاید الان رتبه‌ت رو خراب نکنه، اما اگر رقیبت بهتر باشه، عقب می‌افتی.
    • Good (سبز): عالی. به این صفحات دست نزن.

نکته مهم که باید بدونی:

داده‌های سرچ کنسول با تأخیر ۲۸ روزه آپدیت میشن. یعنی اگر امروز سرعت سایتت رو بهینه کردی، فردا صبح منتظر سبز شدن نمودار نباش! باید صبر کنی تا کاربران واقعی وارد سایت بشن و گوگل داده‌های جدید (CRUX) رو جمع‌آوری کنه. پس صبور باش و هی تغییرات عجیب و غریب روی سایت اعمال نکن.

بهینه‌سازی LCP (بزرگ‌ترین محتوای بصری): کلید بارگذاری سریع

بذار ساده‌ش کنم: LCP (Largest Contentful Paint) یعنی اون لحظه‌ای که کاربر می‌گه: «آها! سایت لود شد.»

این معیار زمان لود شدنِ بزرگ‌ترین المان توی صفحه رو اندازه می‌گیره؛ که معمولاً یا “تصویر شاخص” بالای صفحه است یا “تیتر اصلی” (H1).

چرا LCP پادشاه فاکتورهای سرعته؟ چون مستقیماً با صبر کاربر بازی می‌کنه. اگر این المان اصلی زیر 2.5 ثانیه لود نشه، گوگل بهت کارت قرمز میده و کاربر هم احساس می‌کنه سایتت سنگینه.

برای اینکه LCP رو سبز کنی، باید روی سه تا ستون اصلی تمرکز کنی:

  1. سرعت پاسخ سرور (TTFB): هاستت چقدر سریع اولین بایت اطلاعات رو می‌فرسته؟
  2. زمان لود منابع: عکس یا فونت چقدر حجم داره؟
  3. چیدمان کدها: آیا مرورگر رو معطل کدهای جاوا اسکریپت بیهوده کردی؟

در ادامه راهکارهای عملی هر کدوم رو بهت می‌گم.

انتخاب هاستینگ مناسب وردپرس: تفاوت هاست اشتراکی و ابری

خیلی از مدیران سایت، ساعت‌ها وقت می‌ذارن روی فشرده‌سازی کدها، ولی یادشون میره که موتور اصلی سایت (یعنی هاست) ضعیفه! انتخاب هاست، اولین و مهم‌ترین قدم برای بهبود LCP و TTFB هست.

بیایم با یه مثال واقعی تفاوت رو ببینیم:

  • هاست اشتراکی (Shared Hosting): مثل زندگی توی یه خوابگاه شلوغه. تو و صدها سایت دیگه از منابع یک سرور مشترک استفاده می‌کنید. اگر هم‌اتاقیت (سایت همسایه) منابع زیادی مصرف کنه، سرعت سایت تو هم کم میشه. ارزونه، ولی برای ترافیک بالا ریسک داره.
  • هاست ابری (Cloud Hosting) یا مدیریت شده: مثل داشتن یه آپارتمان دربست و مدرنه. منابع (RAM و CPU) مختص خودته. مقیاس‌پذیره و پایداری بالایی داره.

جدول راهنمای انتخاب سریع:

ویژگی هاست اشتراکی (معمولی) هاست ابری / اختصاصی وردپرس
مناسب برای سایت‌های تازه‌تأسیس، وبلاگ‌های شخصی، ترافیک کم. فروشگاه‌های اینترنتی، سایت‌های شرکتی، ترافیک بالا.
تأثیر روی سرعت نوسان داره (گاهی خوب، گاهی کند). پایدار و بسیار سریع (LCP عالی).
امنیت معمولی (ریسک تداخل با سایت‌های دیگه). ایزوله و امن.
هزینه اقتصادی و کم. سرمایه‌گذاری (ارزشش رو داره).

توصیه من به تو: اگر فروشگاه اینترنتی داری یا داری روی سئو هزینه می‌کنی، موندن روی هاست اشتراکیِ ارزان، دور ریختن پولته. برو سراغ سرویس‌های Cloud یا Managed WordPress.

فشرده‌سازی و تبدیل تصاویر به فرمت WebP (معرفی افزونه‌های برتر)

سنگین‌ترین بخش هر صفحه وب، معمولاً تصاویرشه. حالا فکر کن هنوز داری از فرمت‌های قدیمی JPEG یا PNG استفاده می‌کنی! گوگل عاشق فرمت‌های نسل جدید مثل WebP هست.

فرمت WebP می‌تونه حجم عکس‌هات رو بین 30 تا 50 درصد کاهش بده بدون اینکه چشم انسان متوجه افت کیفیت بشه. این یعنی معجزه برای سرعت لود!

بهترین افزونه‌ها برای انجام اتوماتیک این کار:

لازم نیست تک‌تک عکس‌ها رو دستی تبدیل کنی. این افزونه‌ها رو نصب کن و بذار خودشون جادو کنن:

  1. Imagify: (پیشنهاد شخصی من) کاربری بسیار ساده، فشرده‌سازی هوشمند و تبدیل اتوماتیک به
  2. Smush Pro: یکی از قدیمی‌ها و قدرتمندترین‌ها که قابلیت Lazy Load (لود تنبل) عالی هم داره.
  3. ShortPixel: الگوریتم‌های فشرده‌سازی فوق‌العاده قوی داره و برای سایت‌های عکاسی عالیه.
  4. LiteSpeed Cache: اگر سرورت لایت‌اسپید هست، این افزونه رایگانه و بخش تبدیل تصویرش فوق‌العاده عمل می‌کنه.

نکته اجرایی: حتماً گزینه “Serve WebP images” رو توی این افزونه‌ها تیک بزن تا مرورگرهایی که پشتیبانی می‌کنن، نسخه سبک‌تر رو دریافت کنن.

تکنیک Preloading برای فونت‌ها و تصاویر شاخص

این تکنیک یه جورایی “پارتی‌بازی” برای المان‌های مهمه!

مرورگرها معمولاً کدها رو خط به خط می‌خونن. تکنیک Preload به مرورگر دستور میده: “آهای مرورگر! کاری ندارم کجای کدی، این فایل (عکس یا فونت) رو همین الان و با اولویت بالا دانلود کن.”

کجا باید از Preload استفاده کنیم؟

فقط برای چیزهایی که کاربر در نگاه اول (Above the Fold) می‌بینه:

  • تصویر شاخص (Hero Image): تا LCP سریع‌تر لود بشه.
  • فونت‌های اصلی متن: تا متن سایت یهو نپره یا با فونت پیش‌فرض نشون داده نشه (جلوگیری از مشکل CLS).

چطور انجامش بدیم؟

اگر از افزونه‌هایی مثل WP Rocket یا Perfmatters استفاده می‌کنی، بخشی به نام Preload دارن که کافیه لینک عکس یا فونتت رو اونجا بذاری.

اگر می‌خوای دستی انجام بدی، باید کدی شبیه به این رو به <head> سایتت اضافه کنی:

<link rel=”preload” href=”image.webp” as=”image”>

هشدار مهم: زیاده‌روی نکن! اگر همه چیز رو Preload کنی، پهنای باند اولیه پر میشه و نتیجه عکس میده. فقط 1 یا 2 المان حیاتی رو انتخاب کن.

رفع مشکلات CLS (تغییر چیدمان تجمعی): ثبات بصری سایت

تا حالا شده بری توی یه سایتی، بخوای روی یه دکمه کلیک کنی، اما یهو یه عکس لود بشه و دکمه بره پایین و اشتباهی روی یه تبلیغ کلیک کنی؟ این دقیقاً همون CLS (Cumulative Layout Shift) هست.

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

در ادامه، سه تا راهکار طلایی و فنی رو بهت می‌گم که اگر رعایت کنی، نمره CLS سایتت رو سبزِ سبز می‌کنی.

تعیین ابعاد دقیق (Width & Height) برای تصاویر و ویدیوها

این ساده‌ترین و در عین حال رایج‌ترین دلیلیه که نمره CLS سایت‌ها رو خراب می‌کنه. وقتی مرورگر می‌خواد صفحه رو بچینه، اگر ندونه عکس یا ویدیوی تو چه اندازه‌ای داره، اولش هیچ فضایی براش در نظر نمی‌گیره (ارتفاع ۰ پیکسل). بعد که عکس دانلود شد، مرورگر مجبور میشه متن‌ها رو هل بده پایین تا جا برای عکس باز شه. همین هل دادن یعنی CLS!

راه حل چیه؟ رزرو کردن جا! باید توی کدهای HTML یا تنظیمات قالب، حتماً Width و Height رو برای تصاویر تعریف کنی.

  • روش قدیمی و غلط: فقط بنویسی width: 100%. این کار ارتفاع رو مشخص نمی‌کنه.
  • روش درست و مدرن: باید نسبت ابعاد (Aspect Ratio) رو به مرورگر بگی. خوشبختانه وردپرس در نسخه‌های جدید به صورت خودکار این ویژگی‌ها رو به تصاویر اضافه می‌کنه، اما اگر از صفحه‌سازهای خاص یا کدهای دستی استفاده می‌کنی، حواست باشه که کد تصویرت باید این شکلی باشه:

<img src=”photo.jpg” width=”800″ height=”600″ alt=”توضیح عکس”>

با این کار، مرورگر قبل از اینکه حتی یک بایت از عکس دانلود بشه، یه کادر خالی به همون اندازه رزرو می‌کنه و متن‌ها دیگه جابه‌جا نمی‌شن.

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

تبلیغات بنری، اسلایدرها و باکس‌های “مطالب مرتبط” معمولاً بعد از لود شدن محتوای اصلی ظاهر می‌شن. این‌ها قاتل نمره CLS هستن! تصور کن کاربر داره مقاله رو می‌خونه، یهو وسط متن یه بنر تبلیغاتی بزرگ باز میشه و کل پاراگراف رو پرت می‌کنه پایین.

تکنیک حرفه‌ای: استفاده از کانتینر (Container) با ارتفاع ثابت ما توی تیم “وزیر سئو” همیشه به کلاینت‌ها می‌گیم: برای تبلیغاتت جای پارک رزرو کن!” حتی اگر تبلیغ هنوز لود نشده، باید فضاش اشغال شده باشه.

  1. باکس‌های ثابت: اگر قراره یه تبلیغ ۳۰۰x۲۵۰ نمایش بدی، باید یه <div> (باکس) ایجاد کنی و توی CSS بهش min-height: 250px بدی.
  2. رنگ پس‌زمینه: بهتره برای این فضای خالی یه رنگ طوسی کمرنگ بذاری تا کاربر بفهمه اینجا قراره چیزی لود بشه و فکر نکنه سایت باگ داره.
  3. محتوای داینامیک: هیچ‌وقت محتوای جدید (مثل پاپ‌آپ عضویت در خبرنامه) رو بالای محتوای موجود اضافه نکن، مگر اینکه کاربر خودش تعاملی انجام داده باشه (مثل کلیک روی دکمه “بیشتر بدانید”).

بهینه‌سازی بارگذاری فونت‌های فارسی (Swap Google Fonts)

شاید باورت نشه، اما فونت‌ها هم می‌تونن باعث پرش صفحه بشن! این اتفاق دو حالت داره:

  1. FOIT (متن نامرئی): متن دیده نمیشه تا فونت لود بشه (تجربه بد).
  2. FOUT (متن زشت): متن با فونت پیش‌فرض (مثل Arial) دیده میشه و یهو تبدیل میشه به فونت فارسی خوشگل (مثل ایران‌سنس). چون سایز این دو تا فونت یکی نیست، کلمات جابه‌جا می‌شن و CLS ایجاد میشه.

راه حل: استفاده از دستور font-display: swap این دستور به مرورگر می‌گه: معطل فونت اصلی نمون! متن رو با فونت پیش‌فرض نشون بده تا کاربر بتونه بخونه، هر وقت فونت اصلی دانلود شد، جایگزینش کن.”

برای اینکه جلوی پرش ناشی از تفاوت سایز فونت‌ها رو بگیریم، باید این ویژگی رو توی CSS فونت‌هات (Font-face) اضافه کنی:

font-display: swap;

نکته تکمیلی برای فونت‌های فارسی: فونت‌های فارسی معمولاً ارتفاع خط (Line-height) متفاوتی نسبت به فونت‌های انگلیسی دارن. حتماً سعی کن فونت‌های اصلی (مثل فونت تیترها و متن بدنه) رو Preload کنی (که توی بخش قبلی گفتم) تا فاصله زمانی بین فونت پیش‌فرض و فونت اصلی به حداقل برسه و کاربر اصلاً متوجه تغییر نشه.

بهبود INP (تعامل با رنگ بعدی): روان‌سازی پاسخگویی سایت

بذار با یه مثال ساده شروع کنم: تا حالا شده دکمه “افزودن به سبد خرید” رو بزنی ولی هیچ اتفاقی نیفته؟ چند بار پشت سر هم کلیک می‌کنی و با خودت می‌گی “چرا کار نمی‌کنه؟” و یهو ۳ تا محصول به سبد خریدت اضافه میشه؟ این دقیقاً همون INP ضعیف هست.

INP یعنی فاصله زمانی بین وقتی که کاربر یک تعامل انجام میده (کلیک، تپ کردن، یا زدن دکمه کیبورد) تا لحظه‌ای که مرورگر نتیجه بصری اون کار رو نشون میده. سایتی که INP خوبی داره، مثل یه دستیار باهوشه؛ تا صداش می‌کنی، سریع می‌گه: “بله، انجام شد!” اما سایت با INP بد، مثل یه کامپیوتر هنگ‌کرده است که کاربر رو عصبی می‌کنه.

هدف ما اینه که زمان پاسخگویی رو به زیر ۲۰۰ میلی‌ثانیه برسونیم. برای این کار باید سه تا قاتل اصلی رو از بین ببریم که در ادامه بررسیشون می‌کنیم.

شناسایی و حذف کدهای جاوا اسکریپت (JS) غیرضروری و سنگین

جاوا اسکریپت (JS) قلب تپنده تعاملات سایته، اما اگه چربی اضافه دور قلب رو بگیره، سکته می‌کنه! بزرگترین دلیل کندی INP اینه که Main Thread (رشته اصلی) مرورگر مشغوله. وقتی مرورگر داره یه فایل سنگین JS رو دانلود یا اجرا می‌کنه، دیگه نمی‌تونه به کلیک کاربر گوش بده.

چطور کدهای اضافه رو پیدا و حذف کنیم؟

  1. پالایش افزونه‌ها: برو توی لیست افزونه‌ هات. آیا واقعاً به اون افزونه “بارش برف” یا “آمارگیرهای متعدد” نیاز داری؟ هر افزونه‌ای که کارکرد بصری یا تحلیلی داره، بار JS رو زیاد می‌کنه. بی‌رحمانه غیرفعال کن!
  2. استفاده از ابزار Coverage در کروم:
    • روی صفحه کلیک راست کن و Inspect رو بزن.
    • دکمه Ctrl+Shift+P رو بزن و تایپ کن Coverage.
    • دکمه ضبط (Record) رو بزن و صفحه رو ریلود کن.
    • اینجا بهت نشون میده چند درصد از کدهای JS و CSS اصلاً استفاده نمی‌شن (Unused Bytes). این‌ها همون بارهای اضافی هستن که باید حذف بشن.

نکته سئویی: کدهای Third-Party (مثل کدهای تبلیغاتی، چت آنلاین، هاتجر و…) سنگین‌ترین ضربه رو به INP می‌زنن. تا جای ممکن محدودشون کن.

به تأخیر انداختن اجرای جاوا اسکریپت (Defer & Delay JS Execution)

حالا که کدهای اضافه رو حذف کردی، یه سری کد ضروری داری (مثل آنالیتیکس، اسلایدر، یا منوی موبایل) که نمی‌تونی پاکشون کنی. هنر سئوکار اینجا مشخص میشه: مدیریت زمان اجرا.

ما دو تا تکنیک حیاتی داریم:

  1. Defer (به تعویق انداختن):
    • به مرورگر می‌گه: “این فایل JS رو دانلود کن، ولی اجراش نکن تا وقتی که کل ساختار HTML صفحه لود بشه.”
    • این کار باعث میشه کاربر سریع محتوا رو ببینه و مرورگر درگیر پردازش‌های سنگین نشه.
  2. Delay (تأخیر در اجرا – جادوی واقعی):
    • این یکی خیلی هوشمندانه‌تره. به مرورگر می‌گه: “اصلاً این فایل‌ها رو اجرا نکن تا وقتی که کاربر یه کاری بکنه (مثل تکون دادن موس یا اسکرول کردن).”
    • کاربرد طلایی: برای ابزارهای چت آنلاین (مثل Crisp یاto) یا دکمه‌های اشتراک‌گذاری. چرا باید ابزار چت لود بشه وقتی کاربر هنوز حتی یه خط از مقاله رو نخونده؟

راهکار اجرایی: اگر از افزونه WP Rocket یا LiteSpeed استفاده می‌کنی، گزینه‌ای به نام “Delay JavaScript Execution” دارن. لیست اسکریپت‌های سنگین رو اونجا وارد کن تا INP سایتت پرواز کنه!

کاهش زمان پاسخگویی سرور (TTFB) و بهینه‌سازی PHP

شاید بپرسی: ” مگه INP مربوط به مرورگر کاربر نیست؟ چه ربطی به سرور داره؟” جواب اینه: اگر مغز (سرور) دیر فرمان بده، دست (مرورگر) دیر عمل می‌کنه.

وقتی کاربر روی دکمه‌ای کلیک می‌کنه که نیاز به ارتباط با دیتابیس داره (مثل دکمه “لاگین” یا “فیلتر کردن محصولات”)، اگر TTFB (Time to First Byte) بالا باشه، کاربر حس می‌کنه دکمه کار نمی‌کنه.

چک‌لیست بهینه‌سازی سمت سرور برای بهبود INP:

  • ارتقای نسخه PHP: همین الان چک کن نسخه PHP هاستت چنده. اگر روی 7.4 یا پایین‌تره، فوراً به PHP 8.1 یا 8.2 ارتقا بده. نسخه‌های جدید PHP مثل موتور توربو هستن و پردازش‌ها رو خیلی سریع‌تر انجام میدن.
  • استفاده از Object Cache (مثل Redis): این تکنیک برای سایت‌های وردپرسی و فروشگاهی معجزه می‌کنه. به جای اینکه برای هر کلیک کاربر، سرور بره توی دیتابیس بگرده، نتایج رو توی حافظه رم (RAM) نگه می‌داره و بلافاصله تحویل میده.
  • بهینه‌سازی دیتابیس: جداول اضافی (مثل Revisions پست‌های قدیمی یا کامنت‌های اسپم) رو پاک کن تا سرور سبک بشه.

تنظیمات حرفه‌ای کش (Caching) و پایگاه داده در وردپرس

بذار اول مفهوم «کش» (Cache) رو با یه مثال ساده برات جا بندازم.

فرض کن تو یه رستوران داری. هر بار که مشتری میاد و میگه «قورمه‌سبزی»، تو نباید بری سبزی بخری، پاک کنی، سرخ کنی و بپزی (این یعنی لود بدون کش).

کش کردن یعنی تو از قبل ۱۰ تا ظرف قورمه‌سبزی آماده روی میز گذاشتی. به محض اینکه مشتری سفارش داد، ظرف رو میدی بهش. سرعت سرویس‌دهی از ۱ ساعت میرسه به ۱ ثانیه!

توی وردپرس هم دقیقاً همینه. به جای اینکه سرور برای هر بازدیدکننده، کل کدهای PHP رو از اول پردازش کنه، یه نسخه «عکس‌برداری شده» (HTML ثابت) از صفحه رو به کاربر نشون میده. این کار فشار روی سرور رو به شدت کم می‌کنه. اما هنر اینجاست که چطور این سیستم رو تنظیم کنی که خرابکاری نکنه.

مقایسه و تنظیم اصولی افزونه‌ها (WP Rocket در برابر LiteSpeed Cache)

این سوالیه که روزی ده بار از من پرسیده میشه: «سارا! راکت نصب کنم یا لایت‌اسپید؟»

جواب این سوال به سلیقه ربطی نداره؛ به زیرساخت هاست تو ربط داره. استفاده اشتباه از این‌ها می‌تونه سایتت رو بترکونه (به معنای بدش!).

اینجا برات یه مقایسه بی‌طرفانه و فنی آماده کردم تا بدونی کدومش برای تو ساخته شده:

ویژگی WP Rocket (موشک وردپرس) LiteSpeed Cache (لایت‌اسپید)
بهترین کاربرد برای هاست‌های غیر لایت‌اسپید (مثل Apache یا Nginx). فقط و فقط برای سرورهای LiteSpeed.
راحتی تنظیمات فوق‌العاده آسان. رابط کاربریش عالیه و با چند تا کلیک راه میفته. پیچیده و تخصصی. صدها گزینه داره که باید بدونی چی‌کار می‌کنی.
قدرت کش کش فایل (File-based) انجام میده که عالیه، ولی به پای لایت‌اسپید نمیرسه. کش در سطح سرور (Server-level) انجام میده که سریع‌ترین حالت ممکنه.
هزینه پولی (پمیوم). کاملاً رایگان.
حکم نهایی من اگر مبتدی هستی یا سرورت لایت‌اسپید نیست، شک نکن و راکت رو نصب کن. اگر هاستت از لایت‌اسپید پشتیبانی می‌کنه، نصب نکردن این افزونه اشتباهه!

نکته حیاتی: هرگز، تکرار می‌کنم، هرگز دو تا افزونه کش رو همزمان نصب نکن! این کار باعث تداخل وحشتناک میشه و سایتت کلاً دان (Down) میشه.

پاکسازی دیتابیس وردپرس از داده‌های اضافی (Transients و Revisions)

دیتابیس وردپرس مثل کمد لباسه. اگر هر چند وقت یک‌بار مرتبش نکنی، پر میشه از لباس‌های کهنه و به‌دردنخور، طوری که پیدا کردن لباس مورد نظرت ساعت‌ها طول می‌کشه.

دیتابیس شلوغ = کند شدن پیشخوان وردپرس و افزایش زمان پاسخ‌دهی سرور (TTFB).

دو تا از بزرگترین زباله‌های دیتابیس اینان:

  1. Revisions (بازبینی‌ها): هر بار که دکمه “Update” رو توی نوشته‌هات می‌زنی، وردپرس یه نسخه کپی از اون پست ذخیره می‌کنه. اگر یه مطلب رو ۲۰ بار ویرایش کنی، ۲۰ تا کپی توی دیتابیس داری! واقعاً به نسخه‌های سال پیش نیاز داری؟ نه.
  2. Transients (داده‌های گذرا): این‌ها اطلاعات موقتی هستن که افزونه‌ها ذخیره می‌کنن (مثل تعداد لایک‌ها یا آمار بازدید). قرار بوده بعد از یه مدت پاک بشن، ولی خیلی وقت‌ها توی دیتابیس جا خوش می‌کنن و حجم رو بالا می‌برن.

راهکار عملی:

  • اگر از WP Rocket استفاده می‌کنی، برو توی تب Database و تیک گزینه‌های Revisions و Transients رو بزن و پاکسازی کن.
  • اگر از LiteSpeed استفاده می‌کنی، توی بخش Database، گزینه Clean All رو بزن.
  • اگر هیچکدوم رو نداری، افزونه رایگان WP-Optimize عالیه.

هشدار قرمز: قبل از هرگونه دستکاری دیتابیس، بکاپ کامل بگیر. همیشه احتمال ۱٪ خطا وجود داره و ما نمی‌خوایم سایتت آسیب ببینه.

استفاده از CDN (شبکه توزیع محتوا) برای کاربران ایرانی و جهانی

CDN یا “شبکه توزیع محتوا” یعنی اینکه ما نسخه کپی شده سایتت رو توی سرورهای مختلف در سراسر جهان (یا ایران) پخش کنیم.

وقتی کاربر از تهران سایتت رو باز می‌کنه، اطلاعات از سرور تهران براش میاد، نه از سرور آلمان! این یعنی خداحافظی با تأخیر (Latency).

اما برای ما که کاربران ایرانی داریم، داستان یه کم پیچیده‌تره:

  • اگر مخاطبت فقط ایرانه:

استفاده از CDNهای خارجی مثل Cloudflare (نسخه رایگان) گاهی اوقات به خاطر فیلترینگ یا اختلالات اینترنت، نتیجه عکس میده و سایت رو کندتر می‌کنه.

  • پیشنهاد من: از CDNهای ایرانی معتبر مثل ابر آروان (ArvanCloud) یا cloud استفاده کن. این‌ها سرورهاشون داخل ایرانه و سرعت رو برای کاربر داخلی به شدت بالا می‌برن.
  • اگر مخاطبت جهانیه یا ترکیبی:

اینجا Cloudflare پادشاهه. با شبکه عظیمش در کل دنیا، سایتت رو برای همه سریع می‌کنه.

تکنیک “CDN در CDN” (برای حرفه‌ای‌ها):

بعضی از متخصصین (مثل خود ما در تیم وزیر سئو)، برای سایت‌های خیلی بزرگ، از استراتژی ترکیبی استفاده می‌کنیم. یعنی تصاویر و فایل‌های استاتیک رو روی یک CDN ایرانی میزبانی می‌کنیم تا کاربر ایرانی با سرعت نور دانلود کنه، ولی امنیت و DNS رو به کلودفلر می‌سپاریم. (البته این تنظیماتش پیچیده‌ست و فعلاً پیشنهاد نمی‌کنم درگیرش بشی).

سوالات متداول درباره افزایش سرعت وردپرس و Core Web Vitals

دنیای سئو و سرعت پر از افسانه‌ست. بعضی‌هاش درسته، بعضی‌هاش نصفه و نیمه درسته، و بعضی‌هاش کلاً غلطه. بیا دو تا از پرتکرارترین سوالاتی که همیشه از تیم «وزیر سئو» پرسیده میشه رو با هم باز کنیم و پرونده‌شون رو ببندیم.

آیا حذف تمام افزونه‌ها برای سرعت ضروری است؟

این یکی از بزرگترین اشتباهات رایجه! خیلی‌ها فکر می‌کنن تعداد افزونه مساوی با کندی سایته. بذار یه مثال بزنم: فرض کن یه کوله‌پشتی داری. آیا داشتن ۵۰ تا پر کاه توی کوله سنگین‌تره یا داشتن ۲ تا آجر؟ قطعاً آجرها!

توی وردپرس هم داستان همینه. مشکل «تعداد» افزونه‌ها نیست، مشکل «کیفیت» و «وزن» اون‌هاست.

واقعیت فنی چیه؟

  • افزونه‌های سبک: تو می‌تونی ۵۰ تا افزونه کوچیک و بهینه داشته باشی که هر کدوم فقط چند خط کد دارن و سایتت همچنان مثل برق کار کنه.
  • افزونه‌های سنگین: ممکنه فقط ۱ دونه افزونه بد (مثل بعضی افزونه‌های آمارگیر، یا اسلایدرهای قدیمی و غیربهینه) نصب کنی که به تنهایی ۱ ثانیه به زمان لود سایت اضافه کنه.

چه افزونه‌هایی رو باید حذف کنی؟ ما دنبال حذف «همه» نیستیم، دنبال حذف «مزاحم‌ها» هستیم:

  1. افزونه‌های تکراری: نیازی نیست هم Yoast نصب باشه هم یکی کافیه!
  2. کارهای تداخل‌دار: وقتی افزونه کش داری (مثل WP Rocket)، دیگه به افزونه‌های جانبی برای “Lazy Load” یا “Minify” نیاز نداری چون خود راکت انجام میده.
  3. افزونه‌هایی که دیتابیس رو می‌خورن: بعضی افزونه‌ها مثل “بررسی لینک‌های شکسته” (Broken Link Checker) مدام در حال اسکن هستن و سرور رو درگیر می‌کنن. این‌ها رو فقط موقع نیاز فعال کن و بعدش غیرفعال کن.

حکم نهایی : نترس! افزونه‌ها ابزار کار تو هستن. فقط مطمئن شو که ابزارهای “سبک و استاندارد” رو انتخاب می‌کنی.

چگونه نمره ۱۰۰ موبایل را در PageSpeed Insights بگیریم؟

رسیدیم به “جام مقدس” سئوکارها! نمره ۱۰۰ از ۱۰۰ در موبایل. اول بذار یه آب پاکی بریزم رو دستت: گرفتن نمره ۱۰۰ موبایل برای سایت‌های وردپرس سنگین (فروشگاهی یا خبری) بی‌نهایت سخته و گاهی اصلاً منطقی نیست.

چرا؟ چون ابزار Google PageSpeed Insights برای تست موبایل، شرایط سخت‌گیرانه‌ای رو شبیه‌سازی می‌کنه:

  • از اینترنت 4G کند (یا 3G سریع) استفاده می‌کنه.
  • قدرت پردازنده (CPU) گوشی رو کندتر از واقعیت (Throttling) در نظر می‌گیره.

بنابراین، اگر سایتت کلی امکانات خفن، عکس‌های باکیفیت و کدهای جاوا اسکریپت داره، نمره موبایلت احتمالاً بین ۵۰ تا ۸۰ می‌چرخه و این فاجعه نیست!

اما اگر اصرار داری به ۱۰۰ نزدیک بشی، نقشه راه اینه:

  1. قالب فوق‌سبک (Hello Elementor یا GeneratePress): باید با قالب‌های سنگین خداحافظی کنی. اسکلت سایتت باید پر باشه.
  2. حذف کامل JQuery: باید مطمئن بشی هیچ کدی وابسته به کتابخونه سنگین JQuery نیست (که توی وردپرس کار سختیه).
  3. بهینه‌سازی رادیکال CSS/JS: باید تمام کدهای CSS و JS که در “نمای اولیه” استفاده نمیشن رو کلاً حذف کنی (Remove Unused CSS).
  4. قربانی کردن طراحی: اسلایدرهای متحرک؟ پارالاکس؟ انیمیشن‌های ورودی؟ همه باید حذف بشن. سایتت باید خیلی ساده و مینیمال بشه.

توصیه خواهرانه من: به جای اینکه خودت رو برای عدد ۱۰۰ بکشی، روی نمره بالای ۹۰ (رنگ سبز) تمرکز کن. اگر سایتت زیر ۳ ثانیه لود میشه و کاربر راحته، یعنی تو برنده شدی؛ حتی اگه گوگل بهت نمره ۸۵ بده. یادمون نره، ما برای “انسان‌ها” سایت می‌سازیم، نه فقط برای ربات‌های تست سرعت!

جمع‌بندی

خب رفیق، خسته نباشی! الان دیگه تو فقط یک مدیر سایت معمولی نیستی؛ تو دقیقاً می‌دونی زیر کاپوت سایتت چه خبره و چطور باید موتور وردپرست رو تیونینگ کنی.

یادت باشه، افزایش سرعت سایت وردپرس یک پروژه یک‌شبه نیست، بلکه یک مسیر دائمیه. ما با هم یاد گرفتیم که چطور با بهینه‌سازی LCP کاربر رو میخکوب کنیم، با رفع CLS بهش آرامش بدیم و با بهبود INP نشون بدیم که سایتمون چقدر باهوش و سریعه.

حالا نوبت توست: پیشنهاد می‌کنم همین الان ابزار PageSpeed Insights رو باز کنی و یک تست بگیری. اولین مشکلی که می‌خوای حل کنی کدومه؟ LCP یا CLS؟ توی کامنت‌ها برام بنویس تا اگر جایی گیر کردی، خودم شخصاً راهنماییت کنم. منتظر دیدن نمره‌های سبزت هستم!

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *