LCP Optimization در وردپرس چطور انجام می‌شود؟

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

LCP (Largest Contentful Paint) معیاری است که زمان رندر بزرگ‌ترین عنصر بصری صفحه را در چارچوب Core Web Vitals اندازه می‌گیرد.

سه جزء اصلی LCP وجود دارد: زمان پاسخ سرور، زمان بارگذاری منبع و زمان رندر در مرورگر.

در بیشتر سایت‌های وردپرسی، عنصر LCP یک تصویر شاخص، بنر اصلی یا بلوک متنی بزرگ است.

هدف این نوشته، ارائه چارچوب عملی برای شناسایی و بهبود LCP در محیط تولید است.

چند سال پیش روی سایتی کار می‌کردم که همه معیارهایش سبز بود، جز LCP که در موبایل بالای سه ثانیه نوسان داشت. ریشه در یک تصویر شاخص بود که با Lazy Loading بارگذاری می‌شد و در اولویت پایین قرار می‌گرفت. رفع همین یک مورد، LCP را به زیر یک ثانیه رساند. LCP یکی از آن معیارهایی است که در جزئیات تعیین می‌شود، نه در کلیات.

LCP دقیقاً چه چیزی را اندازه می‌گیرد

LCP (Largest Contentful Paint) معیاری است که زمان رندر بزرگ‌ترین عنصر بصری در بخش قابل مشاهده صفحه را اندازه می‌گیرد. این معیار، به‌طور خاص روی عناصری تمرکز می‌کند که کاربر آن‌ها را به‌عنوان محتوای اصلی صفحه درک می‌کند.

LCP در چارچوب Core Web Vitals تعریف شده و بخشی از سیگنال‌های کیفیت تجربه صفحه در نظر گرفته می‌شود.

عناصر کاندید برای LCP شامل چند دسته است. تصاویر بزرگ مانند تصویر شاخص، بنر اصلی و تصویر اصلی محصول. عناصر ویدئویی که پوستر یا فریم اول دارند. بلوک‌های متنی بزرگ مانند عناوین اصلی و پاراگراف‌های طولانی. عناصر پس‌زمینه‌ای که با CSS تنظیم شده‌اند.

نکته مهم این است که LCP تنها بزرگ‌ترین عنصر را می‌سنجد، نه همه عناصر. اگر صفحه‌ای چند تصویر بزرگ داشته باشد، تنها بزرگ‌ترین آن‌ها به‌عنوان LCP در نظر گرفته می‌شود.

آستانه‌های LCP به سه دسته تقسیم می‌شوند. مقدار کمتر از ۲.۵ ثانیه خوب است. مقدار ۲.۵ تا ۴ ثانیه نیازمند بهبود است. مقدار بیش از ۴ ثانیه ضعیف در نظر گرفته می‌شود.

سطح LCP	زمان	وضعیت
خوب	کمتر از ۲.۵ ثانیه	تجربه بصری مطلوب
نیازمند بهبود	۲.۵ تا ۴ ثانیه	تأخیر محسوس
ضعیف	بیش از ۴ ثانیه	تجربه بصری ضعیف

اصول کلی این معیار در چارچوب Core Web Vitals چیست و بهینه‌سازی LCP آمده است.

LCP اولین برداشت کاربر از سرعت سایت است؛ اگر این معیار ضعیف باشد، همه بهینه‌سازی‌های دیگر کم‌اثر به‌نظر می‌رسند.

کدام عنصر به‌عنوان LCP انتخاب می‌شود

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

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

معیار دوم، موقعیت عنصر است. عنصر باید در بخش قابل مشاهده صفحه (Above the Fold) قرار داشته باشد. عناصری که خارج از این بخش هستند، در LCP لحاظ نمی‌شوند.

معیار سوم، نوع عنصر است. تنها عناصر مشخصی کاندید LCP هستند: تصاویر، ویدئوها، بلوک‌های متنی و عناصر پس‌زمینه CSS.

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

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

سه جزء سازنده LCP

LCP از سه جزء اصلی تشکیل شده که هر یک می‌تواند منبع تأخیر باشد. شناخت این سه جزء، پیش‌نیاز هر بهینه‌سازی است.

