کاهش LCP در وردپرس: ترتیب درست کارها

بیشتر راهنماهای «افزایش سرعت وردپرس» یک فهرست بیست‌تایی می‌دهند و شما را با این سؤال تنها می‌گذارند که از کجا شروع کنید. در عمل، معمولاً سه یا چهار کار هشتاد درصد بهبود را می‌سازند و بقیه وقت تلف‌کردن است.

ترتیبی که من دنبال می‌کنم بر اساس نسبت اثر به هزینه است.

قدم صفر: بفهمید عنصر LCP چیست#

قبل از هر کاری باید بدانید مرورگر کدام عنصر را به‌عنوان LCP می‌شناسد. تقریباً همیشه یکی از این سه‌تاست: تصویر بنر بالای صفحه، تیتر اصلی، یا تصویر شاخص مقاله.

// در کنسول مرورگر، روی صفحه‌ای که می‌خواهید بررسی کنید:
new PerformanceObserver((list) => {
  const entry = list.getEntries().at(-1);
  console.log("LCP:", entry.startTime.toFixed(0), "ms", entry.element);
}).observe({ type: "largest-contentful-paint", buffered: true });

بدون این قدم، احتمال زیادی دارد که تصویری را بهینه کنید که اصلاً عنصر LCP نیست.

۱. اگر LCP یک تصویر است#

این رایج‌ترین حالت است و بیشترین برد را دارد.

ابعاد درست. تصویری که در ۸۰۰ پیکسل نمایش داده می‌شود نباید ۲۴۰۰ پیکسل دانلود شود. srcset کار می‌کند، به شرطی که نسخه‌های واقعی وجود داشته باشند.

فرمت مدرن. AVIF معمولاً بین ۳۰ تا ۵۰ درصد از WebP کوچک‌تر است و پشتیبانی مرورگرها دیگر مسئله نیست.

بدون lazy loading روی عنصر LCP. این اشتباه رایجی است که افزونه‌های بهینه‌سازی مرتکب می‌شوند: loading="lazy" روی تصویر بنر، که مرورگر را مجبور می‌کند دانلودش را به تأخیر بیندازد.

// در قالب: تصویر شاخص بالای صفحه هرگز lazy نباشد.
the_post_thumbnail( 'hero', [
    'loading'       => 'eager',
    'fetchpriority' => 'high',
    'decoding'      => 'async',
] );

fetchpriority="high" به مرورگر می‌گوید این تصویر را قبل از بقیه منابع بگیرد. روی موبایل کند، این یک خط به‌تنهایی می‌تواند چند صد میلی‌ثانیه بیاورد.

۲. فونت‌ها#

فونت فارسی معمولاً بین ۴۰ تا ۱۵۰ کیلوبایت است و اگر تیتر اصلی عنصر LCP باشد، تا نیامدن فونت چیزی رندر نمی‌شود.

• فونت را لوکال سرو کنید. هر دامنه خارجی یعنی یک DNS lookup و یک TLS handshake اضافه.
• font-display: swap بگذارید تا متن با فونت جایگزین نمایش داده شود.
• فونت اصلی را preload کنید، ولی فقط همان یکی.

<link rel="preload" href="/fonts/vazirmatn-var.woff2" as="font" type="font/woff2" crossorigin>

۳. TTFB#

اگر سرور ۱٫۵ ثانیه طول می‌کشد تا اولین بایت را بفرستد، هیچ بهینه‌سازی سمت کلاینت شما را به زیر ۲٫۵ ثانیه نمی‌رساند.

ترتیب بررسی: نسخه PHP (۸٫۲ به بالا)، آبجکت کش (Redis یا Memcached)، تعداد کوئری در هر ریکوئست، و در آخر پیج کش.

آبجکت کش معمولاً کم‌هزینه‌ترین برد بزرگ است. وردپرس بدون آن، در هر ریکوئست ده‌ها کوئری تکراری به wp_options می‌زند.

۴. جاوااسکریپتی که مسیر رندر را می‌بندد#

هر <script> بدون defer یا async در <head> پارس HTML را متوقف می‌کند.

add_filter( 'script_loader_tag', function ( string $tag, string $handle ): string {
    // اسکریپت‌هایی که برای اولین رندر لازم نیستند
    $deferred = [ 'analytics', 'chat-widget', 'carousel' ];
    return in_array( $handle, $deferred, true )
        ? str_replace( ' src', ' defer src', $tag )
        : $tag;
}, 10, 2 );

چه چیزی را آخر بگذارید#

Minify کردن CSS، ترکیب فایل‌ها و حذف CSS بلااستفاده کارهای درستی هستند ولی معمولاً هر کدام چند ده میلی‌ثانیه می‌آورند. اگر LCP شما شش ثانیه است، اینجا شروع نکنید.

چطور بفهمید کار کرده#

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