جزء اول، زمان پاسخ سرور است. این جزء، فاصله زمانی میان ارسال درخواست و دریافت اولین بایت پاسخ را می‌سنجد. این معیار همان TTFB (Time To First Byte) است که در کاهش زمان TTFB به‌تفصیل آمده است.

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

جزء سوم، زمان رندر است. این جزء، فاصله زمانی میان تکمیل بارگذاری و رندر نهایی عنصر LCP را می‌سنجد. این زمان، تحت تأثیر پیچیدگی CSS، حجم DOM و بار رشته اصلی مرورگر است.

LCP = Time to First Byte + Resource Load Time + Render Delay

این فرمول، تصویر روشنی از LCP ارائه می‌دهد. هر بهینه‌سازی باید یکی از این سه جزء را هدف بگیرد.

جزء	بازه معمول	راه‌حل اصلی
TTFB	۲۰۰-۸۰۰ میلی‌ثانیه	کش، OPcache، بهینه‌سازی کوئری
Resource Load Time	۱۰۰-۱۰۰۰ میلی‌ثانیه	فشرده‌سازی، فرمت مدرن
Render Delay	۱۰۰-۵۰۰ میلی‌ثانیه	CSS بحرانی، کاهش DOM

در عمل، بیشتر سایت‌های وردپرسی با مشکل در جزء اول (TTFB) و جزء دوم (زمان بارگذاری منبع) مواجه هستند. جزء سوم در سایت‌هایی با CSS حجیم یا DOM پیچیده مسئله‌ساز می‌شود.

زمان پاسخ سرور و نقش TTFB

TTFB اولین جزء LCP است و در بسیاری از سایت‌ها، بزرگ‌ترین سهم را دارد. اگر TTFB کند باشد، LCP نمی‌تواند سریع باشد.

TTFB شامل چند مرحله است. مرحله اول، زمان شبکه شامل DNS، اتصال TCP و مذاکره TLS. مرحله دوم، زمان پردازش درخواست در سرور. مرحله سوم، زمان تولید پاسخ در لایه اپلیکیشن.

در وردپرس، سه عامل اصلی بر TTFB اثر می‌گذارند. عامل اول، پیکربندی سرور است. عامل دوم، پیکربندی PHP-FPM و OPcache. عامل سوم، بار پایگاه داده.

راه‌حل‌های کاهش TTFB شامل چند اقدام است. فعال‌سازی OPcache برای حذف کامپایل مجدد PHP. پیکربندی PHP-FPM برای مدیریت بهتر فرآیندها. کش صفحه برای حذف اجرای وردپرس در درخواست‌های تکراری. بهینه‌سازی کوئری‌های پایگاه داده.

; OPcache configuration
opcache.enable = 1
opcache.memory_consumption = 256
opcache.max_accelerated_files = 16229
opcache.validate_timestamps = 0

; PHP-FPM configuration
pm = dynamic
pm.max_children = 25
pm.start_servers = 5
pm.min_spare_servers = 3
pm.max_spare_servers = 10

این پیکربندی، نقطه شروع متعادلی برای بیشتر سایت‌های وردپرسی است.

مسائل تفصیلی این حوزه در تنظیم PHP-FPM برای وردپرس و تنظیم بهینه OPcache در وردپرس آمده است.

نکته مهم دیگر، استفاده از شبکه توزیع محتوا است. این لایه، تأخیر شبکه را کاهش می‌دهد و TTFB را بهبود می‌بخشد. اصول تفصیلی در نقش CDN در بهبود سرعت سایت آمده است.

زمان بارگذاری منبع

زمان بارگذاری منبع، دومین جزء LCP است. این جزء، فاصله زمانی میان شروع بارگذاری عنصر LCP و تکمیل بارگذاری آن را می‌سنجد.

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

راه‌حل‌های کاهش این زمان شامل چند اقدام است. فشرده‌سازی تصویر برای کاهش حجم. استفاده از فرمت‌های مدرن مانند WebP یا AVIF. استفاده از شبکه توزیع محتوا برای کاهش تأخیر شبکه. تنظیم درست هدرهای کش.

<picture>
    <source srcset="hero.avif" type="image/avif">
    <source srcset="hero.webp" type="image/webp">
    <img src="hero.jpg" width="1920" height="1080" alt="Hero">
</picture>

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

مسائل تفصیلی این حوزه در بهترین فرمت تصویر برای وب و فشرده‌سازی تصاویر سایت آمده است.

زمان رندر و تأخیر بصری

زمان رندر، سومین جزء LCP است. این جزء، فاصله زمانی میان تکمیل بارگذاری و رندر نهایی عنصر LCP را می‌سنجد.

سه عامل اصلی بر این زمان اثر می‌گذارند. عامل اول، پیچیدگی CSS است. CSS حجیم، محاسبه استایل را طولانی می‌کند. عامل دوم، حجم DOM است. DOM بزرگ، محاسبه چیدمان را طولانی می‌کند. عامل سوم، بار رشته اصلی مرورگر است. اگر رشته اصلی مشغول اجرای کد باشد، رندر به تأخیر می‌افتد.

راه‌حل‌های کاهش این زمان شامل چند اقدام است. استفاده از CSS بحرانی برای بارگذاری سریع استایل‌های ضروری. انتقال CSS غیرضروری به بارگذاری تأخیری. کاهش حجم DOM. کاهش بار جاوااسکریپت.

<style>
    /* Critical CSS inlined */
    .hero { width: 100%; height: auto; display: block; }
    body { margin: 0; font-family: sans-serif; }
</style>
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">

این الگو، CSS بحرانی را درون HTML قرار می‌دهد و بقیه را به‌صورت غیرهمگام بارگذاری می‌کند.

مسائل تفصیلی این حوزه در بهینه‌سازی CSS آمده است.

بهینه‌سازی تصاویر LCP

در بیشتر سایت‌های وردپرسی، عنصر LCP یک تصویر است. بهینه‌سازی این تصویر، بیشترین اثر را بر LCP دارد.

سه اقدام اصلی برای بهینه‌سازی تصویر LCP وجود دارد. اقدام اول، انتخاب فرمت مناسب است. فرمت‌های مدرن مانند WebP و AVIF حجم کمتری از JPEG تولید می‌کنند.

اقدام دوم، فشرده‌سازی مناسب است. کاهش کیفیت تا حدی که تجربه بصری حفظ شود، حجم را به‌طور محسوس کاهش می‌دهد.

اقدام سوم، تعیین ابعاد صحیح است. تصویر LCP نباید بزرگ‌تر از ابعاد نمایشی‌اش بارگذاری شود. اگر تصویر در ابعاد ۸۰۰ در ۶۰۰ نمایش داده می‌شود، بارگذاری نسخه ۱۹۲۰ در ۱۰۸۰ اتلاف پهنای باند است.

<img src="hero.webp" 
     srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1920.webp 1920w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="600" 
     alt="Hero">

این الگو، نسخه مناسب تصویر را بر اساس ابعاد نمایشگر بارگذاری می‌کند.

مسائل تفصیلی در مقایسه WebP و JPEG برای سرعت و تصاویر ریسپانسیو چیست آمده است.

fetchpriority و تعیین اولویت

صفت fetchpriority مکانیزمی است که به مرورگر می‌گوید یک منبع در چه سطح اولویتی بارگذاری شود. برای تصویر LCP، این صفت باید روی high تنظیم شود.

<img src="hero.webp" fetchpriority="high" width="800" height="600" alt="Hero">

این صفت، رقابت تصویر LCP با سایر منابع را کاهش می‌دهد و آن را در اولویت بالاتری بارگذاری می‌کند.

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

add_filter( "wp_get_loading_optimization_attributes", function ( $attr, $tag_name, $context ) {
    if ( "img" !== $tag_name || ! is_singular() ) {
        return $attr;
    }
    $post_thumbnail_id = get_post_thumbnail_id();
    if ( ! $post_thumbnail_id ) {
        return $attr;
    }
    $post_thumbnail_url = wp_get_attachment_image_url( $post_thumbnail_id, "full" );
    if ( $post_thumbnail_url && false !== strpos( $context, $post_thumbnail_url ) ) {
        $attr["loading"]       = "eager";
        $attr["fetchpriority"] = "high";
    }
    return $attr;
}, 10, 3 );

این الگو، تصویر شاخص را از Lazy Loading خارج می‌کند و آن را با اولویت بالا بارگذاری می‌نماید.

مسائل تفصیلی در Lazy Loading در وردپرس آمده است.

Preload و بارگذاری پیش‌دستانه

Preload مکانیزمی است که به مرورگر می‌گوید یک منبع را پیش از آنکه در HTML به آن برسد، بارگذاری کند. برای تصویر LCP، این مکانیزم می‌تواند زمان بارگذاری را کاهش دهد.

<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

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

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

add_action( "wp_head", function () {
    if ( ! is_singular() ) {
        return;
    }
    $post_thumbnail_id = get_post_thumbnail_id();
    if ( ! $post_thumbnail_id ) {
        return;
    }
    $image_url = wp_get_attachment_image_url( $post_thumbnail_id, "full" );
    if ( $image_url ) {
        echo '<link rel="preload" as="image" href="' . esc_url( $image_url ) . '" fetchpriority="high">' . "
";
    }
}, 1 );

این الگو، تصویر شاخص را پیش‌بارگذاری می‌کند.

مسئله مهم در Preload، انتخاب درست منابع است. پیش‌بارگذاری بیش از حد، منابع را رقابتی می‌کند و می‌تواند اثر معکوس داشته باشد. تنها منابع حیاتی باید پیش‌بارگذاری شوند.

نکته تکمیلی، پیش‌بارگذاری فونت‌ها است. اگر فونت اصلی در عنصر LCP نقش دارد، پیش‌بارگذاری آن می‌تواند زمان رندر را کاهش دهد.

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

مسائل تفصیلی در انتخاب فونت مناسب برای سایت آمده است.

CSS بحرانی و کاهش تأخیر رندر

CSS بحرانی (Critical CSS) تکنیکی است که در آن، استایل‌های ضروری برای رندر اولیه درون HTML قرار می‌گیرند. این رویکرد، زمان رندر اولین بخش صفحه را کاهش می‌دهد.

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

<style>
    /* Critical CSS - only styles needed for above-the-fold content */
    body { margin: 0; font-family: system-ui, sans-serif; line-height: 1.5; }
    .header { display: flex; justify-content: space-between; padding: 1rem; }
    .hero { width: 100%; height: auto; display: block; }
</style>

این الگو، استایل‌های ضروری را درون HTML قرار می‌دهد و بقیه را به‌صورت غیرهمگام بارگذاری می‌کند.

در وردپرس، ابزارهایی مانند WP Rocket و Perfmatters امکان تولید خودکار CSS بحرانی را فراهم می‌کنند. اصول تفصیلی در بهترین افزونه‌های کش وردپرس آمده است.

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

فونت‌ها و اثر آن بر LCP

فونت‌های وب می‌توانند بر LCP اثر بگذارند، به‌ویژه اگر عنصر LCP یک بلوک متنی باشد. اگر فونت با تأخیر بارگذاری شود، رندر متن به تأخیر می‌افتد.

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

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

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

رویکرد سوم، تنظیم font-display: swap است که متن را با فونت پیش‌فرض نمایش می‌دهد و پس از بارگذاری فونت، آن را جایگزین می‌کند.

@font-face {
    font-family: "MainFont";
    src: url("/fonts/main.woff2") format("woff2");
    font-display: swap;
}

مسائل تفصیلی در اصول تایپوگرافی در طراحی وب آمده است.

عوامل اختصاصی وردپرس مؤثر بر LCP

چند عامل اختصاصی وردپرس بر LCP اثر می‌گذارند که شناخت آن‌ها برای بهینه‌سازی ضروری است.

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

عامل دوم، افزونه‌های سنگین هستند. هر افزونه‌ای که CSS یا JavaScript اضافه بارگذاری می‌کند، می‌تواند بر LCP اثر بگذارد. کاهش افزونه‌های غیرضروری، یک اقدام پایه است. اصول تفصیلی در شناسایی افزونه‌های اضافی وردپرس آمده است.

عامل سوم، تصویر شاخص است. در وردپرس، این تصویر معمولاً عنصر LCP است. بهینه‌سازی آن، بیشترین اثر را دارد.

عامل چهارم، برگه‌سازها هستند. برگه‌سازهایی مانند Elementor و Divi معمولاً CSS و JavaScript حجیمی تولید می‌کنند که رندر را کند می‌کند.

LCP در فروشگاه ووکامرس

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

در صفحه محصول، عنصر LCP معمولاً تصویر اصلی محصول است. بهینه‌سازی این تصویر، بیشترین اثر را دارد.

<img src="product.webp" 
     fetchpriority="high" 
     loading="eager"
     width="800" height="800" 
     alt="Product Name">

در صفحه دسته‌بندی، عنصر LCP ممکن است تصویر اولین محصول یا بنر دسته‌بندی باشد.

مسئله مهم در فروشگاه‌ها، رقابت بین تصویر LCP و سایر منابع است. اگر تصویر LCP با اولویت پایین بارگذاری شود، LCP تحت تأثیر قرار می‌گیرد.

راه‌حل، تعیین fetchpriority="high" برای تصویر LCP است. در سمت ووکامرس، این کار با فیلتر مناسب انجام می‌شود.

add_filter( "wp_get_loading_optimization_attributes", function ( $attr, $tag_name, $context ) {
    if ( "img" !== $tag_name || ! is_product() ) {
        return $attr;
    }
    global $product;
    if ( ! $product ) {
        return $attr;
    }
    $main_image_id = $product->get_image_id();
    $main_image_url = wp_get_attachment_image_url( $main_image_id, "woocommerce_single" );
    if ( $main_image_url && false !== strpos( $context, $main_image_url ) ) {
        $attr["loading"]       = "eager";
        $attr["fetchpriority"] = "high";
    }
    return $attr;
}, 10, 3 );

مسائل تفصیلی در بهینه‌سازی سرعت ووکامرس آمده است.

در فروشگاه‌ها، LCP یک معیار مستقیم فروش است؛ هر ثانیه تأخیر، یک مشتری بالقوه از دست رفته است.

اندازه‌گیری دقیق LCP

اندازه‌گیری دقیق LCP، پیش‌نیاز هر بهینه‌سازی است. سه سطح اندازه‌گیری وجود دارد.

در سطح آزمایشگاهی، ابزارهایی مانند Lighthouse و PageSpeed Insights عدد LCP را تخمین می‌زنند. این ابزارها از شرایط کنترل‌شده استفاده می‌کنند.

در سطح میدانی، داده‌های CrUX تصویر واقع‌بینانه‌تری ارائه می‌دهند. این داده‌ها بر اساس تجربه واقعی کاربران ساخته می‌شوند.

در سطح محلی، می‌توان با استفاده از APIهای مرورگر، LCP را اندازه گرفت.

import { onLCP } from "web-vitals";

onLCP((metric) => {
    console.log("LCP:", metric.value, "ms");
    console.log("Element:", metric.attribution.element);
    console.log("URL:", metric.attribution.url);
});

این الگو، عنصر LCP و زمان آن را مشخص می‌کند.

ابزار دیگر، PerformanceObserver است.

const observer = new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lastEntry = entries[entries.length - 1];
    console.log("LCP:", lastEntry.startTime);
    console.log("Element:", lastEntry.element);
});
observer.observe({ entryTypes: ["largest-contentful-paint"] });

مسائل تفصیلی در ابزارهای سنجش Core Web Vitals آمده است.

جدول تصمیم‌گیری بهینه‌سازی

منبع تأخیر	ابزار تشخیص	راه‌حل اصلی
TTFB بالا	curl + DevTools	OPcache، PHP-FPM، کش
تصویر حجیم	Network tab	فشرده‌سازی، فرمت مدرن
تصویر با اولویت پایین	Performance tab	fetchpriority="high"
بارگذاری دیرهنگام تصویر	Network waterfall	preload
تأخیر رندر	Performance tab	Critical CSS
فونت با تأخیر	font-display	preload + swap
CSS حجیم	Coverage tab	حذف قواعد بی‌استفاده
DOM پیچیده	Elements count	کاهش عناصر

اشتباهات رایج

نخستین اشتباه، اعمال Lazy Loading روی تصویر LCP است. این کار، مهم‌ترین تصویر صفحه را در اولویت پایین قرار می‌دهد و LCP را به‌طور محسوس افزایش می‌دهد.

دومین اشتباه، نبود fetchpriority است. حتی اگر تصویر LCP با loading="eager" بارگذاری شود، بدون fetchpriority="high"، رقابت با سایر منابع می‌تواند LCP را تحت تأثیر قرار دهد.

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

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

پنجمین اشتباه، نبود CSS بحرانی است. اگر همه CSS به‌صورت خارجی بارگذاری شود، رندر به تأخیر می‌افتد.

ششمین اشتباه، استفاده از فونت‌های سنگین است. فونت‌های حجیم، زمان بارگذاری را افزایش می‌دهند و رندر متن را به تأخیر می‌اندازند.

هفتمین اشتباه، نبود Preload برای تصویر LCP است. این مکانیزم می‌تواند زمان بارگذاری را کاهش دهد.

هشتمین اشتباه، رقابت منابع در زمان بارگذاری است. اگر منابع زیادی همزمان بارگذاری شوند، تصویر LCP ممکن است در اولویت پایین‌تری قرار بگیرد.

نهمین اشتباه، نبود اندازه‌گیری مستمر است. LCP معیاری پویا است که با تغییرات سایت تغییر می‌کند.

دهمین اشتباه، تمرکز صرف بر لایه فرانت‌اند است. اگرچه LCP در لایه فرانت‌اند اندازه‌گیری می‌شود، ریشه آن می‌تواند در لایه سرور باشد.

یازدهمین اشتباه، نادیده گرفتن تفاوت دستگاه‌ها است. LCP در موبایل معمولاً بالاتر است، چون پردازنده ضعیف‌تر و شبکه کندتر است. اصول تفصیلی در بهبود Core Web Vitals در موبایل آمده است.

دوازدهمین اشتباه، نادیده گرفتن هماهنگی با لایه کش است. اگر تصویر LCP در کش ذخیره نشود، هر بار بارگذاری می‌شود. اصول تفصیلی در تنظیم هدرهای کش در وردپرس آمده است.

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

LCP چیست و چه تفاوتی با TTFB دارد؟

LCP زمان رندر بزرگ‌ترین عنصر بصری صفحه را می‌سنجد. TTFB زمان دریافت اولین بایت پاسخ را اندازه می‌گیرد. TTFB یکی از سه جزء LCP است.

مقدار مطلوب LCP چقدر است؟

مقدار کمتر از ۲.۵ ثانیه خوب است. مقدار ۲.۵ تا ۴ ثانیه نیازمند بهبود است. مقدار بیش از ۴ ثانیه ضعیف در نظر گرفته می‌شود.

چگونه عنصر LCP را شناسایی کنم؟

با استفاده از Chrome DevTools در تب Performance. با استفاده از کتابخانه web-vitals. با استفاده از PageSpeed Insights.

چرا LCP در وردپرس اغلب ضعیف است؟

سه علت اصلی وجود دارد. اعمال Lazy Loading روی تصویر LCP. بارگذاری نسخه حجیم تصویر. TTFB بالا.

آیا LCP روی سئو اثر دارد؟

بله، LCP بخشی از Core Web Vitals است و به‌عنوان سیگنال کیفیت تجربه صفحه در نظر گرفته می‌شود. بهبود LCP، بخشی از مسیر کلی بهبود رتبه است.

چگونه LCP را در فروشگاه ووکامرس بهبود دهم؟

با بهینه‌سازی تصویر اصلی محصول، تعیین fetchpriority="high" برای آن، استفاده از CSS بحرانی و بهبود TTFB.

آیا Lazy Loading بر LCP اثر دارد؟

بله، اگر روی تصویر LCP اعمال شود. تصویر LCP باید از Lazy Loading مستثنا شود و با loading="eager" بارگذاری گردد.

آیا Preload بر LCP اثر دارد؟

بله، Preload تصویر LCP را پیش از رسیدن به تگ img بارگذاری می‌کند و زمان بارگذاری را کاهش می‌دهد.

آیا فونت‌ها بر LCP اثر دارند؟

بله، اگر عنصر LCP یک بلوک متنی باشد. راه‌حل، استفاده از فونت‌های سیستمی، پیش‌بارگذاری فونت‌ها و تنظیم font-display: swap است.

آیا CSS بحرانی بر LCP اثر دارد؟

بله، CSS بحرانی زمان رندر اولین بخش صفحه را کاهش می‌دهد و LCP را بهبود می‌بخشد.

چگونه TTFB را کاهش دهم تا LCP بهبود یابد؟

با فعال‌سازی OPcache، پیکربندی PHP-FPM، استفاده از کش صفحه و بهینه‌سازی کوئری‌های پایگاه داده. اصول تفصیلی در بهینه‌سازی TTFB در وردپرس آمده است.

آیا LCP در موبایل با دسکتاپ متفاوت است؟

بله. LCP در موبایل معمولاً بالاتر است، چون پردازنده ضعیف‌تر و شبکه کندتر است. این تفاوت باید در بهینه‌سازی لحاظ شود.

آیا LCP نیازمند تغییر کد است؟

در بیشتر موارد، تغییرات ساده در HTML و CSS کافی است. تعیین fetchpriority، افزودن Preload و بهینه‌سازی تصاویر از تغییرات پایه هستند.

چند وقت یک‌بار باید LCP را بررسی کنم؟

در سایت‌های پربازدید، بررسی هفتگی یا ماهانه توصیه می‌شود. در سایت‌های با تغییرات مکرر، بررسی پس از هر تغییر عمده ضروری است.

آیا افزونه‌های وردپرس بر LCP اثر می‌گذارند؟

بله، به‌طور محسوس. هر افزونه‌ای که CSS یا JavaScript اضافه بارگذاری می‌کند، می‌تواند بر LCP اثر بگذارد. کاهش افزونه‌های غیرضروری، یک اقدام پایه است.

آیا برگه‌سازها بر LCP اثر دارند؟

بله. برگه‌سازهایی مانند Elementor، Divi و WPBakery معمولاً CSS و JavaScript حجیمی تولید می‌کنند که رندر را کند می‌کند.

آیا قالب وردپرس بر LCP اثر دارد؟

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

آیا LCP در همه صفحات یکسان است؟

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

آیا بهبود LCP زمان‌بر است؟

معمولاً نه. تعیین fetchpriority و افزودن Preload در چند ساعت قابل انجام است. اما اندازه‌گیری و اعتبارسنجی، بخش مهمی از کار است.

آیا LCP نیازمند بازنویسی قالب است؟

در بیشتر موارد، نه. تغییرات ساده در HTML و CSS کافی است. بازنویسی قالب تنها در صورتی لازم است که ساختار پایه مشکل‌دار باشد.

یک نکته برای ادامه مسیر

LCP معیاری است که اولین برداشت کاربر از سرعت سایت را شکل می‌دهد. تفاوت میان یک سایت سریع و یک سایت کند، اغلب در همان چند صد میلی‌ثانیه‌ای است که بزرگ‌ترین عنصر صفحه بارگذاری می‌شود. رفع این تأخیر، بخشی از یک استراتژی منسجم برای بهبود تجربه کاربر است.

اگر روی پروژه خودتان این مسیر را طی کرده‌اید، خوشحال می‌شوم بدانم کدام بخش بیشترین زمان را گرفت: شناسایی عنصر LCP، بهینه‌سازی تصویر شاخص، یا هماهنگ‌کردن TTFB با لایه کش. تجربه‌تان را در دیدگاه‌ها بنویسید؛ به‌ویژه اگر راه‌حل متفاوتی پیدا کرده‌اید که می‌تواند برای خواننده بعدی مفید باشد.